Cloosiv
Overview: Cloosiv is a mobile ordering experience for smaller coffee shops, aggregating many indie shops into one app.
Type: Mobile App
Collaborators: Grace Attanasio, Mikey Abela, Jeremy Roth-Rose
To view this project as a PDF click here
Pre-Design Considerations…
Before we could start designing, we wanted to consider the implications of our interface. One of the main aspects of these implications that we discussed were the direct and indirect impacts of our designs.
Directly Impacted Users:
● Customers using the app to order items.
● Workers and employees of the shops (must view/accept orders on the app).
Indirectly Impacted Users:
● Customers at the shops who did not use Cloosiv to order.
● Suppliers to the shops.
How are these groups affected?
● The customers using the app to order will experience greater ease and efficiency in their coffee ordering routine. They may also, however, have a less human experience.
● Workers and employees of the shops will also have a less human experience, and will most likely have more orders to complete. Plus, they may receive a new customer base, as their shop receives more exposure
. ● Customers without the app may experience longer wait times, as more online customers place orders ahead.
With these thoughts in mind we came up with these questions…
How can we make the Cloosiv experience personalized, like a real, in-person barista ordering experience?
Can we somehow make the Cloosiv experience accessible to those without phones?
Can we make the app cash-friendly, for users without debit/credit cards?
How can we design for a visually accessible interface (easy readable with clearly identifiable clickable buttons) so that users with impaired eyesight can easily perform their desired tasks?
Can we ensure that the app provides equal exposure to all registered shops?
It’s wireframing time!
This is one example of the wireframes we did. You can see the flow between initially opening up the app to ordering a drink through express order. This allows the user to efficiently order an item.
Having completed these wireframes, we sought to combine their best elements in a high-fi mockup.
We then designed the prototype…
Click Here to see prototype on Figma
Click Here to see prototype on Figma
Design Thoughts
Each group member made their own series of wireframes focused on a specific theme, i.e. location, personalization, drink options, store-orientation. While these were functional for an advanced and quick-learning user, certain functions were compromised in each wireframe. We focused on integrating these different optimizations for our high-fidelity designs.
After our critique session, we received feedback that the reorder feature should be above the nearby feature. We changed the layout based on this critique and the re-order is on top. We also decluttered the home page. Both of these changes allow the focus to be on the personal quick reorder feature
We decided to have the homepage focused on a quick reorder feature and an explore nearby feature which caters to new and returning users. Because Cloosiv values bringing independent coffee shops and customers closer together, each store’s page has a brief description that includes the store’s history and its unique features, creating a casual and intimate experience between the user and the store. Customization and favorite options also increase personalization, making it feel more human.
User Testing
We used Usertesting.com to gather user experience information.
Hypothesis: Users will spend the most time navigating to the proper menu page, as the home page has the most information and the most freedom of choice for the user. Actions that the user may complete by clicking one of the clear, outlined, blue buttons will be the fastest to complete.
Task: Imagine it is the morning. You want to get coffee before work/class. Use Cloosiv to order a 16oz Char-Latté from Cup o’ Jo.
Sub-Task: Navigate to the menu page for Cup o’ Joe from the home page. Select the Char-Latte and customize the size to 16 oz. Add a Char-Latté to your “favorites.” Place the order.
Post Testing Questions:
1. How easy/difficult was it for you to identify which coffee shop to click and then which subsequent drink order to place? Did the user flow make sense?
2. Were there any components to the interface that felt extraneous? Are there any components that you felt were missing?
3. Was it clear how to achieve your goal of ordering the coffee?
4. Were there any interface elements that appeared as though they should have been clickable and were not?
Here are the results…
Conclusion
The most surprising result was that most errors occurred and the most time was spent on task 3, which was an action that required the users to only click a clear, blue button. The mistakes made on this task were primarily execution failures, where users were seeking to add to favorites in the incorrect location, or were repeating actions to see if they could add to favorites elsewhere.
Task 1 took less time than expected, but was still the second highest, and incurred both mistakes and lapses. One user failed to complete this task (they skipped to the place order page by clicking a quick reorder option), which meant they could not complete the customization task as well. The fact that the first and second tasks had such a similar average time is surprising, as the second task requires only pressing clearly outlined blue buttons.
Users were most satisfied when they found where to add an item to favorites, as this was difficult for ⅔ users. One user noted specifically appreciating “double verification” - ie when a button turns yellow to confirm that the user pressed it (which happened at the end of tasks 2 and 3). Finally, users seemed to be fairly satisfied at the end of the entire task, and appreciated the countdown clock being their final screen.
