Overview

Tough Mudder is an endurance event series in which participants attempt 10–16 mile-long (16–19 km) military-style obstacle courses that tests mental as well as physical strength.  I along with my teammates, Carlyn and Leo, worked to increase repeat participation, and encourage team training.

 

My role

  • Comparative/competitive analysis and heuristic evaluation
  • Tough Mudder Style Guide
  • Design and Prototyping
  • Usability Testing

Research

Stakeholder Interview

We conducted stakeholder interview to better understand and learn about Tough Mudder and its users.  By the end of the interviews, we agreed to focus on the team aspect, fundraising and accountability aspects of the training process for Tough Mudder.

jackcowan


PERSONA DEVELOPMENT

Using the information we gathered from our stakeholder interviews and our own research, we created a persona named Trina to remind us of our primary user needs and goals.


Plan

Persona Scenario

We created a persona scenario to visualize the path Trina would take to move through the application.  In this scenario, Trina logs into the application and navigates through its features.

User FLow

A detailed user flow is shown below, listing the steps Trina will take to sign in, view her team dashboard, passbook information, and personal workout goals.

Site Map


Design

 

Sketches

I sketched a variety of different interface solutions, that gave perspective to some of the information architecture issues in a low-fidelity manor.

STYLE GUIDE

I created a basic style guide for my team to help emulate the Tough Mudder palette.  The style guide includes color palette, image examples as well as font families to use.

HIGH FIDELITY MOCKUP

I created a high fidelity mockup in Adobe Photoshop that followed the style guide I created,  and best demonstrated a design based on user gathered data.


RAPID PROTOTYPING

Because of my familiarity with Xcode, I created a quick prototype in storyboard, based off the high fidelity mockups I created, and uploaded it to my iPhone 6 for usability testing.

Prototype

 

Usability testing (round 2)

During out second round of usability testing on our high fidelity mockup, some gaping holes came to light.  First, although the design looked pretty, a lot of it was unnecessary and confused users instead of helping them.  Also, we realized we had strayed pretty far from the Tough Mudder style guide and that our next iteration should more closely resemble the company and their style values. 

Deliverable coming soon...

Test & Iterate