Redesigning an app that helps you split a bill — a UX case study
A redesign challenge of mobile app Akm to improve the user experience of splitting a bill at a restaurant between group of people.
Role: User Experience Design, User Research, Prototyping
Software: AdobeXD, Keynote, Photoshop
Duration of Project: 3 weeks
What is Akm app? A mobile app that helps people to deal with the existing pain points, related to splitting a bill between fellows who have a dinner at a restaurant. It should be like Google, which understands customers perfectly.
Addressing the Problem
The problem is that the app does not have enough customer base to attract restaurants, and vice versa. This, unfortunately, forms a chicken and an egg situation.
Design Objective The goal was to bring the unique, user friendly solutions to improve experience with bill spitting customer’s user experience while pay off for dinner by app. We also wanted to find opportunities to increase conversion, either through app downloads or bringing new customers to the promotional website. To do this, we must apply a user-centered design process.
User-Centered Design Process
1. RESEARCH
Competitive Analysis: Identifying the relationship between design ability and trust. My UX research was began by completing a competitive analysis to understand where Akm app fits in the market with its competitors. I looked at free and payed apps, to ones that offered zero customisation and others that offered big range of possibilities (likes, friends, social network, messaging). It was clear to see that more features and services did not mean a more trusting customer, cause some of them offered one function only, but are perceived as superior over others. This showed that simplicity and trust are very important to customers in the splitting checks process, more so than the amount of other additional features.
User Interviews: Gathering insights about users. The research also contained interviewing different people, dealing with paying check for dinner in a group in order to gain insight into their motivations and pain points. By organising polls and surveys in social media I interviewed a variety of users who have gone through the journey themselves, are currently looking for such kind of service and someone who even didn’t know about this type of apps. With these insights, we moved into the planning phase.
2. PLANNING
User Personas: Defining primary users
From the user interviews, I landed on 2 user personas:
Persona 2: Luc, current user of app, who has been using it and familiar with it. However, currently he is looking for another one, cause he get frustrated from the last experience. His main frustration is lack of possibility to pay customised sum for shared items, e.g. he didn’t drink wine, but by default system divided it evenly among participants of the bill, cause it was marked in the bill as shared item. His main motivation is to pay for his own entrees only and doesn’t like paying evenly especially for shared drinks, so he can type the sum he decided to pay.
Persona 2: Mary, she even hasn’t known about this type of apps. Every time she faces the splitting bill with friends situation, she doesn’t know how to deal with it cause she’s afraid to sound stingy and wants to avoid awkward situations. Also she either doesn’t want to give email to restaurant to get the bill, or to enter manually any details of the check. She expects simple and quick app, so she doesn’t need to think how to figure it out. Her main frustration is finding this kind of app very simple and intuitive to use.
Feature Prioritisation Based on Key Insights
Our team summarised our research and planning into 3 key user priorities. These laid the foundations for our design.
- Simplicity — Users want it to be easy and obvious to determine what the app do and how to interact with application.
- Flexibility/Customising — Users want possibility to pay customised sum for shared items as part of the experience.
- Popularisation — Users enjoy learning about app, so they are up to date.
At this point, it was clear to us that the customers’ needs and wants were not met by the current app.
This was when we made a decision to pivot re-designing the app and application website, due to the following reasons:
- Focus on mobile first — a responsive web app would allow users to browse the website from their mobile, a pattern validated by google analytics.
- No need to worry about bugs — there is less chance of a web app being affected by bugs than in a native app.
The app is what customers see first — ensuring customers have a pleasant experience with it can help to establish trust and credibility, to attract more customers.
3. DESIGN
Wireframe iterations based on testing
Moving into the design phase, I reminded myself of the key user needs from research and planning to design solutions to meet these. We also iterated based on testing results and produced 4 versions of wireframes.
Key user priority #1: Simplicity — Customers want to feel they can do all steps simply and quickly, definitely quicker than using calculator on the phone.
Design Solution:
- Clear and Concise — ‘What does the Akm app do?’, ‘How do I get started?’ were all important questions we wanted to address right away on the homepage.
- Visibility the best principle to giving users a clue — show steps on homepage by using signifiers.
- Emotional connection — customers joining app and seeing there already their friends’ names (from contact list of a phone) builds trust, as well as simplify all the process.
- To simplify — as research has shown an input of details of the bill is a cumbersome process. A bill uploads by scanning it with phone camera solve it.
Homepage wireframes
- Sharing now
Home page of the app shows list of active bill shares shared by your contacts at the moment, where you can contribute.
- Upload Bill
To simplify the process, it needs only scan the bill and let backend of the service to translate it into editable list of items.
- Bill Scanning.
When “Upload bill” button pressed, users will be moved to the page where phone camera scans the bill and automatically send it to the server.
- Retake a photo
There is always a possibility to retake a photo, if necessary App might ask that.
Clickable bill tab wireframes
Key user priority #2: Flexibility/Customisation — Users want more possibilities and flexibility ‘What to chose’, ‘How much to pay’, since layout is clickable call action becomes obvious.
Design Solution:
We wanted to provide an option of manual input when paying shared joint items — this is common industry practice, however, most have it as a separate section, sometimes hidden away. It was decided to supply customers with clear signifiers such as arrows or colour change of shared item.
- Bill uploaded The result of the bill translation is clickable interactive tab ready to be shared. Users can add additional item in case something has been missed.
- Share Bill
People from users’ phone contacts using the same app can see the shared bill and join the created session.
- Choosing paying items Items that users would like to pay for can be selected by simple tap. It is highlighted by a crossed line. At same time this information is available to other participants of the session. They literally see the same page.
- Shared courses/drinks In case of shared items, by short tap on them by default there is evenly divided cost of the item. Alternatively, in the little window users can enter amount they’d like to pay for it.
- Tips
Further down there is an option to add tips. By swiping a pink button to the right there will be shown numbers “1”, ”2”, “3” etc., which lets to choose amount of tips.
- Strikethrough items
Display the ones, which are being selected on this particular phone screen. - Paid items
Already paid by other users items become not clickable and change colour, also in front of each appears circle with the first letter of their name. This page allows to see what is being chosen by others in real time.
Akm app is virtual wallet, which allows to collect the money of all participants of splitting bill. Then to pay contactless from the screen by using unique QR code directly to the restaurant.
Registration in App
When creating account it is required to link a payment method either paypal or active debit/credit card.
Payment
Collected money paid contactless by QR code.
Through testing, we found that some of the actions such as possibility of manual input of wished amount to be paid for shared item might not be clear enough. Therefore I changed the font to the lightest colour, the difference of colour gives a clue to user that it’s changeable.
Key user priority #3: Popularisation — Users enjoy learning about app, so they keep abreast.
Design Solution:
- Original website was promotional and we cleaned up the layout to make the stories more concise. Customers like Mary find useful reading reviews and people’s stories to get understanding. It also builds trust to read about others positive experiences with Akm app.
5. PROTOTYPE
You can view the Adobe XD prototype is on my site in portfolio section.
Summary
After the 3 weeks design sprint, we were able to deliver a modern and elegant app to our client. I really enjoyed the challenge of building a meaningful online experience for such an often happen part of people’s lives. We learned a lot about what it takes to bring personal and customised experience.
For next steps, we would focus on designing the rest of website and a few screens for mobile, to ensure responsiveness. It is also important to ensure the user experience is consistent across mobile platform and website.
