Run The Edge Shopify
Designing a storefront as the pioneer of fitness challenges
Project overview
Quick Facts
Industry
Lifestyle & Outdoors
Platform
Shopify & Native App
Key Services
Shopify Development, Branding, App Deployment
The challenge
The existing Shopify website was cumbersome to update, lacked clear content hierarchy, and suffered from performance issues, leading to a user experience disconnect for challenge participants.
The solution
We executed a comprehensive brand and content strategy, developed a high-performance, flexible Shopify theme, and designed a new visual language: all to launch a seamless storefront experience and a companion native community app.
The results
The new website provided the client with a flexible, performant storefront and a re-energized brand story, creating clarity for challenge participants and supporting the launch of their dedicated community app.
1
Project background
Purpose
Pioneers of Virtual Fitness
Founded by two professional runners, Run The Edge is dedicated to providing innovative fitness experiences and virtual challenges for their inclusive community of running enthusiasts. Launching in 2015 with their first virtual challenge that incurred over 25,000 signups, Run The Edge has become the industry pioneer of virtual fitness challenges. Over the years, the Shopify website had become cumbersome to update and no longer as intuitive to challenge participants. The Run The Edge team approached us to help resolve the user experience disconnect, address performance issues, and launch their brand new community.
2
Brand strategy and communication
Communications
The Brand Vision
With their brand attributes: Inclusive, Encouraging, and Community, it was clear that Run The Edge was built on enabling their participants to feel included and transform their lives with fitness.
Messaging
For the Website
Our teams started with a workshop to explore Run The Edge’s purpose, vision, and mission. Together we defined their unique selling proposition: well-designed virtual challenges and unique swag, and their value proposition: their expertise, passion, and community as the key differentiators.
3
Visual language to match their fitness innovation
Exploration Phase
To Get It Just Right
Like any design phase, there was iteration in getting the right tone, content hierarchy, and brand elements working together. We experimented with color palettes and brand illustration, first with a light and hand-drawn direction and then ultimately a dark color palette with bold graphical lines and elements. Our teams gravitated towards the bold, editorial look that typically is associated with the fitness industry but with a balance of rounded UI and hand-drawn elements.
New Vision
For the Design Language
The new visual system has polish and personality: curated photography feels editorial and genuine, hand-drawn elements add an authentic and human quality to the brand, and bold graphical lines exude energy and movement, a perfect match to the overall brand story. This direction would help bring Run The Edge into their next phase of the company.
4
Shopify storefront for clarity and performance
Shopify Theme Design
For Flexibility
Our Shopify developers looked to the fundamental framework to achieve two primary goals: 1) vastly improve the performance with an already optimized theme template and 2) provide a flexible component basis so that the client could continually update the website with ease. Performance was of critical importance, so we chose the most agile, performant, and customizable Shopify template.
UX/UI Process
For Content Clarity
With the brand story and their key differentiators in hand, we approached the custom Shopify design with a focus on clearly communicating what a virtual challenge means, what it includes, and what sets Run The Edge apart from others. We followed that logic through the content hierarchy and the use of animation to guide the user through the page while maintaining a sense of movement.
Challenges
Designing to Convert
While the homepage draws interest, the challenge pages needed to communicate clearly the value they provide to convert casual viewers into paying participants. We prioritized concisely explaining the objective of the challenge with the different paid tiers.
Quick look at what we did
5
A native community app
Community Space
Native App
With a long-standing community on Facebook Groups, the client wanted to create a new dedicated space for their participants to discuss. With the added benefit that their participants were already mobile-first with the tracker running app, it was a natural transition to also offer a companion native community app. This allows participants to discuss and connect in a dedicated, mobile-friendly environment.
Quick look at what we did
Project Background