Sizzle is a simple recipe manager that allows the user to store, manage and share his/her recipes with ease.
With a clean and simple aesthetic, curated content based on the user’s preferences and a function for one-click shopping lists, meal-planning is now something to look forward to.
TOOLS
Sketch
InVision
Photoshop
ROLE
UX Researcher
UI and Visual Designer
TIMELINE
November-December 2020
6 weeks
My role covered both UX and UI Design, allowing me to see the whole project through from start to finish with a cohesive approach.Through a thorough UX research phase, I identified the user requirements and ideated appropriate design solutions to address them.Progressing into the UI design phase of the project, I created moodboards, wireframes, style guides and mockups, taking into account crucial feedback from rounds of user testing, peers’ critiques and mentor reviews. The resulting responsive product is fresh, intuitive and fulfils the user requirements.
With this project, my aim was to create an intuitive recipe manager that would make it easy for the user to organise his/her recipes no matter what format they're in.
The platform would allow the user to digitise any paper recipe or save existing ones from online resources in just a few steps and a function to create shopping lists would further improve the user experience.
The UX phase of the project started with a competitor analysis
to help me identify the key objectives, overall strategies
and market advantages of similar apps.
Interviews with 3 participants from different backgrounds
highlighted the need for an app with a simple organisational
element.
People who cook for themselves and others food lovers in search of inspiration
Cooks of all levels of cooking ability
Quick and easy access to tried-and-tested recipes
Ability to import and categorise recipes into a library
A customised experienced thanks to search filters and preference settings
Quick shopping list creation
Access to a network of like-minded members
Anytime meal-planning and grocery shopping are required
A fully responsive app to make it accessible on all devices, anytime
I synthesised the findings from this user research into 3
compelling user personas, highlighting their backgrounds,
needs and wants, pain points and behaviours.
As a keen cook myself, it was often tempting to come up with solutions to answer to my own needs and wants with this project. These user personas were crucial in helping me remain objective at all times, imagining the user at the centre of the experience rather than myself.
Drawing up a Minimum Viable Product document at this stage allowed me to make sense of my findings, identifying the needs from the wants, and giving the project a clear direction.
The product was to be intuitive, making recipe organisation a simple and enjoyable process. It would allow the user to import recipes from various sources (via the camera or through the web browser), include a one-click shopping list function, and inspire the user with recipes especially curated to suit their taste and preferences.
Allowing the users to connect and interact with one another through the app will be a useful resource to measure the product’s success.
In order to best address the user requirements, I created three simple user flows highlighting each step required for the users to achieve their goals.
I focused on solving their problems as quickly and efficiently as possible, reducing the amount of steps required in each scenario.
Using the Crazy 8’s strategy, I proceeded to sketching initial ideas for the main screens that would need further developing.
After several rounds and iterations, I created simple paper prototypes that I tested on three users.
Taking into account the participants’ feedback, I compiled a synthesis of the findings and identified solutions for the problems that arose.
As a whole, the feedback emphasised a need for simplicity: for example I removed the ‘Recipe Saved’ notification that the participants felt was superfluous.
Entering the UI phase of the project, I created digital wireframes that I was able to share with peers for review.
Suggestions that the menu bar at the bottom of each screen should be removed came up a few times. Indeed the reviewers preferred to give the content more space with a hidden menu instead, which would also be more readily adaptable for bigger devices. Those adjustments were later incorporated in my hi-fidelity wireframes.
I placed the need for simplicity at the centre of the product’s aesthetic. The colour palette is fresh and crisp, and the typography choice enhances clarity.
Inspired by contemporary cookbooks like Anna Jones' A Modern Way to Cook, I focused on a minimalist approach to emphasise practicality.
The product works like a favourite cooking utensil: simple, reliable and authentic.
With an overwhelming choice of recipe apps already in existence, Sizzle goes back to basics, therefore allowing for a pain-free and efficient user experience.
Adopting a mobile-first approach, I ensured my design solutions were effective for smaller devices. Hamburger menus and floating action buttons provided crucial space-saving solutions and allowed for a clutter-free navigation on mobile screens.
With a functional design in place for the smaller screens, I went on to develop the fully responsive design. To help me in this process, I used a comprehensive style guide compiled throughout the UI phase of the project and built responsive grids to adapt the layout for critical breakpoints.
A final round of peers’ reviews highlighted the need for further improvements, such as a contrast issue in the menu bar on the larger screens and unnecessary use of gradients on the Home screen banner image.
With these final tweaks addressed and incorporated, the final design is clean and simple, respecting the overall aesthetic direction of the project. It adapts naturally to all screen sizes, making the product widely accessible to suit different contexts of use
Given more time, I believe the project could have benefitted from another round of user testing, perhaps with a different technique such as focus groups.
Ideally, peers’ and experts’ reviews should have been conducted earlier so the decision to discard the bottom menu bar could have been implemented in the project before the wireframes got digitised.
My peers’ advice were instrumental in the decision to implement some finer details I could have easily missed otherwise.
To further the product’s reach, future phases of development should include some of the wants that were identified at the gathering requirement phase of the project.
Functions such as video tutorials for cooking tips and advanced techniques, and suggested substitutions for missing ingredients would enhance the user experience.