Drizzle

Mockup of 3 iPhones showing recipe screen and success state screens from Drizzle web app.

Overview

Drizzle is a conceptual recipe product I created for a course project. The brief was pretty broad; the primary direction was to create some kind of recipe product. I decided to narrow my focus down to a niche category: sauce. Interpreting the brief in this way allowed me to create a more unique product.

I was the UX/UI designer for this project. During the UX phase, I did market research and user interviews, created user personas, mapped out user flows and diagrams, sketched low-fidelity wireframes, and conducted user testing. During the UI phase, I built a mood board, developed screen designs from low-fidelity sketches to high-fidelity wireframes, and created a style guide. I then translated the mobile designs into various screen sizes to make the product responsive and created mockups with the final screens. I worked on the project from October through December 2020, and completed the redesign from mid-April through mid-May 2021.

My Process

Research

I interviewed several potential users during the UX research stage. I used the information from these interviews to create user personas that helped guide my design decisions.

Two user personas layered on top of each other.

Ideation

Before I began developing screen layouts, I established the various paths that a user may take when trying to accomplish their goals within the app. I did a task analysis and then mapped out the user flows.

Two user flows showing paths for using a filtered search and saving recipes to folders.

During the early sketching phase, I used the Crazy 8s rapid sketching method to get a bunch of ideas down on paper before refining them later.

Numerous rough early sketches.

Wireframe

After creating many rough sketches, I chose the strongest layout for each screen and then refined it. I turned the polished sketches into a rapid prototype and conducted a round of early user testing. I used the feedback from testing to improve the UX structure and flow as I turned my sketches into low-fidelity digital wireframes.

Progression of several screens from sketch to low-fidelity wireframe.

Style Guide

I created a UI style guide for Drizzle to help me maintain consistency across all screens and breakpoints. View the full style guide document PDF.

UI Elements page of style guide layered on top of several other pages from the document.

Design

With my style guide in hand, I applied UI styling to all of the screens. This was an iterative process; I took each screen through a number of changes, prompted by feedback from peers and my mentor, as I developed the final designs. View all of the screens. (opens in new tab)

Mockup of phone, tablet and laptop showing home screen.

Accessibility Redesign

I created Drizzle before I knew anything about inclusive design. As I prepared my portfolio, I went back to Drizzle and realized that the color contrast needed some work. I tried to tweak the colors a bit, but it was not enough. I was initially reluctant to make significant changes to the colors, but I felt like it was essential to bring it up to code, so to speak.

Looking at Drizzle with fresh eyes and a few more projects under my belt, I saw several opportunities to improve the product’s UI. I increased the margins, gutters, and general spacing and made other changes to refine the layout. View the breakdown of the changes I made during the redesign. (opens in new tab)

Original mobile home screen design and redesigned screen side by side.

Mockups

After finalizing the screens, I created device mockups to show my designs in their natural habitat. View all of the mockups PDF.

Mockup of iPhones showing Home, recipe, login, and search screens.

Prototype

I created an interactive prototype of the app that you can click through above. View the prototype in a new tab.

Conclusion

My biggest takeaway from this project is that designing for accessibility doesn’t mean disregarding the visual aesthetic. It means opening my mind, seeing things differently, and being even more creative when thinking about solving the problem. It also means being willing to let go of my initial ideas of what the “perfect UI” looks like. Before I started the redesign, I loved my color palette, and the idea of changing it was a little painful. Comparing the before and after, I can confidently say that the updated UI is more visually engaging.