It was reported in the customers’ feedback, that people are having trouble navigating Pega’s website and finding a particular webpage. The current navigation bar consisted of 2 lines of tabs, which were in total 11 tabs to click on.
"How might we create an easy to locate, easy to navigate website experience by creating a navigation bar that has better usability and is consistent with Pega’s design language?
Based on the first project kick-off meeting, I categorized the target audience for Pega's public-facing website into two groups:
For the existing clients, they use the website mainly to get help with problems they encountered using Pega's digital products. For the general public, they browse the website to look for information about Pega's products, events, and the company itself.
In order to understand how website users interact with the navigation bar and identify the pain points, I sent out online surveys using SurveyMonkey and interviewed existing clients. Questions were designed mainly to find out:
In total, I received 42 questionnaire responses and conducted 9 interviews. Below are some selected responses.
From the user research, I grouped the feedback and summarized them into key design insights:
I then did a comparative analysis to see how other websites accommodate necessary information while providing a clear website structure for navigation usability. Some key inspirations I summarized are:
To better understand the current website's infrastructure, features, and hierarchy, I created a visual representation that clearly showed the structure of its information architecture. And the following issues were revealed:
Based on the previous analysis, I re-organized the information architecture and kept only 5 tabs that got clicked most. I also removed the duplicated pages and re-allocated each subpage to its correct tab.
Below is the information architecture after the re-structure of website.
I then made 5 different versions of design explorations with the re-organized structure. I ended up going with the third design because it demonstrates most clearly the status change when a tab is clicked, and fits best with the current design system.
.png)
The original navigation bar contained two lines of tabs. To merge them into one line, I created a user center for existing clients to quickly log into their profile pages, and a "waffle menu" grouping all other functions from the top line and was visually consistent with the overall navigation bar design.
As the most frequently used feature for existing clients, checking messages used to require multiple clicks and navigating to a different page. I integrated a notification icon on the navigation bar and used a drop-down menu to show messages, which allows users to view messages with minimum clicks without leaving the current page.
The notification icon changes according to the user's login state. Other than the notification icon, I also created two other icons, “Profile Page” and “Waffle Menu” to accommodate the rest of the features on the old two-lines navigation bar. The profile icon allows users to check account status and change account settings; the waffle menu integrates other features used less frequently by existing clients.
Next, I combined the dropdown menu with the new navigation bar design following the design system guidelines.
These mockups helped me to communicate different directions I can take more vividly, and gave other team members, who are not from design backgrounds, better ideas on how the final look of the website will be with the new navigation bar integrated.
Although this project mainly focused on one specific feature, the navigation bar, more than the actual output, I’m immensely grateful to have been through an entire UX process. On that note, a few reflections I had:
Drop me a message at siachang.work@gmail.com