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.

+ Show Overview

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.