Coffee Club Mobile App UX/UI
Problem Statement
How do we create a mobile app to house a coffee subscription service?
This project went to market and is currently available to download
︎ iOS App Download
Context
Northern Vessel is a coffee shop in Des Moines that seeks to utilize technology and innovative business models to provide a better coffee experience for the customer. One of those innovative business models that Northern Vessel has implemented is a subscription model called Coffee Club. I was tasked with leading a team to research, design, test, develop, and eventually market an app that houses the subscription service.
This project was undertaken in just 5 months in conjunction with the opening of Northern Vessel’s first brick and mortar location, and therefore was subject to considerable budget and time constraints. My goal was to lead the team to the successful launch of a mobile app that met the needs of both the customer and the business.
My Roles
UX/UI Designer
Brand Designer
Copywriter
Photographer
I Worked With
3 Stakeholders (Business owner, UX Consultant, Developer)
30 In-person Test Users
Project Duration
5 months
User Goals
- Easily create a Northern Vessel account
-
Understand what a Coffee Club subscription is
-
Subscribe to Coffee Club easily
- Cancel a Coffee Club subscription easily
Business Goals
- Educate users on the benefits of a Coffee Club Subscription
-
Increase Northern Vessel account creations
-
Increase Coffee Club subscribers
- Retain Coffee Club subscribers
Research
- Competitive analysis of reputable coffee subscription/ordering mobile apps
Surveys
- Ran 2 surveys on Instagram to Northern Vessel’s followers to gauge interest in subscription service/mobile app
Wireframing, Prototyping, and User Testing
I conducted one round of wireframing user flows and we created three functional prototypes of the mobile app, along with two rounds of usability testing.
Initial progress was slow, as the subscription model itself was also under development and subject to scrutiny/revision during the two rounds of usability testing that we did. Because of the duality of developing the UX and the subscription model simultaneously, balancing stakeholder input, user goals, and business goals was absolutely crucial in this stage of the project.
Initial progress was slow, as the subscription model itself was also under development and subject to scrutiny/revision during the two rounds of usability testing that we did. Because of the duality of developing the UX and the subscription model simultaneously, balancing stakeholder input, user goals, and business goals was absolutely crucial in this stage of the project.
Wireframing/Low Fidelity User Flow and Prototype
Initial Wireframing
Initial User Flow Prototype
First User Test
Typical startup stuff ︎
Mid Fidelity User Flow and Prototype
Second User Test
We rented out a coworking space and ran multiple user tests of the mid fidelity prototype for creating an account,
understanding the subscription, creating a subscription, canceling a subscription, logging in and out of an account,
deleting an account, as well as tested intentional crashes. We had iOS and Android test users present.
User Feedback Examples
High Fidelity User Flow and Prototype
After the two user tests, we arrived at a high fidelity prototype that was developed and went to market for iOS and Android.
Mobile App 1.0 Launch, Revision, and 2.0 Launch
Coffee Club 1.0 Launch
Despite a rushed development timeline, the mobile app went to market.
Coffee Club 2.0 Launch
After several months and with a newly revised and solidified subscription model, Coffee Club 2.0 was launched.
With a significantly simplified user flow representing a refined business model, this relaunch resulted in a 1,860% increase in Coffee Club subscriptions.
With a significantly simplified user flow representing a refined business model, this relaunch resulted in a 1,860% increase in Coffee Club subscriptions.
Cognitive Load
Another marked difference between the 1.0 and 2.0 versions of the mobile app was the main infographic, which contained the sales copy for the subscription. As the subscription model was simplified, so was the sales copy, contributing to a significant decrease in cognitive load for the user.
1.0
2.0
What I Learned
- Communication between the developer and the other stakeholders was likely one of the most important factors in this process
- Finding the right developer to work under the budget and time constraints present was crucial, and he absolutely nailed it!
- Submitting the app to the Apple App Store was a very fast process, while submitting to Google Play Store was much slower, about a week delayed (the app is no longer available on the Google Play Store)
- Since the subscription model was being developed alongside the user flow and experience, this presented complications that ultimately led to a rushed launch
- The mobile app could have benefited immensely from one more round of usability testing before the first launch
- This project would have benefited from more research and development of the business model before beginning the UX process
- Spending more time initially on researching user behaviors within the context of subscriptions would have saved valuable time and budget
Key Takeaways
- Users were far more likely to initiate a subscription if the button to cancel was as visible/easy to find as the “subscribe” button (nobody likes to feel trapped)
- One major benefit to the business due to a minor feature of the mobile app is a user base that now receives push notifications directly to their phone - this may be more effective than social media or email for short bursts of information - which none of the stakeholders anticipated