Shop n' Cook

Role

Interaction Designer, UX/UI Designer, Visual Designer, Product Designer

Problem

The process of shopping, cooking, and meal prepping is a time-intensive task that leaves many frustrated. Instead, they turn to microwave meals or fast food, which can become increasingly expensive over-time. Many new apps for grocery shopping online are available now, though most suffer from simple usability issues and poor visual designs, which I believe harms adoption.

Solution

This conceptual project set out to illustrate how I'd approach easing the process of shopping & meal planning within an application. The design allows users to find recipes, buy its ingredients and have it shipped to their door in one simple flow.

Wireframes

The wireframes of this app Illustrate the user-flow processes of creating an account, navigating products and conducting a purchase. The mobile prototype may be seen Here.

High Fidelity Mock-ups

By utilizing visual cues, the design leads the users through actions they might take. Using colors & informational hierarchy to guide the viewer's attention to interactions.

Interactions

To stand out in an ever-growing market, the app must be both functional and visually stimulating. Without strong visual interactions, the design lacks a distinct feeling for users to distinguish the application among competitors. As such, the timing of the interactions between the various elements is key to helping maintain a cohesive feel.

Colors

#1CC77F
#2C384B
#101010
#FCFCFC

Fonts

Open Sans

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890

Style Guide

The primary colors of the design were chosen to be attention-grabbing, leading the eye across the screen, while the fonts were chosen for legibility as complimentary sans-serifs; Open Sans for the body & paragraphs, Kabrio for headings and CTAs.

Design Layout

To keep & maintain visual constancy I created guidelines to follow across the design both in terms of available space for any given element as well as the spacing between different components, with a responsive design to hold it together.