COHESIVE TEAMS

Motivation is driven by Accountability and this is facilitated through Communication.

UX Design High Fidelity comp of mobile screen for Tough Mudder application
Overview

Design an application for participants in Tough Mudder, a team oriented obstacle course challenge. The application should facilitate camaraderie and team building before the team even hits the course.

My Role

UX Designer

Contribution
  • Project Tracker Development (Trello)
  • User Research (Interviews)
  • Persona Development
  • Task Analysis
  • Affinity Diagram
  • Scenarios/User Flows
  • Sketches
  • Layout
  • Wireframes
  • Comps
  • Prototype
Tools
  • Pen and Paper
  • Sketch
  • Photoshop
  • InVision

The Challenge

How do you help teams prepare for an exceptionally physical challenge that requires top-notch teamwork? And how can we design an application that accomplishes this for groups comprised of users with different goals and motivations?

Participants need a way to organize their team members to ensure that every member is physically prepared to compete in the challenge by tracking their team goals as well as their singular progress and have easy access to the right training materials.

CONTEXT

Tough Mudder

Tough Mudder is a team-oriented 10-12 mile obstacle course designed to test physical strength and mental grit. The event is an untimed team challenge that placed camaraderie and team building over rankings. Tough Mudder wants to increase the number of repeat participants and sees the opportunity to grow participant loyalty through creating an application that will facilitate team training and build camaraderie even before a Tough Mudder team hits the course.

COLLABORATION, DESIGN & PROFESSIONALISM

The Team

  • 2 UX Design Colleagues.
  • 3 weeks to design a working prototype.

My role on the team included contributions to each phase of the project from planning and research through design and delivery.

UX Design design studio group with Mitchell Thieman and design team
LEADERSHIP

Defining Our Process

I presented the team with a Trello board that I had developed specifically for this project to track the goals and delivery for each phase. I had 100% buy-in, and the board became the central document for monitoring specific deliverables, due dates, ownership, and progress.

UX Design project management trello board designed by Mitchell Thieman
RESEARCH

Understanding The Business

I performed a business analysis of Tough Mudder's current branding strategy. We conducted a competitive study of three other "extreme" physical challenges or races.

I found that there was no evidence of an application that addressed the absence of a team building tool for groups of participants in these events.

Competitive analysis chart of UX Design research for Tough Mudder application
* Competitive Analysis Chart - Alton C. Jenkins
RESEARCH

Understanding The Users

Affinity Map of UX Design User Research for Tough Mudder application

To gather our research, we interviewed eight individuals who have participated in a team-oriented physical challenge. I distilled our significant findings into Personas that would inform the ideation of a potential solution.

“I'm not super competitive, but I don't want to show up and be World Class Wuss #1”
Secondary Persona for UX Design User Research for Tough Mudder application
UX Design Primary Persona for User Research of Tough Mudder application
“I challenge myself by setting the bar for others and pushing my personal limits”

Discovery/Insights

Based on the insights we gathered from the user research, I was able to distill a critical idea through the synthesis of this data. There are mostly two archetypes who participate in Tough Mudder events:

  1. The competitive individual motivated by challenging themselves personally. They enjoy participating in team activities as it also provides an outlet for them to become inspired through motivating others.
  2. The reluctant participant who enjoys the social aspect of team activities, but is unsure of the physical challenge. Their desire to engage with other people motivates these individuals, but there is also an active will to support the team and not be responsible for hindering their success.

The goals and attitudes of the users came down to a single statement that would define our problem and create the foundation for designing our solution:

Motivation is driven by Accountability and this is facilitated through Communication.

Designing The Solution

Our research showed us that Tough Mudder participants need a way to organize their team members to ensure every member is physically prepared to compete in the challenge by tracking their team goals and personal progress, as well as have easy access to Tough Mudder training materials.

Our goal is to design an application that will facilitate community and camaraderie by providing easy access to shared training content, reports on individual progression and growth, and visibility into a whole team’s performance and progress. The application will provide a positive experience for both Tough Mudder veterans and First Time Participants alike.

Rapid Sketching - Design Studio

