Dedicated Mobile App (iOS)
Blend Bakery
An easy way to order and personalize your dream cakes and sweet treats.
Portfolio project
João Pessoa, Brazil
Type
Researcher, Designer
E-commerce, Food & Drink
Aug 2023 - Sep 2023
I wanted to surprise my mom with a beautiful and personalized birthday cake from Blend Bakery, a renowned bakery in town, but generic food delivery apps don't offer full customization for cakes. This app will allow their customers to easily order and personalize baked goods without having to spend hours chatting with an attendant.
Why I started this project
Purpose
Location
Role
Time
Category
Competitive Audit
First things first! I analyzed the in-app ordering experience of four competitors (both direct and indirect) to assess their useful features in dedicated mobile apps and generic food delivery apps.
Then, I collected comments from Blend's social media to identify the main pain points customers face and areas for improvement.
What Blend's customers are saying
João, a retired grandfather, finds his greatest joy in welcoming his grandchildren and delighting them with their favorite cakes and pastries. Family holds a special place in João's heart. He often hosts gatherings, where generations unite, sharing laughter, stories, and savoring pastries together.
However, João faces unique challenges. A hearing impairment makes phone conversations a struggle, making bakery orders over the phone difficult. Additionally, João is not on social media, which means he can't simply browse the menu online, so he frequently visits the bakery in person to place his orders.
Personas
I created two personas to better illustrate the goals and frustrations of two main group of costumers.
Pain points
About Jaqueline
Goals
“I have a busy and demanding schedule so unfortunately I don’t have time to bake cakes for my kids.”
“Sometimes I order a cake for my kids and when I get it it’s not exactly what we expected.”
“I would like to see what ingredients are used in case there are some allergens for my kids”
Jaqueline is a real estate agent. She is married and she has a five years old son and a seven years old daughter. At every birthday or family gathering as she wants to order baked food from the local bakery, she faces challenges switching between two social media apps to see some example of products on one and talking to or texting to a busy attendant on another. She has trouble associating the name of the cake with the ingredients, the size or the price of the product so don’t know what to ask for and can’t get the right estimate for the product.
To minimize the energy and the time she has to devote to household activities.
To balance her work and her family life.
To get promoted at work so she can get a better pay.
To spend time with his grandchildren.
To devote energy to his hobbies.
To maintain a healthy lifestyle.
Goals
Pain points
“Most of the time my grandchildrencome to my house on a very short notice, so I don’t have time to go tothe bakery in person.”
“When I call to order I can’t understand which cake the attendant is referring to.”
About João
After analyzing the research data, I outlined the app's primary user flow. I also crafted two storyboards to explore the user experience within the product, and finally, I generated some ideas for the main screens using paper and low-fidelity wireframes.
Okay, let's start ideating!
User Flow Diagram
I put together straightforward and easy-to-follow user flows. This one outlines the simple steps users need to follow to complete the main task, which is to place their orders. Other flows were also created, but are not shown due to space constraints.
Storyboards
I explored the user experience within the app by crafting both a Big-Picture and a Close-Up storyboard that illustrate the persona Jaqueline and her interaction with the product.
Low-fidelity Wireframes
Finally, I made a few sketches of key screens to showcase some steps of the main user flow.
High-fidelity UI Design
Once the user flow was defined, it was time to add colors, icons, and typography. Here are the visual interface definitions for the high-fidelity screens.
Colors
Buttons and gradients
Typography
Cute and playful style
To infuse a warm and engaging tone into the app, I incorporated images of personified, talking snacks. These delightful visuals add a touch of charm and approachability, making the user experience more friendly, especially when conveying negative or confirmation messages.
Shapes
I incorporated blob-shaped elements not only to show product images, but also to introduce rounded shapes to certain screens, enhancing their visual appeal and creating a more engaging user experience.
33 high-fidelity screens were created
I gave special attention to the layout of the customization process, inspired by iOS pop-up buttons. I also designed an alternative version with checkboxes and radio buttons, which could be utilized in A/B testing in further design stages.
I gave special attention to the layout of the customization process, inspired by iOS pop-up buttons. I also designed an alternative version with checkboxes and radio buttons, which could be utilized in A/B testing in further design stages.
Complex screen breakdown
The design decisions for this page have two main goals. Firstly, they guide users toward the main action within groups 1, 2, and 4. Secondly, they enhance the user experience by allowing order customization in the optional group 3. Elements are organized into horizontal groups with clear separation to create logical groupings.
Logical groups using Hierarchy strips
Spacing
Grid: 8 point
Font Measurements
Font: Montserrat
Contrast and Color Accessibility
I evaluated the designs for color contrast to ensure they met WCAG AA standards. In some cases, I had to make minor adjustments to improve the contrast, as exemplified by the modification made for the normal text used for the product description.
After completing all the design screens, I created a clickable prototype to gather feedback from real users. I organized a mini usability study with them, and upon reviewing their responses, I identified necessary modifications to be implemented.
Great, now it's time to get some feedback from users!
High-fidelity Prototype
All the high-fidelity screens were connected to create a clickable prototype, you can check it out at this link.
Usability Study
I validated the prototype with four users to confirm their understanding of the products presentation on the homepage. Specifically, I wanted to be sure that they understood the scrollable list of products within each category and the categories represented by the tabs under the main title.
I had a videocall with them on Skype and asked them to complete tasks such as searching for products and adding them to the shopping bag. Meanwhile , I observed their behaviour to check if they understood how the menu works.
Study Results
Improved Prototype Design
While the initial decision to use a small dot as a tab indicator aimed for a cleaner aesthetic, I opted to replace it with a line beneath the category, keeping it consistent with the main tab bar. However, due to time constraints, I couldn't gather a second round of user feedback on this change.
Although the prototype doesn't include all the product screens, all users understood that the products in the first category could be scrolled horizontally. However, only 50% (two out of four users) correctly identified that the small dot beneath the category served as a tab indicator. The task success rate for this particular task was 50%.
User's Feedback
Research and competitor analysis were essential for informed decision-making. After this stage, I embarked on an extensive ideation process, crafting flows, storyboards, wireframes, ultimately transforming them into engaging high-fidelity designs, always prioritizing accessibility as a fundamental aspect of design. Finally, creating a prototype was a crucial step to gather user feedback and refine the product to better meet their needs. This project was definitely no piece of cake! ;)
Mission Accomplished: Key Takeaways
