DEVILLE COFFEE
Helping hungry regulars secure their lunch through a mobile app.
Role
Product Designer
Timeframe
Oct-Dec 2024
Skills
Mobile Design, User Research, Advanced Prototyping
TLDR
I designed a concept mobile app for Deville Coffee, positioning this product as a new business opportunity to drive a new engagement channel between the franchise and its growing fan base of loyal customers.
This case study outlines my research and design process behind my final solution. If you have further questions about this project, feel free to contact me.
100%
Positive User Reception
97 %
Task Success Rate during User Testing
1.2 X
Faster Task Completion Time than competitors
OVERVIEW
Discovering an opportunity to nurture a relationship with a growing fan base.
Deville Coffee, a Calgary-born franchise since 2008, has grown to 20+ locations across Alberta and BC.
My journey with Deville began as a part-time barista. I quickly noticed a gap: Despite a devoted customer base, there was no mobile app for customers to be reciprocated for their love. Due to competing priorities, Deville had previously shifted to taking web-based mobile orders at select locations.
"Does Deville Coffee have an app? I come here a lot and I would love to earn some rewards. It’s the only thing making me choose Starbucks over Deville!"
Deville Customer
Above: A sneak preview of the final designs.
My role as a solo product designer…
I conducted discovery and user interviews, to validate the problem space.
I then defined the challenge, created journey maps, iterated on designs and facilitated user testing to validate my solutions.
Constraints
Business needs and goals are better defined through extensive research and evaluation, internally.
I designed the product to align with the branding and messaging I gathered to the best of my ability but did not have access to an official brand guideline.
THE CHALLENGE
How can we improve the customer experience for loyal customers of Deville, fostering a deeper brand-customer relationship?
High-Level Goals that defined my design decisions
Unlock new opportunities to engage with customers
Make using a mobile app easy and valuable
Align customer retention with great user experience
I set the following Success Metrics to validate my solution
QUALITATIVE
User reception
Do they have the confidence they can achieve their goals through the solution?
User satisfaction
Does the product feel useful and address frustrations they may have experienced before?
QUANTITATIVE
Task Completion Rate
Does the product follow a natural flow of actions that leads users to complete tasks seamlessly?
Time Spent on Page
Is the process optimized and how does it compare to similar products?
Solution
User FAN-centric design for the the fans of Deville Coffee
The Deville mobile app includes comprehensive features so that Deville Coffee fans can enjoy a tailored experience that aligns with their needs and unique behaviours.
Deville's customers love their milk alternatives. And we have them all!
Here's Sarah ordering her go-to 160z, Chocolate Ganache Latte, oat milk, made extra hot with no foam.
80% of Deville's customers order the same thing every time.
Re-order with a touch of a button. By saving previous orders, app users have their customized drinks ready to go every time.
Deville's lunch options are great. Order ahead before they sell out... again…
In a rush? Order ahead to grab and go! Customers can also use mobile orders to secure food and pastries that sell out early to pick up when their ready.
It's what every Deville Fan has been waiting for… Loyalty and Rewards
Make sure your daily coffee goes towards…even more coffee! A Latte Card redeemable for Free Coffee awaits!
Of the features tested, they resulted in a 97% task success rate and 5/5 participants voiced that they would like to download the app if it were to be developed.
Keep scrolling to come along the exciting journey that led to the solution above! But, it is a lengthy read so feel free to skip to design for the fun part we all love ;)
Go to Designs
Discovery
Understanding the problem space by laying the groundwork through…
Assumptions Mapping
To discover the best solution for Deville and refrain from basing decisions on assumptions, I began by mapping them out and narrowing down assumptions to be tested through further research.
User Interviews
To uncover common pain points customers experience and gain insight into some of the assumptions above, I conducted 6 user interviews with Deville Coffee's regulars.
KEY INSIGHTS
Mobile ordering is a convenient feature in many food/ drink apps
"I use mobile ordering (for brands that offer an app) when I'm in a rush and it's convenient how I'm able to schedule a time for pick-up"
Rewards are inticing and motivate customers to download apps
"If I'm spending $7 on a coffee anyways I'd prefer to spend it where it'll go towards something extra"
Encountering poorly designed or inefficient apps causes frustrations
"It's usually faster to order in person than order through an app when there isn't a line, more complicated too"
Customers feel disappointed and frustrated when food is sold out
"Deville often sells out of wraps and pastries. It's a guessing game. I'm often disappointed to hear I can't have what I came for."
*Participants were recruited through a session conducted on-site.
Customers want to feel that their hard earned money is going the extra mile and if they are using an app it needs to make ordering easier not harder or time consuming.
Customer Journey Map
Now, with a clearer idea of what Deville's customers want in a mobile experience, I mapped out the customer's journey with regulars in mind, identifying the key features and design opportunities.
Deville's Customers appreciate the quality and taste Deville offers but find themselves compromising quality for a better deal.
Competitive Analysis
By analyzing the following competitors, I gauged which mobile experiences are considered top-of-the-game and where others have room to grow. I used the insights to inform me of existing solutions and recurring problems coffee mobile app users experience.
From a business perspective, Deville should focus on meeting all the criteria for a standout app experience. This will help them stand out against competitors.
Home Screen Anatomy
What do users want to achieve? By analyzing home screens of industry-leading products, I deconstructed the available actions on a home screen and pointed users in a comprehensive direction toward their goal.
📍 Business POV
Investing in a mobile app that lets customers preload funds can enhance customer loyalty, improve cash flow and provide a return on investment in just a few years.
Additionally, the app could encourage further revenue growth through increased average spending and promotions.
KEY TAKEAWAYS
Effective Mobile App Features
Making sure users can find what they came for and including features expected on to be available
Comprehensive Loyalty Program
Designing a program that is easy to understand, implement, and supports the brand's mission
Customers look for key features like customizing, mobile ordering and loyalty programs and businesses use mobile apps to increase customer retention, cash-flow and engage with customers.
My research revealed the following emerging patterns, validating my assumptions.
Addressed Assumption #1
Customers do not use mobile ordering apps to pass time. They have an objective and are looking to achieve their goals efficiently.
Emerging Pattern #1
Being able to order ahead is convenient, but Deville doesn't have that option and customers often make the trip to find out food is sold out.
Addressed Assumption #2
A mobile app will give the franchise a competitive advantage in the local market.
Emerging Pattern #2
Competitors use mobile apps to retain customers and build a positive relationship with customers by providing value and convenience.
Addressed Assumption #3
The most common use cases for a mobile ordering app is to
a) Make a mobile order for pickup
b) Earn and use rewards
Emerging Pattern #3
"I would love a Deville app to collect points, now that there are so many locations in Vancouver, I visit a lot more often."
From this I concluded…
Customers who visit Deville regularly want a Deville Mobile App to collect rewards and order ahead.
AND
By solving customer pain points, Deville has the opportunity to drive extra revenue and reward loyal customers, driving retention.
Ideation
Prioritizing key features and touchpoints that target the pain points Deville Customers face
Using ideas from an HMW brainstorming session, I outlined possible features and prioritized them, identifying must-haves for a mobile ordering app, nice to-haves (differentiators) and future implementations.
The user journey map depicts the actions of a regular at Deville, making an order on the app.
MAIN USER FLOW
I designed the main user flow with regular customers in mind, focusing on features that users will find helping and meaningful. Using my high level design goals as a guideline.
RETURNING (WITH AN ACCOUNT) USER FLOW
TESTING
How might we design an experience catered to Deville customers and their specific needs?
Based on the Main User Flow I designed a first iteration prototype focusing on the main features identified during ideation, tested this prototype and consolidated the feedback.
Each participant was given the same tasks as they were told to try their best to think out loud when making their decisions…
TESTING INSIGHTS
Item Cards should display information (description of item)
"I always like to see a description of the drink on the main page before I click into the drink. I find that it helps me decide quicker."
Participant #1
The process is straight-forward but can be as complicated as users want it to be
"I enjoy making very specific customizations and having the option to make personal customizations is great."
Participant #2
Users found scrolling through the menu before selecting a location
"I want to see if they have anything I would like before choosing a location."
Participant #3
Design
Using testing insights to support my design decisions, I designed a high-fidelity prototype
Here are a few notable explorations and decisions that resulted in positive feedback from users.
Informative Product Cards
While a clean and simple look can make it easier for users to scan, an informative product card makes it easier for users to make a quicker decision with less action.
Winners
Experiments
Providing users with an "out"
Placing an order is where most users experience a moment of hesitation.
Providing an "out", an option to review or edit their order without losing their progress so far, instills confidence in their purchase.
🚩 "Add to Bag" did not add the item to bag
"It wasn't until I went back and changed the quantity to 1 or more that the item was added to my order"
Participant #1
REVISED V3: Default quantity is set to 1
When users tap "Add to Bag", one item is added to their order. If they have selected a quantity, the selected amount is added.
Navigation, Icons and Messaging
I designed a custom set of navigation icons to align with the branding and goals of the product. Users were able to easily locate and extrapolate the content behind each page.
Winner
V3: Iconify icons are not cutting it. Custom icons were designed to better communicate and add personality.
Experiments
V1: The labels make sense but the icons don't feel like a coffee shop.
V2: Menu > Order - Users found being able to look through a menu is less pressure and feels more enjoyable. The Menu page was the most used.
Utilizing Local Variables to Edit Your Bag
By using variables to actively allow users to edit their bags, users found the experience to be practical and efficient.
Designing an app with no explicit guidelines was a challenge…
Especially without a team to discuss big decisions. I ran into multiple roadblocks and instances where I would have loved to work with a team to talk micro-interactions, explore more user flows, and clarify edge cases.
And while I couldn't cover everything in detail on my own, to navigate these obstacles, I sought guidance from design mentors, books, and videos.
This process helped me develop problem-solving skills and learn to ask the right questions to refine my designs.
Final Product
Not providing a clear value proposition and a lengthy onboarding process cause up to 50% initial drop-off rates. I validated my primary user flow to ensure users felt confident in their ability to use the app for their intended purpose.
100% of user testing participants said they felt confident finding their way to the check out screen and 97% of participants felt confident using key features including customization, re-ordering and adding rewards to cart.
Learnings and Takeaways
As a designer, I acknowledge a demand for a certain product doesn't always mean it's the right business decision. This project challenged me to include a business perspective and validate my assumptions. I wanted to keep the project as realistic as possible considering the objective of this project was to create a concept of an app for Deville Fans; Deville being a real business, and their fans, real people I interacted with regularly.
I also learned that identifying project constraints and success metrics early on in the process helped when it came to conducting user testing, figuring out exactly what I was looking out for and focusing less on criteria that were secondary to the goals. I learned that continuously recognizing areas of constraint throughout the process and measuring data and metrics to back up my design adds much more value to my work.
