Background
I worked at SweatWorks from 2013-2015 and during this time, they were developing Spartan's website and was also tasked with proposing a Spartan mobile app. The purpose of this app was to help event participants learn more about their registered races, see event pictures, get race results, and use additional event related features.

Client
Spartan is the world’s leading obstacle race company with millions of participants in more than 40 countries worldwide.

Role, Responsibilities, and Teammates
As the only UX Designer, I was responsible for gathering requirements, creating high-fidelity prototypes, and validating the design, while working closely with the Product Manager and Senior App Developer.

The scope involved only the mobile app UI and interaction. The research and discovery was done mostly by the Product Manager. The constraints was being a UX team of one and collaborating remotely with members in different timezones.

Goal
Design the UI for a proposed Spartan mobile app that lets event participants get information about Spartan race events.
Process
Process undertaken. An iterative process of Ideate, Prototype, and Validate.
Ideation
I synced up with the Product Manager to understand the requirements and ideate the flow. We focused on the products MVP - getting events information. Because of this, I've learned the value of prioritization. In my opinion, we can design and develop anything, but products become successful only if they build from the most important features first.
Prototyping
I conducted a UI audit of the website to standardize the components in the app.
User interface audit of the website.

An early UI audit of the Spartan website (2014)

After the first hi-fidelity prototype, stakeholders commented that the design looked like a crowded version of the website.
Prototype with stakeholder feedback.

Some feedback from the initial design for the login, home, and menu screen.

Based on the feedback, I iterated the design to make it well suited for a mobile app. Because of this, I've learned to be flexible based on the medium and designed the UI thats adopted to a mobile app, while staying consistent to the look and feel of the brand.
Updated mobile app user interface based on the stakeholder feedback.

The updated UI based on the feedback.

Validation
I had 5 actual users review the app(prototype) using InVision to know the actual use. The results showed positive views plus some overlooked features that are missing in the app. Because of early validation, we added essential features like parking support and results/photos notification.
Updates to the UI screen.

Updates to some of the UI screens.

Updated Screens and Interaction

Video of the app interaction.

Outcome and Lessons
We achieved our goal of creating the UI based on the MVP of the product. However, changes in Spartan caused the development to be paused. Despite of the circumstances, I've learned two important lessons from this experience. 

First, proactive communication is important in aligning everyone with the goals and purpose of the project. As a UX team of one, I collaborated with different stakeholders in 3 different locations and this helped me develop my communication skills, both in listening and speaking. Second, designing objectively helps in improving a product quickly. This experience made me an unbiased designer as feedback and validation uncovered flaws in my design decisions and helped improved the overall product.

View next

Back to Top