2018, Personal Project
The Metal & Music app is a simple set & rep logger that allows users to work out quickly. It enables users to be able to get the most out of their weight lifting with a 5 week work-out cycle based on the Progressive Overload principle. A rest timer is built in and Spotify is integrated to save time and willpower that would have otherwise been spent switching between apps. Below I will outline the project design process that I went through for the first version of the app.
The Metal & Music app is a simple set & rep logger that allows users to work out quickly. It enables users to be able to get the most out of their weight lifting with a 5 week work-out cycle based on the Progressive Overload principle. A rest timer is built in and Spotify is integrated to save time and willpower that would have otherwise been spent switching between apps. Below I will outline the project design process that I went through for the first version of the app.
The vision
I envisioned designing an aesthetically pleasing rep and set logger with a built-in training system suited to the users fitness level. The app should simultaneously be light and quick, intuitive and easy to use. To encourage motivation, historical statistics, a rest timer and existing favourite playlists should be incorporated or easy to access without switching between apps.
My role
As this is a side project I am working on to illustrate my design process, I worked on each part of the process outlined below.
Empathising & defining the problem: Research & user interviews
Researching similar apps helped me to define a niche and gave me insight into potential gaps in the market of weight lifting apps. Interviewing users helped me to identify needs and requirements based on real-life experiences for a minimum viable product.
Ideation: Personas, flows & wire frames
I then started working on developing personas, mapping out user flows and basic wire frames on paper, and then digitally.
Empathising & defining the problem: Research & user interviews
Researching similar apps helped me to define a niche and gave me insight into potential gaps in the market of weight lifting apps. Interviewing users helped me to identify needs and requirements based on real-life experiences for a minimum viable product.
Ideation: Personas, flows & wire frames
I then started working on developing personas, mapping out user flows and basic wire frames on paper, and then digitally.
Prototypes, testing & implementation: High fidelity prototypes with iterations
Concept testing and one-on-one usability testing with high fidelity prototypes was useful to find out how to prioritise agile iterations.
A note on time management
Because I was managing myself on this project, I found it tricky to assign a time-line to the project. Naturally, I had to try and resist scope creep and keep aiming for a testable minimal viable product: a first-version design concept designed in Sketch that could effectively be handed over to developers through Invision. I aimed to have the app design ready to go into development within 30 days of the start date.
Persona development
Learning to think like a potential user
While reading about and downloading and testing fitness apps and weight lifting apps, I was able to get an idea of how different types of exercises and apps attract users that have a variety of different requirements. For example, some users have no problem with motivation and are focused on being able to simply log their workout details and measure results accurately. Others need music matched to their workout to stay motivated.
In this case, one-on-one interviews with potential users was also insightful for beginning stages of the persona developments. I used my research along with the goal of creating a simple logger app that uses progressive overload cycles to define different personas. To encourage empathy and connection with personas, I roughly based the personas on real people, or a combination of real people, that I know.
Defining behaviours for scenarios
Behaviours and user backgrounds that came into play in ordering personas were:
• How much are they into fitness and lifting?
• How much are they into fitness and lifting?
• Why do they want to focus on weight lifting?
• What motivates them to work out?
• When will they use the app?
Opportunities for problem solving
I also kept and eye and ear out for existing needs and pain points:
• What slows, frustrates or stops users when they are working out?
• Is there anything glaring missing from apps they they may be currently using?
• What information and functionality would be most helpful to assist them in achieving their fitness goals?
Primary persona
The most active audience might be fitness fanatics or personal trainers that already know about the principle of progressive overload. They might use the app three times a week or more. Already motivated, these users might have already tried a variety of fitness apps and found that they offer too many features - many of which are unused because they are too complex or just not really very useful. Users like Marc are motivated by being able to easily and quickly track their results and see straightforward statistics.
Secondary personas
Users like Paul and Cara want to gain strength quickly and effectively and may be new to weight lifting. They might find the term "progressive overload" intimidating and that could be a barrier of entry for them (however, once they have defined their level of strength on the app, they can save time that would have been spent researching exercises when the plan is automatically created to match that). Often bulking up isn't their aim, they are more interested in maintaining general good health or are involved in another form of fitness as well. As a result, they might only use the app once or twice a week.
Defining user & task flows
First off, I tried a writing-first approach to define the user flows and then moved on to paper sketches. I found working with Post-it notes to be really great for easily trying out different flow scenarios for different personas.
I decided to use draw.io for basic task/user flows. Not the prettiest presentation, but low fi and to the point, I drew up the most basic user flows for new users and regular users. Below you can easily see that new users need to set up work outs before starting their working outs. Connecting to Spotify is optional, but a main feature.
A regular user that has already registered and set up work outs can start a work out straight away once they have successfully logged in.
Wire frame development
With a basic idea of how the app was to work based on research, business requirements and the MVP, I got out my pen and paper and started very rough rapid sketches. Working really quickly, I was able to annotate my wire frames. At a later stage when reviewing them and add any changes into the new paper low fidelity mock-ups. After the third version of the rapid prototype of the main screens on paper, I opened up Invision and started using Freehand. Working quickly, Freehand allowed me to make updates in real time that I could share with others for testing purposes. Here are a few of the early low fidelity rapid prototypes (you'll notice the app name is different here and was updated later).
Experience principles
After keeping an eye on competitors with the business requirements and primary and secondary personas in mind, I defined experience principles that helped me to brainstorm an effective look and feel.
Look & feel
I decided on a look and feel that enhances to the experience principles set out above:
• A simple & uncluttered design will keep users focused on their workout. I used thin lines (instead of chunky text boxes) and simple wire icons generously spaced (with finger sizes in mind, especially for the target market).
• Vibrant highlight colours will naturally make users feel energised and motivated. Contrasting tonal values allow for easy readability. White text and colours that might feel like they glow off the dark background worked most effectively.
• A slick design communicates an effective, reliable quality product. For this I used a dark elegant background - a benefit being that it's not too demanding on screen brightness and as a result saves battery life (while on the topic, less blue light is probably better for user's health).
Mood board insights
Below is a mood board of other designs that I gathered on Pinterest and kept in my "ideas bank". I drew inspiration from these throughout iterations.
Introducing the Metal & Music app
A note on designing with empathy
Throughout the design process, I kept the personas and my personal experiences close at hand (I myself could be a secondary persona like Cara). I aimed to stay empathetic to how the users think and behave over and above a focus on fancy features. The usage contexts that I set out (and the fact that they were based on real people) helped me to keep a clear view on user expectations and what would make and ideal experience for different users.
Important considerations for usability in functionality
I accessed my list of experience principles throughout the design process for the user flow and experience as well. Here below are a few ways that they influenced design decisions.
Simple & reliable
By choosing not to include a lot of other features and by finding a niche or sorts with the app vision, I was able to keep the app itself simple. Simplicity also made it easy to manager user expectations and provide a more satisfying user experience. Should the app go into development, a reliable, fast and light app would be essential.
Motivational & energising
The app is designed to create a no-fuss process that doesn't sap willpower or drain motivation while working out. Near the last exercise, I've added a celebration screen to let users know that they've done well and the workout is almost complete. There is also a progress bar included with every workout to encourage completion. The fact that the app is linked to Spotifty allows users to be energised by music, conveniently, while working out at the gym.
Effective & convenient
With a quick set up and start up process, it is really easy to get stuck in and to reach and access primary functions quickly. Because the sets and reps are automatically filled out, users can save time that would otherwise have been spend on manual logging every single detail. The icons are large enough to be tapped easily, and have sufficient space around them as well.
Transitions and interactions
When I linked up the app screens up in Invision, I used a few animated transitions to enhance the user's understanding of certain functionality and flows. For example, a menu sliding in from the left teaches the user the the can summon the menu at any time with a swipe in the same direction. Another example of behaviour that could add meaning, is a flip to the right when users sign out (almost as if visualising the closing of a book). However, again with simplicity and agility in mind, I didn't go to town with fancy animation, as it is meant to compliment the user flow and no detract from it.
Prep for dev handover
In terms of annotations, I found that Invision's comment functionality would be sufficient for live updates within a team environment. The mood board that I set up in Invision and shared styles in Sketch are also great time savers for when I put together my style guide at a later stage (watch this space).
Usability testing plans
Interviews
At this stage of the project, one-on-one interview usability testing with representatives of the primary and secondary personas could be quite useful to clear up any potential misunderstandings with the functionality or user flows. I would expect it to reveal interesting behavioural and attitudinal insights. For this meeting, I plan to set out a few realistic tasks for users and have them talk through their thought process in completing the task. Eye tracking would also be useful for this aspect of the research.
Open card sorts
Independent of the high fidelity prototypes, this exercise could add interesting insight into how different users might visualise the linear work out set up. It could spark new hierarchy ideas and information architecture insights while highlighting which features are most important for future development.
Problem discovery
A focus group of 3 - 6 possible users could be a great way to get to the bare bones of any potential problems that may have been there from the start or crept up in iterations. One of the benefits of working on a project solo is the speed at which one can work, but results and finished products are always richer and more accurate with a variety of insights from different backgrounds.
Online surveys and remote testing
At this stage, I don't think online or remote usability testing would be very realistic of valuable. This is partly due to the fact that the app is not built and so not all of the interactivity is in place.
Plans for improving usability in V2.0
As I continue to build on the app and go into testing phases, I am sure that there will be many revisions and new features to sketch out for the product roadmap. A few things that I believe would improve usability would be:
• Guided animations for first time usage and a better on-boarding experience
• Motivational audio that would let the user know what's next and how they're doing
• Weight plate calculations per set to save the user time or frustration
• Ability to export cycles as .xls files for drilling deeper in the user's own capacity
• Better, more detailed data visualisations and statistics
• Instead of next clicks, it might be good to have functionality that allows users to rate whether it was easy, challenging, difficult or impossible to do that exercise
• Think about ways of suggesting better form for exercises as a light animation or as tips to avoid injury
• Adding a manual setting to the a timer
