The Puffs Bakery
iOs App
Case Study Overview
Starting your day with a hectic and busy morning can be quite draining when you’re running low on energy. A quick pick me up would certainly brighten someone’s morning. The Puffs Bakery is the perfect place to grab your favorite basked goods on your way to work.
People with demanding work schedules and busy commute seek convenient and quick food options on-the-go.
The Challenge
UX/UI Design & Research, Wireframing, Prototyping, Usability Testing
The Role
Create a user-friendly bakery app for enabling seamless ordering and hassle-free pick up for customers
The Goal
The Software
Figma, Illustrator, Photoshop, Zoom
User Research
I invited various demographic groups to participate in interview for my research. To gain insights into the users I’m designing for and their needs, I constructed empathy maps. The primary user group consisted of busy professionals looking for quick and convent on the go ordering solutions. Based on this research, I set out to create a user-friendly app for effortless use.
User Research Pain Points
Time
The app should provide a straight
forward ordering experience for
busy professionals.
Verification
Consistently having to verify the
accurate order, resulting in delays
when trying to leave for work on time.
Features
The size of the test is too small
for the users to read, and the
background colors weren’t appealing.
Persona #1: Say hello to James!
With his jam packed work schedule, James, a design director, finds solace in his love for baked goods. However, the ordering process at his go-to bakery has often been less than pleasant due to the multitude of steps involved. James is keen on streamlining this experience, aiming to swiftly place his order and exist a bakery promptly, as any delays could make him late for work.
Goals:
1. Being able to maintain a healthy life style
2. Being able to pick up a baked good quickly on the way to work
Frustrations:
1. The wait time to pick up his order makes him late to work
2. Always needing to check his order in case it’s wrong due to previous mistakes in the past
User Journey Map
Examining James’ user journey highlighted the significant value a user-friendly bakery app could provide to users.
Paper Wireframes
Sketched each page of the app screen on paper to make sure the elements would make sense on digital wireframe. Based off these sketches, it would show how effectively it would target pain points. The users can conveniently choose a pickup time for their orders, and the navigation for placing an order is easily streamlined and user-friendly.
Digital Wireframes
Throughout the beginning of the design phase, I included a pickup location button, enhancing user awareness and making it easier for the user to quickly identify this available choice.
Low-Fidelity Prototype
Looking over the finalized digital wireframes, I developed a low-fidelity prototype. I created a user flow that focused on building and placing orders for baked goods, making the prototype usable for usability studies.
View The Puffs Bakery Low-Fi Prototype
I performed 2 rounds of usability studies. The study made me understand how the users really felt and what they really needed based off the design I shared. For the second study, I had the users use a high-fidelity prototype, and noticed there are a few more tweaks that needed to be addressed.
Usability Study Findings
Users want more timeframe selections to pick up order.
Users want the test to be bigger for better readability. Users also desired a visual representation of nearby locations on a map to facilitate the selection of a convenient pickup point for their orders.
UI Library Components
I’ve created a color palette that is complaint to the WCAG Grading standard, making this app visually appealing and at the same time, be more accessible to people with disabilities. The typography was chosen to be within the same families so it is easier to read across the board. With these new components, they were implemented into the high-fidelity wireframes.
Mockups
In response to user feedback, I took measures to ensure that all text is easily readable, catering to individuals of all ages and providing a seamless reading experience for all users. Additionally. I incorporated a visual map to facilitate location navigation and help users identify nearby points of interest.
Mockups
High-Fidelity Prototype
The high-fidelity prototype demonstrated the user flow for placing an order and proceeding to checkout. It effectively addressed user needs by offering both an instant pickup choice and a delivery option.
View The Puffs Bakery High-Fi Prototype
Accessibility considerations
1. Used a color palette that hit the WCAG standards and also making it visually appealing.
2. Made sure there were photos of each baked goods so the user can see what they are ordering.
3. Provided legible text, catering to individuals of any age and ensuring a smooth reading experience for everyone.
Takeaways
The Puffs Bakery truly priorities in simplifying the lives of users, particularly when they are on-the-go. During the creation of the bakery app, I learned how to better understand what the users really want and what they really need. Hearing the input from different users helped me make sure that my creation will be easy to use.
