UX/UI Case study : Kobi
As a UX/UI designer I decided to challenge an application I often use by reworking the main flow of it to put forward some core features in the app. I gave myself two days to come up with a prototype.
Context
What ?
Kobi is a cashback application that allows user to stack up a pot by buying online or in physical stores. Then, the pot can be spent for sport club licenses of sport material. The principle of Kobi is to promote sport by giving people freely practice their physical activity.
Who ?
Kobi’s users consist of 2 types :
- Private individuals who stack up their pot with their daily expenses
- Professionnals coming from companies having a partnership with Kobi to assign a sum of money to their employees. That sum is dedicated to expenses relative to sport practices. In this case, the employee will monthly/yearly receive a code from their company that has to be input in the app to stack up the pot.
Note: The pot is common for both type of users so a professionnal can also continue to stack it up with their daily expenses.
Where ?
The collected pot on Kobi application can be used either to buy a subscription to a sport license or to buy sport equipment.
How ?
There are three ways to stack up the pot :
- Receipt scan : User takes a picture of their receipt from a partner store to stack a small percentage up their pot (between 0.5% and 10%). This is the most used way to save money on the pot since users stack up from their daily buyings.
- Online buyings : User saves a percentage of their online orders in partner stores to their pot. This method is more rewarding than the receipt scan (between 4% and 15% depending on the partner).
- Gift cards : User buys a gift card for one of Kobi’s partner and stacks a percentage of it up their pot. This method provides the best percentages (up to 25%).
Problem
Since the different saving methods are hard to find and only the receipt scan is clearly displayed, how might we make the user access easily to the different pot stack up methods ?
My hypothesis
I spotted out some points that can be improved in the app’s architecture to highlight core features on the mainpage.
For instance, only one pot stack-up method is displayed on the homepage, that could confuse the user looking for other types of offers.
Also, the wording as a whole could be improved : move descriptions out of the buttons, reorganise actions below titles.
When it come to the navigation, the navbar is composed of the homepage, the pot and a menu to access settings and profile.
Meaning that, the Kobi’s partner’s offers are hidden inside a second navigation level. (button Partner brands). Then the user has now to tap filters, then to select the type of offers they want to sort out.
This hidden core feature can be a bit tricky to find and blocking for some users.
First iteration
In my first iteration, I chose to create a 4th navigation item : Our partners that leads to the current Partner brands page but on the l-0 level. Moreover, my goal was to make the 3 types of offers accessible from the homepage so that it’s not hidden inside filters anymore.
To do this, I separated the current buttons on the homepage under 3 distinct titles : How to stack-up, Your company pays your sport and Promotions. Under the first title are displayed buttons working as shortcuts to sort out the offers according to the current filters.
ex: I tap Buy a gift card button and I’m redirected to the offers section with the gift cards offers filter turned on.
But according to me, two issues remain :
- actions descriptions are still inside the buttons that make them very talkative and uselessly distracting to the user.
- Receipt scan opens the camera and is not working as a shortcut to filters as the two other buttons of the first section do. If the user wants to sort out the receipt scan offers, they need to manually go the the parnters screen and tick on the right filter. Meaning that, for the same kind of action (sorting out offers), we have two different level of naviagtion.
Second iteration
For my second iteration, I went back to the three itemed navbar and I split the offers’ sorting buttons in two :
- Stack-up often dedicated to the receipt scan, which provides the biggest amount of offers. With one main button Receipt scan which opens the camera as it currently is on the app, and a second button Look the offers which lead to a second level of naviagtion (l-1) to the partner brands list.
- “Stack-up more !” for the two other types of offer : gift cards and online shopping. In both cases, the button lead to a second level of navigation to the partner brands list.
The description of actions got removed from the buttons to lower the cognitive load inside each one. Instead, I described each category below the section title.
On the next user flow’s screen I kept the partner brand list and removed the current filter sorting feature to make the three stack-up methods more accessible. We now have 3 tabs, one for each type of offer.
We could still consider introducing a filter feature again to the app to sort out offers based on relevant criterias (type of store, percentage rate saved, promotions, physical proximity to the location for instance…)
My last concern while reviewing Kobi, was to make the gift card feature more clear. To do that, I decided to explain it inside a tutorial that would be displayed according to overlay rules (on the first app launch / on the first tap upon Buy a gift card). Then, the tappable View more under the CtA would display the tutorial on demand.
This 4 steps tutorial explains how instant the cash back is, how big the cashback rates are with this type of offer compared to the two others. Also, how simple it is to use a gift card in one of the many partner stores.
