Seven Movements app design — a UI case study
Designing an app that encourages users to develop healthy habits through movement exercises
Seven Movements is a Canadian based company, which aims to encourage users to develop healthy habits through their 7 minute video tutorials for exercise and movement. Established in 2014, Seven Movements currently have a website to host their videos, however for the next stage of their development are looking to create a native app. This is where we came in.
The Brief
- Create an easy to navigate app that allows users to access Seven Movements’ exercise video tutorials, set personal goals and track their progress
- Create a brand identity — although Seven Movements already has a website, the client asked that we create a new style guide that is more representative of the brand
- Create an accessible app — Seven Movements has a high proportion of older users, so it was imperative that the design is accessible for the 55+ demographic and those with visual issues
The Team
I worked alongside one other UI designer and three UX designers on this project. We had three weeks to complete the UX and UI design of this app, at which point we presented our design to the client and the developer. The app is currently under development using our design.
The Process
To complete the project brief, both the UX and UI teams conducted design research, we then moved on to planning, then the design phase and finally the prototype. We tested throughout the project, and therefore we were constantly iterating and going back to revise previous work.
To start the project, we wanted to understand more about why Seven Movements is important to users and what it can offer.
We discovered:
Seven Movements solves these issues through their 7 minute ‘movements snacks’, which are video tutorials which can be done at your desk, in your living room or in one of their ‘self-care stations’. These videos aim to be accessible regardless of fitness level and provide people with the knowledge and confidence to be able to exercise in a safe way.
To further our research, we looked into other wellbeing apps available. There is no app that is directly comparable to Seven Movements in terms of content, however we looked into:
- Meditation apps (Headspace, Calm & Daily Habit)
- Yoga apps (Asana Rebel & Daily Yoga)
- Fitness apps (Nike Training Club, Fitbit Coach & Seven Minute Workout)
We looked into the different UI elements of these apps, and compiled a gut test. The gut test allowed us to get a good idea of what the client wanted the Seven Movements app to look like, by showing him 20 images which he rated from one to five.
From the gut test, we discovered that the client wanted:
- Simplicity — big images with a small amount of text
- Large and clear CTA (call to action) buttons
- A mixture of images and logos
- White backgrounds
- Images with colour overlays
We also discovered that the client does not want:
- Black and white with no colour
- “Blocky” layout with hard straight lines
- Overly complex pages with too many graphs or statistics
- Dark backgrounds
- Too much art and colour
Having completed the research, we moved on to decide on a ‘why’, or the core purpose of the app, which would be the basis of all our design decisions. To decide on a why, we thought of the key words that have come out of our research and conversations with the client. Four words really resonated with what Seven Movements are trying to achieve with their app:
- Consistency
- Confidence
- Knowledge
- Health
Based on these four key words, we decided on the following why:
Based on this why, we came up with two separate art directions and mood boards. The first is the ‘energetic and confident’ mood, and the second is the ‘calm & inner strength’ mood.
We presented both these moods to the client to decide on an art direction. He chose the energetic & confident mood board with the orange, green and blue colour palette.
The mood of this board is depicted in full below:
We then decided on the visual language that we wanted to use, which is shown below:
The first stage of the design was to create a Style Tile, which gives a representation of possible texts, iconography, buttons and images that we will use in the app.
Our design decisions are outlined below.
Typeface
Colours
As well as choosing colours that represented the moods we wanted to convey, we wanted to ensure they were legible for those with vision issues. We tested the colours out on people with colour blindness, including our client, and used online accessibility checker tools. Our colours scored very highly in these tests.
A copy of one of our accessibility test results is shown below:
Logo
Based on these colours, we made different logo iterations. Seven Movements wanted to keep their original logo, however were open to a colour change.
The original logo:
The black logo does not provide the feeling of calm, health and confidence, so we played around with different colour iterations. Eventually we decided on using a gradient. The gradient represents the movement of energy, and gives the calm but uplifting mood we wanted to convey.
Icons and buttons
Our full style guide is shown below:
Creating the high-fidelity screens
The UX team completed the mid-fidelity wireframes after a large amount of research, planning and testing. We were able to start using our design on the actual screens.
Some mid-fidelity screens are shown below with the corresponding high fidelity screen underneath.
To arrive at our high fidelity prototype, we made multiple iterations and tested with users. An example of our iterations is shown below:
We started using different coloured icons for each section — ‘feel better’, ‘prepare to play’ and ‘programs’. However, after testing we found that users were confused when tabbing between the living room, at desk and self-care station screens, as all three screens were the same.
We then decided to use tabs to go between these screens, with the icons on each screen assigned a different colour, to make it easier for users to navigate between screens. However, this was still not enough to ensure users understood they were going to different screens.
Ultimately, we decided on the right hand screen, with shows a back ground colour and icons placed on cards.
View our completed prototype on InVision here.
Our client was extremely happy with the design, and felt it captured the personality of Seven Movements. The developer is now working on implementing our designs.
Note — this was a real client project which I completed as a UI design student.
