X-Man — The why’s and the how’s
We do everything through our smartphones… work, pay, play, entertain, connect, network! I’m sure I’m missing a few other important things…but you get the gist! Everything we need to run our daily lives is there in that small device. If there is a problem out there, you can be sure that there is a website or an app to solve it.
This is the story of how we tried solving a problem that almost everyone faces. Managing expenses! Yes, that elephant in the closet! Everyone knows it’s there but most do not know how to address it.
We at Designerrs Lab wanted to design an app to address this problem and help users manage their expenses. We decided to tag other associated things like bills, budgets, and so on to make it a stand-alone financial app. The X-Man was born!
Are all users the same?
The obvious answer is no. So the first question was; how do we design an app meant for thousands of people? Do we talk to all of them? That’s an impossible conundrum…but with an easy solution. Based on principles of UX design we found that talking to around 10 or 12 people from different demographics is enough to get a sense of the group of users who need to be considered.
The idea was to talk to users and understand their goals, behavior, and pain points; to understand what a user finds lacking in the current methods that he/she is using or not using. Our first step was to prepare a questionnaire to accomplish this.
Preparing a questionnaire
To understand what a user is and what he/she wants we prepared a questionnaire, something like the one shown below.
Questionnaires are really important to understand how a user behaves, their needs and wants. They need to cover all possible questions to uncover the unvarnished truth.
User interviews
Armed with the questionnaire we interviewed users within different demographics. Even though we knew it, it was surprising how different or the same users responded to the questions. As a team, we would have probably interviewed 20 users. We did face-to-face or mobile interviews and there was enough data to initiate the next step — Affinity mapping and analysis.
Affinity Mapping
We took excerpts from our interviews and updated them in sticky notes. With a good mix of chaos and fun, we started sticking the notes on the wall. After all the sticking, it was clear that we had data… a lot of it!! But how to make sense of it? Once we started reading the notes and discussed what it meant, a vague sense of coherence emerged.
Some of the notes had to be rearranged and clustered together as they were alluding to similar behaviors. When we started doing this, patterns started to emerge. Without consciously thinking of it, we had actually made sense of a lot of data and done Affinity Mapping.
User Personas
Based on Affinity Mapping, we found 3 distinct groups who had similar behaviors, goals, and pain-points. The group of users who have such common traits can be represented through a fictitious character, otherwise called a Persona.
We could establish three primary personas; ‘Carefree’ Chirag, ‘Practical’ Pooja, and ‘Prudent’ Puneet.
Task Flows
Once we defined the three Personas with their distinct behaviors, goals, and pain-points, our next step was to create task flows. These flows are primarily required to understand how each task will be performed by the app; the inputs, the action or decision, and the output. We split the use-cases among ourselves and created task-flows for different tasks under that. The task-flows turned out to be quite in-depth after multiple iterations.
Site-maps
Site-map is like a map for your app or website. It tells you (or a user) what features come at Level 1,Level 2 and so on. The most important features should be in Level 1 or the Home Page. A user should be able to look at the Home Page and understand what the app is about and how to go about using it.
To give the user this kind of clarity, it is best that the site-maps adhere to laws like the Hick’s law which states that ‘…. increasing the number of choices will increase the decision time logarithmically.’ It is simple really! When you are given more choices, it becomes difficult to zero in on a specific option.
Once we were done with the Task Flows, the foggy notions in our mind seemed to dissipate a bit and we had a better clue as to what we were doing. The next step was to create Site-maps keeping in mind the Hick’s law.
Wire-frames
We were getting into the fun part now-the Wire-frames! A Wire-frame is like a blueprint to the final look and feel of the app. But it is not just that. Wire-frames show how best you can portray the different features of the app clearly; what goes into the home-page, what kind of navigation are you going to do, whether tabs ought to be there or will a hamburger do the trick, and so on.
For our X-Man app, we created a wire-frame after much discussion. As the most important feature of the app was to track expenses, the Expense tracker chart received a prominent place in the Home Page. Then just under that the latest reminders. This because of personas like ‘Carefree’ Chirag and ‘Practical’ Pooja needing reminders to manage their finances easily. Then came the budget card so that the persona ‘Prudent’ Puneet could plan ahead.
At this stage, we decided that we would go with the bottom navigation option as there were 4–5 most important features that needed to be on the Home Page.
High-fidelity Wire-frames
Based on our mid-fidelity wire-frames we created high-fidelity wire-frames on Adobe XD, which finally gave us a feeling that we were indeed designing an app!
Color and Typography
When we started thinking about colors for X-Man, color psychology and a mood board came to the rescue. X-Man is a personal finance app. Though it’s premise was serious, we needed colors that would balance out and project fun, yet give importance to Trust; the feeling any user should have while giving out personal information.
The keywords we used to create the Mood board were, ‘Trust’, ‘Empowerment’ and ‘Fun’. This exercise was very rewarding as we were finally getting to choose colors. But not any random color. There was an underlying logic to all the decisions we made.
We chose a solid dark shade of blue (#03318C) as our Primary color and a gradient blue-green (#1BDFF9) for the Secondary. The color psychology behind it was that blue inspires trust while blue-green represented money.
We chose Poppins as the typeface for the app as it is one of the trending geometric typefaces available. No major decision making there!
Visual design
It was time to finally to put up our final screens using the findings from the mood board and the wire-frames created earlier. The culmination of the entire design journey — the Visual design screens of X-Man!
X-Man — The why’s and the how’s was originally published in DETAUX (Designers Talks) on Medium, where people are continuing the conversation by highlighting and responding to this story.