Lead UX Designer
Heuristic analysis, user personas, sitemapping, content strategy, lofi wireframing
Dec 2022 - Feb 2023
Adobe XD, Miro
Human Capital Leadership Institute (HCLI) is a thought leadership training institute that aims to develop global leaders for effective leadership in the Asian context, while also empowering Asian leaders to excel on the global stage.
Our goal was to enhance the website's user-friendliness, with the ultimate aim of boosting programme registrations and generating a higher volume of leads.
I started by studying their existing website to familiarise myself with their organisation, their programmes, and pinpoint any usability problems in the existing product. Here were some issues I found, and my recommendations for improvement.
A hamburger menu was used for the primary navigation. While it kept the website looking clean, it hid some pages and made them less important. When users do not see their navigation options, they are less likely to engage with them.
The sidebar menu on the Programme page scrolls up, as the user scrolls down the page. When the user reaches a section below the fold, they will have to scroll back up to access the menu - this defeats its purpose entirely.
Placeholder text in forms disappeared as user types into the field. If the user forgets the field label, they need to clear the text to see it again. Additionally, the existing CAPTCHA is a math problem which adds to the user’s cognitive load as it requires too much thinking.
The Programme category labels differ from page to page. Additionally, tab menus have a different look on different pages.
I also spoke to the key stakeholders of HCLI to gain deeper insights into the primary users of the website. These users can be categorised into two main types:
Learning and Development Managers apply for programmes for their organisation's employees. They evaluate individual and organisational development needs and register employees for training courses to encourage professional development.
Business leaders attend these programmes. They want to stay updated of the latest workforce trends, enabling them to effectively lead their organisations.
After a discussion to understand more about each group of users, I created the following personas to identify how each group would interact with the website, their motivations, and their frustrations.
I wanted to make sure that users would be able to find information easily. From the persona studies, it is clear that the user goals fell into three main categories: exploring HCLI's programmes, finding out more about HCLI, and reading the blog. Thus i placed these three categories into the main navigation. As the client's goal was also to generate leads, I added a Contact Us CTA to the main navigation too. Fewer navigation labels can make it easier for users to scan the navigation and get to where they need quicker.
With all the pages laid out in my sitemap, I moved on to the lo-fidelity wireframe designs where I explored layout options and identified the key elements to be placed into each page. I worked closely with the client to ensure that the design met both the users' and the client's goals.
I collaborated with the UI designers to translate the lofi wireframes into hi-fidelity designs. The client wanted a clean and modern look, so we chose light colours in accordance with their brand guidelines. We also used professional, Asian focused images that aligns with their business. After a few rounds of revisions, we confirmed on the final design and handed the project off for development. Here are some of the final designs:
