ResumeLinkedIn
Thank you!

I'll return your message as soon as possible
Oops! Something went wrong while submitting the form.

Shop n' Cook:

E-commerce Grocery Experience

Check out the Prototype

Tools

Role

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

The problem to solve

The process of shopping, cooking, and prepping meals is a time intensive task that leaves many frustrated; so instead they turn to microwave meals or fast food which can become incredibly expensive over time.

This conceptual project sets 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.

High Fidelity Mock-ups

By utilizing visual cues, the design helps lead the users through actions they might take on-screen with colors and informational hierarchy to guide the viewer's attention to actions and Information.

Home to cart interaction

Content interaction

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.

Wireframes

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

Process

This project was built using designs & prototypes from XD, graphical assets created in Adobe Illustrator & Photoshop, and animated interactions produced in After Effects.

Open Sans

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890

Kabrio

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ

Colors

#1CC77F
#2C384B
#101010
#FCFCFC

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.