Katala - Homepage redesign
Introduction
Katala is an on-demand math tutoring service aimed at GCSE math students. Katala's mission is to provide affordable, easy-to-understand math tutoring that is accessible to students in need of assistance.
Project brief: The task assigned to me was to redesign their landing page. As Katala is a new business, the goal was to increase conversion rates by identifying areas that needed improvement and making changes accordingly.
Solution: I produced user journey maps and analysed the current solution against competitors and restructured the page and refined the content to suit the audience as well as making changes to the UI
My role : Sole UX designer
Team: Product owner/developer, content, and user researcher
Time frame: 2 weeks
What I did: User Journey mapping, UX analysis of current solution, Competitive benchmarking, Low and Mid fidelity wireframing, Handover via recorded demo call
Tools: Figjam, Figma, Freeform (Apple native app)
User journey maps
With two personas created by the user researcher, I created a user journey map for each persona to better understand how customers find and interact with the service and to discover opportunities for improvement. Additionally, we examined the motivations for each interaction and step.
The homepage is where users seek answers to the following questions:
What is Katala? What does it entail/consist of?
How will it solve my problems? What value can it add?
How much does it cost? Why should I choose Katala?
How do I get started?
When building the user journey maps for all of these questions, it became clear that Katala's current homepage wasn't showcasing the benefits to students. As a potential customer, searching for answers to these questions felt tedious. This was due to the structure, language used, and the amount of data presented to potential customers.
The calls-to-action (CTAs) used to convert users were vague and opened a modal asking if they were a new or existing user, which was disorienting and went against user expectations.
Analysis of current homepage
With insights from user journey maps and competitive benchmarking, I conducted an audit of Katalas's homepage, examining the content, hierarchy, and areas that hindered user goals.
The main issue I noticed was that the information presented to the user felt disorganized, irrelevant, and cumbersome. There was a lot of information, but it did not seem to answer many of the core questions a prospective customer might have, and searching through the page for these answers felt like a chore.
Some of the content was aimed at students, while some was aimed at parents and caregivers. The CTA interaction opened a modal window that asked if a user was a returning user or new user, which had some UI issues that I spotted with carousels and button copy.
Competitive benchmarking
I decided to do some competitive benchmarking to understand how others were catching potential customers and structuring their USPs. I noticed that there was a stark difference in how common questions mentioned above were answered and presented in order to gain interest. There was a clear message and hierarchy, the information was concise and, most importantly, the content and structure highlighted HOW their service could solve the user's problems instead of just stating what services they offered.
Ideation
I split the ideation stage into two. The overall structure I went for is the 1-2-3 approach, treating the homepage like a sales funnel.
Stage 1:
I broke the page down into the following anatomy, marking must-have elements and nice-to-have elements so I could fit the blocks together in the most logical hierarchy.
The first section answers "What is Katala?"
The second section answers "How does Katala benefit users?"
The third section addresses how to get started (and possibly pricing).
Nice-to-have sections - I then factored in additional elements such as social proofing/testimonials, tutor introductions, and an overview of price plans.
Stage 2:
Starting with sketching each of the "blocks" of information on paper, I looked at ways this would be the simplest to understand. I pieced these blocks together to mock up low-fidelity wireframes to present to the team, including thinking around how this would also look on mobile.
Button Copy: I also considered the button copy on both the header and the primary sign-up CTA, as this was a pain point picked up from the user journey map that encourages potential customers to sign up. I suggested using the phrase "Start Free Trial" as the primary CTA throughout the page to be direct, concise, and set expectations for the user. I also recommended splitting the "Log in" / "Sign up" CTA on the header to "Log in" and "Sign up" respectively. However, this was more technically complicated as it would affect how the site currently works.
Here, we carried out a dot voting activity to decide the structure and decided to use option 1 for the main structure and minimum viable product and test and add further later.
Breakdown of anatomy of page and low fidelity wireframes
Design review of full pages
Mid fidelity wireframing and handover
After receiving feedback from the design review, I created mid-fidelity wireframes in Figma and discussed questions and expectations during the handover with the developer on a recorded video call, so that he could refer to it during development.
The final product
After going live, the new homepage saw an increased enquiries and sign up rate of 8 students per week.
Next steps
For this project the next steps would be to test this page and iterate to look at how we could make it more interactive and possibly add more blocks.
