SouthWestG
Baked Specialities You’ve Never Tasted Before
My Role
Design Lead – Visual Design, Interaction Design, Design System, Wireframing, Prototyping, User Flows, Usability Testing
Team
Elisa Lange
Timeline
2 Weeks
Tools
Figma, FigJam, Notion
Background
If you put two Germans in a group, you get an app to buy bread. What can you do? During our UX/UI Design bootcamp at the Spiced Academy, Elisa Lange and I found ourselves in a group, and it didn't take long for our German roots to rise to the occasion.
We were given the task of creating a Figma prototype for a fictional e-commerce app. We realised that we both come from the southwest part of Germany and miss the baked goods from there. So we created an app for a fictional bakery called SouthWestG (Southwest Germany) that delivers baked goods right to your doorstep. Obviously.
A bakery app for Southwest German baked specialities, delivering deliciousness right to your doorstep faster than you can say pretzel.
To make food visually irresistible, two key ingredients are essential: a well-chosen color palette and stunning food photography. For this app, I chose a vibrant, youthful color palette and bright, evenly lit food photography direction, both working together to make the food look fresh and inviting.
For a more in-depth look at the Design System (e.g. tokens) you can jump to the Visual Design section of the Case Study.
We’ve created four distinct, color-coded food categories to enhance product findability and help users locate specific items more easily. Within each food category and during the checkout process, we applied the progressive disclosure technique to present only the most essential information upfront.
When users tapped on a specific food item, they could access additional details such as ingredients, allergens, and more.
Our user research revealed that users valued a fun, gamified app experience. To meet this need, we introduced the Pretzel Card – a digital stamp card that rewards users with a stamp for every purchase. Once five stamps are collected, users can redeem them for a free pretzel, available with their next order.
The project brief required a concise checkout process since we were limited to ten screens in total.
To meet this requirement, we assumed the user was already logged in, showcasing an efficient logged-in user experience.
We applied progressive disclosure to present only the relevant information for each step, like verifying delivery details. After completing the purchase, users are informed about delivery or pickup times and receive a stamp for the Pretzel Card.
User Stories in Action: Crafting a Fun and Intuitive Shopping Experience
We didn’t have to do intensive User Research for this project but we were given a User Story that we had to adapt to our own chosen product. From our User Story we extracted the following User Needs:
With the User Needs in mind, we analyzed major e-commerce platforms, including leading marketplaces and food delivery apps, to identify patterns we could use to meet User Needs. We identified the following two key best practices that could improve the User Experience.
After identifying User Ueeds and researching e-commerce best practices, we designed a seamless User Flow to help users accomplish a specific task: purchasing a 'Seele,' a specialty bread from Southwest Germany.
Striking a balance between honoring tradition and creating a unique, standout visual identity that appeals to the target audience.
Youthful Retro was the name of the visual direction I came up with and the colors played a crucial role in making the brand feel progressive and youthful.
For our brand color, I came up with a vibrant yellow to stimulate appetite, attract attention and convey the warmth of the brand. For the secondary colors, I chose the colors 'Bubblegum', 'Lime', 'Carrot', 'Lavender' and of course 'Bread' to use for the food categories and to have more colour options for marketing-oriented screens and presentations.
Color and Spacing Tokens set up as variables in Figma were used to ensure consistent use of colors and spacing across the UI.
We used the slab serif typeface Fraunces Black for the logo and headlines/titles because it features rounded serifs that contribute to it feeling rather retro and warm. Plus it’s heavy characteristics make the letterforms stand out more which adds character.
For body text/labels we chose Work Sans because of it’s superb readability across different screen devices and it’s versatility since it features a lot of different weights. Both typefaces feature a large x-height that improves readability.
Both text styles and variables were used to ensure a consistent design across the different screens.
Using insights from Usability Testing to polish the checkout flow
We conducted five remote usability testing sessions in which users who matched the target audience could test our prototype to complete the task of buying a "Seele" – a specific type of bread from Southwest Germany.
To gather insights and identify areas for improvement, we used a mix of exploratory and task-specific questions, emphasizing non-leading questions for nearly every screen.
After usability testing, we used a prioritization matrix to focus on creating maximum value for users. We identified several areas for improvement, such as users mistaking the Pretzel Card icon for a credit card and had no option to contact the bakery after purchase.
User insights, passion and a dash of team magic
