Couve mobile app design

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.

Couvee’s barista

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.

Couvee outlet at Ahmad Dahlan street, Yogyakarta

User & Audience

For making this app to work, there are 3 sides to the app/platform. And every platform has its own user:

  1. Customer. The main user is Couvee’s customer, both new and loyal customers.
  2. Barista. Barista will have their own app to do confirmation of purchasing and merchandise/voucher redemption.
  3. Administrator. The administrator will use the website dashboard for managing the content of the app, vouchers, and merchandise availability.
Couvee customer

Role & Responsibility

My role here is as the main designer, in fact, the only designer. So i handle all the designer job.

  1. Gathering requirements from the client by meeting and interview.
  2. Helping to define the user flows
  3. Creating sitemap, wireframe, and mockup.
  4. Presenting the wireframe and final mockup to the clients.
Drinking couvee

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.

Customer app sitemap
Barista app sitemap

Then i create diagram for each use case.

Earning Point – User Case

Earning point use case diagram

Redeeming Merchandise – Use Case

Redeeming Mercandise use case diagram

Redeeming Voucher – Use Case

Redeem voucher use case

Inspiration

The client gave me some of the competitor’s app for my reference.

Competitor’s app

Then i drew some inspiration myself, mostly from dribbble and also from existing apps that i know.

Inspiration

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.

Onboarding, Login, & Resgiter.

Customer app wireframe.

Customer app wireframe

Barista app wireframe

Barista app wireframe

Wireframe Revision / Design Decision

Homescreen

Homescreen revision

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

Merchandise wireframe revision

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.

Couvee website

Onboarding, Login, and Register.

Onboarding, login, and register.

Customer app mockup

Customer app mockup

Barista app mockup

Barista app mockup

Design Decision
Homescreen

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.

Couvee on phone
Couvee app

The app is still in development process. I will update it whenever it lunched to Applestore.


Share this study case :

Share on facebook
Share on twitter
Share on telegram
Share on whatsapp

Get in touch

For business inquiry please send email to kukuhaldyanto@gmail.com