For my first project as part of the UXDI course at General Assembly in London, I was tasked with designing an app solution to a problem faced by a fellow student. The project was done in two sprints; the first sprint was spent ideating and creating a low-fi prototype, and the 2nd sprint focused on branding & visual design skills to take the product to high-fidelity.
I found this concept project really enjoyable and valuable as it taught me the end-to-end process and played to my strengths in creative problem-solving and innovation.
I chose the topic of fitness for the project and got to work interviewing my user Louise, a freelance graphic designer. From my questioning I gathered the following insights about her general fitness regime:
My user, Louise
- Louise keeps active with mixture of gym & team sports
- She struggles to motivate herself to go to gym but enjoys the tough workout she gets with classes
- She often cancels gym classes due to mood, work or social plans
- Conversely, she never cancels team sports as she enjoys them so much
I found the differences between the two experiences of team sports vs going to the gym particularly interesting, and asked Louise to walk me through her typical experiences of both. I created Experience maps for both scenarios & the differences in her emotional experience between the two were even more profound than I first realised.
For instance I learned that Louise had to rely on external motivators such as treating herself on the way to the gym in order to motivate herself to go. Overall Louise had a much more enjoyable experience when attending team sports purely because the social element meant that she looked forward to attending.
The process of experience mapping confirmed that the lack of socialisation in her gym experience was a real pain point for my user and allowed me to more clearly define the problem I needed to solve:
Louise needs a way to easily work out with friends because she is more motivated to exercise when there is a social element to the activity
Designing a Solution
I created some rapid sketches of different solutions to the problem I was trying to solve, and decided on creating an app that would let Louise know if friends were attending classes at the gym to help motivate her. It would also allow her to see other people attending the class and potentially make new friends through the gym. I created a storyboard for how this would solve Louise's motivation problem:
I sketched some low-fidelity wireframes and created a prototype that I tested with various users including Louise. During the second sprint of this project I took the design to mid and eventually high-fidelity with all iterations being informed by insights from user testing (more detail on this below).
Branding & Visual Design
During the second sprint of the project I began to think about the branding of my product. I wanted to emphasise the elements of fun and community which stood my app apart from other fitness apps, so came up with the brand name of AmiGo Gym, with the word Amigo combining the social and fitness elements. I also kept these both in mind when designing the brand personality and mission statements:
AmiGo Gym Mission & Brand Voice Statements
AmiGo Gym Brand Personality
I then put together a mood board of inspiration for the look and feel of the brand. I knew that I wanted to steer clear of the traditional deep colours used by competitor fitness and gym apps; instead I wanted to carry across the fun of the brand while maintaining a sense of inclusivity and gender neutrality. My moodboard conveys a sense of energy, zestiness, brightness and fun which is what I wanted my app to bring to the fitness market.
From this mood board I picked a more selective colour scheme of a fresh blue as my primary colour, in combination with a zesty punchy orange for added fun and encouragement. I created a Style Guide featuring my visual elements that I wanted to incorporate into the brand, including the logo and typography:
My moodboard conveying freshness, fun & health
My style guide with simplified colour palette
User Testing & Iterations
Before I could apply my visual design & create the high fidelity prototype, I created a digitised mid-fi prototype from my lo-fi sketches using Sketch, in order to iron out any details or feedback I had missed in my first round of testing.
I tested my mid-fi prototype with 4 users giving them the task of booking a spinning class, and from these tests I found 3 main areas that needed improvement, all of which I iterated in my hi-fidelity screens:
1. Class-Booking Process
Insights: All users went to hover and/or click on the ‘3 Friends Attending’ section when testing, expecting to have a quick view of which friends were attending. Instead they had to click on ‘Book’ first to get any more information.
Actions: I created an accordion dropdown for the class so that users would be able to have a quick view of key information such as which friends are attending, and more information about the class before deciding to book.
Above: The class list view in mid-fi vs hi-fi. Users testing the hi-fi design responded well to the accordion drop-down with further info.
2. Bottom Navigation Bar
Changes made to the Nav bar
Insights: Users commented that the navigation bar felt very cluttered, and that the back and forward navigation buttons were unnecessary. In addition, users remarked that it was unclear where they were within the navigation at any given point.
Actions: I removed the back and forward navigation buttons which immediately made the navigation feel cleaner. To make it clearer to the user where they were in the navigation I added visual signifiers by making the icon of the current page bold and underlining the wording.
3. Look & Feel of the App
Insights: Users commented that the look and feel of the app felt very busy and cluttered, and that some items such as text and buttons were very large on the screen.
Actions: I created a hierarchy within the text sizes and also made use of spacing to make the interface cleaner and much less cluttered. I also took out unnecessary elements such as the ‘See Info’ button below the usernames, instead combining into one button.
Please see below for a video of the final prototype, or if you want to explore it yourself click here
Given more time, I would:
- Explore how the user profiles would work and the possibilities of in-app social messaging features (to add extra value to the concept of bringing people together through the gym).
- Explore the issues around GDPR on collecting and displaying people's personal information.
- Test hi-fi iteration of my prototype with more users, and gather more feedback for improvements, particularly on areas such as accessibility and readability of certain page elements.