Visual Design: Buddy Up

Adding brand personality to functional wireframes

This project involved adding visual design to paper prototypes of the app ‘Buddy Up’. Buddy Up is a sporting social network designed to link up sports players and events in a localised area.

Brand Personality

Thinking back to the research in the very initial stages of Buddy Up, I began to put together a brand personality. Forming a brand identity is crucial in order to best create a visual design that reflects the brand well.
BuddyUp was created for a partner who was new to London and looking for a way to get back into sports. For him, sports played a key role in his social life.

I used the initial research to come up with a three key qualities of the brand;

  1. Social
  2. Fun
  3. Modern

I used brand comparison to help me visualise my brand easier.

Mood Board

Once I had a clearer picture of the qualities I wanted my brand to portray, I began to formulate a mood board.

I used the mood board primarily to help me get inside the personality and portray the brand qualities, as oppose to beginning to create a style. As you can see from the palette on the right, at this stage I was really unclear on the colours I wanted to use. I did know, however, that I wanted there to be bright colours involved to reflect the fun aspect. I also wanted to involve green which I felt depicts the sporting side well and the park landscape.

Feedback on my mood board was that I needed to be cautious when looking to use bright colours. The user I designed the app for mentioned that he would want an app that was really ‘sleek’, and I thought potentially using many bright colours would be a contradiction to that. I went into the visual design stage knowing that I wanted to use bright colours (including green) whilst keeping the app simple and sleek.

First Iterations

I digitalised 4 selected screens from my paper wireframes so that they looked like this;

I then began to apply visuals such as a logo, and played around with some varying colour palettes. Below is an example of one of the number of colour combinations I tried.

At this point the user feedback was that the bright colours together were a little overwhelming. Whilst the user liked the colour palette on its own, when applied to screens and a gradient it wasn’t reflecting the ‘sleek’ feel. I found that using bright colours together was quite challenging and still was trying to find the ‘sleek’ feel that my partner wanted. I also needed to find a font that would reflect the sleek feel.

Second Iteration

I came up with a new colour palette that had some grey tones to give the app a more sophisticated look, and played around with pops of yellow and green which would reflect the fun aspect. In addition, I moved the logo to the centre so that it looked more logo-ish, as some users felt it was a little odd at the bottom of the screen. From this stage, the feedback was that the user really liked the colour palette and it had a more sophisticated feel, yet fun at the same time. However, the amount of white on the screens made it feel unfinished, as though it was still in wireframe stages.

Also, having some screens and some screens yellow was a point of confusion for users. I needed a way to uniform the colours throughout the app.

During testing for the visual design some users were confused by the functionality. Users felt it didn’t make much sense to press search on home and then have the same search filter for both events and profiles, therefore I changed it so the decision is made from home with the buttons ‘events’ and ‘buddy’s’ and then just a simple ‘search’ on the final iteration. I also changed the word ‘profiles’ to ‘buddy’s’ on the tabs at the top of home, for uniformity.

Final Iteration

The screens below show my final iteration for the visual design. Taking on board feedback from the previous iteration, I added in a grey gradient behind the Search and Event screens to give the app a more finished look and create uniformity. I expanded the map on the home screen to take up the whole page, and added in a grey transparent overlay to show the current event. On this home screen, I also changed the interchangeable circles to grey tabs that take up the width of the screen instead.

As oppose to having an underlined title at the top of each page, I instead added in a green banner with a title. I kept the underline on the event page, as it’s for a specific event. I also added in labelling below the buttons so it was clearer to the user. I uniformed the yellow and green throughout by using yellow as a highlight colour and introducing white for the majority of the text.

Outcome

The final feedback from my partner was that the app encapsulated a friendly but professional feel.

‘Yeah I would use this app — It looks inviting and fun but not tacky. I would trust it as a popular app that many people use because it looks well put together’

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Charlie Phillips

UX Designer with a background in Social Sciences and Human Research. Currently working in Just Eat’s global design team.