In the fall of 2017, I committed to becoming a UX Designer. I enrolled myself into Brainstation’s part-time UX Design course to fill in the gaps in my knowledge. The main assignment consisted of choosing a topic and completing a design project from start to end. This is my experience as I completed the different stages and the many mistakes I made. A wise jedi once said, “The greatest teacher, failure is”
Starting with a Question
Choosing a topic is always unnecessarily difficult. You want to choose an idea that you enjoy but you want your project be meaningful and challenging as well. I decided to focus on fitness and healthy living since I had started being more active in my own life. I really enjoy how social interaction and fitness complement each other and so I created a set of interview questions to understand this topic more. After conducting a couple of interviews, I had started to get recurring patterns of behavior but I wasn’t really getting insight on my problem statement of “How might we promote fitness through social engagement”.
When conducting interviews, the goal is to understand the user’s problem and the pain points that they experience. The questions should be open-ended and focus on going past the surface to gain a deeper understanding of the user’s problem.
One major insight that came out of these initial interviews was that running is a hard habit to start but easy to maintain once the habit has formed. Since I found many of my interview users through an application called Strava, which is used to track runs, I decided I would reduce my problem scope to “How might we improve the Strava onboarding process to help people form running habits”. My topic had much more clarity and I decided to conduct a second round of interviews to understand how people get started in their running journey and their use of Strava. I also interviewed people who don’t run and asked what barriers prevent them from starting a running habit.
More research Needed
If I was going to improve the onboarding process for Strava, I needed to conduct external research to become more knowledgeable and have a well-rounded understanding of this topic.
- Reviewing the top fitness tracking apps currently in the Google Play Store to understand which features are prominent and how the workflows differ
Reviewing the top 5 fitness apps was relatively easy to do. By recording a screencast going through the onboarding process for every app, I was able to walkthrough the process multiple times and mark which features each app had. Going through the features and highlighting the common ones shared among the different apps provided a strong foundation of what the current marketplace looks like and utility of different features.
- Reading research focused on the relationship between mobile fitness apps and social engagement to understand which features are useful and how they help change behaviour
Thankfully, many people were already investigating this field and it was quite easy to find research papers that were highly relevant to my problem space. The research papers focused on the likelyhood of influencing a change in behaviors, how social incentives affect a user’s physical activity levels and the effectiveness of gamification and its use in mobile fitness apps.
One of my conclusions that came out of this research was that most apps perform well in providing the tools and information but they don’t focus on behavioural change. Fitness apps in general also use social connection as the most common form of gamification to increase user engagement. The reason for its popularity is the continual interaction, users will always be creating more content through activities, support and competition. So it’s clear that social features have become the most common method of engagement and many apps are using gamification for health behaviour but majority of them are using it to provide motivation only. There is a missed opportunity to address increasing one’s capabilities and providing chances for reinforcement. To learn more about health behaviour, check out the precede-proceed model, it’s widely used to understand the psychology behind all of this.
Finding an answer
By now, you’re probably wondering, “when is he going to actually start sketching out solutions?”. It’s true I had completed a lot of research and I feel it really did help me understand the design process and what it meant to design for a purpose.
After completing two sets of interviews, reviewing the top mobile fitness apps and going through multiple research papers, I had a comprehensive understanding and many insights on the problem at hand. Looking through all the interview feedback, I organized it into 3 sections ( Pains, Needs and Behaviors) to discover what the recurring patterns were and which areas to focus on; Strava’s popularity, competition statistics and social worth.
Combining insights from all my research methods, I wanted to leverage the network that Strava had created to increase social interaction between people. By instilling behavior change right from the onboarding process, users would be more inclined to adapt to the new changes as they are starting the new routine. For regular runners who are discovering the app, how can we support and enhance their pre-existing lifestyle; the answer is to help them find other people like them.
In addition to the onboarding process, I also wanted to make changes in one section of the app called Challenges. This feature allows you to join a global challenge and earn badges upon completion and I feel like it was an afterthought for Strava’s product team. The quantity of challenges are limited and they are very similar, month to month. To continue the momentum of social interaction and its positive effect on fitness, cooperation challenges can be added to the repository of challenges that Strava has. Cooperation challenges provide a fun way to get new runners started as shown by the research done by Yu Chen. One of my interviewees said something that rounds this topic off well “I never would have started running if I didn’t have my running partner”.
Sketching a Solution
When it comes to actually sketching, I feel many people get stuck at this point for two reasons. They arrive here too quickly and all they have is a blank canvas looking back at them not knowing how to start or what to do first. The second reason, which even I’m guilty of sometimes, is wanting it to look good the first time. Sketching is about the process and you can’t be afraid of it looking messy. Through the rapid drawing and iterating, you figure out which ideas are good and your design evolves.
I used a small notebook to start the initial sketching; constraining myself to a smaller canvas so I can focus on the workflow instead of getting caught up on the small details. These designs were then enlarged and neatly drawn on regular A4 paper to be used with the Marvel app. Even though my designs became much more legible, I focused on keeping the flow and interaction as my priority as it’s easy to get carried away and start labeling buttons, writing copy text and determining the perfect layout. Marvel allows you to take pictures of your sketches and link them together with hotspots. This is immensely useful because you can get feedback on your workflow and user experience before you even start going digital. I shared a link to my paper prototype with several friends to get early feedback on what they thought and how I could improve my design.
The feedback was a real eye-opener as I realized I had missed so many things. As the designer, you know how the prototype should work and what the process should be. Wanting to draw the minimal number of screens to stimulate user interaction, I had combined multiple steps from one screen to another, which wasn’t a problem when I tested it myself, but it was obviously confusing to everyone else. I also didn’t create hotspots for going back, which is really important as users may want to change options and ended up stuck in a loop. The biggest mistake I made was the challenges section as it was not intuitive at all. I had created a new section for cooperative challenges but it was hidden in the navigation bar and that was the only hotspot I created on the screen. As you can probably guess, that led to a lot of clicking everywhere and then being forced through a flow that was only possible with constrained hotspots.
It’s important to let users discover features naturally and learn from how they approach it. Giving actual tasks and context is much better than just saying “take this and tell me if everything makes sense”
I really took the feedback to heart and used it when I converted my designs in Sketch, where I could make refinements much more easily (thank you, copy and paste functions). At this stage in the design process, you still want to focus on the user experience rather than the visual design. The design languages for both Android and iOS are standardized and fully developed, making design toolkits readily available for you to use. Having these modular components lets you provide a more realistic experience according to the platform you are designing for and it lets you iterate more quickly as you don’t have to create buttons, dialogs, etc from scratch. Turning all your sketches into a prototype is much simpler than you would think as Invision has a plugin called Craft that can sync all your Sketch artboards into Invision. Once that’s complete, you just need to create hotspots on the various screens and you have a very realistic, app-like prototype that can be tested out.
Try out the interactive prototype here — https://invis.io/TGGN618W85Y
Learning from my past mistakes during user testing, I clearly defined two tasks that I wanted users to complete and made sure to have multiple hotspots and paths that the user could take to make it realistic. When it comes to conducting interviews, it’s important that the person giving feedback is given appropriate instructions and context on what’s going on. People may refrain from giving honest feedback as they don’t want to offend your work so it’s important to let them know that you want any and all input. Thankfully, I was provided a script that was very helpful in how to introduce the topic and how to make the user feel comfortable giving useful feedback. My first user started off great and when they got confused, I would let them know what the purpose of the screen should be and they clicked the appropriate buttons finishing to the end of the full prototype quickly. After they finished, I asked what they thought and it was clear that they didn’t understand the purpose of some features and they had just clicked away.
When you’re performing user testing, you should always ask the user to explain their thought process and get them to think out loud before they take any action so it’s clear what they are trying to achieve and how they perceive the experience should be.
I had interesting story with another user as well. They navigated through the app smoothly and were thinking out loud before they took an action. There was some confusion in the challenges section as they didn’t know about Android conventions and couldn’t find the cooperative challenges. Listening to their feedback, I asked how they would design the feature differently and when they gave their answer, I explained my justifications for why I designed it the way it is. This cycle continued for a while and I got great feedback on where the confusion stemmed from but I had lost focus on the intended goal of the interview.
Always remember the focus of the interview is to get feedback on how well your design solution solves the problem need and it isn’t the best time/place to discuss design decisions with users. In addition, you can’t fall in love with your design and keep justifying why it’s the best.
It was a great learning experience to go through all the stages of the ux design process. From the beginning to the end; my idea, my design, my thought process changed a lot through the continual feedback and it resulted in a refined solution that meets the needs of the user better than anything I could have designed without the external input. As you can see, I made a lot of obvious mistakes but I did my best to understand my failure and what lessons I can learn from the experience.
Comparing the original workflow to mine, I didn’t change the sign up process significantly.
I did add more interactive features to create commitments while keeping the simple utilitarian look. You can see the new features/screens that I added highlighted by the green background.
If you’ve read this far, thank you for staying along with the journey. My next goal is to focus on the visual design. Using Material Design and Strava’s palette, I will be working on colours, iconography, typography and imagery to make the app feel authentic to the real experience.
Look out for part 2 where I’ll be sharing my journey into visual design.