A UI/UX CASE STUDY: Designing A Reminder App That Reminds You About Your Bills.
Overview: Designing an app that will remind people to pay their bills e.g. rent. Electricity, internet, etc. using a user-centric design process
The app should be highly intuitive, simple to use and interactive and can engage users with sturdy user experience methods and without forgetting that the app must be functional (that is, must tackle the problem it is meant to solve).
Challenge: People are constantly engaged in one activity or the other, whether it is work, school or leisure, and also in the age of infinite information, people need a way to save and be reminded of important information and the ones that occupy a lesser place on the ladder of information (or importance) hierarchy. Most users are faced with a huge amount of information which can be very difficult for the brain to process at ones, the brain filters through this pile of information, grab the ones that are necessary for our survival. Survival in this context is relative and varies for different individuals, they may be information that is peculiar to a person not being chassed away from work or information that would keep a student from not been rusticated from college or information that would guide a hunter from not being eaten by wild animals when hunting. Although the brain can accommodate all this information, a human is naturally equipped with this filter. This is to establish that humans need to rely on technology to enhance their remembrance.
Solutions: Although this design focused on a narrower perspective of the huge problem of forgetfulness, trying to solve this problem, by reminding people about their bills. According to psychologists, for information to stick to the human brain, one must leverage on the principle of repetition, this is not to dispute the fact that some people grab without repetition, these are rare cases.
To help the mass of people need to remember their bills, there is a need for an easier way to help users to add, save and be reminded of the bills they need to pay.
Design criteria: These are the milestones to use measure the success of the design
- Highly intuitive
- Simple to use
- User-friendly and must be able to engage users
- Functional
Design Approach: These are methodologies, theories, and philosophies that would guide the design decision process.
- Mimicry
- 5Es of user experience
Mimicry: It is the action or skill of imitating someone or something. In design, Mimicry is the act of copying properties of familiar objects, organisms, or environments to realize specific benefits afforded by those properties.
- The logic behind the selection of this approach is just for the sake of affordance. Affordance is a property or feature of an object which presents a prompt on what can be done with this object. In short, affordances are cues that give a hint about how users may interact with something, no matter physical or digital. For example, when you see a door handle, it is a prompt you can use it to open the door
- In this design I decided to integrate the look of a calendar and a stopwatch in a non-generic way, in other, to make the users more familiar with the app (this is to support one of the design criteria highlighted at the beginning)
5Es of user experience: This is a model created by Larry Keeley in 1994, the 5Es model outlined 5 journeys to take the users through in designing an experience, which are
- Entice: This has to do with the way users are drawn into the experience; What’s the invitation? What’s the process that gets it all started?
- Enter: What is the verge of the experience? What are the triggers to bring them into a particular experience?
- Engage: This has to do with the designed or intended experience you want the users to enjoy. What are the intentions of the users? What do they want to do? Why are they in the experience?
- Exit: This is the end of the experience after the user have accomplished their task
- Extend: Do people want to experience the design again? What’s the next thing? What are the follow-up actions?
For the sake of this design, the first and the last Es are not considered, because they are extending beyond the scope of this project.
Research: The research in the study is divided into two, the first stage focus on the user (user research), while the second part focuses on the competitors (Competitor analysis)
I started with the assumption that the people they would be most affected are the young professional and a bit of adult population, the reason for this is that I believe these are the people who are already working; therefore, they would have one or two bills to pay.
With this assumption glued to my brain, I came up with a research plan, which includes both primary and secondary research. I went online to read about people who work, I got a glimpse of how they leave and also, I dug into cognitive psychology by doing a little research about the brain, this was because I want to know why people forget things and how this problem could be solved. On the flip side, I gather my data, because I knew that by doing my research, I will have control over my population and I would be able to tailor the research toward what I to know. I developed three open-ended research questions then I moved to the phase where I would conduct user research. I called a couple of friends and also, I include myself among the respondent since I belong to the target population and also face a similar problem, I took it personal to some level.
This stage is important for a couple of reasons, putting on my sociological lenses and from the human-centric perspective, I know how important it is to test my assumptions on the ground of what people want and to make sure this is not about myself only.
Insights from User Research
The first two findings from the interviews that were conducted were kind of out of what I was expecting.
1. The problem cannot just be solved by just giving the users another bill reminder app, there are more than enough app in the market for the users to choose from. The user wants an easier (that is most apps required a lot of steps to set up or to ambiguous to understand).
This was pointed out by the person I interviewed, lucky enough for me, I was able to use what the user points out to update the questions I ask the rest of the interviewees.
2. A reminder will only solve one side of the problem, apart from the mere reminder, users also want something that can automatically pay their bill when due.
There are more than enough app in the market for the users to choose from. The user wants an easier (that is, most apps required a lot of steps to set up or to ambiguous to understand).
Users also want something that can atomatically pay their bills when due.
Pain points:
1. User want an easier way to set up their bill reminder (maximum of 3 to 5 steps)
2. A user wants to be reminded about their bills at intervals
3. Users want a platform that can pay their bills automatically.
Research: (Competitive Comparative Analysis)
The product that exists in the market serves as a source of inspiration for this design, in the attempt to look and learn from the competitors who are already in the market, or maybe exploit their weaknesses, to gain a large percentage of the market. A analyzed the competitors by focusing on 2 out of the 10 Nielsen Norman Group’s Usability Heuristic for the design of user interface
- Consistency and standard
- Aesthetic and minimal design
I did a random google search and downloaded the first three apps with at least 4.5 ratings on google play store, then I subject their interface to the two usability heuristics for user interface design. I downloaded bill monitor, my bill and timely bill.
Below is the summary of the heuristic testing I did:
Insights from app analysis
To keep the app as minimal as possible
To focus on creating how the user can set up their bills in nothing more than 3 steps
To focus more on the aesthetic, so that the app can be perceived as easy to use.
Personas:
These were generated from the research conducted, it helps me develop a better insight about the users, I was able to craft out personas on hypothetical grounds, given from the primary and secondary research and also an emphatic map to further see the world from the user’s perspective.
User flow:
This should how the users are to navigate the app based on their goals, this shows how each step takes the user to his or her intended goal.
Sketching and wireframing:
With the map of how the users can navigate the app, it was very easy for me to visualize the User interface design. For efficiency, I did a couple of rough sketches on paper to quickly iterate and virtualize what I picture in my head. The sketches are so rough to the extent that when other people are looking at it, they might find it very difficult to understand. And also I was able to think fast and also trap or pin down any idea they suddenly enter my head when I was brainstorming
Low fidelity wireframing:
Also, not to waste much time on the preliminary and considering the constrain of time I had to quickly sketch the low fidelity wireframe on paper, this is done in other to get a better visualization of the app.
Style Guide:
Before the style guide was completed, I tried various options before settling for the ones below, because they meet design requirements.
Solution and Final Design:
Looking at the designs they were the various reason behind the physical appearance of the final designed product. First, the design features a rounded rectangle, this is because of the feelings it evokes.
Also, about the pain points highlighted by the users, I decided to break the bill set up the process into three main stages to making it look simple and easy to use.
To demonstrate how simple and easy the steps are, below is a video prototype of internet bill set up in the app
On the home page of the app, I decided to use color to establish hierarchy, the color palette for the app was chosen with extreme consideration for information hierarchy as it has been shown in the style guide, the blue is used for grab the attention of the user to the bills that are about to expire. The first shade of grey is used to show that the item highlighted is the next important information while the lighter shade of gray which is looking washed out is to show that information highlighted is less important.
The same approach is used to design the notification bar of the app, as it was stated in the style guide, red color is used to indicate an alert or invalid input, the red on the notification bar calls the user attention to the expired bill. The notification screen occupies the middle position in the image above, below is a live prototype of the design on the smartphone notification bar.
During my idea generation process at the onset of this project, I decided to add some features which were asked by the users. Some of the users mentioned during the interview that reminding them about their bills would only solve a portion of the problem, that it would be nice if the app can pay automatically when the payment is about to expire. So, I decided to integrate the autopay feature. For the app to has this feature that means there must be a need for a page where the user can add payment details and where they can track their expenses.
Below are some of the other screens and the video below shows how the users’ journey through the app.
Below is the prototype of the app from the beginning (of the user journey) until the end
Success Metrics:
Evaluating based on the design criteria outlined at the beginning of this project, the final design can be said to be meet the design requirements (Highly intuitive, Simple to use, User-friendly and must be able to engage users and Functional).
Simple to use: On the issue of complexity or ambiguous setup process, I used a three stages set up model for the users to set up any reminder, this was achieved by removing unnecessary information when I was structuring the information architecture for the app, and also this was done to make the app more intuitive to use
Functionality: This has to do with the usefulness of the app. Is the app really useful? Does it solve the problem it is meant to solve?. In addressing this issue, the users added, that reminder will only solve a portion of the problem, for me to truly address this issue I integrate an auto feature solve, which helps the user to pay their bills when it is necessary without users interference. Moreover, the application will also remind the users about their bill at a certain intervals, depending on the preference of the users, this is to address the issue of forgetfulness, by leveraging on the principle of repetition for memory retention.
User-friendly: Friendliness was achieved by introducing some design element, like rounded rectangles, to make the app look less serious, and to invoke the feeling of comfort.
Conclusions
Working on a project like this challenges my creativity, it allows me to flex my creative muscles and gives me the ability to apply what I have learned over time about human-computer interaction, cognitive psychology, and user experience design process. One of the thing that captivates my attention in design it because it is a mashup of different disciples, this project allowed me to bring the diverse knowledge I have acquired over time into one space.
Another challenging part of the project was experimenting with Adobe XD, during the prototyping session, I was faced with difficult problems which deepened my knowledge of the software, although the problems I face was as a result of inadequacy on the part of the software, this does not mean the software is bad, but to show that Adobe team has come a long way in developing the software and as we all know that the software is still growing.
Thank you for your precious time
References:
Mimicry — https://www.oreilly.com/library/view/universal-principles-of/9781592535873/xhtml/ch72.html
Affordances — https://uxplanet.org/ux-design-glossary-how-to-use-affordances-in-user-interfaces-393c8e9686e4
5Es of user experience — https://medium.com/@dastillman/the-5es-and-6ps-experience-inventory-a-conversation-guide-849696b5dc70
https://medium.theuxblog.com/the-5e-experience-design-model-7852324d46c
