Shop n' Cook
Product Designer
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 them shipped to their door in one simple flow.
Goal: To create an app, designed to make the process of shopping for food and cooking more of an integrated simple task.
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: Create a system that allows you to approach shopping from a recipe or product approach. From a recipe, you may purchase all related ingredients and from a product, you may select related recipes and their ingredients.
Layouts
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 Designs
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 from competitors. As such, the timing of the interactions between the various elements is key to helping maintain a cohesive feel.
Colors
Fonts
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.