Sugar Rush
A Responsive Website & App
About
Reena is a small bakery business owner. I will be creating an app for Reena’s bakery – “Sugar Rush by Reena”. She currently does not have any website or app, and does business strictly through direct messages on Instagram. Therefore, I want to make sure the website I create gives off the aesthetics she wants it to, and the viewers keep coming back for her yummy treats!
Project Overview and Goals
This project challenged me to design a user-friendly app for a bakery. I focused on creating a warm and organized experience, addressing past customer frustrations. Understanding the target audience is difficult, because both parents and children are part of the clientele. Working independently, I completed research, branding, and UI/UX design in four weeks using Google Slides, Figma, and Google Sheets. I delivered a comprehensive set of materials; including user research, branding elements, and wireframes. I’m proud of my ability to work independently, manage the project, and deliver high-quality results.
The Design Process
Research
Research Plan
User-centered design requires extensive user research to avoid personal bias. This involves time-consuming primary research like surveys and interviews, followed by analyzing existing apps to identify potential features.
– Do some research into the baking industry – To jumpstart my bakery app design, I’ll research existing bakery app layouts and navigation. Additionally, I’ll explore UX/UI designer tutorials on bakery apps to gain fresh perspectives and avoid a single “baked goods” category.
– Speak to the business owner – Understand what colors, ideas, and branding the owner is looking for and best cater to what she would want.
– Talk through my thought process with the business owner so can have some prior expectations when I send her some mockups/wireframes. Perhaps she can offer some critique or preference.
– Create a Competitive Analysis – Do a competitor analysis of at least three other small bakers aside from the business I am creating this app for.
– Create some quality wireframes, and present it in group critiques to get some constructive criticism
Competitive Analysis
User research provided valuable insights, prompting a competitor analysis to identify best practices and potential gaps in existing offerings. Three competitors were evaluated, focusing on similar services and user experience aspects. The analysis helped refine the target audience, differentiating between “pastry” and “baked goods” bakers based on the specific needs of observant Jewish consumers.
Considering the perspective of an observant Jew seeking kosher pastries, the analysis acknowledged the limitations and necessity of home-based businesses having official certifications. Personas were developed and the competitive analysis was conducted with this unique audience in mind, prioritizing a user-friendly approach. It’s important to note that within the observant Jewish community, trust often plays a role in determining the assumed kosher status of home-baked goods.
There are 3 “categories” of Kosher foods:
1. Meat
2. Dairy
3. Parve – no meat products or dairy products used in the process of cooking or baking
Research Methodologies Used
1. Interviews – Over zoom and in person if possible
2. Surveys – Google Surveys over WhatsApp statuses and Discord – which got 3 responses
3. Competitive Analysis
I don’t always remember the variety of methodologies when this part of the process comes up in projects, but when it does, I try my best to review my notes, and move on in a timely fashion.
Personas
Developing user personas was a highlight for me, of the process. By translating research into individuals with specific needs, backgrounds, and motivations, I gained a deeper understanding of who the target audience could be. This allows me to connect with users on a personal level and address their broader requirements, including the needs of families celebrating birthdays, gender reveals, and other events – moving beyond addressing isolated issues raised by individual interviews. This persona-driven approach ensures the solution caters to the user base effectively, avoiding personal biases and focusing solely on user-centered design principles.
Josh Berger
Sara Scheiner
User Survey Graph Overviews
How old are you?
User Interviews
To bridge the information gap from the initial research, I conducted a survey to gauge target demographics, user thought processes, and identify any confusing terminology within the baking industry. This feedback refined future interview questions, ensuring clarity and a more efficient user experience for participants. The biggest thing I learned here, was that staying consistent with your questions will yield the best results.
Interviews also allow me to gather data I may have missed through the research stage; like noticing the comfortability of the users with the given topic, their knowledge or personally done research, or any missed user information. The interviews were videoed and reviewed for further conclusion to better deduce the main focuses I need to move on with, and where the participants had similarities and differences.
Defining a specific target demographic proved challenging. While pastries hold a universal appeal across various celebratory and somber occasions, the research revealed a broad consumer base. From children to adults and seniors, individuals of all ages enjoy pastries at commissioned events, highlighting the bakery’s role in enhancing celebrations and offering comforting treats.
(The “L”, “B”, and “A” in the brief are the initials of the interviewees)
Interview Participants
Number of participants: 3 people
Ages: Range from 22 years old – 70’s
Marital Status: 2 people married, one single
Children: Two people have children/child, and another with no children
Meeting Location: 2 over zoom, 1 over the phone – all recorded over Google Docs, and those over Zoom, were recorded
Affinity Mapping
DESIGN
Finally, we are up to the design part of the project!
Moodboards
In the absence of established branding, I crafted mood boards to bridge the gap between Reena’s current Instagram aesthetic and the envisioned, more polished website look. This visual roadmap allows Reena to see the transformation, solidifying the connection between her existing business and its elevated visual identity.
Before
After
Task and User Flows
Task Flows and User flows helped me hone in on the steps I needed to create in the app – which shows me how many and which pages and screens are necessary for any given task.
Task flows show the process of a specific task, and User flows show each possible option for the user to press throughout said task.
Here, I have chosen to create a task flow that shows how the user would customize their cake. The user flow ultimately chosen, shows what the options would be to sign in or go through the onboarding process.
Reena's Brand Kit
To create a user-friendly and inviting app experience, I prioritized a soft color palette. Browns, creams, and pastels were chosen to evoke relaxation and warmth, while maintaining sufficient contrast for clear information hierarchy. Soft gold accents, inspired by the client’s initial branding preference, added a touch of class without compromising the overall sweetness and playfulness of the design.
Typography
To achieve a warm and inviting brand feel, I chose PT Serif as the primary font and PT Sans as a secondary font.
Icons
To achieve a sleek look, I want the icons to be thin, but curved and not sharp edged, playing into the soft and warm feel to the site and its features.
Logo
I kept the corner curves and gold colors consistent. I created the “R”, and then mirrored the letter to create an “S” and “R” together.
Final logo design
I chose to put the monogram at the top and the watermark underneath it because through my various attempts at centering the watermark (as seen in the attempt above), I felt it took away from the initials and creative use of negative space. The final design showcases the initials, the heart, and the watermark without compromising the design aspects of each.
WIREFRAMING
Low-Fidelity: These initial sketches helped me envision the app’s layout without getting bogged down in design specifics. I hand-drew 5 mobile and 5 desktop screens to explore the information architecture.
Mid-Fidelity: This was my first attempt at a digital wireframe, and with guidance, I learned to prioritize essential elements while avoiding excessive detail that could hinder user comprehension.
High-Fidelity Wireframes: My favorite stage involved crafting a high-fidelity digital mockup replicating the user’s experience. This interactive prototype embodied the previously defined task flow, allowing users to navigate the onboarding process and explore the landing page. Witnessing the initial design vision come to life was highly rewarding.
High Fidelity Mobile Wireframes
Iterative testing played a crucial role in refining the app. User feedback on high-fidelity wireframes informed design tweaks until tasks became effortless. Likewise, a designer group’s critique on mid-fidelity wireframes led to simplified baker profiles, enhancing user experience.
High Fidelity Desktop Wireframes
Transforming low-fidelity wireframes into high-fidelity mockups presented a unique challenge in balancing content and negative space. Deciding information density and element size proved difficult, prompting self-doubt about design decisions.
Thankfully, my mentor’s guidance ensured precise alignment and adherence to website information integrity. Crafting the landing page initially seemed straightforward due to limited content. However, incorporating user-friendly and inviting text required assistance from Chat GPT and strategic paragraph structuring. The final result showcases a visually appealing hero section alongside supporting content, achieving a clean and engaging user experience.
Mastering the “Z” pattern layout, where users naturally scan information diagonally across the page, became a key learning point. The final landing page reflects this principle, culminating in a user-friendly and visually appealing design that embodies the desired emotions – sleek, inviting, and calming.
Challenges throughout
the Hi-Fi stage
Challenges throughout
the Hi-Fi stage
The biggest challenges that I faced and appreciated were:
– Sizing changes between the mobile and desktop text (it was very tedious, but I learned a lot).
– Reformatting the important elements and only keeping necessities for the mobile – to best use the space I have
Usability Testing Results
The user testing went through 3 different people. The overall score is a 10/10 from the users.
Things that went right:
– Everything was seamless and smooth throughout the user’s experience.
– The feedback was great and the app was consistent in the way the users reacted towards the app’s features, such as buttons and navigation – when users used the app and site, they were able to understand what the buttons and actions would do since they were consistent throughout the sites.
– There were very little fixes necessary
Things that went wrong:
I am very happy to say that there were no big issues with the prototypes or designs. The users conducted their tests, and had an easy time navigating their way through the experience.
– During user testing, I accidentally sent an incomplete prototype link; I quickly apologized and provided the corrected version.
– The words on the mobile navigation were a bit hard to read at first, so I switched the typeface to a similar font that was “Sans” so it can be better understood and used.
Things I learned form what went wrong:
– To make time to completely finish the prototypes before sending the links to the users – not only to be more professional, but also to give the users an easy time, since they are doing me the favor by testing my app.
– I commonly feel frustrated with mobile type sizing, so I hope to better research and understand the industry standards for that formatting – and include not only the desktop versions, but the mobile versions of the brand kit types faces as well.
Personal Project Overview
1. I absolutely loved being able to make design choices based on my own creativity and research as opposed to relying on the client. I was able to use my creative freedom and skills to design a beautiful site, while also solving some issues that potential users are facing.
2. Accustom myself better with the industry’s methods, Figma features, and numerous other ways of doing things so I can know/choose better what works for me in the designing programs. I had a bit of trouble remembering some research and design methods, but I am still proud of the progress I made before having to go back and look at previous articles by DesignLab and references.
3. I am proud of the progress I made in this short amount of time, and look forward to getting better and better as time goes on in my DesignLab experience.
4. Joining Group Critiques – It’s great to make beautiful designs, but doing it mindfully and being able to verbalize those decisions, is what I want to be great at! I personally thrive on critique, and welcome it as a priority throughout my creative process.