Super Purposes
A newly redesigned page for a career coaching company assisting individuals achieve their career aspirations
Super Purposes is a startup dedicated to empowering individuals to achieve purposeful careers through online courses and personalized career coaching. Our mission is to empower individuals to start new careers or transition into different fields, guiding them to achieve their career goals.
Project Overview
My Role:
Researcher & UX/UI Designer
As the sole designer, I managed the entire design process from user research and competitive analysis to usability testing and finalizing designs.
Additionally, I collaborated closely with a talented team of engineers, writers, product managers, and graphic designers to bring this page to life.
Methods:
Tools Used: Figma, Maze, Draw.io
Research: User Interviews, Affinity Mapping, Persona, Sitemap, Usability Test, Competitive Analysis, User Flow
Problem Context
Scanning a text-heavy course page is eye-straining and difficult to understand
Customers at Super Purposes have voiced concerns regarding the course page, citing dense text, small font size, and a background color that compromises text legibility. These problems make it frustrating for users to navigate the page, often leading them to abandon the process.
The current experience of viewing a course a course at Super Purposes reveals usability issues.
A heuristic evaluation reveals multiple issues, such as extensive blocks of text, accessibility concerns, and inconsistencies in button design.
Readability
The text poses accessibility problems making it difficult for users to read, posing a significant issue for inclusivity and equal access to educational resources.
Scanability
The course information is presented in lengthy paragraphs, demanding significant focus from users. Users wants to quickly scan through the class information without losing interest.
Consistency
Our designs feature inconsistent buttons across various pages, particularly noticeable with the "Buy Now" buttons. At the top of the page, the "Buy Now" button is green with white text, while those located towards the bottom section are black with white text, deviating from the style guide.
HMW
How might we design a course page for career seekers to easily access and understand the information?
Research Insights
Customers of Super Purposes seek resources and insights to advance their careers. However, the course website has made it difficult for them to find this information, causing many to abandon the site. User interviews revealed three key insights:
Information Overload
Users struggled to comprehend the information.
Text Legibility Issues
Users had difficulty reading the text due to its small size
Lack of Persuasive Content
Users were not enticed to purchase the course.
Competitive Analysis
As I explored our competitor's website, several important features caught my attention. These features not only stood out but also provided valuable insights into how we could enhance our platform. This process helped ensure that our interface offers a better overall experience for our users.
Limitations
WordPress → transitioning to WIX
The Super Purposes website initially used WordPress, but our developers found content management difficult. As a result, we decided to switch to WIX for its simpler, more intuitive system. This transition caused some delays as our developers had to learn how to use WIX.
To assist the team, I met with the web developers and shared my WIX expertise from previous experience, which made the transition smoother and faster.
User Goals
Easy to digest information
How might we structure the content to ensure it effectively communicates all information?
Page accessibility
How might we redesign the page elements to ensure readability and accessibility for all users?
Enticing content
How might we present the course in a manner that inspires people to enroll and hone their skills?
Business Goals
Increase course sign-ups
Our goal is to simplify the course page and present the information clearly and persuasively, encouraging customers to sign up.
Reduce page abandonment
Our website offers additional valuable insights like blogs and resource videos. We ensure easy access to help customers without overwhelming them.
Drive brand loyalty
A cohesive UX design can bolster brand identity and loyalty, fostering repeat business and establishing long-term relationships with our customers.
Testing & Results
What did not work out
We conducted a usability test with users unfamiliar with this design, which revealed several key issues. Initially, I drew inspiration from MasterClass, an online learning platform taught by experts and tailored for students of all skill levels. Despite incorporating similar designs, many users reported that the text was still difficult to read and the top section was too content-heavy, making it hard for the eye to scan.
Take a look at the images below for a more detailed view of these issues.
Improvements made
To address these issues, I revised the page based on the feedback received, resulting in several key improvements. A major change was redesigning the company's design system to ensure that all colors, buttons, and components are both accessible and consistent.
Take a look below to see the specific changes made to enhance the usability and accessibility of the page design.
Designing for consistency
Due to inconsistencies in the design system, I completely redeveloped the style guide to ensure uniformity in components, typography, colors, buttons, and icons in line with the brand identity.
For a visual reference, please see the image on the right displaying the style guide.
The revamped career course page ensures that information is easily comprehensible.
On our newly enhanced course page, users can watch a class trailer, dive into a detailed lesson plan, compare various pricing options, and discover much more.
Old Career Course Page
New and Improved Course Page
Impact
Boosted course enrollment interest by 35% among career seekers aiming to enhance their professional skills.
Throughout the year, we attracted many enthusiastic customers who showed interest in our course. Leading up to the launch, we promoted it on LinkedIn, Facebook, YouTube, and Instagram. By offering a sneak peek through a class trailer, we generated excitement among users about advancing their careers and finding fulfilling jobs. Our new website made the course even more appealing, resulting in a 35% increase in signups compared to the old webpage.
Reflection
Throughout the research and design phases, I've collaborated closely with a stellar team comprising graphic designers, product managers, writers, and engineers. Currently, we're in the process of integrating this page into WIX, with daily communication to ensure that all UX elements are seamlessly implemented by our engineer.
Given more time, I would focus on two key areas:
Streamlining Content: During user interviews revealed a significant issue with information overload, which can overwhelm users. I aim to simplify the content further for better readability and ease of navigation while preserving essential details.
Testing Tab Functionality: I introduced four tabs (Class Info, Related, Pricing, and FAQ) to the page, but haven't yet tested their effectiveness in guiding users to specific sections. Future A/B testing would clarify whether these tabs enhance the user experience by providing clear navigation or if adjustments are needed to avoid confusion.