App development is a task that involves several roles, product managers, UX, UI, IxD, Developers, Testers, etc. But once in a while you have to wear the cap for more than one role. This guide is for the times when you have to be the one man army either because a team member left or budget constraints.
Recently I was contacted by Expensify to start a recruitment process, the first step in the process was to build a mobile app with minor functionality (they already have an app and is amazing, with functionality like scanning receipts that automatically fill the expense info). I’m going to describe the process I followed to solve the challenge.
Three years ago I read about Goal Directed-Design a methodology to focus on user goals and how the software should adapt to those, learning and responding as it’s used. I thought it was the best approach I have ever seen, many times in the past I wrote software for the stake holders not for the people that was going to use it, as you may guess, I had to rewrite software more than once. After all, the software is a tool to solve a problem not a goal per se. I will follow this methodology.
Define intent and constraint of a project.
The first thing to do is understand the context and which is the problem you are hired to solve.
Expensify is about managing, register expenses, make reimburse reports, etc. I must understand first what they do and how they do it, I read about the problems associated to managing expenses. Some of my findings were (among many):
- Every company has it’s own expense policies.
- For employees is hard to track expenses because you have to keep receipts and make a spreadsheet for management (with dates, merchants, amounts).
- Receipts and dates are very important.
- Employees could submit expenses non related to the work, overcharge for a service or duplicate expenses.
- Business has to approve the spreadsheets, for small companies this may not be a problem, but when you have to approve for more than 20 employees this becomes a nightmare.
We could deduce that the problem to solve is #2 how to simplify the process of tracking expenses in a business trip. Why during a trip?, because is easier to track things as happens instead of waiting at the end of the trip when you may have losen receipts.
And maybe that’s why they asked to build an app with the following functionality:
- Register an expense.
- List current expenses.
Now we have to find out who will use our product. We are tempted to say that everybody, but if you say you are solving a problem to everybody then you are not solving a problem to anybody at all, find who will be your users and you will get the info to provide a suitable solution. You must understand whom are the persons you are solving their problems.
Define typical users.
After some research I find out that users are consultants and sales people, the average consultant age is from 28-40 and for sales people is 35-45, with at least one business trip every week.
Now that you know your audience you have to create your “Personas”, Personas are fictional people representing specific groups of your target audience.
The purpose of creating personas that represents your target audience it’s because is easier to talk about an imaginary person, than is to talk about a “market segment”, also help you focus your product and empathize with them.
Deduce what user needs.
For this guide I will make two personas, one for each user segment.
30 years old.
Job. IT Solutions Consultant at a Cloud Computing Company
Has a good level of knowledge of computers and smartphones.
Would like to be able to spend less time making the expenses report after each business trip. He would like to add expenses as he pays for services.
Jacob studied a BS in Computer Science at Carnegie Mellon University, since he was young he was skilled in programming, after he graduates he got an internship at a cloud computing Company, he also likes to write a blog about technical challenges in cloud computing.
He quickly became the company’s star because of his ability to solve problems quickly, he is the one that his company send to its customer when they need help.
When he is not traveling in the country or abroad he likes to go to the movies and jazz concerts.
He does at least one business travel each week, 50% of the time is near NYC, 40% is within mainland USA and only 10% is abroad. After returning he needs to deal with several customer reports, expense reimburse and prepare the next travel. He is methodic and keeps his receipts in a special bag (so he doesn’t loose them), but as he needs to focus on providing solutions to the company’s customers, he would like to spend more time doing it than in reimburse expense reports.
35 years old.
Location. San Francisco
Job. Sales representative at a Startup.
Good user-level knowledge of computers and smartphones.
Would like to keep track of her expenses during a business trip, to avoid reviewing later. Would like to be aware of which expenses are reimbursable.
Emilia is a sales representative at a video streaming startup in Silicon Valley, California. She received her B.S from UCLA.
She knows that the startup environment is really demanding, so many tasks to do, and things grows really fast, she is traveling half a time all over the country and closing huge deals.
Besides sales she enjoys biking with her kids, she is part of a bike team that goes out each weekend.
Personas are useful because you focus on the product and became empathetic with them, instead of talking to “customers” you will end up thinking how this aligns to Emilia goals.
Now is time to design something that satisfies Emilia and Jacob goals and aligns to Expensify business model. We know that Expensify users are consultants and sales people, they are between 28-45 years old, for them, tracking expenses are boring and tedious, they need an easy way to register expenses while in a trip and be able to review (so they don’t spend time when they return form a trip).
Tell stories about using the system.
Let’s think how our personas are going to use our app.
Use case: Register a cab expense.
I have created this storyboard (please do in paper, is easier and you don’t have to spend too much time creating “nice” drawings).
- Emilia is in a taxi cab going back to her hotel after a meeting.
- She grabs her phone and opens the app because she needs to review the expenses in order to know how much money she could expense for a dinner without getting over her daily expense restriction.
- The app shows her the expenses list, with the ones for today atop the app.
- While she is reviewing the expenses, the taxi driver interrupts her because they arrive to the hotel and informs her how much money is for the ride.
- While the driver is charging her card, she adds a new expense.
- She register the info and adds a new expense to the list. End.
Finding some inspiration.
Once I have imagined how our users will use the app, I must figure out the UI design that fits the needs, for doing so also I would find some inspiration:
Login screen inspiration. what I like about this is that you have someone in the background riding a bike in a sunny day with the logo in the middle for me evoked a feeling of joy.
The colors in this scheme are bright and joyful, I don’t want to be too serious but some color will evoke feelings in the users, maybe something cool even tho is a boring task.
List view inspiration. Something that I wanted to highlight was the amount and the day so you can see at a glance how much you spend.
I decided to focus the design in a person that is happy doing the expense reports and add some bright colors to avoid being too formal and add some fun. The copy text is also a little bit informal, like if it was a friend who was giving you advice. I selected Sans Serifs for readability and clearness. Lato for most of the text, Roboto for Merchant label and Museo Sans because I like how the numbers looks (all free to use).
We could create several prototypes and try to focus on specific actions that align to “personas” goals. Everything else is irrelevant, we would need delete or modify but for now the goals are only track and register.
Once we have our UI the next step is create the interaction concept. A static prototype won’t provide too much context about how the app will behave, using Quartz Composer and Facebook Origami we create a prototype really quickly, as writing this post, Facebook released a new version of Origami with some cool features such as Phone preview, animation export and better integration with Sketchapp.
Creating interaction prototypes is faster and cheaper than coding.
Download Quartz Composer File.
Building an app involves several people, but is not impossible to make one only with yourself. Follow a method and adjust it to your needs. To solve the challenge I used Goal Directed-Design with the following process steps:
Define intent and constraint of a project: Before doing anything you need to know the purpose and the environment in which you will solve a problem.
Define typical users: Who will be using your product.
Deduce what user needs: If is a consumer product, make assumptions and refine as you learn.
Tell stories about using the system: Imagine the situations in which users will use your product.
For UI/UX align with your goals and find some inspiration that helps you fulfil it (but don’t be a copycat). Iterate, you will always have an opportunity to improve the final product.
This is the first part, now that we have defined the problem, a solution and the Interface/Interaction let’s build the app, but that will be my next post.
Designing For the Digital Age by Kim Goldwin.
Designed for Use by Lukas Mathis
Designing for Emotion by Aarron Walter
Type Matters! by Jim Williams
Layout Workbook by Kristin Cullen
100 Things Every Designer Needs to Know about People by Susan M. Weinschenk
Learn Facebook’s Origami interaction design tool
How to use Sketchapp