We used the Design Studio Method to quickly generate the conceptual design that would inform the next phase of creating low fidelity wireframes.

UX Design design studio sketches laid out on a table

Low Fidelity Wireframes

I utilized Sketch to design the first iteration, and this would be the basis for creating a working prototype in InVision to begin the testing phase.

Medium Fidelity mobile screen wireframe for UX Design of Tough Mudder application designed in Sketch App
Medium Fidelity mobile screen wireframe for UX Design of Tough Mudder application designed in Sketch App
Medium Fidelity mobile screen wireframe for UX Design of Tough Mudder application designed in Sketch App
Medium Fidelity mobile screen wireframe for UX Design of Tough Mudder application designed in Sketch App

Usability Testing

We completed User Testing with 5 participants using the functional prototype. The results were synthesized using a Rainbow Chart.

Rainbow Chart for UX Design User Testing research for Tough Mudder Application
* Rainbow Chart designed by Clara Heimsath

The findings from this first round of testing (columns P1-P5) revealed that several users had trouble with our design of the buttons and other navigational elements. This feedback informed our decisions as we revisited our initial goals and re-iterated the wireframes and prototype based on the synthesized testing data.

We re-designed the navigation buttons along the bottom into a more simplified global navigation that “chunked” the features in a way that best addressed the problem we were solving. We removed the dropdown navigation in the header as this was not a successful solution to assist the user in identifying their current location within the application. The solution reduces the number of screens in the prototype and streamlines the steps needed to utilize most essential functions.

Iteration

High Fidelity Wireframes for UX Design of Tough Mudder Application created in Sketch App and Prototyped in InVision
High Fidelity Wireframes for UX Design of Tough Mudder Application created in Sketch App and Prototyped in InVision
High Fidelity Wireframes for UX Design of Tough Mudder Application created in Sketch App and Prototyped in InVision
High Fidelity Wireframes for UX Design of Tough Mudder Application created in Sketch App and Prototyped in InVision

Results

The success of our design decisions based on user testing was validated when we tested the prototype again with a 6th user. This individual encountered no difficulty in navigating the given tasks in the application and did not experience any of the frustrations shared by the first group.

High Fidelity comp of mobile screen for UX Design of Tough Mudder Application
View Prototype
NEXT STEPS

Phase 2 - Continuous Improvement

The solution we delivered addressed all of the elements within the scope of this project. As with nearly everything, there are of course many aspects that I would like to refine, test, re-iterate and improve.

The first thing I would like to do is complete the re-design process I've undertaken for the final comps. We did not have a style guide available, and we tried to combine what we could pull from the style of Tough Mudder's current website with what we thought would convey the company's branding and attitude. As with most things, I was able to step back and re-think some of these decisions.

The first application of high fidelity to the wireframes failed. I struggled to find a way to incorporate the bright orange that dominates Tough Mudder's branding. The use of high-intensity gradients was meant to convey the intensity of training and preparing for such a physically challenging event. However, it only served to distract from the key features and add an element of confusion to the functionality of some of the design patterns:

High Fidelity Wireframes for UX Design Tough Mudder Application created in Sketch App and Prototyped in InVision
High Fidelity Wireframes for UX Design Tough Mudder Application created in Sketch App and Prototyped in InVision
High Fidelity Wireframes for UX Design Tough Mudder Application created in Sketch App and Prototyped in InVision
High Fidelity Wireframes for UX Design Tough Mudder Application created in Sketch App and Prototyped in InVision

Heuristic # 8 - Aesthetic and minimalist design

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

Simplifying My Approach

I believe that there is always room for improvement. One of the most gratifying aspects of design for me personally is the process, and part of that process is getting feedback, re-examining outputs and continuing to refine. I received some honest critiques of my design and studied the overall effect of my decisions.

I think the functionality of the application and its ability to address both the needs of the user and the business goals is very successful. I have applied a different treatment to the higher fidelity comps, and the next step is to implement this on each screen of the prototype, retest, reiterate and continue to synthesize this practice into my growth as a UX Designer.

High Fidelity re-design of mobile screen Wireframes for UX Design Tough Mudder Application created in Sketch App and Prototyped in InVision