Improve UI and expand a fledgeling design system.
Alto.Ski began providing a pay-as-you-go solution to skiing with the release of their initial app in 2018. The ski pass worked well, but the in-app experience and surrounding ecosystem was far from optimal at launch.
I was initially tasked with consolidating a proper design system based on the existing mobile app, but as I worked closely with the team on feature-led projects, I would also be incrementally improving the UI and expanding the capabilities of the design system.
Here are some examples of the changes implemented, both specific and more overarching.
the problem
When I joined the team, the product was built as a mobile app only, with master designs all inside one Sketch file. While the app fulfilled its purpose well enough, the design was monotonous and a little unclear in places, and there was no consolidated design system to speak of. Given the expected growth of the product - this was an unsustainable way of working.
Once I identified and communicated the problems to the team, it was my job to devise and build a new design system and framework for working, while simultaneously scaling the product and achieving goals.
We have an MVP - how do we ensure that we can scale the product efficiently, iterate ideas quickly and maintain tight design standards throughout?
EARLY version
Success Metrics
developer handoff
The design system improvements should facilitate efficient developer handoff and reduce roadblocks. With a small team this is hard to measure, but we can check in directly with the development team for feedback.
product scalability
By making holistic improvements to the design system, we aim to reduce future maintenance requirements and allow designers to develop new features and grow the product. Measuring reduction in time spent on system maintenance is a key metric here.
Constraints
existing framework
While our goal is to improve the design system, we don't want to make unnecessary changes that don't add benefit, or fundamentally change how the product is developed and built. Throughout the process we reflected back on where we had started and what was already built, working with developers to make improvements inside the existing technical limitations.
The existing design files from which we were building a design system were in Sketch. We took a review and decided on balance that a move to Figma would be better for everyone in the team and that it was worth the extra development time to make the switch.
Process
I first rebuilt the existing screens in Figma, reorganising into an appropriate page structure and building a comprehensive inventory of existing functionality. Then each atom and component was redefined and designed afresh to increase scalability, improve functionality and reduce duplication. Once these building blocks were in place, we designed validation states for components and combined them into flexible design patterns. This included redesigned existing functions, along with new additions that fell into place as we defined problems and solutions more clearly.
Examples
walkthrough
My cards / home screen
Order new cards
account creation