Portfolio

Kabo Fresh Food Internship: Onboarding Flow Redesign

Desktop - 125.png

CLIENT :

 

KABO FRESH FOOD

 

DATE:

JANUARY 2021 - AUGUST 2021

 

CATEGORY :

 

UI/UX DESIGN

From January 2021 to August 2021, I interned at Kabo Fresh Dog food, a fresh dog food subscription service as a Design intern. Working in a robust start-up environment, I wore multiple hats ranging from UXUI, social media, packaging assets and more. It cultivated ownership and accountability in me while learning to work fast and problem solve. 

Between May 2021- August 2021, I was placed as the sole designer on Monch Bar where I had autonomy on website designs, packaging, other brand assets and direction.

KABO ONBOARDING FLOW REDESIGN 

 

Project Objective :

 

The onboarding funnel for new customers needs to be optimized. With over 70% of our traffic coming from mobile we need to find ways to help move the prospective customer along to checkout. To make it easier to purchase a product.

My responsibilities:

- Conducted a comprehensive competitive analysis on optimizing onboarding flow.

- Created wireframes and prototypes for 2 iterations of the new flow

- Conducted 2 rounds of user-testing before handing off for final development

Identifying Problem Spaces:

 

After viewing the demo reel and going through the onboarding process via my own mobile device, here are a few assumptions I gathered that could be potential problems affecting the retention rate for a new user.

.

1) Too many pages to click through before checkout:

 

There are 7 pages to click through on mobile. This might slow a customer down and demotivate them from continuing to view pricing or checkout.

 

Studies show that on mobile, scrolling is far more intuitive and comfortable for users as they are used to it the most with existing mobile apps. Clicking breaks the user flow so minimizing the number of click-throughs can enhance the user experience. Research also shows that a user’s attention span has reduced to 5-7 seconds so if they spend too long filling in form fields, the drop-off rate might be too high.

 

More pros of the scroll:

 

- It delivers content more quickly, because there is no need to wait for pages to load

- It doesn’t require a commitment by forcing users to choose a button — or pick between multiple buttons — and abandon their current page

- It allows visitors to digest information at their own rate.

 

 

2) No active feedback of user progress

 

Currently, with the number of pages, there is no way for a user to gauge how close they are to checking out. Including a timeline feature like other e-commerce style websites that allow users to stay motivated to see how much progress they have made through the onboarding funnel.

 

3) Price point not visible until checkout.

 

Users have to wait until they go past the “optional sign up “ page to view pricing which can already be one too many steps to be able to gauge how much they are willing to spend. Price is something a user is always most interested in. This is a tricky piece of information to display to both satisfy a user and our business needs. I recommend adding a “Price per Portion” tag under the recipes to give a psychological price to the user and break down the final amount. Examples of this might be: “$3.45 per serving “

 

4) A user may not be sure if a recipe is right for their dog if they have food allergies or disease.

 

After reading a few reviews on multiple forums of Kabo as well as viewing competitor brands, I found some incorporate a food allergy or disease option within their form to accomodate their needs. Alternatively, the recipes could have their primary ingredients highlighted within their recipe details to help customers choose the right option for their dog. Chatbots are also a method that is newly gaining popularity and is the future of UX. Incorporating them into the interface to allow users to conveniently ask a representative about dog dietary needs or other queries may vastly improve the experience.

 

 

5) Think small: Tightening up the UI display and keeping it consistent.

 

Using Hubspot Website Grader, I checked that the mobile performance was 20/30 where Kabo failed in Tap Target space which means links and buttons should be at least 8px apart from each other, and at least 48px wide and 48px tall so they are clickable for mobile users.

 

Additionally making sure all the sizes are suitably sized. The page with the picture of “ 100% Kabo Diet “ is far too large compared to the rest of the pages. Redesigning each element to comfortably fit the screen and keeping it consistent will ease the user’s eyes.

List of UX/UI Recommendations

 

I have compiled a list of UX and UI recommendations and have ranked them on a scale of impact and difficulty to implement.

Low Hanging Fruits -

 

Timeline Feature: Add a timeline for users to view how many steps they will take until checkout to act as active feedback for the user ( eg: “ You’re almost there!” or “ 50% of progress”).

Emphasize calorie count -

 

Highlight the number of calories a dog needs under the “2 recipes plan” to motivate the user to choose the 100% Kabo meal plan and show the dog’s needs.

Include Price per portion - 

 

Include the price of portions/ day before checkout details so that they can adjust their portions accordingly and not get intimidated by the final cost.

Long Term High Impact Solutions -

 

Condense the number of pages to shorten the current user journey 

 

- Organize information into sections about the dog within 1-2 pages rather than 7.

- Reduce the amount of typing and try to keep it to drop-down menus.

- Reduce the number of click-throughs and increase the number of scrolls.

Implement a Chatbot : Add a chatbot to allow users to ask about allergies and delivery queries conveniently

Nice to Haves:

 

 

- Ideal weight Threshold:

 

Allow users to choose the weight of a dog via a drop-down menu and indicate the median ideal weight for the breed chosen. This way they have a reference when selecting weight so that users have an idea of what they are aiming for with their dog’s diet.

 

- Rearrange the format of recipe images :

 

Rearrange the format of how the recipes are laid out in a more compact way and also add icons to indicate dietary specifications.

 

- Illustrations:

 

This to help visualize the body type of a dog and what the company means by “ideal”.

 

 

 

 

 

 

 

 

Prototyping

 

 

Begin to wireframe and redesign one of the High impact and High effort changes.

 

One of the changes are:

 

- Condense the number of pages to shorten the current user journey: - Organize information into sections about the dog within 1-2 pages rather than 7. These would be beginning to experi ment with the number of pages we can condense the fields into and bucket certain pieces of information together.

 

We could club “Dog profile information” such as Name, age, breed, gender and Spayed information together, then have a section for weight, body type and activity, a page for the recipe and portion sizes and lastly checkout.

 

- Reduce the amount of typing and try to keep it to drop down menus.

 

- Reduce the number of click throughs and increase the number of scrolls.

 

- Create multiple iterations and versions to prepare it for A/B testing with users.

Screen Shot 2021-09-01 at 10.47.38 AM.png
Screen Shot 2021-09-01 at 10.47.49 AM.png
Screen Shot 2021-09-01 at 10.47.54 AM.png
Screen Shot 2021-09-01 at 10.47.43 AM.png
Screen Shot 2021-09-01 at 10.56.36 AM.png