Intro
IMBY (In My Backyard) is an innovative pet food brand based in Belgium, leading the charge in sustainable and responsible pet nutrition. IMBY takes a revolutionary approach by offering premium insect-based dog and cat food products. Their philosophy centers around two core principles: uncompromising quality and unwavering commitment to sustainability. They understand that pets deserve nothing but the best, which is why their products are meticulously crafted using top-notch ingredients. Emphasising the importance of wholesome nutrition, IMBY ensures that every bite is packed with essential nutrients to keep our furry friends healthy and happy.
My Role
UX Strategy
UX Design
Prototyping
Product Management
Team
Mun Yee (UI Designer)
Annabelle Tan (UI Designer)
Tools
Figma
Adobe XD
Miro
Wordpress
Timeline
3 months
💭 The Problem
- The structure of IMBY’s website is confusing as information is scattered left & right making it difficult for users to navigate
- The sporadic and inconsistent usage of colours, different icons & graphic elements also makes it hard for users to find for information that they need.
👩🏼🔬 Hypothesis
We believe that presenting information in an organised manner, particularly from left-to-right & top-to-bottom would make it easier for users to navigate and comprehend the content as it is the natural reading habit.
We also believe building a design system would improve user experience as it would create visual consistency. Consistency in design helps users understand how to interact with your product, reducing confusion and enhancing user experience.
🧪 The Solution
When designing pages, our website is designed with a clear left-to-right and top-to-bottom organisation, ensuring that users can easily navigate and find the content they need without any confusion.
We focus on presenting only the most important information that aids users in their decision-making process. This includes highlighting product Unique Selling Points (USP's), benefits, packaging formats, sizes, and feeding guides, helping users make informed choices effortlessly.
📈 The Outcome
Based on the data in Google Analytics and from the webshop, the results show improvements in users experience. From April to Dec 2022, IMBY’s revenue increased by 120.2% (April 2022 - €9,922.21, Dec 2022 - €21,859.90). The number of users visiting the IMBY website rose from 2,881 to 5,107. Overall, the webshop recorded the positive results with the improvements implemented ✨
👀 Questions & Observations
To help me better frame any problems with the product, I began by forming some questions and observations I have about the product. To easily document these I followed the structure [situation], [response], [problem to business or experience] to ensure I'm aware of users and business needs.
When users search for more details about a product, they often have to sift through a lot of information, which can be distracting before they can find the next step.
When browsing for snacks, users need to scroll all the way to the bottom of the page in order to find the products, which may be easily missed.
When shopping for dog food, users need to spend time going through a list of options presented (Packaging Format, Race, Age of Your Dog) before being able to add an item to cart.
Current User Flow on the IMBY website
Rather than starting from scratch with entirely new concepts, I began visualizing the current experience of the IMBY website by creating a user flow. By analyzing the current flow on the website, I pinpointed opportunities for enhancement.
?How Might We
With a picture of the problem at hand starting to come into place, we jumped into the ideation phase and worked through the solution design model, identifying users actual behaviour, and optimal behaviour. This allowed me to form a how might we statement to begin forming a solution.
💡 Ideation
To aid in ideation, I formulated distinct user segments, each with their own unique goals on the platform, and designed possible user pathways accordingly.
IMBY Sales Funnel
🌊 Proposed User Flows
Link to Full Flows: https://www.figma.com/file/quw0c9YLmHJvLKlB3n8X6R/IMBY?type=whiteboard&node-id=26-5084&t=nzHqfdNDl2r7Bilj-0
✍️ Hypothesis
With the team, I formed a few hypothesis so that it provides clear focus and direction for our design efforts. By forming hypothesis, we defined specific problems, questions, or goals that we want to address, ensuring that our work remains aligned with user needs and business objectives.
Hypothesis 1:
We believe that improving the user shopping journey can be achieved by having clear & concise navigation menu, with only the essential items, such as Shop. This approach would not only improve discoverability & find-ability of information on the website but would also avoid decision fatigue. Users may not be ready to make decisions during their first visit and may prefer to browse. Therefore, a task-focused navigation may be more suitable for IMBY.
Hypothesis 2:
We believe that displaying dog sizes and packaging formats in a sequential manner and by displaying the options through a dropdown would make it easier for users to make an informed decisions when purchasing dog food.
✍🏻 Lo-Fidelity Designs
To help me visualise the solutions proposed, I presented them in lo-fi designs. I used a neutral colour palette to avoid any decision bias and would use this prototype to get feedback from the client.
👩🏼🎨 Styles & Components
Together with my teammate Mun Yee, we defined styles and components to ensure the design was consistent.
🎨 Styles
🆎 Typography
Components
👩🏻🎨 Hi-Fi Designs
Below is the final version of the hi-fi designs that the team created.
Product Detail Page
Before
After
Homepage
Before
After
Product Listing Page
Before
After