PROJECT
unlearn.
2022
OVERVIEW
As a member of a close-knit team at unlearn, a company that specializes in products and services promoting equity, diversity, and inclusion, I was responsible for overhauling the company's website to enhance its clarity, organization, storytelling, and visual aesthetics.
TOOLS
Figma
Illustrator
Photoshop
Miro
ROLES & RESPONSIBILITIES
UX Lead
Introducing and guiding UX methods and processes.
Designer
Information architecture, flows, wireframing, and UI.
PROBLEM
We analyzed site data and found that there were significant bounce rates, and users were frequently navigating back and forth between pages to find information. This led us to hypothesize that customers were feeling confused and lost due to the content organization and wordy, ambiguous language used on the site. In addition to this, the founder and CEO felt that the website's overall look and feel did not accurately reflect the brand, mission, and company values.
SOLUTION
By implementing a new UX approach, which was unfamiliar to the company, and utilizing collaboration, I reorganized the information architecture, designed more intuitive navigation, and improved the clarity and elements of storytelling throughout the site. Furthermore, I explored more visual opportunities that would result in a brand refresh alongside the website launch.
PROCESS
Discovery session
To begin, I conducted a discovery session with the team to learn more the company’s mission, vision, values, audience, and strategy which helped to create understanding and alignment throughout the team.
Following that, we discussed the goals for the website redesign. Here’s what we came up with:
1.
Improve Usability
-
Better content organization
-
More concise language
-
Clearer navigation
2.
Improve Visuals
-
Better reflect our values
-
Aiming for a minimal and creative design
3.
Improve Performance
-
Increased user attention and engagement
-
Faster speed
Website 'before'
In the past, the website had used their mission statement and an ambiguous introduction along with a hero image of their clothing. Here were my thoughts:
-
Upon landing, the user doesn’t know what exactly the company offers
-
Since the clothing is offered on a separate e-commerce site, it shouldn’t be the first thing customers see on this site
-
The language used for the CTA is unclear
The company had organized their menu and content based on their two target sectors: the education market, and the corporate market. Within these sectors, they offered the same products and services on each page, however, they were tailored to each audience. Here were my thoughts:
-
The majority of the content on both of those pages is the same
-
They have to choose either the education or corporate page to see the products and services that the company offers
-
What if someone didn’t feel they fit into the education or corporate sector?
Based on our research, I believe this contributed to the confusion, and ultimately, the high bounce rates.
New information architecture
After some collaboration, I decided to organize the menu based on the products and services we offer, since they are the same regardless of the market or sector. Not only would this present clearer navigation, it offers a glimpse into what the company does right at the top of any page on the website. On the home page, I would have a section and CTA that links to each of the product/service pages.
Wireframes
Colour exploration
Since we were aiming for a visual refresh, I explored quite a few different options. During this time, we were also open to an overall branding update and introducing a new secondary colour palette to the company, leaving the unlearn red as the brand’s primary colour.
More visual exploration
FINISHED PRODUCT
Finalized UI
Outcomes
-
Since the website has launched, the company’s data analytics reveal increased time spent on the website, and a decreased bounce rate proving the redesign’s success in its usability goals.
-
The company’s brand guide has been updated based on the website redesign’s colour palette and iconography, demonstrating the team’s delight with the visual refresh.
Reflection
-
Considering one of the company’s values is authenticity, I would recommend the company uses less stock photography going forward.
-
If I could, I would go back and conduct user testing to validate our initial hypothesis before investing so much into this design, even though it worked it.
-
I’d urge the company to use different user research and testing methods along with data analytics to drive decisions moving forward.