Design Process

As there was a fairly quick turnaround on this project, I thought this a great opportunity to utilise a Design Sprint - which was slightly modified to my specific needs and constraints (team of one 👋) This would enable me to work to a framework that encouraged quick experimentation and deliverables. Due to the requirement of the task needing high fidelity mocks I added an additional step - upon review this was not necessary as I just took more time on these items before validating with User Testing.

User Interviews

I arranged a chat with a spin class instructor through a mutual friend, and also proceeded to collect insights from friends who have attended spin classes in the past. These conversations helped to surface insights that I could incorporate into the design work and help facilitate discussion later in the project.

Key findings: A leaderboard is great for those at the top but not so great when people "aren't feeling it"

Competitor Analysis

Some quick desk research was conducted doing competitor analysis of other applications that operate within a similar field, I paid particularly close attention to information structure, layout, tone and navigation.

Key findings: All competitors displayed key metrics very boldly and clearly, irrelevant of other stylistic choices

Scientific Research

In order to attempt to replicate the Lightning Talks within a Design Sprint, I looked for some expert views on the topic that I hoped would share some insight. I then noted down some of the key insights within a brainstorm.

Key findings: Too much competition can hurt motivation and make users feel uncomfortable

User Journeys

I mapped out the User Journeys in order to look at the mindset of the user and illuminate any pain points, as well as identify opportunities to create new or improved user experiences.

How Might We? & Affinity Mapping

Using the information and insights gathered at the previous steps, I utilised the ‘How Might We?’ method to fill post it notes with solutions. This is a method that involves reframing challenges as solvable questions. I even shared some of the earlier insights and encouraged others to contribute to my HMWs. After this I then created an Affinity Map to group themes and highlight areas.

Key findings: Our solution should be a fun, rewarding and motivating experience with important information clearly displayed

Crazy 8's

Utilising another Design Sprint tool (Crazy 8’s) I also did some exploratory sketching to delve into some of the more creative ideas I had been having - this is a great way to expand on some of the tangent themes that may have cropped up earlier. These then begin to take the shape of low fidelity wireframes.

Wireframes

Developing wireframes is a quick way to visualise the information we have collected so far, and begin to piece together the experience and interface. Through the wireframes I was trying to understand how the app could be playful, fun and easy to use whilst cycling.

Branding & Logo

In order to create a cohesive prototype for our usability test, I decided to create a brand for the spin class app. The name “Joya” was chosen because of the various positive connotations it has across the globe, such as: Joy, Joga (Spanish for ‘to play’) and Jouer (French for ‘to play’). The branding and tone was targeted at the chosen user base and intended to be warm and playful.

Mobile App Design

Once I felt I had explored enough UI and UX patterns through wireframing and sketching I refined the best of these ideas into high fidelity mocks. The focus with the app was to provide a fun, rewarding and useful experience. I particularly noted the research and feedback highlighting the importance of feeling comfortable in order to get the benefits of competitiveness. Utilising the avatars adds an element of playfulness and also allows the user to deflect personal negative thoughts through the avatar rather than themselves

TV App Design

In designing the TV leaderboard there were a few technical aspects that needed to be considered: the legibility of type, contrast in different light and different viewing positions. From a user’s perspective I went for a non vertically hierarchical leaderboard, again to lessen the stress of competitiveness. It’s much harder for the user to scan across to see exactly what position they are in.

At the end of the class, there is no solitary winner - there are 3 different categories including highest points, biggest PB and most Kudos. Giving everyone the opportunity to feel as though they have achieved something in the sessions.

User Testing

Without having a spin class to test on, I utilised the bike trainers we have in our flat and set up a small studio. I then got the participant to cycle and interact with the app, discussing the what worked well and what didn’t with both the mobile app and the leaderboard. Below are some of the key takeaways that if I were to iterate further I would start with.

Key findings: "I love how vibrant and bright it is, really draws my attention and focus. Some of the text on the phone is a little small, I want to be able to glance down and see what people are saying or doing. I think the app could be even simpler - think about which things need to be seen during the session vs later on. Overall, I liked it!"