SCOOPS
An end-to-end ice cream ordering app providing an easy and fast checkout process as well as customizable ordering so that everyone can enjoy their favorite flavor.
Role
UX/UI Designer
UX Researcher
Mobile Responsive Brand Designer
Tools
Figma, Figjam,
Optimal Workshop,
Discord
Project Type
End-to-End Responsive
Mobile Application (IOS)
Time Frame
3 weeks
(110 hours)
OVERVIEW
BACKGROUND
CONTEXT
What could be more convenient than having your food ready for pickup or better yet, have your food delivered directly to your doorstep? Convenience is key, but most people aren’t satisfied when it comes to ordering ice cream virtually. Melted ice cream is worthless and what’s the point of ordering a flavor that you’re not even excited about? With so few options, (especially for people with dietary restrictions,) hidden delivery fees, and inventory issues, ordering food, in particular, ice cream, isn’t as simple as just a click of the mouse.
PROBLEM STATEMENT
People who enjoy ice cream want to be able to choose from a large variety of flavors while also having the option of customizing their own, order from an up-to-date menu, and trust in the frozen delivery process. However, ice cream deliveries often come melted, have high delivery costs, sneaky hidden fees, and lackluster flavor lists.
SOLUTION
Providing an accessible and easy ordering system which allows users to customize and create their own flavor based on personal dietary restrictions as well as ensuring frozen delivery, will give ice cream lovers confidence that their favorite dessert will be delivered frozen. Scoops is an ice cream shop ordering app that provides its customers with the ability to customize their own flavor and dietary preference, customize their ice cream’s label, order ahead for pick-up to skip the line, and/or order for delivery all while gaining rewards points with every purchase.
EMPATHIZE
RESEARCH
I wanted to understand the habits, motivations, pain points, and goals of people who buy ice cream in-person and order food/ice cream virtually while also learning more about the hardships they face with frozen food delivery. To uncover these goals, I employed 2 distinct research methodologies.
1. COMPETITOR ANALYSIS
Key similarities:
All companies have an account login for users/returning customers
All companies provide store locations
Most food ordering services features a rewards system
All companies do not offer nationwide shipping or personalization of packaging
Key differences:
Some competitor companies offer delivery services
Some competitor companies offer personalized flavor creations
Some competitor companies offer multiple food items (not just restricted to one thing)
2. USER INTERVIEWS
I conducted 6 user interviews with participants ranging from 33-40 years old. All participants enjoy eating ice cream. 1 participant identified as vegan. Through Affinity Mapping, I was able to find common themes:
Obstacles with flavor options — Flavor options are limited, especially those with dietary restrictions (vegans)
People want to customize their ice cream — Participants want to be able to construct, create, and name their own ice cream flavor
The importance of a reward/loyalty program — Due to limited phone storage, people need an incentive to download a new app and are motivated to buy more with special perks
Ice cream delivery issues — Participants don’t trust that ice cream delivery will stay frozen and worry about wrong flavors being delivered
DEFINE
WHO IS OUR USER?
I synthesized the insights gained in the interviews to create representative personas to humanize the user and to guide later design decisions. My research led me to identify three user personas: Veronica, ‘the vegan’, and Oliver, ‘always ordering pickup/delivery,’ and Lisa, ‘the loyal customer.’
Creating these specific personas allowed me to eliminate any personal bias I may have had initially started with. The most crucial things for these users were rooted in their personal and social needs which include customizing ice cream flavors, trust in frozen delivery, and being able to view and understand a current menu with ease. Their motivations also helped me identify them as separate user categories.
EMPATHY MAPS
Based off of my primary research, I was able to dive deeper into my user personas and map out what my personas say, think, do and feel when ordering ice cream online.
STORYBOARDING
Storyboarding was beneficial for me to understand the user more deeply, their pain points, and to explore possible solutions to ultimately demonstrate the user goals. Here is 1 of the 3 storyboards I created based off my user personas:
IDENTIFYING THE PROBLEM & DEVELOPING SOLUTIONS
Once I was able to determine user goals, motivations, and current pain points, I not only found a problem through Point of View Statements, but also turned it into How Might We...? questions to then solve for a solution.
INFORMATION ARCHITECTURE: CARD SORT
To get a better sense of how online food customers categorize and organize topics related to food/ice cream ordering, I ran a card sort where I created 39 different cards with 7 predetermined categories. I then asked 10 participants to sort the cards into the categories that made the most sense to them, or even create a new category if they felt that was best. The insights drawn from this exercise informed the early conception of the sites information architecture.
Key Takeaways:
No new categories were created — participants felt that there was a place for each card within the given categories
The topic of Gift Cards and Rewards are hard to categorize and I will need to make labels clearer
Participants categorized cards similarly
TREE TEST
To get a better sense of how users navigate an ice cream app when given specific tasks to complete, I ran a tree test where I created 6 different tasks to test the find-ability of topics within the app. I then asked 6 participants to navigate in a way that made the most sense to them. Along with the card sort, the insights drawn from this exercise informed the early conception of the sites information architecture.
Key Takeaways:
Participants (even the ones that had direct success) found the task of booking an event to be challenging and didn’t feel that ‘Events’ should be nested under ‘Offers’
Not having a vegan filter or option to click/tap on when the task mentions a vegan restriction can be confusing to users
Participants went straight to ‘Account’ when tasked with checking the status of their Reward Points rather than going to ‘Offers.’ This shows me that people are used to finding their rewards within their account settings and that I may need to shift my sitemap to create an easier way for users to find that feature quickly and efficiently
IDEATE
STRATEGY
SITE MAP
With a provisional blueprint of the site’s AI, I created a site map to visualize how the site’s content might be organized and structured. Creating user personas, storyboards, POVs & HMW’s, conducting a card sort and developing a feature set with project goals in mind, allowed me to outline the site structure for the site’s MVP.
USER FLOWS
To help visualize the decision points and potential pathways that users may take in order to complete functions within the product, I created a user flow centered around buying an ice cream cake for delivery using rewards points.
The first white box, the user must decide between pickup or delivery in this user interaction
The path/flow I am displaying is specific to the user choosing delivery
In the second to last tangerine box, the user will add their item to their cart
TASK FLOWS
To focus on each specific task, I created task flows to focus on one singular path. From my user flows, I created 8 task flows. The 2 task flows shown below are as follows:
Add payment details to account
Order for delivery
LOW FIDELITY WIREFRAMES
Once I identified the key pages I was designing for, I took pen to paper to sketch out different possibilities of site design to then translate into wireframes.
Sketching allowed me to quickly design and craft a variety of options for certain screens
Through user research, I discovered that although users order food delivery on mobile a majority of the time, they also use a tablet to access a larger screen/menu which led me to sketch screens for both mobile and tablet
The mobile frames below are different iterations of possible home screens. I designed a handful of different versions to test on users to see which was the most user friendly before moving to mid fidelity
The tablet screens below are different screens to test how easy/complicated users felt booking a children’s party would be
Testing low fidelity wireframes helped me decide on which screens to move forward with into wireframes and which screens to continue iterating
DESIGN
IU DESIGN
MID FIDELITY WIREFLOWS
After running a usability test on my sketches, I digitized to mid fidelity wireframes to ensure that the product was structured in a way to support and facilitate user goals before committing to high fidelity and to leave room for flexibility in my design.
After creating all of my mid-fidelity wireframes, I then organized them into a wireflow to help stakeholders understand the user experience. While designing the wireframes, I kept the following considerations in mind based on my research findings and usability tests:
Since it was important for a majority of interviewees to receive rewards with purchases, I made sure to make rewards as convenient and accessible as possible by providing a main page dedicated to rewards and weekly specials which can be accessed quickly in the bottom navigation
Usability test participants liked the idea of customizing their own flavor and knew it would be easier to navigate once images were in place
LOGO, COLOR PALETTE, TYPOGRAPHY & UI KIT
With the name Scoops, customers are able to connect to the product without any background information necessary. Without any background or skillset in graphic design and with scalability in mind, I played around with different designs and logos all of which consisted of scoops of ice cream. As far as the Wordmark, I wanted the logo to be playful and fun, almost as though a child wrote it and colored the letters a little outside of the lines.
Having established the basic architecture of the site, I began to explore the different ways in which Scoops could look aesthetically. Aiming for a sweet, tasty, inviting, and fun style, I chose a pastel color palette, distinctive enough to express the brands attributes, while understated enough to play a supporting role to the content. These traits are echoed in both typography and iconography.
HIGH FIDELITY PROTOTYPES
With the color palette, typography and icon set created, the mid-fidelity wireframes evolved into high-fidelity prototypes.
TEST & ITERATE
INTERACTION DESIGN
USABILITY TESTING
Once I had my high fidelity mockup of the site, I recruited 5 participants to test my prototype made in Figma. My goal was to see if users could successfully complete 4 task flows to test the ease and usability of the product. All 5 users that participated in this moderated test are ice cream lovers and semi-regularly order food for pickup/delivery in-app. Their tasks:
Create an account and add payment details (mobile)
Customize an ice cream and its label for pickup (mobile)
Order a vegan ice cream cake for delivery to your friend who lives in Chicago and pay with reward points (mobile)
Book your child’s birthday party at a Scoop’s location in Ann Arbor (tablet)
Findings:
All participants were able to complete their tasks, however, ease could be improved.
IMPROVEMENTS/ITERATIONS
I prioritized my feedback to make changes to my designs based on usability tests and standard design practices.
Customizing ice cream adjustments:
Since my previous screen only offers the option of dairy or Non Dairy/Vegan as one unit, it was confusing for participants to see it separated into different tabs. To stay consistent and to maximize clarity, I clumped Non Dairy/Vegan together.
For best design practices and to create a more user-friendly and accessible app, I added a drop shadow around each of the ice cream flavor containers. To keep my app consistent, I added a drop-shadow effect onto all of my containers on other screens as well.
To make it easier for users to view their rewards points, I changed the bottom navigation from OFFERS to REWARDS to make the app more easier to navigate
Pickup/Delivery ordering adjustments:
Because my usability test results showed that users are more likely to begin the ordering process prior to setting their pickup or delivery address, I not only redesigned the flow of my prototype to meet the users priority of actions, but I also made changes to my design to reflect standard design practices. In readjusting the steps for pickup/delivery, I also added a ‘Pickup/Delivery’ toggle under the map so that users can switch between the two easily.
It wasn’t clear that the black dot on the map represented the closed store location, so I changed it to a grey dot to match the color of the ‘Closed’ button. I also added a smaller bright pink dot so the user can get a sense of where they are on the map in relation to the shops.
Ice cream cake delivery adjustments:
Per industry standards, I changed the dropdown to radio buttons to make it easier for users to see and choose their options.
Due to some confusion about where the optional cake message would physically go, I added more of a description to eliminate any questions regarding placement.
FINALIZED DESIGN
After iterating on my designs based on user feedback, I found that ease and accessibility were greatly improved.
The 3 flows that I created for my mobile MVP:
Create an account and add payment details
Customize an ice cream and its label for pickup
Order a vegan ice cream cake for delivery to a friend who lives in Chicago by paying with reward points
The 1 flow that I designed for my tablet MVP:
Sign into your account to book your child’s birthday party at a Scoop’s location in Ann Arbor
(Party details include 8 children, 3 adults, party date: June 23 at 1pm)
REFLECT
FINAL THOUGHTS
CONCLUSION
Going in without having a true vision for this project ultimately played in my favor because I went in with no assumptions. I truly allowed my user research to guide and influence my designs. I relied on the UX process for this project, taking each deliverable one step at a time and not envisioning an end product, but rather building on each step along the way. As with every project, user research played a huge role, and with this product in particular, my primary research influenced my branding when it came to color palette and brand identity.
LESSONS LEARNED
When conducting usability tests, there was one main issue that users were hitting in my prototype: the majority of users tried to order ice cream/ice cream cake before setting their pickup/delivery address/preference. The way my prototype was set up, the user had to first click on pickup and delivery, but after user testing, I restructured how my app would function, allowing users to click order (or ‘Menu’) and then be re-routed to the pickup/delivery option. I specifically chose this way to restructure the pickup/delivery functionality based off of other food delivery apps like Chipotle, Uber Eats, Postmates, etc.
My main takeaway from working on this project and going through user testing was reorganizing and redesigning the app to fit the users priority of actions. Because users wanted to order first, I iterated on my original prototype to make it an easier and simpler experience for the user.