Visit AppStore
Client : Couvee
Year : 2019-2020 (still in development)
Couvee is a rising coffee brand in Indonesia. It’s modern, young, and always innovating new tastes for their loyal customers. In 2017 they open their first store in Yogyakarta, Indonesia, and by 2019 they’ve been expanded to 4 stores in Yogyakarta and 1 store in Jakarta. The customer mostly is millennials, who enjoys getting a quick and tasteful coffee that they can bring anywhere.
Goals
The main goal is to increase the engagement of the customer with Couvee and also maintaining customer loyalty. Hence they want an app that can record points that the customer will get every purchase of Couvee’s product. A certain amount of collected points can be exchanged for merchandise or voucher. So the customer will have other motivations to purchase Couvee’s product besides its taste which is really good *i’m also a customer myself 🙂
The other strategy to gain more users is creating a referral system in the app. So when a new user registers using the referral code from a friend, that friend will get some points. This way user will help promote the app to their friends.
User & Audience
For making this app to work, there are 3 sides to the app/platform. And every platform has its own user:
- Customer. The main user is Couvee’s customer, both new and loyal customers.
- Barista. Barista will have their own app to do confirmation of purchasing and merchandise/voucher redemption.
- Administrator. The administrator will use the website dashboard for managing the content of the app, vouchers, and merchandise availability.
Role & Responsibility
My role here is as the main designer, in fact, the only designer. So i handle all the designer job.
- Gathering requirements from the client by meeting and interview.
- Helping to define the user flows
- Creating sitemap, wireframe, and mockup.
- Presenting the wireframe and final mockup to the clients.
Scope & Constraints
As i mentioned earlier that this app will have 3 sides : customer, barista, and the administrator. And these are the scope on each side.
Customer App Scope
- Collect points by scanning barcode and input the total purchase.
- Redeem points with merchandise or vouchers.
- See the total amount of points.
- See the list of available merchandise/vouchers.
- See the history of points : added points, deducted points, time, and the outlet.
Barista App Scope
- Generate barcode so customer can scan it to collect points.
- Scan barcode from customer app to help them redeem their points.
Administrator Dashboard Scope
- Managing outlets : name of the outlet, photo of the outlet, and location (Gmaps link).
- Managing merchandise : name, image, description, price in points, and availability.
- Managing voucher : name, description, availability, how to use, terms and condition.
- See customer transaction detail.
- Managing barista accounts.
- Can be tracked who uses the admin.
Constraints
It’s a small team, only me as designer and 1 app developer, so we didn’t have resources to do the proper research with the real users : customer and barsita. To tackle this problem, when we were meeting with the stakeholders, including the owners, we position ourselves as the customer because we also often purchase coffee in coffee shops, so at least we know how it feels and how the flow would be. And we already checked the user flow using wireframe that i made.
Process
Gathering Requirement
I had a kickoff meeting with the stakeholders to gather the requirement for the app. Discussing the goal, the scope, and the user flow.
Sitemap
There are two sitemaps. Sitemap for the customer app, and sitemap for barista app.
Then i create diagram for each use case.
Earning Point – User Case
Redeeming Merchandise – Use Case
Redeeming Voucher – Use Case
Inspiration
The client gave me some of the competitor’s app for my reference.
Then i drew some inspiration myself, mostly from dribbble and also from existing apps that i know.
I know some of you maybe don’t like dribbble as inspiration, but for me it’s fine because i know how to make a good and usable product with all the theories i’ve learned, then i combine it with aesthetic aspect that i got from dribbble.
Wireframe
These are the wireframe i createed from the above requirements.
Onboarding, Login, & Resgiter.
Customer app wireframe.
Barista app wireframe
Wireframe Revision / Design Decision
Homescreen
On the original wireframe of the homescreen there was also a scan button at the bottom. I thought it will be useful because that’s the main purpose on this screen but when i present it to the stakeholders they confused. Why there are 2 buttons to scan? do they have the same result? And we decided to remove the bottom one.
The other revision on homescreen is i removed the Merchandise and Voucher cards. This revision was from myself because i think it would simplify the UI.
Merchandise screen
On the first version of the merchandise screen, it directly shows all of the available merchandise. Then on the revised version, it shows the outlet location first, then shows what merchandise that available on that outlet.
The reason behind this revision is, for example, there is a customer who wants to redeem 2 T-shirts in Kaliurang outlet but in Kaliurang outlet there is only 1 T-shirt available, this would cause a problem.
To tackle this problem, i changed the flow. So the user picks which outlet they want, then it shows what merchandise that available in that outlet and also shows each availability of the merchandise.
The other reason is the user would prefer to redeem their points with merchandise based on the nearest location, so picking the outlet first seems natural to the user.
Mockup
After revisions on the wireframe and the content are fixed, i proceed to the mockup phase. This app project was went after the Couvee Website Project is done. So i just need to copy the look and feel, colors, and other elements from existing website that i also created before.
Onboarding, Login, and Register.
Customer app mockup
Barista app mockup
Design Decision
I give a lot of space on the logo area, the purpose of it is to increase Couvee brand awareness. Everytime user open the app they will see the logo, this will affect their likeness to the brand.
I only make 1 prominent button on this screen, which is the main goal of this screen, adding point “Tambah Point”.
I also add a greeting element at the top to get friendly feeling with the customers.
Result
The design phase is done, and now the development phase is still in the progress. I will update whenever the app is launched on AppleStore.
The app is still in development process. I will update it whenever it lunched to Applestore.
