Shop n' Cook


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


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.


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


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.


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.




Open Sans


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.