top of page
Desktop - 1 (1).png

WEBSITE
RE-DESIGN

Apex-Global-Logo white.png

Role: UI/UX Designer intern

Team: Only me

Tools: Figma

Overview

APEX Global specializes in driving excellence in people through upskilling. Built on 20 years of experience in consulting and training, APEX Global’s upskilling interventions have evolved from classroom training to eLearning content design to blended delivery, and finally managing organizational learning.

As the learning solutions arm of ECCI, APEX Global focuses on bringing its clients to greater heights when it comes to their professional growth and personal development in their respective industries. Through our services, training, and courses offered—covering the fields of IT Services Management, Data Center Series, Project Management & Business Analysis, Business Continuity & Risk Management, Development Management Series, HR & Organizational Development, IT Security & Governance, among others.

The Problem

Apex Global site has been operating with the current visual design architecture with only minor changes since it was first designed 15 years ago.  As the site has added content the architecture and navigation has become increasingly complicated and difficult for the user to navigate.

Discovery phase

Discovery phase aimed to understand and frame a problem area, collect requirements and analysing the context of use. Deliverables: user segments, sitemaps, wireframes. I strongly believe that defining how any solution should work, what problems to solve and what gains to focus on are the core and fundamental aspect of any successful design process. Therefore, we started our project by investigating internal (company) and external (users)  to find a potential solution, outlining how the website should work, but not how it should look.

Stakeholder Interview

First things first, it took me a few workshops with key stakeholders to understand the brand vision, overall goals and challenges. We needed their perspective on:

  • internal: business needs, requirements, goals;

  • external: context, competitors, best practices;

​

​

STAKEHOLDER INTERVIEW QUESTIONS

1. What are your job role and your connection with the website?

2. What are the problems with the current website that need to be addressed?

3. What do you want someone visiting the website for the first time to know or understand about APEX Global within 5 -10 seconds?

4. What is the most critical thing you want a visitor to do if they come to your site? 

5. What is the primary goal of the newly designed site? 

7. Who are the intended audiences? (Primary and Secondary users) How would you describe the user’s characteristics, age, experience, education, etc.? 

8. Why is the visitor coming to the website? What are the top tasks they hope to accomplish? What content, features, and/or functionality would help them achieve their tasks?

9. What steps does your user go through before deciding to enquire about a training program?   

10. What are the most important tasks that users should be able to perform on the new site? 

11. What do they struggle with on your current site? What do current site visitors/customers complain about? What are they asking for?

12. What are the top priorities for the website redesign? 

13. What new functionality and content do you believe is required on the new website? What content on your current site will be staying, and what goes? 

14. What tone and style do you want the website to convey? 

​

​

SURVEY QUESTIONS

1. Name

 

2. Email

 

3. Profession

 

4.  Which of the following age bands are you in? 

< 25

25-30

31-35

36-40

41-45

>45

 

5. Job experience in years?

<5 years

5-10 years

11-15 years

16-25 years

>25 years

​

6. Have you recently enrolled in a training program/ course?

Yes

No

 

7. How often do you attend training programs?

  • Many times a year

  • A few times a year

  • Once a year

  • Never

​

8. Which website did you use for training and courses? Why did you choose this website?

​

10. How do you find out about the websites/ training programs?

  • HR/ Company

  • Colleagues

  • other

​

11. Can you go through the Apex Global Learning website. Here is the link. What are your initial impressions of the website?

​

12. What do you think about the Apex Global learning website’s overall layout and design?

 

  • Easy and spacious

  • Difficult to navigate

  • Congested and busy

  • Other

 

13. Is there anything about the website you liked or disliked?

​

14. What would you like to change on the Apex Global learning website?

​

15. Thanks for answering all these questions! Would you be willing to talk more about your experience?

Yes

No

Research synthesis​

​

After surveying 20 participants and conducting user interviews, we used affinity mapping to find common themes in the data we collected. As a result of this activity, we were able to discover several major trends that we needed to address in the next phase of our design process.

