Cofneed is a solo project to ease my frustration about the perfect coffee shop in the moment.
My role
User research and analysis
UX design development
Wireframing and prototyping
UI high-fidelity design
User testing and re-iteration
Not again!
Coffee shop go-er like me particularly enjoy the relaxing atmosphere of coffee shops with nice food and drink. However, every rose has a thorn. It could be a frustrating journey hunting for a coffee shop with available seats, wifi, or just the expected interior of the shop as advertised. And that is when I wondered how I could enhance the overall in-store experience.
Problem statement
Solution
Real-time shop traffic and sharing platform
Features
Coffee shop search with real-time shop traffic display
Share your first-hand in-store experience with other customers
The charm of a coffee shop
I started off with exploring the secret success formula of coffee shops through articles and realized:
Secondary research
“…coffee shop offers so much more beyond that, making it a truly unique location.”
It is its calm and relaxing environment, flexibility and openness with privacy keeps our hearts.
You know how it feels
User interviews
I interviewed five regular coffee shop go-ers to understand their purposes and frustrations when they visit coffee shops. By filtering all the information with affinity map and user journeys, I figured:
Purposes of visiting coffee shops
To enjoy food and drink and relax
To take trendy photos at the shop or of the popular food and drinks
To work individually or with others
Challenges and expectation
They are frustrated to find out the shop is crowded or there is a long waiting queue as they arrive.
The actual interior design or food and drinks do not meet the expectations shown by its official webpage.
They found the pictures taken by other customers are more trustworthy.
Mark the target users and pain points
Creating empathy maps and personas help strengthen the identification of users’ pain points and understand the needs of the targeted user in order to develop the minimum viable product (MVP) of this project.
Empathy maps
Personas & enhanced problem statement
Personas
From there, I consolidate a major problem statement to be focused on this particular project:
How might we help customers to create a sense of trust and set better expectations towards their experience at the coffee shop before walking in?
Draft and test the basic
With the red route sketches of the critical flows, I did a guerilla user testing to test users’ initial experiences towards the basic usability and functionality of the app. I successfully invited users aged between 20 and 35 to complete tasks assigned with a few minor issues that I noted for further development.
Tap area should include both icon and text captions as users tend to tap around them.
Clear directional icons can be used with animation to provide better guidance to new users.
I then moved on to create low-fidelity wireframes in grayscale to lay down the foundations of the app layout.
Red route sketches and lo-fi wireframe
Make it nice then refine!
Usability testing was run with my hi-fidelity prototype with targeted users based on these objectives:
Uncover usability problems in the overall user flow of the app to strengthen its functionality.
Collect initial impressions of users towards the functionality of the app to strengthen its user experience.
Uncover usability problems of specific UI elements for further improvement.
Overall, two rounds of testing were done and several refinements were made and adjusted after each test.
Prototype and iteration
Final prototype
Style guide
Lesson learnt…
This was my first UX/UI design project. Throughout the process, it was interesting to see how different people have different preferences on things. One of the most important takeaways from the development of this prototype is that as a UX/UI designer, one has to carefully consider what kind of comments and suggestions should be implemented and what are the optimal ways to implement them. At the end of the day, you cannot please everyone. (And this is why persona is very helpful!)