Website, Web App, Templates
2013-2016
Filament worked with FitStar on various projects, involving web design, development, and strategy for 2 product launches, UI/UX for FitStar’s web app, and design and development for email and landing page campaigns.
I worked on UX and visual design for these projects.
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.
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.
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.
NFL All-Star Tony Gonzales was the enthusiastic voice of the app’s personal trainer, and we went for a conversational approach that as felt eager to help the user as he was. A neat idea we executed was to display contextual app-related tips based on screen size. On desktop, we’d display a message about having a large screen width, while mobile devices would display a fitness tip related to being on-the-go.
NFL All-Star Tony Gonzales was the enthusiastic voice of the app’s personal trainer, and we went for a conversational approach that as felt eager to help the user as he was. A neat idea we executed was to display contextual app-related tips based on screen size. On desktop, we’d display a message about having a large screen width, while mobile devices would display a fitness tip related to being on-the-go.
NFL All-Star Tony Gonzales was the enthusiastic voice of the app’s personal trainer, and we went for a conversational approach that as felt eager to help the user as he was. A neat idea we executed was to display contextual app-related tips based on screen size. On desktop, we’d display a message about having a large screen width, while mobile devices would display a fitness tip related to being on-the-go.
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.
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.
Allow the FitStar app to be accessed from any smart device, regardless of operating system.
Ensure a great user experience on any screen size.
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.
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.
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.
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.
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.
Since the initial website project, the Filament team has continued designing and developing various projects with FitStar.
FitStar was acquired by Fitbit in 2015.