Kollektiv
Product and system design for a complex start-up to disrupt the world of endurance sport.
Role: Design Lead
Teams: Design, UX, Engineering
Tools: Figma, Principle, After Effects, Lottie
TLDR: We designed, tested and shipped a triathlon training app in 10 weeks for iOS and Android.
What is it, and what did we do
The more professional spiel goes something like this: “Kollektiv is a training platform designed for beginners to elite level athletes alike, that have ambitions and goals in the sport of triathlon."
In a nutshell, Olympian and World Champion Helle Frederiksen had spent years professionally coaching regular humans to train for triathlons like superheroes and she decided it was time to bring it to the masses.
The MVB
With our team assembled across four countries, and our engineering agency at the ready, we acted fast to develop a component library before we started our first sprint. This is where the Minimum Viable Brand came in—a system that is lean and lightweight, but strong and resilient to build upon.
Helle had already established a system to communicate training plans to her existing users, so we built a library around what we knew was already working. Colours, for example, were being used to denote the main disciplines: swim, blue; cycling, green; running, yellow and so on and so on. Our logo and branding are also grounded in our DNA, which helped to guide our visual language.
I'm a firm believer in establishing patterns early on. It doesn't have to be perfect, heck, ours is still evolving, but stick to what you know to lay your foundations.
All aboard
To kick things off we started with something relatively simple for our first sprint. Usually left until last, we tackled onboarding and sign up. This allowed us more time to prepare for Sprint 2 which we were still prototyping and testing with users, but it also gave us a good opportunity to get to know our team with a relatively straightforward task.
We flexed the design system and started adding new components on the fly with ease.
Time to get training
This is the heart of Kollektiv and the sprint we were all gearing up for. We began testing and scrutinising user flows of our training plan interface that was previously sent to users as a PDF. We plotted this out in Miro to gather a holistic view, before hitting the pixels in Figma. Meanwhile, our own engineers were busy building our proprietary software that generates the data for the plans.
With everything we learnt in Sprint 1, we hit the ground running and got to work fleshing out every little detail.
One of the more complex tasks of this sprint was understanding the logic in which our data was being built and served, to be able to render that to the user in an intuitive way. It was crucial that we broke down each component into patterns that we could articulate back to the user and to ourselves.
Another hurdle was building a bespoke calendar. No native component could cope with the level of data we needed to visualise, and we really pushed this UI to its limits.
Feedback from users was crucial at this stage, as we were building an interface that could make or break our proposition. Overall, users reacted positively, with some well-needed insights that helped to shape what we shipped.
Communication is key
One of Kollektiv's USPs is that there are human coaches behind the scenes. Whilst we use technology and machine learning to generate a training plan, a coach is still responsible for editing and approving a plan to a users account.
Experts is where we connect coaches with users and allows them to chat directly with a coach in-app. Ordinarily, this could have been designed and built from the ground up, but with the core functionality of Experts being a messenger service, now wasn’t the time to be reinventing the wheel.
Our Experts service is built on SendBird's API, not a service I'm particularly fond of, as we later discovered its backend limitations were causing team inefficiencies that will impede scalability. However, with the UI kit installed, and a few compromises chucked into the backlog, we shipped Experts in a timely manner.
It's personal
An app is nothing without users. And the future of Kollektiv will be shaped by how users personalise their experience beyond the training plan.
Profile is the start of that, and this sprint was all about getting the basics right. We followed standard patterns for things like managing your settings and introduced Goal setting and Personal Bests, where users could document anything that would impact their training plans. This extra data is pushed to our backend which adjusts workouts accordingly.
A masterclass in triathlon
Last but not least is Knowledge, which houses all of our video training programs. A somewhat straightforward task, since all of our training programs are category-based, so the design lent itself to a tried and tested card approach, which users responded positively to when navigating from one to the next and attributing each category to their workouts.
We did encounter some issues on Android, needing to build a bespoke player that we didn’t anticipate, but our engineers pulled it out of the bag.
Ask me about ashy gradients some time - it’s one of my pet hates ;-)
And that’s all folks. Well not quite. We built, we shipped, our users are in, training and happy. But we haven’t stopped. Kollektiv is far from finished. We’re getting a far better understanding of our users and what they want from us, and our design system is getting bigger because of it - our language is developing and a brand is starting to take shape.
Tools used
Figma is where all our componentry and styling lives. It allows us to collaborate remotely across all our teams and with handoff and prototyping built-in makes for a more efficient workflow.
After Effects and Lottie is where we make all our JSON animations.
We use Jira and Confluence to scope, plan and document our sprints and UserTesting.com and Zoom for interviewing users.