in·ter·face/ˈintərˌfās/ Noun: A point where two systems, subjects, organizations, etc., meet and interact.
I’m going to be honest: when I first joined FrontlineSMS I had no idea how much goes into the design of software. Every screen, every button and every function has principled thought behind it. In 2011, we worked alongside Gabriel White, a User Experience Designer from Small Surfaces, to help translate FrontlineSMS users’ needs into the new design of Version 2. I came to realize that no matter how advanced and amazing a piece of software might be; it has no relevance if users can’t access it or work out HOW to use it. I think that the user interface – that point of contact between a user and the functionality (or what the software can do) - is the most important entry point in the way users experience a tool. Over a year and a half after the design work first began, I recently spoke with Gabe to share his reflections on how we ensured users’ priorities were central to the design of Version 2.
I’m sure that for many of us it’s not clear what User Experience Design really involves, so I asked Gabe to explain.
“To me, it means creating products and services that address real user needs, and defining how people can interact with software in a way that’s useful and meaningful. The most important things to consider in this process are what you (as an organization) are trying to achieve by creating the product or service; what the needs of the end users are; and then bringing those two sets of goals together through a design solution that is usable, useful and engaging.”
At FrontlineSMS, we have always endeavored to put our users first and be responsive to their needs - to make our software work better for them. This user-centered design process is at the heart of Version 2. I was curious to ask Gabe how he got involved in the FrontlineSMS project.
“I decided to move to Uganda to focus my work on projects which were meaningful to me in terms of positive social impact. I found out about the Mobiles for Development Conference in Kampala in 2010. I’d heard that FrontlineSMS’s Founder Ken Banks was going to be there, and the FrontlineSMS project was exactly the kind of initiative I wanted to get involved in. So I basically cornered him and said ‘We have to have a coffee together!’ When I later found out that he was thinking about how the user experience would evolve in the then upcoming Version 2 of the software, it felt like serendipity. Working with FrontlineSMS turned out to be one of the highlights of my design career.”
The first step in working together was when Gabe asked us to draw up profiles representing the characteristics of different types of FrontlineSMS users (‘Personas’ in design-speak). We asked volunteers who represented diverse projects using FrontlineSMS to be involved in the design process. Gabe explained the importance of this:
“It’s really critical to involve users throughout the entire process so that you can continuously ensure that you address users’ real needs in appropriate ways. First, we interviewed existing users of the software to understand their aspirations and pain points. This helped us frame the problems we wanted to solve with Version 2. As I began to craft a design solution, it was important to continue to engage end users through the process. So even when we had only very early design concepts, I shared the alternative solutions with users to understand how effectively the design ideas met the needs I’d earlier uncovered.
“One of the things we found was that, while it was often easy to do basic things in Version 1 of the software, it was sometimes harder to do more sophisticated things with it. For example FrontlineSMS users often want to use the tool to gather together messages from a group of people on a range of specific topics, or create a poll and easily understand the responses. Essentially, it’s great to be able to gather or disperse information using FrontlineSMS, but that’s only the beginning of the story – it’s often what users they do with all those messages afterwards that counts. Making it easier for people to use FrontlineSMS to do more sophisticated things was critical as we thought about building the new software.”
This speaks volumes to a central feature of Version 2: the 'Activities' which guide users through common tasks like announcements and polls, so I was keen to know more about where the inspiration for this came from.
“In the research we found that most people were wanting to use the software to carry out three or four core types of tasks (such as conducting a poll). Version 1 of FrontlineSMS required users to put the pieces together themselves when doing these tasks, which meant that many users were unable to unlock the full potential of the software. I realized we needed to do two things: make it easier for people to do more complex things with the software, and also help people appropriately manage the information that was coming in and going out in relation to each of these different activities.
So we created this idea of ‘Activities’ – if we know you wanted to create a poll, for example, we could guide you through the steps of setting it up, and then help you manage and understand the responses coming back in. With Activities, people do not need to put the pieces together themselves – the software now supports them through the whole process by providing pre-packaged sets of tools."
Gabriel White’s company Small Surfaces designs user interface solutions for smartphones, tablet computers and beyond. His award-winning designs have helped organizations including FrontlineSMS, Ushahidi, World Vision, and Refugees United, as well as business leaders like Google, Samsung, Hewlett-Packard, Microsoft, Sandisk and Kodak deliver innovative, next-generation products and services. Gabe continues to work on new features and designs for FrontlineSMS.
- The first sketch of a view including "Activities" Image credit: Gabe White, Small Surfaces
Moreover, the system was designed to inspire people to make the most of FrontlineSMS and explore more sophisticated uses of SMS. Gabe elaborates;
“Activities expose people to the possibilities of what they can do with the system. FrontlineSMS users have always been aware there was potential but some didn’t know they could do more advanced things with the software. Activities make it much more explicit and easy to understand. It’s now more obvious about potential possibilities and so makes everything much more approachable.”
When we presented early designs to users to seek their feedback, one person highlighted the power of the “email metaphor” particularly in reference to the ability to star messages or select multiple messages using checkboxes. I wondered to what extent Gabe’s design was influenced by online tools like Gmail and Facebook.
“As a designer one of the things I think about is: what are the design approaches or metaphors that people are familiar with and makes most sense to them? Design most often is not about creating completely new and radical solutions; rather it’s about bringing together elements and metaphors that people already deal with in novel and interesting ways.”
Gabe’s approach was logical and meticulous, sticking to predictable behavior to ensure the usability of the user interface. It wasn’t until after building user personas, choosing the task-based “Activity” concept and creating over 100 pages of design documentation that we first saw the first line of Version 2 code and a blue hyperlink for “Inbox” in Summer 2011. Now it’s fully working software I sometimes have to rub my eyes to believe how far we’ve come. What I love the most is hearing what people think because that is what central to user interface design. So find out about what’s new in Version 2 here and share your ideas on what you think of the design on our forum here.
Our first visit was to Josana Academy, where we met the head teacher, secretary, bursar, and IT support person. The first step was to install PaymentView on the secretary’s computer, as she will be the primary user. Next, we trained the secretary, bursar, and IT support person on how to use the software. Josana Academy will be using PaymentView to enable easier processing of fee payments made via mobile money. Josana is a private primary school, so fees are collected every term. Currently, parents who live far from school and/or cannot easily access a bank branch will ask the school if they can pay via M-Pesa. These payments are either received by the secretary or bursar, or they are received by a child’s classroom teacher. Once a payment is received, the receiver must go into town to cash out and then deposit the money into the bank. PaymentView will streamline this process by enabling all payments to go to one, centralized place. This new process minimizes the number of trips to town made by the secretary or bursar, and prevents teachers from having to make trips to M-Pesa agents for withdrawal.
