FitStar

Website, Web App, Templates

2013-2016

The challenge

FitStar were about to launch a redesign of their leading personal training iOS app and approached Filament for “just a re-skin” of their marketing site under a short timeline.

With the aim of delivering much more than just that, our discovery and research process helped to identify the site's primary audiences, and the action that needed to be taken with regard to content, visual design, and brand goals.

Goals

Prioritize app sign-ups.

Allow visitors to access relevant content regardless of device.

Rework visual design to be more consistent with the app's new look and feel.

Highlight FitStar's existing community to encourage more engagement.

Visual design

A main point of direction for visual design was to translate the app’s newly (at the time) iOS7-ready aesthetic onto the web. Ultimately we were able to push the visuals that were in the app farther by establishing a sleek new style that we were able to carry on throughout their digital marketing collateral over the next several years.

We wanted to evoke the spirit and liveliness of being active and working out, which influenced our approach to visual and interactive design as a whole. Isolated photography of active people, layered above that signature iOS 7-and-beyond blurry background trend made for a bold and energetic feel. We pulled out all the stops under that initial short timeline, testing our abilities with CSS animation throughout the site to help support the theme of activity and energy.

A section of the style tile, used to help explore style elements in a separate context from a wireframe.

Focusing on community

Adding and sharing workout details with friends is an important part of the app, as it encourages those on any stage of their fitness journey to stay accountable to one another (and to show off to each other if they're doing well, of course!). We added an area to highlight peoples’ submitted stories on the homepage, as well as a curated Instagram feed, tweets, and remarkable stats from power users.

Outcome

+300%

increase in session length

FitStar for the web

The FitStar app was iOS-only at the time, and while the Android version was in the works, Filament translated hundreds of screens to be optimized responsively for the web.

Goals

Allow the FitStar app to be accessed from any smart device, regardless of operating system.

Ensure a great user experience on any screen size.

UX

We began with the UX phase by creating iterations upon iterations of rough wireframe sketches. Our dev team translated our sketches into a fully interactive web-based prototype, which allowed us to better communicate our ideas to the FitStar team.

As the context of the web app would differ from the iOS version significantly, there were many considerations to be made and flows that couldn’t be replicated exactly from the app. We spent a lot of time planning and iterating on small, medium, and large breakpoints for each screen.

Our aim for visual design was to combine established styles from the iOS app and FitStar.com, ensure we were making thoughtful use of space, and to establish predictable design patterns that would be familiar on all screen sizes. We added more instances of iconography and imagery where applicable to assist with that.

By the end of the project we had successfully come up with a carefully considered and executed final series of designs for the FitStar dev team to reference for their build of the web app.

Introducing FitStar Yoga

With the introduction of their new yoga app, FitStar became a platform with two separate products– FitStar Personal Trainer and FitStar Yoga. This meant we at Filament got to take on another redesign with a rework of content, IA, and visual design. 

Goals

Clearly communicate the evolution of FitStar into two separate products: FitStar Personal Trainer and FitStar Yoga.

Prioritize sign-ups for both products by highlighting product features and pricing information.

Update visual design to incorporate FitStar Yoga's brand colours.

Give the FitStar team the tools to easily send out great-looking customized marketing campaigns.

The redesign

We revamped the homepage with the goal of making it super easy for anyone, no matter their device or platform, to learn about the changes to the product. Visual design was adjusted to incorporate the subdued new colours from the Yoga app, while we were able to maintain the bold and energetic feel throughout the site.

Landing page templates

As FitStar’s user base grew, so did their marketing efforts. We designed and developed customizable templates for promotional campaigns, which allowed for utmost flexibility so that anyone at FitStar would be able to create a seamlessly designed landing page.

Acquisition

Since the initial website project, the Filament team has continued designing and developing various projects with FitStar.

FitStar was acquired by Fitbit in 2015.