Mates

User Experience
Mobile App Design
Visual Design
CLIENT

Tom Woodel

SKILLS

User Experience, Mobile App Design, Visual Design

PROJECt DURATION

2 weeks

CASE STUDY

The Brief

Design an app, including visual design to solve a problem for my project partner, Tom Woodel.

The Solution

I designed an app for Tom that solved the following problems 

  • Missing messages regarding meet-ups with friends
  • Making informed decisions of whether to attend a meet-up or not

Main Challenges

Finding a problem that did not already have an existing "app for that".

User Research and Discovery

Discovery

To figure out Tom’s problems, I asked him to talk about his day. During his description, I created a concept map to identify possible problems he might have or annoyances during his day. With the concept map, I identified two annoyances in Tom’s life. The first was missing his connecting trains. The second was he mentioned that he had trouble managing all the messages he receives as he has multiple messaging apps with multiple chat groups.

I initially spent time working on Tom’s travel problem. This led me to create an app to constantly update Tom about the statuses of his trains. After showing this to Tom, he did find it useful, but after further interview questions, I realised that the problem I was trying to solve was not solvable as my app could not control the train times. This ultimately meant that it was out of Tom’s control whether he caught the connection train no matter how much information was provided to him.

User Interview

For my second attempt, I focused on helping Tom fixing his messaging problem. After some more interviewing, I found at Tom’s main problem was with his messages was that he gets too many of them. This is often annoying when the message content is just bantering amongst his friends. When Tom gets too annoyed, he mutes the conversation and then is never notified of new messages that he receives. This leads to Tom not receiving messages he is interested in such as when the group is meeting up somewhere.

Scenario

User Flow

From this issue, I developed a user flow to identify Tom’s decision points that leads to hisd messaging problem. I tried to identify when Tom mutes his messages. I also tried to identify what makes messages important to Tom and when he decides that he wants to attend an event.

Design

Participatory Design

The solution I wanted to approach was one that focused on event planning between Tom and his friends. If all events were created with this app, Tom would not miss the only messages he cared about. During my initial design, I sat with Tom to sketch out some ideas. This helped validate the decisions made that influenced the design.

Low-Fidelity Prototype

For my user testing, I used the user flow diagram I developed to figure out what I wanted to test. Tom is very interested in being able to make an informed decision (close friends going and not too expensive) whether he wanted to attend an event. I also wanted to test the creation of an event to determine whether Tom could enter in enough info to decide whether he was attending.

From my user tests, , the most interesting feedback that I received was that I should add chat functionality to the app. This was mentioned by both of my users as they felt that people don’t often attend an event even if they say they will.

Lo-FI PRototype
Visual Design

Approach

To find a visual style for the app, I started by trying to understand my partners style in context of the app. From interviewing my partner I started by writing down some word associations. I created a moodboard and styleboard to represent his lifestyle and what he wanted to use the app for. Brand personality framework, brand affinity and semantic differentials were also created to form a direction of the design. The results from this are as follows.

Brand Personality Framework

Trendy, Spirited, Exciting, Cool, Contemporary

Brand Affinity

Audi TT, Porsche 911. These cars are upper-class but are also very fun.

Absolut Vodka, Coco Cola and Virgin. These brands represent friends, fun and excitement.

Steve Carell and Jack Black. These personalities are fun but can also be sophisticated.

Semantic diffirentials

Cool but not formal

Upper-class but not corporate

Good-looking but not glamourous

Design

The initial design featured beautiful imagery of upcoming and past events, however the screens to show friends and the creation were more functional and lacked visual style and character.

Looking at my moodboard, most images represented a rustic or gastro pub style. For my second iteration, I attempted to represent this style in the app. I looked at examples of this style. I noticed quite a few designs make use of wooden and chalkboard backgrounds, and “rusticy” type fonts. I attempted to replicate these styles by adding a wooden background to my navigation bars and tab bars and choosing a font which I thought matched the style. From my user testing, most users felt that it was a bit too “cowboyish”, “raunchy” or felt like a steak house. This was the opposite of the sophisticated, classy look I was aiming for.

For my third iteration, I removed the wooden backgrounds from the navigation bar and tab bars and chose black for it’s sophisticated and classy look. I chose a thin font, “Helvetica Neue Ultralight”. From my user testing, common associations were corporate, dark, professional, trendy, glamorous, masculine, modern but not friendly.

Conclusion

Final Resolution

For my fourth iteration, I attempted to lighten up the images by removing my dark gradient overlays. I also added white overlays over the text to brighten up the the app a bit. I also used a grey colour instead of black for the navigation bar. I chose a more rustic font for the headers and added a photo of the organisers to the events list. From my user tests, this made the app feel more friendly and approachable, but still felt upper-class and trendy. The use of images of friends made the app feel more personal, but users felt it should be a bigger focus.

View PRototype Paper Prototype

Next Steps

For future iterations, I will attempt to put more emphasis on friends and lighten up the app a bit. There are also additional layouts I could improve on in the event creation screens such as using grid layouts instead of lists which might make better use of the screen real estate.

OTHER PROJECTS

Check Out More Projects

Sorry as a service
Helping companies turn customer mistakes into legendary experiences
Third Space Learning
Redesigning the Third Space website
Twitch
Reinventing the walkthrough
BHS
Inspiration for home decorators
Mates
Event planning for friends
SUP
Connecting with people nearby
LUNCH
Find delicious food nearby
Sneakers
The complete sneakers guide