Penn Spark — August
2024
Spark Design Sprint
Schumbl Cookies
Let’s edit your bakery and supplier list.
Bakeries
32 Walnut St
5 Oak Blvd
88 Spruce St
Add a bakery
Suppliers
Philadephia Bakery Merchants
AAA Distributor
Add a supplier
2 out of 3 steps
Send to 32 Walnut St.
= $ 377.90
Send to 5 Oak St.
= $ 416.90
Send to 88 Spruce St.
= $ 42.60
Total Suppliers Ingredient Stock
Distribution of Ingredients to Recipes
Total Funds
5 Oak Blvd
88 Spruce St
Add a bakery
Back
RUTH ZHAO
My Role
Primary Designer — UX Design, UI Design, Visual Design, User Flows, Rapid Prototyping
Timeline
2 days
Overview
This design sprint was completed for the Penn Spark Red (Advanced) Design Team application, which I was later accepted for.
The prompt asks the applicant to design a product for a bakery supply chain to manage ingredient quantities, expiration dates, and ingredient delivery to bakeries.
Time given was approximately 2 days, and as a result prioritizes fast iteration and ideation processes.
00
The Problem
01
Identifying context
Firstly, I conducted research on bakery supply chains and their hierarchies, finding what components in an app were most helpful.
1A. Principle problems overview on right
The primary problem revolves around a company finding it difficult to manage ingredient quantities and deliveries for a supply chain of bakeries.
Minimize loss due to expiration dates
Keep track of batches of ingredients
Ensure bakeries receive ingredients on time
A. Overarching Industry Issues
Driver shortages and increased fuel prices impact cost of freight to ship baking supplies and products.
Emphasis on local suppliers ; allow the user to filter and prioritize by georgraphical proximity
Allow bakeries to specify which ingredients to prioritize and sort urgency by.
Specific shortages in oil and gluten causing large cost spikes.
A. Trucking
Solution
Solution
B. Ingredient Prioritization
B. Company Specific Issues
Company experiencing ingredient loss due to inefficient expiration date management systems.
Solution
Solution
Solution
Emphasis high visual hierarchy (color, type, spacing) for soon-to-expire items.
Create management system auto-sorting batches based on most popularly ordered items in a specific bakery.
Company experiencing difficulty assigning appropriate batches sizes to different bakeries based on recipes and needs.
A. Expiration Dates
B. Batch Management
Match supplier location to closest bakery location.
Company experiencing delays and slow delivery times to bakeries.
C. Timely Ingredient Delivery
User Flows
02
Navigation
Primarily, the user experience flow aims to combine system of ingredient-needs and expiration dates to prioritize giving soon to expire items to bakeries needing those ingredients.
Wireframes
03
Building
The wireframes were initially designed in grayscale, prioritizing values, hierarchies, and interactions over color and detailed rendering.
1.1 Locate Org.
Find Organization
Company Name
Bakery List
Supplier List
add more
add more
Company Name
Preferences
Company Name
Bakery Batches
Expiring Soon
Ingredients Use & Recipe Use
Sample
Name
Needs x2 milk
Send
Name
Needs x2 eggs
Send
Name
Item x3
Send
Sample
Sample
Bakery Location
SEND
Name
Item x3
Price
Name
Item x3
Price
1.2 Edit Bakery + Supply
1.3 Preferences
1.4 Primary Menu
1.5 Confirm Delivery
Due to time limitations, there were fewer iteration stages. Rather, there was an increased focus on refining core functionality and ensuring the user flow was coherent.
Style Guides
04
Logistics
I developed a comprehensive style guide for the high fidelity prototype of this product, including typography, color and basic components.
A. Typography
Heading 1
Family: Helvetica
Weight: Bold
Size: 48px
Letter Spacing: -4%
Line Height: 120%
Heading 1
Heading 2
Family: Helvetica
Weight: Regular
Size: 40px
Letter Spacing: -1%
Line Height: 120%
Heading 2
Heading Bold
Family: Helvetica
Weight: Bold
Size: 40px
Letter Spacing: -2%
Line Height: 150%
Heading B
Body 1
Family: Inter
Weight: Bold/Semibold/Regular
Size: 16px
Letter Spacing: -2%
Line Height: 150%
Body 1
Article Heading
Article Subheading goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. At eget iaculis eget eget neque, posuere quis placerat arcu. Ipsum est felis varius faucibus praesent convallis.
Article Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. At eget iaculis eget eget neque, posuere quis placerat arcu. Ipsum est felis varius faucibus praesent convallis.
B. Type Pairing
Colors
LILAC
CTAs
Focused/Active states
Primary Brand
FIRE RED
Accenting
Secondary Brand
SPADE GREEN
Accenting
Tertiary Brand
Pale gray
Background
Background
C. Colours
A. Opening Transition
Showcase
05
Display
B. Bakery and Supplier Setup
C. Home Screen
D. Preferences
E. Singular Send Ticket
F. Multiple Send Tickets
Take-Aways
06
Reflection
The fast-paced nature of the sprint emphasized the importance of quick prototyping and iteration, pushing me to make decisive, yet thoughtful choices. It also underscored how time constraints foster creativity, forcing me to prioritize ideas that could be executed effectively while still addressing user pain points.
Through this process, I learned the value of embracing imperfection in early prototypes to gather feedback and refine ideas quickly.