A quicker way to check your balance on your phone— a UX case study
I decided to challenge myself to test my design skills. So I started working on this app idea that I’ve been thinking about for some time now. The app helps to achieve a simple task: check data and airtime usage without having to remember too many USSD codes.
It is a problem that I’ve been dealing with, mainly because telecoms change their codes and add new ones all the time, and each Telecom has its USSD codes for the same offer or service. So as you can imagine, it is too much to memorise.
My main goal is to check data and airtime without adding too much cognitive effort on my side and harness my natural abilities (movement) and in the meantime make the most of the hardware capabilities that smartphones offer. I believe that the result is a direct and straight-to-the-point app concept. However, feel free to have your own opinion.
This is how this article is structured:
1.UX RESEARCH
1.1 The problem
1.2. Problem statement
1.3 The Solution
1.4 Interview
1.5 (Proto)Persona Profile
1. 6 Information Architecture
1.7 User flow diagram
1.8 Features and function list
1.9 Wireframes
3. UI OUTCOME
4. RATIONALE
5. REFERENCE AND RESOURCES
5.1 Reference
5.2 Resources
- UX RESEARCH
UX (user experience) research is the systematic investigation of users and their requirements to add context and insight into the process of designing the user experience. UX research employs a variety of techniques, tools, and methodologies to reach conclusions, determine the facts, and uncover problems, thereby revealing valuable information which can be fed into the design process [1].
UX research aims to gather information from users by way of a variety of qualitative and quantitative methods, including interviews, contextual inquiries, diary studies, personas, card sorting, and usability testing [1]. For this app case study, I decided to use more specific methodologies, starting from defining the problem and problem statement, proposing the possible solution, writing (simulating) an interview of my (proto)persona profile, design the information architecture and finally the user flow diagram.
1.1 The problem
An integral part of the design process is the definition of a meaningful and actionable problem. This is perhaps the most challenging part of the design process [2]. As the definition of a problem (also called a design challenge) requires to synthesise observations about the users, In this case, my own.
As a user of telecom services, I struggle to remember or to know which shortcode (USSD code) to use to access specific services, information and promotions provided by different mobile operators. Different mobile operators use different shortcodes to give access to the same service.
How we solve this problem today? When we want to check our balance, we have to access the internet and search for the shortcode, google it or access the mobile operator social media pages and in some cases call a friend to ask.
1.2. Problem statement
A problem statement is essential to a design process because it guides and provides a focus on the specific needs that I have uncovered. It also creates a sense of possibility and optimism that allows to spark off ideas in the solution (ideation) stage [3]. The problem statement:
People are unsure of the product flow and features of the service due to design ambiguity.
If this problem is not solved, it continues to disrupt the service experience for all its users.
1.3 The Solution
Create an app that provides visual and contextual menus based on the users need to access different services and notifications to alert when the mobile operator has a promotion on specific services or products. This app only works for people with smartphones.
1.4 Interview
User interviews are one of the most commonly used methods in user research. They can cover almost all user-related topics and be used, for example, to gather information on users' feelings, motivations, and daily routines, or how they use various products. The interviews often follow the same methodology as qualitative interviews in other fields, but with the specific purpose of informing a design project [4]. See below the interview questions and answers.
1. What is your name, and what do you do for a living?
A: My name is Guidione Machava. I am a UX Designer and Community Manager.
2. Can you tell me about your hobbies?
A: On my free time I like reading books and listening to podcasts about Entrepreneurship and Design.
3. Do you have a smartphone, if yes, how often do you use it?
Yes, I do have a smartphone, and I use it quite a lot.
4. How often do you buy airtime or data?
Quite often. Nowadays, everything I do is online, and so I need data so that my phone is useful to me.
5. How much of airtime do you avoid buying? Why?
A: I used to avoid buying R100 airtime. It's hard to control the usage, especially when I buy data. I end up spending more than I need when I do that.
6. What do you like the most and the least about the airtime and data management provided by your Telecom provider?
A: They have good deals and promotions depending on the usage, but it is hard to know when the specific promotion is running and how to sign up.
7. How do you perceive the product provided by the Telecom regarding your account (airtime and data) management?
A: It is hard to keep up. You never know how much you have and depending on the Telecom, they have different shortcodes to access the same information, so it's hard to use it effectively.
8. In the services provided by Telecoms, which one you believe is the most important?
A: The ability to check airtime and data. I wish they had an easy way to do that without using codes.
9. Which problems do you experience with the service?
A: Sometimes, I don't know if the code is working because, during the processing time, my phone doesn't give any signal. It's just frozen. Moreover, when I tried again, it interrupts the previous request running, and I have to start the whole process again and wait.
10. Where do you feel the service fails to meet expectations?
A: Airtime recharge, data usage management and notifications. Sometimes it just does not work, and I don't know why.
11. How do you think that should work?
A: I think that Telecom should give real-time updates as soon as the service experiences interruptions and they should make the airtime and data usage management more visual and interactive.
12. Try to remember the last time an airtime or data purchase couldn't be completed for some reason. How did you feel then?
A: Couple of days ago. I typed in the wrong voucher number, and I had to restart the airtime purchase from scratch. Another scenario was when I tried to buy data. I forgot which options I had taken earlier in the process (there are no breadcrumbs). I had to restart the process from zero again.
13. Tell me what went through your head the last time you tried to buy something Telecom and data related, and the purchase failed.
A: I thought that Telecom does not pay proper attention to the end user. Also, that, the whole process has to be improved.
14. Tell me about the last time you bought something data or airtime related.
A: I typed the USSD code and followed the instructions. I went to the process step by step, and it worked. It took me about 30 seconds to recharge airtime and 20 more seconds to buy data.
1.5 (Proto)Persona Profile
Personas are fictional characters, which you create based upon your research to represent the different user types that might use your service, product, site, or brand similarly [5]. Creating personas helps to understand the user’s needs, experiences, behaviours and goals.
For this case study, I used a proto-persona. Unlike the standard persona, proto-personas are based on the assumptions of the stakeholders, and further checked against actual data. They are a collection of heuristics, market research, and intuition presenting an opportunity to articulate the target audience, their needs, and behaviours [6]. We rely on proto-personas to ensure the alignment amongst our client stakeholders. They ultimately represent what we think our users are.
1. 6 Information Architecture
Information architecture (I.A.) focuses on organising, structuring, and labelling content effectively and sustainably. The goal is to help users find information and complete tasks. To do this, you need to understand how the pieces fit together to create a larger picture, how items relate to each other within the system [7].
1.7 User flow diagram
Flow design makes designers focus on what users want to get out of interactions with a specific product. It ensures that user experience takes priority over graphic design or information architecture structuring and provides a solid framework to move the project forward when visual design and Information architecture are required [8].
1.8 Features and function list
A feature is a tool that helps to accomplish functions. For example, the wheels of an aircraft are features that support functions such as landing and taking off. A function is a goal that can be accomplished with a product, service, process, practice, system, application, document, component, machine or environment. For example, an aircraft that can land [9]. Find below the features and function list of the app case study.
Current balance — The app will always after data usage check for balance and keep the user updated.
Detailed balance — The app will automatically dial depending on the Telecom to check the detailed information about data and airtime.
AIRTIME RECHARGE
The user will be able to recharge airtime through two options: Point to scan using their cameras and type the pin on their phones.
Point to scan — The user will be able to recharge airtime using his camera point to the pin, and the app will automatically dial the USSD code and recognise the numbers sequence.
Type the pin — The user will be able to recharge airtime just typing the pin not needing to know USSD code.
BUY DATA
The user will be able to buy data through three options: favourite package, data options which include multiple data options offered by the Telecom and all promotions available.
Favourite package — The user will be able to set a favourite data package so we won’t need to go to the entire process every time he needs to buy data. The app will automatically dial the USSD code.
Data options — The user will be able to buy data through a visual menu, without needing to use USSD code.
Promotions — The user will be up to date regarding the promotions provided by Telecom, the app will time to time, type the USSD code and provide information about updates.
Shake it to check it — The user will be able to define how many times he will want to shake his phone to check summary information about the airtime and data.
1.9 Wireframes
Wireframing is a way to design a website service at the structural level. A wireframe is commonly used to layout content and functionality on a page which takes into account user needs and user journeys. Wireframes are used early in the development process to establish the basic structure of a page before visual design and content are added [10].
3. UI OUTCOME
Prototypes are often used in the final, testing phase in a design process to determine how users behave with the prototype, to reveal new solutions to problems, or to find out whether or not the implemented solutions have been successful.
The results generated from these tests are then used to redefine one or more of the problems established in the earlier phases of the project, and to build a more robust understanding of the problems users may face when interacting with the product in the intended environment. High-fidelity prototypes are prototypes that look and operate closer to the finished product [11].
4. RATIONALE
This last part of the structure shows your final answer to the original question. It’s not enough here to show your final deliverable. In this section, you have to demonstrate impact — how did your designed product improve the situation [12]. This concept project is a mobile application that solves the problems related to the complexity of USSD codes of different telecoms when the users request specific services provided.
The app solves problems like visual interactivity, real-time feedback and navigation breadcrumbs, features that the USSD menus cannot handle. It also provides accurate information about data packages.
This app concept also allows the use of the gyroscope and movement sensors features from smartphones, and the user only has to shake the phone to check information regarding airtime quickly. Also uses the camera for the OCR — Optical Character Recognition technology to scan the airtime pin on papers. As a result, the app allows speed and precision and real-time feedback without having to memorise different operator USSD codes.
5. REFERENCE AND RESOURCES
5.1 Reference
[1] What is UX Research? | Interaction Design Foundation. https://www.interaction-design.org/literature/topics/ux-research
[2] Stage 4 in the Design Thinking Process: Prototype …. https://www.interaction-design.org/literature/article/stage-4-in-the-design-thinking-process-prototype
[3] Deep dive and redesign for the One Services mobile app — a …. https://uxdesign.cc/deep-dive-and-redesign-for-the-one-services-mobile-app-a-ux-ui-case-study-5701dd2a1d1c
[4] What are User Interviews? | Interaction Design Foundation. https://www.interaction-design.org/literature/topics/user-interviews
[5] Stage 4 in the Design Thinking Process: Prototype …. https://www.interaction-design.org/literature/article/stage-4-in-the-design-thinking-process-prototype
[6] UX: Creating Proto-Personas — UX Collective. https://uxdesign.cc/ux-creating-proto-personas-76a1738401a2
[7] Information Architecture Basics | Usability.gov. https://www.usability.gov/what-and-why/information-architecture.html
[8] Flow Design Processes — Focusing on the Users’ Needs …. https://www.interaction-design.org/literature/article/flow-design-processes-focusing-on-the-user-s-needs
[9] Function vs Feature — Simplicable. https://simplicable.com/new/function-vs-feature
[10] What is wireframing | Experience UX. https://www.experienceux.co.uk/faqs/what-is-wireframing/
[11] How to create the perfect structure for a UX case study …. https://www.interaction-design.org/literature/article/how-to-create-the-perfect-structure-for-a-ux-case-study
5.2 Resources
Bohemian B.V, 2009–2018, Sketch Version 52.5 (674669), Sketch App, macOS High Sierra.
Basic Wireframe Kit Sketch Resource, sketch app sources.
