Buddha Back Routes project: a UX design case study

Duration: 2 weeks in week-long sprints, individual work.

Tools: Pencil and paper, scissors, POP app, Sketch, Sketch Mirror for iOS, Adobe Capture

The Brief:

We were tasked with finding a problem to solve. We only knew that the solution would be in the form of a mobile app that served my target user, Ash. This should be easy as he was sat next to me on my design course at General Assembly!

Finding a problem to solve for Ash using Concept Mapping

User Interviews, Concept Mapping

In order to work out where in Ash’s life to focus on, I decided to use a concept map as I interviewed him. I started by asking him about a typical working day and seeing where the conversation led me.

Concept Mapping Ash’s typical working day

Different modes of transport to work was one such area. I found out that when Ash travelled by bicycle he often found the traffic an added stress and after some further probing one key insight came to light. It was that he had on numerous occasions found himself following other cyclists down back routes in order to find new calmer routes to and from work. I believed that he might benefit from being able to share these routes more easily via an app. He told me that other mapping services didn’t allow for this kind of personally recommended route rather than the usual ‘quickest’ and so I decided to explore further.

Initial flows shared with Ash and others alerted me to me to a couple of issues that I then could build on. eg. Should he be allowed to pause the journey?

User Journey for cycling app idea.

User Testing

Test one of the prototyping stage revealed that reviews and maps of the routes needed to be centre stage in the app’s results page. Ash let me know that it wasn’t clear enough where the routes took him or what the key advantages of one over another might be. He also said that he would need to be able to pause the journey.

I tested twice with other users as well as Ash. The first revealed that she might be much more reassured during a journey with a progress map despite the audio voice directions. The second test user revealed that he would want to be able to amend the route mid-journey.

User Testing with a clickable prototype using POP app.

(I believed that this was more likely to be due to the subject not being a regular cyclist to work so would like to research time permitting.)

He also commented that the were not enough states during his flow through the app. At this stage the idea was simply for there to be an audio directions to avoid distractions. Also that, like other apps, he would like something that confirms the location at the start to reassure GPS was being accurate.

Iterations

To accommodate my users’ feedback, I added star ratings for the cyclists suggesting routes, time added to journey, more confirmation of location, affordance for error or change of mind, and quietness of route.

Mood Board

I really wanted this app to not only work well for Ash but also to be a pleasure visually. Before diving into pixels, my first exercise was to try to express the themes of my app with a mood board.

A Mood Board to gather inspiration for visual design consistency.

This helped me reaffirm the key ways that I could help Ash by aligning with his desire to arrive at his destination calmer so I used this as a starting point for exploration and to see how with colour and images this might be communicated.

The colours that came from the mood board also began to suggest a concept around Buddhist monk’s robes. There were some saffrons and brick reds that lead me to this idea.

I put these colours into Adobe Capture to see them as swatches for clarity. I also explored colour swatches online based on traditionally calming colours like blues and pale greens.

Adobe Capture — a great tool for gathering colours in a tidy swatch.

I got feedback from my mood board on what people thought it was aiming to communicate with its images and colours. The purpose was clear (I had gathered map images and cycling) but the colours were less clear so I knew these would probably change. Some felt the bold colours were not calming enough and it exposed my own personal associations and biases.

I then used an exercise of Semantic Differentials to refine the strength of the qualities I intended for the app.

Reliable but not Boring; Calm but not Dull; Confident but not Cocky

This was extremely useful as a way of having an anchor for any visual design or decisions on tone and voice.

Typefaces, Icons, Voice

I now started to think about icon design, typefaces and the voice and tone of any verbal communication with my user and how colour could reinforce this.

By revisiting magazine articles, apps and websites I saw the possibility of using typefaces I hadn’t used before and using them in more inventive ways. I saw that they could be used effectively to denote hierarchy and different voices even by mixing Serif and Sans Serif. Within a very short space of time I found a pair on fontpair.co. : Monserrat and Istok Web worked well together. They were both San Serif but the first with personality for communication and the second with a more straightforward functional character that could work at smaller sizes for labelling.

The tone needed to be in line with the overall qualities of the app but I decided to make a clear distinction between communicating reliable information about the journey and a more casual communication elsewhere. A call to rate the journey for example could be more playful: “Yes!”

Wireframes

With my first wireframes done in Sketch, I went straight to getting feedback on the layout, icon choices and copy. Many adjustments were made, mostly to make the copy more succinct, remove unnecessary icons, labels, and alignments.

Lots of back and forth with testers gave me the confidence that I was ready to add the colour. The feedback on the Buddhist colours made me want to consider something more reliable and solid so I took inspiration from other mapping and travel brands and use a bold green.

An early visual design in Sketch

I got good feedback for its reliable and confident qualities but paired with yellow it wasn’t conveying calm. The small buddha icons looked like Stormtrooper helmets which was confusing!

I went back to my colour swatch that used the more pastel tones and by using a concept map I saw that the stress Ash felt with traffic could be addressed with colours used in places like dentists. I started with a soft dark blue and a lighter blue again as a secondary colour and got great feedback from Ash. This was now communicating calm and reliable.

The design now had a more solid and reliable feel and labeled icons.

Sketch was now my tool of choice with plenty of opportunities to streamline my workflow using the Styles Plug-In from Craft and the native Text Styles feature. The digital prototypes then evolved quickly as the testing revealed nuances of understanding and clarity with this or that icon, this size of text or that.

A calm and happy cyclist — my target user.

Outcome and Next Steps

Ash seemed genuinely excited by the possibilities of the app but it was clear that the social networking aspects needed to be explored further. It would really need to wow a new user to have any chance of becoming a habitual tool.