Runsocial

Branding / Product Design / Spring 2016

This project was for my Graphic Design Media Management course at SCAD. The objective of the course was to learn how to maintain design consistency across different media touchpoints. I completed this project over the course of 5 weeks, and learned an incredible amount about brand identity and strategy.

Tools used: Illustrator, Photoshop, After effects, Invision, Sketch, pen and paper

Introduction

The projects goal was to rebrand a comapny or event, and redesign the print, web, and mobile media to reflect the rebranding. I chose to rebrand the company Runsocial, and also redesign their product from the ground up.

What is Runsocial?

Runsocial is a mobile application that allows users to run on a treadmill with their friends using "Mixed reality" technology. Their product is an iPad application that lets users run with their friends using an avatar in virtual running environments like the london marathon, or the swiss alps.

Current product offerings

______

Tread Tracker

The Treadtracker is a product offered by Runsocial that enables you to send real time speed data to your Runsocial application that logs your distance traveled and average speed.

Mobile application

The app for Runsocial is simple. When running on a treadmill, you can place your phone or iPad on the treadmill and see you and a friend's avatar running together at the same speed you are running in the real world. Users can customize their avatar, and choose from a variety of environments to run in.

Digital Marathon events

Runsocial hosts digital marathons in which users sign up to run on their treadmills with the Treadtracker attached at the same time the actual marathon is taking place. All proceeds from the event go towards the run’s respective charity.

Treadtracker
Mobile app
Digital Marathon event

Problems

______

Tread Tracker

The Treadtracker is a useful product paired with the application, but remains a severely outdated technology. The product is large, only works with treadmills, and only collects speed data. These factors limit the user and the product.

Mobile application

The app itself is well executed, but does not solve a clear user need or desire. In fact, in many cases it simply complicates the task of running by introducing an extra touchpoint into the equation.

Digital Marathon events

Runsocials digital marathon is an extremely unique concept, and offers potential for brand and product innovation. However, Runsocial’s digital marathons are currently restricted to only those physically present to run on treadmills at their events.

Hypothesis

Runsocials digital marathons were innovative, but they required physical tread trackers which inhibited the events from scaling. By utilizing wearable technology, Runsocial could merge its product offerings with marathons to create a remarkably better product.

Research

______

Customer journey map

In order to understand the pain points of the product, and the opportunities for new media touch points in the customer's daily life, I created a user journey from my observational and secondary research. This helped me identify when potential customers and existing users were being exposed to the company's brand and product.

Findings

There is a complete lack of print media for Runsocial, which could prove valuable during marathons and charity run events.

The Product offers little incentive to run, and typically inconveniences new users that are attempting to fit the product into their existing running routine.

Audit

I also conducted an audit of applications similar to Runsocial. The most successful running apps I found are those that help users train. Without a running application that users could use in the real world and not just the treadmill, Runsocial would remain a 2nd tier product.

Stakeholder map

I compiled a list of features that Runsocials competitors had implemented, and cross referenced the feature list with a stakeholder map I created in order to uncover where there was unserved user needs.

Runkeeper

Runkeeper is one of the most successful running applications to date. It lets users engage with the running community, train, and for a limited time compete in running challenges. I used Runkeepers training and community features as a basis for feature ideation.


Ideation

______

Sketching

Throughout this project, my sketchbook proved invaluable time and time again. Being able to quickly iterate with my sketchbook, I could create and alter ideas with the stroke of a pen. This enabled me to get instant feedback from my peers on marketing and product concepts, allowing me to iterate on concepts rapidly.

Affinity mapping

Throughout my ideation process, I used sticky notes repeatedly to organize my thoughts. I used sticky notes in mapping potential user flows, Customer journey maps, and in my competitive analysis.

Information architecture

Once I had created a rough concept of the features and how they would be organized, I translated these ideas from sticky notes into mid-fidelity information architecture trees. This helped me understand which screen states and modals I needed to design.

Product solution

______

Runsocial Marathon

Runsocial Marathon is a completely redesigned application that allows users to run marathons, 5K’s, and 10K’s from anywhere in the world using wearable technology.

Features

______

