Loffee
Do you buy coffee every morning? Then you will definitely understand how painful it is to forget the physical stamp card.
Loffee will integrate stamps and provide a marketplace for people looking for coffeeshops and offers.
The main idea is provide an application where users can save the coffee shops they go frequently and have quick access to the stamp card for each coffee shop. The stamp will work through NFC allowing the user to have a similar experience to the real stamp card. The NFC device when put in close contact with the phone will generate a stamp action on the stamp card of the specific shop the users are in.
Overview
User interviews revealed that keeping an easy to access record of the coffee shops you go every day, can definitely make the user more willing to buy a coffee, being confident that he will always have the stamp card on his pocket.
All of the 6 users interviewed confirmed that if they forget to bring the stamp card, they are less willing to buy a coffee or a coffee with additional flavours because it costs more and is not contributing for the free coffee from the stamp card.
Besides that, 5 out of 6 users confirmed that if an app provides a possibility to have the stamp card online and also show potential offers from the coffee shops, will definitely impact the choice of which coffee shop they are going, due to the offer available.
User Interviews
To start off, we’ve created provisional personas of two potential users based on the interviews and online research. Taking into consideration all the personal information the users provided, we’ve managed to create two main personalities of users that will be interested on our product, and users that may be reluctant to new technologies.
Personas
Time to start sketching. We came up with several potential solutions to each of the pain points and made some rough UI sketches.
We did some preliminary validation on the wireframe sketches and used the feedback to refine the sketches and narrow down solutions for the first user testing phase.
Wireframes
Based on the job stories and the understanding of the core functions of the app, we developed a few scenarios with a series of tasks, such as:
- Find a coffee shop
- View coffee shop photos
- Add coffee shop as your favourite
- Open the stamp card of coffee shop
- Find offers available from a specific coffee shop
With the prototype fully clickable on Invision, we headed to a coffee shop close to the CBD, where we approached 4 individuals that bought coffee. We explained to them that we were working on a project and ask for 10–15 minutes of their time and gave them the scenarios with tasks to complete.
Through the results of the testing, we were able to identify the main user pain points of our product:
- 3 users didn’t manage to open the coffee shop’s offers
- 3 users didn’t know where to find their preferred coffee shops
- 2 users asked if there was a ‘how to use guide’
Taking all of those into consideration we managed to adapt those issues with different solutions and re-test the prototype with 5 other individuals on the following week, having them to execute the same tasks. The results were positive, all the users managed to complete the tasks successfully.
User Testing
Before starting the high-fidelity designs, we started to ideate and put together the face/branding of Loffee. Since the main idea of the product is to target people who buy coffee on a daily basis, the name Loffee was defined though merging the words Love + Coffee.
We opted to create a mug in form of a heart so we could use it on the name of the product and also as a separate icon. We were looking into achieving a clean design with a funny character representing how much people love to have a coffee. That’s why we’ve decided to picture this character as a hipster guy with sunglasses and a beard.
Branding
Changing a habit is painful, so it’s even more important to make it as easy and friction-less as possible for a user to use a new tool. And sometimes a change as small as enlarging a button or changing an icon can make a difference.
We decided to follow user-centered designs and lean UX Design Thinking process to make sure that all design decisions were supported by user research and feedbacks.
After the successful results of the testing phase, we jumped into Sketch to create Hi-Fi mockups of the proposed solutions and used Invision to create a clickable prototype. We again tested the prototype with 4 new individuals. Insights from the validation test led us to reiterate on one of the screens. Below are the Hi-Fi mockups of the final solutions.
Prototyping and Validation
