EmmaSwim App (Visual Design)
Visual design - General Assembly
In this article I outline the process I followed to create the visual design of my first project at General Assembly.
It is an App to find places to go swimming in London and around London, swimming pools as well as outdoor places to go swimming. It also helps you find competitions or people that wants to go swimming.
This project is based in just one user (Emma), she loves swimming. She has been practicing for a while but when she moved to London she struggles to find places to go swimming. The ones she finds are all too far and/or crowded.
Below, I explain the different steps I followed to create the visual design of the App.
Brand position
The first thing I made was to choose from different adjectives, which ones adjust better of what I want the brand to be. I chose the adjectives that better adjust to my main persona, what she wants from the App, what she feels when she practice swimming and when she uses the App.
Brand comparison
The next step I carried out was the brand comparison. I compared my App with different companies, objects and personalities to show how I wanted the brand to be, and what values I wanted to show or not show on the App.
It is a good tool to provide guidance in the future and maintain consistency throughtout the App.
Inspirational images
The mood board is a composition that helps to explain the meaning behind the brand. I used different images to represent the brand personality and values.
I also created a collage that allowed me to create the brand colour palette.
In this case, I chose natural places related to swimming, mainly outdoors as my persona enjoys go swimming outdoors, especially swimming in the sea. She loves to feel connected to nature. She also thinks it is good for her wellbeing and she feels relaxed after swimming. I tried to get all these feelings in the images of the collage.
Colour palette
From the images I made a colour palette. I chose a monochrome palette to show the water perspective. I also added some red/orange colours to have some contrast with the monochrome palette.
See below the colour palette and the collage together:
Sketching
Once I had created the mood board I started creating sketches of the App. I based my sketches on the paper prototype that I made for project one.
Low fidelity
I tried to make a low fidelity prototype as similar as possible to the paper prototype.
And from that prototype I created the high fidelity prototype.
User feedback
I made some iterations on the prototype before creating the final prototype. I did user testing with six users to get insights and pain points. See some of the changes below.
I made changes to the button and font colours to improve accessibility; I added icons to the menu and increased the size of the images.
High fidelity
After all the iterations I came up with the final prototype.
Conclusion
I developed an App that is easy to use and helps users to find places to go swimming.
All the processes were carried at keeping in mind my user needs, in this case Emma, while following the user centred design process.
