A low fidelity clickable prototype of an app for members of a co-working roasting space
to book co-working sessions and reserve seats in events.
My client was a local coffee roastery that will expand to be a co-working roasting space post-pandemic for hobbyists and professional roasters alike.
Members of the space will need a quick and easy way to access their membership benefits, in particular scheduling time with the two on-site roasters and reserving seats in networking and workshop events.
I presented my client with an MVP low-fidelity clickable prototype that would allow members quick and easy access to:
My client had already created three separate membership tiers with different levels of benefits based on his market analysis.
Small batches
Occasional roasting
30 minute time slots
Sample roaster (smaller)
Lawrence
31 years old
Accountant
St. Louis, MO
MOTIVATIONS
Experimenting with different roasting styles and bean origins
FRUSTRATIONS
Roasters take up a lot of space and money
10-25 lb batches
Semi-regular roasting
3 hour time slots
Production roaster
Dave
36 years old
Marketing Manager
St. Louis, MO
MOTIVATIONS
Start selling to a larger market than friends and family
FRUSTRATIONS
Limited time
25+ lb batches
Regular roasting
4 hour time slots
Production roaster
Matt
42 years old
Coffee Shop Owner
St. Louis, MO
MOTIVATIONS
Develop a signature coffee line for his cafe
FRUSTRATIONS
Roasters take up a lot of space and money
I selected Dave (the signature tier persona) as my primary user. Why?
With Dave in mind as the primary user, I built out a user flow focusing on minimizing the number of new screens he would have to interact with. As I started to sketch, however, I soon learned that…
In my first sketches, my intention was to bring users to a home page that would allow them to quickly see when roasters would be available.
Round 1 of home screen sketches: Crazy 8’s
It quickly became clear that this solution would not be ideal for Dave. The home screen was cluttered, and delivered far more information than Dave would need.
The lightbulb moment for me? I had used the wrong source material for inspiration.
I was looking at calendar apps for best practices, which are designed to allow users to schedule anything. I needed to look at the best practices of booking apps.
After two more rounds of crazy 8’s, I had enough material to start wireframing again.
Round 2 of home screen sketches: Crazy 8’s
Home Screen Round 2
Book a Session Form Round 2
View/Edit Bookings Round 2
Now this was more like it. With a few more rounds of feedback and tweaks to the layout to focus the design, I was ready to start prototyping.
I started with a quick paper prototype, to get a feel for how all of the major screens would work together. Once I had a handle on the overall flow, it was time to digitize my designs and get testing!
I created 3 “missions” for each of my usability testers through maze.design, each for a different feature of the app.
Mission 1: Book 2 Sessions
This task illuminated a couple issues:
33% of users altered the details of Session 1 before changing the number of sessions to 2 in the dropdown menu at the top of the screen.
Next Steps: A/B test two different flows: one that anticipates users will change the session 1 details first and one that anticipates changing the number of sessions first
At the end of the booking flow, users were unclear on how to leave because the most obvious button was the "Add to Calendar" one.
In the next iteration, I added a “Done” button underneath the “Add a Calendar” button to make the exit route clearer.
Mission 2: Reserve a seat in the January 17th Event
33% of users attempted to use the “Book a Session” form to reserve a seat in an event.
Next Steps: Make the Event section on the home screen more prominent to draw user attention to the distinction between events and sessions
Mission 3: Discover what bookings you have made for January
Original wireframes of home screen and reservation form
Users were 100% successful at determining the date and time of their January booking. But, I noticed that one user attempted to scroll down on the “this month” tab.
In the next iteration, I had the “view/edit bookings” button auto-navigate to the “all upcoming” tab.
Think long and hard about exactly what function your app serves before looking for inspiration, lest you pick a source of inspiration that doesn’t illustrate best practices for your app’s functionality.
In going through 3 rounds of crazy 8’s, I managed to push past my first ideas and iterate rapidly. In the end, my project was better for the amount of time I put into examining many different possibilities up front.
Without my usability tests, I never would have uncovered some of the issues that my users illuminated for me. My testers were thorough and thoughtful in their feedback, and there’s no better gift than that.
How could I quickly and accurately provide users recommendations for local podcasts they would enjoy through a smart speaker?
How could I make logging food a fun experience for mothers with gestational diabetes?
What were the key usability issues of wono.io, a Russian e-commerce business expanding to include the U.S. market?
Interested in hearing more about my process? Want to hear about what I'm working on now?