Lyka - Homepage

Conversion Optimisation

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.

Below is a summary of the design process which documented from research phase, usability testing of my high-fidelity prototype all the way to final client presentation. A comprehensive PDF case study and Live Figma prototype are available upon request.

UI design

Screenshot during the initial Stakeholder interview

01 Empathise

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%.

UI design

FigJam whiteboard of summaries from Skateholders' interview and competitor research

02 Conceptualise

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.

user_interview user_interview

Above: Interviews script and synthesised notes from the interview, screenshot of usability testing on the existing Lyka site.

Synthesised all customers’ data as a team, we identified two customer groups and created their journey maps.

Customer Group - Health Customer Group - Time Poor

We compared the customers’ needs with Lyka’s business objectives gathered from the first stakeholder’s interview. Where the two groups overlap lies opportunities to improve.


As a team we distilled to three key insights

  1. Better user experience on landing page & amending the CTA

    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”.

  2. Clearly & quickly communicate product offers & benefits

    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.

  3. Relocate the newsletter button and specify its function

    Communicate what is entailed in the Newsletter transparently.

    Drive customers to sign up voluntarily.

Based on what we learnt we then created a “How Might We” statement to set a benchmark and better help clients to visualise what we are trying to achieve for the final product.

How Might We...

Create: an irresistible and exciting way

For: dog owners, almost anywhere in Australia

To: make the impossibly easy decision to build a box and place their first subscription order

And improve: the health of their dog, their trust in the Lyka’s brand

03 Design Process

Initial thinking

With key pain points defined, we started the ideation phase as individuals.
I came up with these goals to address those UX problems.

More information with less scroll.

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.

Front-load part of "BaB" (Build a Box - A component that helps customer to customise the meal plan for their dog).

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.

Better way to explain product & benefits.

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

Findings from usability tests

After conducting some usability tests with my mid-fi prototype, these are the main feedbacks from the interviewees

  1. More clarification on the kind of dog food Lyka sells.

  2. 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

  3. Amalgamating the "How lyka works" with other information to minimise the page scroll, creates confusion and key information were too hidden away.

In summary

It always comes down to these three main questions

"What kind of dog food?"

"Why do I have to give out information to get the price?"

"How How do I get them delivered?"

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

High fidelity prototype

01 - Beginning section

Updates includes:

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.

02 - Middle section

Updates includes:

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

03 - Bottom section

Updates includes:

Detail information

Providing link to relative page for more details on the topic

Reminder for newsletter sign up

UI design

Final client presentation

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

One last round...

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.

04 Next Steps

Recommendations and Key takeways

This project gave me an opportunity to dive into more UX research and user testing side rather than just the look of an interface and it allows me to understand customers pain points and therefore creates a more user-centric design.

The next step would be implementing feedback from the last round of usability testing and moving on to creating a version for desktop device then run an A/B Testing against the current landing page. It would be interesting to see if Lyka have adopted any of the design recommendations and bring some of the design features to live.