a place where everyone is welcome
Crumbles is a family-run business that was founded in 2005 and is known for their ever-changing menu. They offer new items daily, all while maintaining the same upstanding quality and freshness they’ve had since they opened their doors.
Duration | 4 Weeks
Role | UX/UI Designer, UX Researcher
Tools | Figma, FigJam, Zoom
the problem & solution
This project was a website redesign for a small business in my town, Crumbles Cookies. Though they have their fair share of customers, their website was lacking the visual satisfaction that users look for, as well as the basic information hierarchy.
The main goal for this project was to upkeep their business goal of keeping a “family-friendly” aspect, as well as putting a more cohesive and modern twist the website.
research
goal
My main goal while researching was to identify struggles/pain points when it comes to navigating restaurant/dessert websites. I wanted to empathize with user, while discovering their wants and needs when it comes to browsing a website like Crumbles.
competitive analysis
While conducting this portion of my research, I was able to look at their target markets and business goals. While looking through the UI of each website, I came to the main conclusion that most companies prioritize creating a strong brand, as well as the relationship with the customer.
Websites are easy to navigate, clear and concise
Some websites can feel outdated
user interviews
After looking at a few different websites, I interviewed 6 different people who I thought would give me valuable insight for this research. My goal for these user interviews was to get a feel for what users look for when entering a website such as this one, and what would convince them to actually go try a new place. I was able to rather a few things that stood out: Users often gravitate towards a well-made website, and they like to try new places quite often.
“I feel like certain cookies bring memories to me every time I eat them, and i’d like a website to reflect that feeling.”
“I look for the menu when looking at a website for the first time, and whether they have prices or not. fast and easy.”
synthesis
Affinity mapping
With an affinity map, I was able to gather the most common patterns that users tend to struggle with, or what most users tend to look for.
Most users look for a simple layout with prices and photos on the menu.
Users look for a nice aesthetic when searching for new places to try.
user personas
I created 2 user personas who are very different from each other. This allowed me to focus on the family aspect of Crumbles, and the fact that everyone is welcome. Sydney and Sean helped me begin to visualize the first steps of my design because I was able to step into the perspective of the user and what they need.
problem statements
Problem
Users have a difficult time looking at websites that are hard to follow, and they feel more inclined to go places that appeal to a certain aesthetic.
POVs
I’d like to explore ways for Crumbles Cookies to keep their family-like aspect, while revamping their website to be more clean and modern.
I’d like to explore more options for Crumbles Cookies’ website to flourish while continuing to deliver their warm and inviting brand identity.
HMWs
How might we help users feel inclined to stay on the website without leaving and looking for alternatives?
How might we improve the user experience while keeping Crumbles Cookies the same family-friendly business they are well-known for?
ideation
user flows
After conducting my research, I began to think about what direction I wanted to go in for the design of Crumbles. I created a user flow for ordering online, as I felt that it covered all the bases needed for this website. I was able to map out all the options that would be displayed, as well as the general choices for users.
testing & iterations
Mid-fidelity wireframes
While taking my designs to a higher level, I made sure to think about what would make for the best user experience. I was able to picture what the overall hierarchy and geometry of the website would look like, which was very useful while designing the high-fidelity prototype later on.
goal
Test the usability of wireframes, see if users are able to understand what each page is for
Observe and see if any of the content could be improved or changed in any way
tasks
Walk through the wireframes, have users notify me of any confusion
Landing page to Pickup Order flow
Confirm usability of each page
test
9% missclicks
100% completion rate
Users were able to understand what each page was for and how to navigate them
The design
High fidelity prototype
While creating my final designs for this project, I thought a lot about the user and their expectations when browsing a website for cookies. I wanted to emphasize the warm feeling that Crumbles offers, while still creating a smooth and seamless user experience.
the menu
While creating the menu portion of the website, I had to think of ways to keep things straightforward and organized. This was quite challenging, as it felt like the Crumbles menu was never ending. As shown below, the previous menu was quite jumbled and overloaded with information. Regardless of this, I was able to find a solution that wouldn’t overwhelm the user.
Before
After
ordering
Ordering ahead seemed to be one of Crumbles’ main priorities. I wanted to approach it in a way that users would be able to understand easily. I looked back at the research I did prior to designing and saw that the key point was usability and reliability for users. With that in mind, I designed these screens to try and emphasize the simplicity of the flow.
onboarding
Since making an account wasn’t the main call to action for Crumbles, I kept it short and sweet. The process is simple enough for users to follow through with no hassle, creating a user experience that flows well.
test
User testing
I tested the final designs with 5 people, having them comment on anything they felt the need to while walking through the prototype. The testing of these screens allowed me to gain insight on what improvements I could make, and how I can elevate the user experience. I had the users walk through 3 task flows: Onboarding, Browsing the Menu, and Ordering for Pickup. The feedback I received during this process was extremely beneficial, allowing me to look at the wireframes through a different lens.
RESUlts
All tasks had a 100% completion rate
Most users were able to complete the task flows with no help needed.
Users wanted to go back in the Menu section
“I like how simple it is to place an order, it’s clean and straight to the point.”
“I like the layout of the menus, they’re easy to read and digest.”
“I like how the pricing is at the top, that’s usually what i look for.”
reflection
next steps
This project was a very good stepping stone in my design journey. I learned how to work around an already-established business goal and brand, while elevating their features and contents. I plan on further improving my designs in this project, as well as testing to make sure it stays user-friendly. Crumbles taught me many things, but I truly learned the game of iterating and testing, and how a design project is never fully finished.
What i learned
During this project, I was able to not only value the user/customer, but also the company’s original mission statement and goal: everyone is welcome. Especially with Crumbles being a local business in my small town, I believe I was truly able to understand and empathize with the user. Crumbles also taught me that the user experience is never limited, and it lets everyone in.