Simple Chef UI/UX Design Sprint

Problem

• Wants to know what kitchenware is needed (pots, pans, utensils, spices, ingredients).
• User has to constantly wash hands before touching the phone and the user does not like this.
• User needs indications to wash hands. (how to solve this.. is it possible to make this step hands free?)
• User wants to know if they are on the right track. What do pre-steps look like? Not just finished product.
• Have clear ordered steps. Pre-prep ingredients to be efficient and accurate.
• Need accurate cook times and measurements, so mistakes don’t happen that are costly & disappointing.
• Need an interface that allows cooking with confidence and the user to enjoy the journey.

Project Scope & Solution

• New Technology advancements - Provide Voice Technology feature for hands free reading/cooking.
• Have points to Wash Hands noted on cooking instructions. Remove a pain point.
• Provide prep photos not just end product photo. Also have cooking videos for visual aid.
• Identify armature and advanced cooking problems that users have when using this app.
• Provided cooking tips for multi-food preparation to reduce feeling overwhelmed. This adds confidence.
• Provide Clear steps to prepare meals. Remove stress point from unclear instructions and disappointment.
• Display tips to plate food and provide photo gallery for a sense of accomplishment and enjoyment.
• Ability to share finished product on social media. Take photos to share how fun and easy cooking was.

Rebrand Proposal

Rebrand to better support the mission of the application and better support the redesign of the application.

UX Research

Nine personas were provided from the interviews conducted and highlights were then sorted for affinity mapping to find out what users experienced and needed to redesign app.

Affinity Maps

Revealed pain points and what the user really wants to do with the application.

Journey Map

From the research gathered, I developed an End to End journey the user could use. Next quick sketches and user testing can be done to support the logic and user flow.

Sketches

Based on the journey mapping for this product. I quickly sketched out what the main screens may look like. I was careful to included what I had learned from the research and what users wanted from this application. I tried to include new technology like voice control activation, timers and social networking links like facebook and instagram into the application for fun and enjoyment to share cooking successes with friends and family to enhance the user experience.

Wireframes

Because this was a design sprint and a quick turn around of deliverables, mid-fidelity wireframes were generated to capture the look and feel, as well as, gather quick feedback during user testing to capture what the user interface would function like.

User Flows

Initial flows were mapped out for each feature, to gain approval of the stakeholders.

Style Guide

Created a new brand style guide, to establish font uses, logo colors, new icons, and button sizes. Since this was a sight redesign the UI elements were checked and confirmed that they met accessibility standards.

UI & Visual Design

MVP Release

I knew from the research that the app must contain easy to read, accurate instructions, preparation steps to reduce stress and make cooking enjoyable. Preparation photos and videos to help visualize steps before the end product, and research showed that paragraph instructions were preferred rather than bullet point style instructions.

Based on the feedback I also introduced a voice assistant for hands free cooking an a more enjoyable experience. This will also solve the problem of having to touch the phone with messy hands. It also provides space to wash hands which was another problem users wanted to solve.

I also included a timer feature and a favorites section to save recipes for quick recall. I then included social media connections so successful dished could be shared with family and friends. These extra features were in line with the updated branding to make cooking food, fresh, fun and easy.

High Fidelity Interface

At this stage it was time to capture the look and feel of the product with a fully interactive prototype.

Main Features

The proposed product covers all the features, plus some additional features that user commonly uses. It was important to have the features that the research uncovered displayed in an intuitive way for the user. The goal was to make the user experience for cooking simple, easy and fun.

Dark Mode Option

Main screens displayed with dark mode

Validation Prototype Testing

Conducted 1 cycle app testing, using 5 participant both in-person and through virtual meetings with narrated usability test to reveal how the user responded to the tools. Constructed a near actual application experience using Figma Prototyping tools to determine how the features functioned in real time.

User testing revealed no major issues with the UI experience. All the participant liked the look, feel and colors of the home screen with the scrollable recipes to choose from. Everyone liked the idea of the hands-free option, the timer, and the connection to social media.

One test mentioned that the secondary navigation might be better on the main recipe page. I did not disagree however, for the voice activation to work correctly, it needed to be on a page that was embedded with the text to trigger the auto reading feature. Therefore, the voice icon had to be available on pages that could be triggered with readable instructions.

Overall, very positive feedback!

Want to try out the Prototype?

click on the link below