​

Some of the major pain points we identified included:

​

  1. Visitors get mislead easily.

  2. Website is not intuitive enough. The user has to click on many buttons for them to be able to see what they are looking for

  3. Not enough "Ask Us" sections or any form of communication for them to ask their inquiries / questions

  4. It is wordy and they feel overwhelmed with all the information in the website.

  5. Outdated Calendar.

  6. Lack of case studies

  7. Limited information about programs and courses.

Personas

Based on the patterns identified in our research, I came up with primary user personas and secondary user persona. 

Primary Persona 1

Primary persona.jpg

Primary Persona 2

Primary persona 2.jpg

Secondary Persona

Primary persona 3.jpg

User Journey Mapping

In order to visualize the current Apex Global Learning website experience from the user’s perspective, I created a series of user journey maps. We wanted these to journey maps to illustrate potential scenarios where a user might interact with the Apex Global Learning website including; The process of searching relevant courses and the process of deciding whether to get enrolled.

User Journey Map of Primary Persona 1

User journey 1 (2).jpg

User Journey Map of Primary Persona 2

User journey 2.jpg

User Journey Map of Secondary Persona

User journey 3 (1).jpg

Ideation

In the initial brainstorming process, we looked over many websites for inspiration and identified the pros and cons of each website. We brainstormed on how we could incorporate the good attributes (CTA, simple and concise content, etc)  into our website. I created the information architecture of the website, so that Ican get clear wireframes and a better thought out process. After all the competitor analysis and research and several rounds of discussion, we came up with our proposed IA looked like this in the diagram below.

Information architecture for the new website

iMac - 1.png

Visual Design

Hero Section

  1. In the previous hero section, information was scattered and there was no proper layout.

  2. The new banner has the main heading in bold, giving a clear idea of what this website is for. I decided to add  an  image to the banner, an image gives immediately a lot of context without forcing the user to read a lot. I selected  an image that is more indicative of the nature of the business of the company and the location and users of the company.  

  3. When it comes to designing a web page, the alignment of text and objects on a page plays a critical factor in the  viewer’s ability to easily read and comprehend the content. The text is aligned on the left side. Left-aligned text is  easier to read than centred or right-aligned text because of the way our eyes scan a page. Eye tracking research has shown visitors scan websites in a predictable F shape pattern.

  4. To get more conversions — we decided to have ‘Contact Us” on the header so that it gets user attention which  was missing earlier.

iMac - 2 (1).png

Home Page

1. The home page should answer the following questions — What we are, what we do, what we can do for you, why you should trust us, how we are better than our competitors and how you can connect with us.

2. To make the interaction more immersive with the website, we experimented with the layout of the home page.  Instead of the vertical scrolling behaviour, we decided to have a horizontal scroll on the home page. Horizontal  scrolling saves a lot of screen real estate. Rather than displaying all the content at once on a very long page, horizontal layouts introduce users to smaller chunks of information. 

3. Easy scanning.

​

Figma prototype

iMac - 3.png

Popular Courses section on Homepage

  1. The previous course section displayed only 4 popular courses. The new courses section has a carousel display.

  2. The course cards lacked visual appeal with no proper CTA. The new course card design has each with its own headline, image, link and call to action.

  3. A search bar has been added to the new design so that the user doesn't have to navigate to another page to  browse courses.

iMac - 3 (1).png

Training Calendar

  1. In the previous design the calendar was a small pop up window . 

  2. In the new design we have a dedicated full page for the calendar where all the courses are displayed with dates ,location and CTA button.

  3. The page has a banner with a button to download the training calendar in pdf.

  4. The user can filter through categories, event type, location and delivery method.

iMac - 5.png

Blog

  1. On the new Blog page I decided to display thumbnails of each article in a grid format  to make the blog page engaging, colorful, and easy to explore.

  2. Displaying thumbnails can help to keep all your content organized and accessible, and allow readers to quickly browse through various titles.

​

blog.png
bottom of page