Banner of Street Parking Banner Samples

Building A Fitness Platform

My Role: UI, UX, Front End Development

Street Parking

Practice What You Preach

I love working out, years of sitting at a screen have taken their toll on my posture and I learned to counteract this with functional fitness and strength training. Four years ago I joined the Street Parking programme and community. The community has an extremely vibrant community and I shared a redesign of a similar fitness app.

At the start of the UK lockdown, their owners reached out as they needed a UX/UI designer to join their engineering team that was creating an MVP of their platform.

This was a passion project to be involved in, I was given the opportunity to design and resolve a lot of the issues myself and other community members were facing.

Initial Goals

The technical team was already in place alongside a deadline to start receiving new customers on to the platform. Street Parking already had an existing customer base of over 35,000 home fitness enthusiasts but with lockdown forcing gyms to close, their customer base was growing over 10% per month.

The member base had existed across a number of platforms and services; WodifySquare Space and Instagram. The goal of the team was to build a bespoke enterprise platform that could be tailored to suit their programs, promotions and fitness challenges.

One Designer To Rule Them All

The development team quickly grew from two Angular developers to a team of eleven. With a PO now at the helm, the platform went from being a web product to also delivering a native application on Nativescript.

As the only designer on the team, my coverage included the UX/UI for :

  • A bespoke back-office application
  • Responsive web applications for members
  • Nativescript application for members that would be delivered on iOS and Android.

Getting To Market

With over 500 Street Parking workouts under my belt, this meant I had to rely on my own experiences along with the feedback I'd captured in the Facebook group to get an idea to market.

Until launch, user testing had been limited because the new product was under wraps. Beta access was given to long term users who provided initial feedback and testing. Fortunately, the overall experience was an improvement and I was able to deliver a design that was well received.

Redesigning A Platform

It should be noted that my work wasn't only to create the visuals for all of the platforms but the actual user flows.

Working with the PO and System Architect, who were also long time Street Parking users, we merged and streamlined the previous three platforms into a single flow that could be delivered to both the web and native applications.

The back and forth on this part of the project could fill a case study in itself.

Multi-Platform Figma Libraries

At the time of working on this project, I was also building out the Hydrocarbon design system. I took my experience building Figma libraries to create two child libraries; Native and Web, that took their foundational elements from a parent library.

This was my first multi-platform design system and taught me a lot about setting up and managing Figma. The benefit of this approach is consistent both for the developers and users but also easier to manage as the sole designer.

Design System v Design Toolbox

One mistake I made going into this project was to focus on setting up a hard and fast design system too early. What I really needed was what I'd call a design toolbox; a palette, basic components and spacing rules.

Having a rigid system approach helped get some momentum it was too early in this project to enforce. If I was to do it again I would have used the toolbox approach. Although having a system allowed the development team to make decisions on their own, without the backup documentation and component library it became difficult to implement consistently.

Sample of Figma Component library
Sample of Figma Component library

Building The Front End

This project was on a deadline to deliver a v1 responsive web app at the time the Wodify subscription was delivered. This meant it was all hands on deck by the development team to get the project live.

I assisted the junior developers in delivering the frontend work getting deep into creating custom code, fixing issues with Bootstrap implementation or mentoring them through code changes.

It was refreshing to go back to my roots and work on deliverable front end code.

This new platform is amazing to just ice the cake. It is so simple. User friendly. I LOVE that everything seems to be accessible from one place.
Street Parking Member

User Feedback

As the launch date came and the team delivered successfully on time it was nail-biting to see what the user feedback would be. There is a vibrant Facebook group that is quick to call out anything.

Thankfully the app was well-received and users were quick to share thanks, feedback and screenshots.

Working with Nativescript

A primary goal for this project was to deliver a native application for users driven by the data from the custom platform. The dev team opted to use Nativescript to allow them to use a single code base but deliver compiled iOS and Android apps.

This was my first time working with a Hybrid platform so I did the groundwork and researched the docs and ran through a number of YouTube tutorial videos to get to grips with the platform. It was valuable time spent as there were a number of best practices around page layouts and asset management that were important to be aware of before firing up Figma.

There were a number of points to juggle when designing for NativeScript:

  • Balancing good information hierarchy with minimal layout nesting. Nativescript has a number of layout types and nesting these too deeply causes a number of performance issues.
  • Our page designs for the app would also be mimicked on a responsive website. Therefore all designs had to be considered for iOS, Android and the web served on three different platforms.
  • Styles and assets were shared between the web and Nativescript platform and each had its own set of media requirements.

This was the first time the development team built on Nativescript so it was a learning curve for all involved. In the end, the development team and Street Parking users were thrilled with the first release. The iOS app is available in the app store now with the Android version on the way.

Ongoing Evolution

There is a lot still to deliver, including the native application. But it has been uplifting to deliver a product that not only I use but thousands of other users do too.

With the effects of Covid, health is so important and being able to put such a great product in the hands of users on a daily basis that enhances their well being, is something to be proud of.