Onboarding

When users first login, they are presented with a screen that shows them the various causes and events they can participate in digitally. They can also view which of their Facebook friends are also participating in the event.

Marketing and business model

By syncing with the Apple Watch and collecting biometric data, Runsocials app can verify that users are actually running. With the ability to verify participation, Runsocial could partner with companies who sponsor these events and get them to donate per every digital mile run to the charity being sponsored.

Free run

Free run allows users to just get up, open the app, and start running. While running, the app logs their progress towards their goal, and uses this data to tailor the user's training.

Train

The train feature of the application lets users set goals, and receive tailored routes and challenges to help them reach their running goal. Users can predefine their own goals, or use upcoming charity runs as benchmarks to train for.

Charity run

Charity running is where digital marathons come into play. On the day of an event, Users are notified and allowed to participate if they have previously registered for the event. The application uses Google Maps API to map a route near the user that is the same distance as the actual events route. Users can strap on their Apple Watch, and begin their run, knowing that every step is benefitting a cause they care about.

Charity user flow
Mockup

Apple Watch extension

Here is the prototyped user flow for the Apple Watch. The apple watch application is a bite-sized snapshot of the apps features. Users can quickly select from free runs, training, or charity runs. In charity runs they can view and select the events that they are currently registered for. At the end of a run, users are given a summary of their progress

Media solutions

______

Brand assets

I needed to maintain brand consistency, yet reflect the new product and marathons feature. In order to do this, I used many of Runsocials existing assets. In my solution, I combined elements from the original Runsocial Brand image with those of the digital marathons feature I developed. The result was a reinvigorated logo design, and a plethora of new merchandise and products I developed to apply the design to.

Runner logo

The runner logo serves as a cornerstone brand image for the new Runsocial marathon app. I took the concept of a runner's silhouette and and gave it a sense of motion with the orange tendrils trailing from the back of the runner.

Runsocial logo

I took the existing Runsocial logo, and added the location marker icon. A logo or icon should conjure up a priori idea of what the icon or logo represents. By including the form of the current location marker, I wanted to give customers a perception of the location based new product offering.

Emblem

For the emblem, I wanted to create a small branding asset that could be easily applied to coasters and stickers. The circular form gave the emblem an organic feeling, and lended itself to smaller sizes.


Print media

I needed to maintain brand consistency, yet reflect the new product and marathons feature. In order to do this, I used many of Runsocials existing assets. In my solution, I combined elements from the original Runsocial brand image with those of the digital marathons feature I developed. The result was a reinvigorated logo design, and a plethora of new merchandise and products I developed to apply the design to.

Poster Advertising
Water bottles with the Runsocial Marathon logo
Apple watch band with London Marathon branding

Runsocial has the oppurtunity to partner with sponsored events to make wearable fitness merchandise.

Messenger code stickers that connect to Runsocials Facebook Messenger bot.
Runsocial t-shirts
Runsocial drink coaster

Web media

Runsocials current website lacks the ability to communicate how accessible the new Runsocial Marathon product can be. It needed to be updated to reflect the new value proposition while maintaining Runsocial's aesthetic and brand identity.

Take-aways

______

During the course of creating this project, I learned valuable lessons in marketing strategy and designing for wearables.

The customer journey map became an instrumental tool in helping me find new opportunities for print, mobile and web media.

Understanding how to identify emotional markers in the journey of a customer helped me to know when and where customers would be open to brand advertisements and value propositions. My other key take-away came from attempting to design for wearables.

Wearables often have extremely limited screen real-estate, forcing me as a designer to cut the fluff, and only include the key features that made the product compelling. I also needed to give affordances through labeling which is hard with such limited space for content on the watch. Overall, during the design process I learned that a wearables ability to verify biometric and locational data, and deliver contextual and actionable insights could be utilized across a variety of non-traditional industries.

Understanding the constraints and opportunities offered by wearable technology helped me frame my design decisions and strategy.

Overall, this project taught me how to design across numerous different media touch points, and develop a product strategy that is aligned with a company's brand image.

If you're interested in this project and what to hear more, or just want to chat, feel free to contact me!