For this project I was in a team of 12 UX students working for a real client looking into real UX challenges.
I was involved at every point along the UX process with the course divided in two sections as per the double diamond approach. The research phase was done as a team including - client & customer interviews, research and finding presentations. The design phase was done individually including - ideation, sketch, low to high fidelity prototyping and the final client presentation.
Screenshot during the initial Stakeholder interview
First step was to conduct a client interview where we learned about the product, their business objectives, competitors and identify the challenge from the client’s perspective.
UX issues was identified by the client as the main challenge on the current website which contributes to an average bounce rate of 44%.
FigJam whiteboard of summaries from Skateholders' interview and competitor research
Research & Customer interviews
As a group we performed in depth research on competitors to better grasp Lyka’s position in the market, Individually, we also conducted interviews with prospective customers including questionnaires to better understand their needs, perspectives in dog care along with a usability test on the current website. Upon completion, we regrouped and synthesised all our data using Figjam. We identified the trends and common pain points experienced by customers.
Above: Interviews script and synthesised notes from the interview, screenshot of usability testing on the existing Lyka site.
Common pain points suggest “clutter” and excessive length on the homepage, especially when accessing on mobile.
Frustration on changing navigations throughout the site and confusion on naming CTA “Get Started”.
Customers have indicated uncertainty about price, delivery, and ingredients.
An opportunity exists to implement some form of pricing guide for time-poor customers to gain their trust before committing to BAB flow.
Communicate what is entailed in the Newsletter transparently.
Drive customers to sign up voluntarily.
Mobile first design approach.
Summarise information to key points & make detail content collapsible.
Reorder section tiles according to its hierarchy with additional BaB CTA fixed on top nav bar.
Current “Meal Planner” front-load some of the BaB flow features. With some modification, it could be possible to provide serve portion and pricing and help streamline the BaB flow.
This will save time while allowing Lyka to be more transparent with pricing upfront.
Prepare and manage customer’s expectations before they go down to the BaB flow.
“Lyka sells subscription based wet food for dogs and delivers to your door. When clicking on BaB flow you will have to answer few questions so we can work out the price and perfect portion for your dog”
Design process from wireframing, low to mid fidelity prototyping and usability testing
After conducting some usability tests with my mid-fi prototype, these are the main feedbacks from the interviewees
More clarification on the kind of dog food Lyka sells.
My original idea of front-loading the serve portion customising/price calculation features from BaB flow in the Meal Planner tile was a bit convoluted. Although the customer needed the pricing upfront, however, were not prepared to answer specific questions to obtain the price. They would prefer a more streamlined approach for a price estimate instead
Amalgamating the "How lyka works" with other information to minimise the page scroll, creates confusion and key information were too hidden away.
It always comes down to these three main questions
It is crucial to answer them in an intuitive way with limited scrolls. We must give satisfactory answers to these questions before providing other additional information. With that in mind, I was set to do my final iteration in high fidelity
Quick note to “discount offer” as an incentive to newsletter sign up. It moves behind the fixed nav menu as customers scroll down
Provide visual cues of the product in different form - At your door step, per serve pouch & served as meal.
Wording adjustment on Header and body copy to help better clarify the service and the product.
Answers the most pressing questions as bullet points with expandable detail content.
Providing price guide with half serve option in Meal Planner tile
Front-load filter features from BaB flow into Recipes tile
Easily accessible CTA buttons through this section
Providing link to relative page for more details on the topic
Reminder for newsletter sign up
At the end of this project I gave a 15mins presentation to Cindy (Design Director) and Lorenzo ( Senior Product Manager) from Lyka which briefly recapping the key research findings before spending the majority of the presentation discussing the key design decisions and demonstrating the high fidelity prototype. Clients was inpressed with design in particular of surfacing the meal receipe filtering funcition out of the "build the box" flow, since lots of their prespective customers who landed on Luyka's homepage because of their dog's health issues by providing them a way to know more about the product and found out whether or not it is suitable for their dog's condition
Uitilising Askable and testing platform Maze, I conduct one more test with this High-Fidelity Protoype.
Feedback was very positive, there were only few more points which the customer would like work on.
Comment - A customer would like the food to be more specfic listed as (e.g. wet mince)
Thoughts - Add fine detail of the product in the first tile with more descriptive sub-header (e.g. what is Lyka?)
Comment - Unable to find information on delivery date or frequency.
Thoughts - Delivery information calculated based on customer's inputs during the BaB customisation flow, however, an estimate frequency of delivery can be incorporated in "Meal Planner" tile to give customer an estimate.
Comment - Provides product's shelf life information.
Thoughts - Information can also be incroperated in in the first tile under "What is Lyka?"" sub ahead.
Recommendations and Key takeways