After the success of the first website we built for FitStar, they approached us about helping them design the UX and UI for a web based version of their popular iOS app. We painstakingly combed through hundreds upon hundreds of screens, built a functional HTML prototype for them as proof of concept, and put together responsive designs to hand-off to their development team. It took a lot of late nights and hard work, but we ended up with a really solid web app!
We started the project by mapping out the iOS app and documenting the various sections and user flows that we would need to translate for the web. Next, we sketched out rough wireframes and eventually built a full HTML prototype of the web app that would serve as a guide internally, but also allowed us to get buy-in from the FitStar team early on. Our biggest challenge moving from iOS to the web was making the app responsive and a wonderful experience regardless of screen size.
Here are a couple app screens designed for different screen sizes:
Style
Design System & Mockups
Style for this project was derived from two main sources – the current iOS app (as we needed the experiences to be consistent) and the FitStar.com website (as the transition from marketing site to web application needed to feel seamless as well). To ensure consistency, we developed a design system that allowed us to create screens in a uniform manner but also much more efficiently, as we had hundreds of screens and states to get through. Accounting for a multitude of screen sizes presented us with an opportunity to combine screens together for larger views and streamline the experience for smaller views.
It was a challenging project to work on but our team pulled through and we became much more efficient in the process.
Here are a few more screens that we designed:
Results
Success & Growth
The web app was tremendously successful and helped FitStar expand their reach and grow their user base significantly.
Design & UX by Filament Creative.
Strategy: Matt Hryhorksy, Trevor Davson, Lindsay Trevors Design: Lindsay Trevors, Trevor Davson, Matt Hryhorsky Proto Development: Dave Fox Project Management: Stephen Megitt
