Defining Information Architecture in mobile context
This post originally appeared on the FreeAgent blog in June 2017
The FreeAgent Mobile app is loved by small businesses who want to do their bookkeeping quickly and easily on the move. It continues to evolve and have new features added on a regular basis, so recently it felt like the right time to rethink how we structure our Information Architecture (IA) and navigation.
We wanted to redesign the app to compliment our user’s workflows, as well as building a solid foundation for future development. To do this, we did a number of tests involving both existing FreeAgent users and non-FreeAgent users, so we could take a close look at how people used mobile apps to complete tasks.
We used the classic IA technique of a card sorting exercise to start, to help us understand how users might group certain tasks in the app in the context of their workflows.
Card sorting is a methodology commonly used to organise content and structure navigation in a user-friendly way. There are plenty of card sorting tools out there, such as Optimal Workshop, but because it was a one-off exercise we decided to use Trello boards, which worked really well for us in terms of the ease of setup and use.
Originally we created cards which listed all of the features in our app but then quickly realised that actual user tasks would give us better granularity and insight into how users organise their work. With this in mind, we created the Trello boards and started to test with our colleagues around the FreeAgent office (one board per tester).
We started with an ‘open card sort’, where we let the tester create and label as many groups as they want. However, it turned out that the testers grouped things linguistically rather than by function; for example, all cards including word ‘invoice’ were often put together into an ‘invoice’ group. This wasn’t particularly helpful when thinking about navigation since we ended up with high numbers of groups.
We then tried different setups for the card sorts and eventually settled on limiting users to creating a maximum of five groups within the Trello board. This meant they had to think in a different way about how to group tasks and also had the advantage of correlating with a possible number of navigation tabs within the app design — making our life easier.
Armed with our laptops and our learnings from internally testing the Trello boards, we were ready to take it out to the wild.
Luckily for us, FreeAgent sponsors a couple of local events here in Edinburgh aimed at our target audience: Creative Mornings Edinburgh and Creative Circles (part of Creative Edinburgh). They kindly let us do some guerilla research, which was an awesome opportunity, not only to run our tests but also to interact with some of our app users. In no time we had the card sorts flying!
We tested with 16 external users in total and although Nielsen Norman recommends around 15 people per sort, we felt that together with the internal tests we had enough data to work with.
Following our introduction of the five card group maximum, we quickly noticed that these testers grouped the majority of the cards together into a kind of ‘project/work’ category. The problem was that they put too many tasks in this category to make it a viable option for our app’s navigation. The cards outside this group were grouped quite consistently, so we decided to focus our attention on this problematic large ‘project/work’ category.
We presented testers with all the task cards which most commonly appeared within the ‘project/work’ category section and then limited them to a maximum of three groupings, in order to encourage them to think in more detail about how to separate out these cards. Then we let them get on with it!
Following the completion of the testing and armed with the results of our internal and external tests, the first thing we did was to have some whiteboard fun!
We dissected each user’s groupings and tried to figure out the logic behind their decisions. We looked at the labels they applied for each grouping and also the tasks they included in each grouping.
We also looked at the statistical analysis of the groupings, to give as a more objective view on the actual groupings and avoid any potential biases. We used a method called an Open Card Sort Analysis, that analyses the data using R, an open source statistical language. We used the method from this website which have more details, but her’s what we did:
First, we prepared the spreadsheet. In an example below, you can see that there are 3 participants; first with 6 groupings, second with 8 groupings and third with 7 groupings (In the card name columns replace the Card_name with whatever your cards are. Just remember, in case your namings have multiple words, to join them otherwise it will break your graph. Also make sure the data cells “0 and 1” are formated as number).
Next, we deleted the first 2 columns (participants and groups) and exported the results to .CSV file.
We ended up having to tweak the original code a bit and here is what we input into R in the end:
compare <- function(x1, x2) {
x3 <- x1 + x2
ints <- sum(x3 > 1)
uno <- sum(x3 > 0)
return (ints / uno)
}
getJaccard <- function(data) {
l = length(data[1,])
jmatrix <- matrix(nrow=l,ncol=l)
for (i in 1:l) {
for (j in i:l) {
s <- compare(data[i], data[,j])
jmatrix[i,j] <- s
jmatrix[j,i] <- s
}
}
return (jmatrix)
}
cardsort <- function(filename, blocks) {
filedata <- read.table(filename, header=T, sep=",")
data <- getJaccard(filedata)
colnames(data) <- colnames(filedata)
hc <- hclust(dist(t(data)), method="ward")
hc$labels <- colnames(data)
plot(hc, main = Sys.time())
rect.hclust(hc, k=blocks, border="red")
}Plus the path to the CSV file and a number of groups we wanted (5) (for some reason it only opened files on my desktop):
cardsort('/path/to/data.csv', 5)This code generated some lovely dendrograms, as shown below.
Our research results told us so much about how users intuitively feel about different features within the app.
There were some groupings like ‘settings tasks’ (e.g. updating email address or enabling fingerprint authentication), that were grouped pretty consistently by the majority of testers.
On the other hand, ‘notifications’ was the task that was grouped most randomly. We therefore concluded that notifications would probably deserve a section of their own.
We found a bunch of distinct cognitive patterns used by users to organise the tasks:
- Project work vs admin work — ‘project work’ groupings included general project running tasks like sending estimates or starting a timer on a task, while ‘admin work’ was seen separately, as a way of mainly dealing with the money side e.g. banking and expenses.
- Popularity and frequency of access — by this logic, testers sorted into groups by immediacy and regularity of task. Some users mentioned the idea of quick access for certain tasks, like starting a time tracking timer or creating a new invoice.
- Workflow progression — the logic behind this way of grouping was similar to a Kanban board progression, from initiating a project, to receiving payments, to a general business overview.
- Internal (admin) vs external (client-facing) — These were seen as separate tasks. From our previous research, we know that there exists a degree of anxiety around client-facing tasks, such as sending an invoice. We coined this with the term: ‘the wall of fear’.
- Combinations of the above
Interestingly, the groupings were similar but not the same as internal test groupings — it was an education to see how our design intuition compared with the logic applied by real users.
We used the knowledge gained in our research to help us to create a set of design prototypes which we tested with both new and existing users.
We were happy to find that in general users were able to understand and navigate through the sections we created based on this research. In April this year we were proud to ship the refreshed version of the FreeAgent mobile app with a new tabbed navigation in place!
The IA work we did as part of this research helped to form a solid foundation for the final design. Using the new navigation bar at the bottom of the screen, you can now jump from Insights to the Money Out, Money In or Banking sections, or use the green ‘add’ icon to quickly create an expense, timeslip or invoice.
