COOKSMARTS

UI UX REDESIGN

COOKSMARTS is meal planning service that is designed for health and time conscious people.

The recipe page on this site was unclear, cluttered, and lacked quality features. The old design missed opportunities to make the cooking process fresh but familiar with better ways to move through the content or get a quick overview.

The redesign goals were to bring clarity and features like audible steps and a place keeper and help simplify, give more options, and make the whole cooking experience more enjoyable.

REDESIGN PROCESS - RECIPE PAGE

1) ORIGINAL STATE — Cataloging what is working and not working on the old site page.


2) ORIGINAL INTERNAL LINKS MAP — This image was generated using Cooksmarts url to visualize internal links. Beyond navigating the site itself, this was a clear indicator that the site was hard to navigate and easy to get lost.

3) PERSONAS — These are prototypical customers described in detail and understanding their wants, needs, and fears are the keys to understanding how to design user-centered solutions to meet company goals.

4) FEATURE WORKFLOW — Illustrated workflows simply and clearly show the environment, situation, need, and user flow of a specific functional feature of a design.

5) SITE MAP — Having a well-structured sitemap lets you start to visualize the navigation, flow, and functionality of the site. If the structure is not clear here then it won't be when the site is built.

6) WIREFRAMES — This is the place where all the content is structured and the user flows integrated, as well as the navigation finalized.

7) TONE AND FEEL — Writing an adjective range describing the feel of the site is a powerful tool for capturing the essences of the company and speaking straight to the user in a meaningful way.

8) MOOD BOARDS — Finding the right overall visual aesthetic is narrowed down based on the brand essence, as well as the feel and emotional tone of the site.

9) STYLE TILES — All the fonts, colors, image styles, button styles, patterns, and other design elements are decided on and put together for approval and reference.

10) FINAL DESIGN SOLUTION — Then the final design combines all elements of the research, user flows, structure mapping, tone and feel, and all the other design aesthetics and elements. At this stage, the design is ready for user testing or development.

REDESIGN FEATURES

  1. 1 - Above the fold critical info
    - Added ingredient list and cook tool list with purchase options
    - Print option

  2. 2 - Added diet variations

  3. 3 - Hands free cooking steps audio player
    - Place keeper step highlighter

  4. 4 - Ingredient options for missing ingredients

  5. 5 - Easier to read steps

  6. 6 - Completion satisfaction and next step options

  7. 7 - Easy add comments

  8. 8 - Page layout and aesthetics