New Recipe Search Feature for iOS App
The Young Living Essential Oils app is a comprehensive reference that provides users with information about essential oils and their use to promote health and wellness. A big feature of the app is its extensive list of oil recipes that users can utilize to create oil blends.
Many users use essential oils and blends for illness symptom relief. The app developers wanted to improve the search functionality for finding oil recipes as their customer support received a lot requests for improving this feature.
The PRD outlined the requirements for the new feature to allow users to search for recipes filter by search entry, oils in user's inventory and a custom filter. While designing the app search feature, I worked closely with the app’s iOS developer to ensure seamless integration of my designs into their pre-existing framework.
Highlights (TLDR)
Problems
The app’s recipe search functionality was very basic with only text search entry. Users frequently contacted customer support to request better search functionality.
Goals
Improve the search functionality for finding oil recipes by allowing users to filter search entries by oils in their inventory and a custom filters.
Actions
- Ideated possible ways to implement new feature, considering user flows of each approach
- Discussed technical constraints and feasibility with developer
- Designed new screens for improved search feature in keeping with existing app design
Outcomes
Highly satisfied developer/stakeholder
Feature in development
Feature in development
Define
Understanding the Developer’s Goals
The app developer wanted to improve the app's user experience by adding a recipe search filter system. This would provide a more efficient and enjoyable way for users to find specific recipes. The PRD specified a new recipe search feature with three main filters: keyword search, oils from the user's inventory, and a custom filter option.
Ideation
Sketching Quick Ideas
The next phase involved sketching quick ideas to visually explore the potential layout and interaction patterns of the filter system. This process aimed to generate a variety of concepts that could be refined and iterated upon.
Pulling the Best Ideas
The sketches helped to identify strong potential elements for the filter system, including:
- A toggle switch to indicate 'My Inventory' filter states would provide a more intuitive understanding of the filter's on/off state compared to a button, which might have caused ambiguity
- Recipe suggestions for ‘My Inventory’ filter to reduce search effort and promote personalized experience through recommendation
- Tag-based filters to help users to easily visualize and manage their selections, promoting a more flexible and personalized search experience
Exploring Two Approaches
Mid-fidelity wireframes were created to explore the two potential design solutions.
Comparing a toggle switch to the recipe suggestion section for filtering recipes from ‘My Inventory’
To address the potential scenario of numerous recipes within the 'My Inventory' filter, further design exploration was necessary. While the toggle display (Option 1) remains effective for filtering recipes in place, the horizontal carousel (Option 2) offers an alternative approach. By expanding the recipe list within the same screen, this design eliminates the need for additional screens and provides a more intuitive way for users to view their filtered recipes.
Design decisions for expanding the ‘My Inventory’ recipe suggestions within the frame
Mapping Task Flows
Task flows were mapped out for both the ‘My Inventory’ recipe suggestions and toggle switch directions. Despite their distinct visual appearances, both approaches yielded nearly identical user flows.
Testing
Testing Out the Options
A/B testing was conducted using low-fi prototypes to evaluate the two design options: a toggle switch and recipe suggestions. Participants strongly preferred the recipe suggestions, finding its function easier to understand and more engaging to use. This feedback supported the decision to prioritize personalized recommendations, a direction later recommended to the developer.
Option 1 - ‘My Inventory’ Toggle Switch
Option 2 - ‘My Inventory’ Suggestions
Discussing Development
Meeting with the client to discuss the two design directions, I presented the low-fi prototypes for each to communicate user interaction and share my A/B testing results. While the toggle switch was considered easier to implement, they felt the the additional development required for the recipe suggestions manageable and worthwhile considering the strong preference shown from user testing. We agreed to explore further designs in that direction.
Design
Integrating into the Existing Design
The new app feature needed to fit into the existing design system, so I adhered closely to the established style guide of the app to ensure a seamless integration.
The new pages (center frames) were designed to fit seamlessly into the existing design (first and last frames)
Final Design
The final prototype features 'My Inventory' recipe suggestion section to recommend recipes based on the ingredients the user has. This design solution offers a more personalized experience and reduces search-effort for users when looking for oil recipes.
Results
A Happy Stakeholder
The stakeholder was enthusiastic about the final design solution. The new feature is currently underway in development, soon to be released in a future app update.
Reflection
Even within the constraints of this small project, focusing on user feedback helped us identify unique solutions that effectively address the challenges presented. Some of the key things I learnt while working on this project were:
Feasibility is paramount. Design decisions must always be made with the development process in mind to ensure a successful and timely project delivery.
User testing is an essential validation tool. It's one of the best ways to validate and support user-centered design decisions, especially when working cross-functionally.
Embrace the iterative process. Each iteration guiding designers towards a more refined, feasible, and user-centered experience.
.gif)
