Elevate your customer experience with personalized, interactive web stories.
Personalised, interactive stories for your customers
Overview
Storyplayer is a new product from Revo for creating Interactive Stories. It is an innovative digital interactive storytelling platform that empowers digital brands to revolutionize their website experience.
Role
Duration
March 2023 - Ongoing
Project Type
Design System
The Brief
The Revo design team had no design system or UI library whatsoever, which ended up creating alot of inconsistencies across the app as designers were creating and shipping new components and interfaces with no references. This added up to creating production interfaces that had several different color and text styles, spacing, shadows and overall incongruent components.
Being a new product from Revo, for Storyplayer we went for a fresh start and a comprehensive design system. I took charge of developing and implementing this system, ensuring consistency and cohesiveness throughout the interface.
Now it was time to understand how I should organise the system so designers would actually enjoy using it. Then, a lot of tooling questions came into place - Should we use components properties or variants? How many levels of artefacts should the system have? And many others.
As this would be used by the entire design team in the future so I had some sessions with the designers understanding their preferred way to use it.
Keeping in mind all the insights by the designers I finished to create all the core components and the library in Figma accordingly. It's still a work in progress and we have a lot of components to be created but the core elements like (colors, typography, buttons, badges, input boxes, etc) are complete.
To streamline the presentation of the design system, I consolidated the some of the created components into a single page. For easy access, I have embedded the Figma page below for a comprehensive overview.
Lastly, I worked with Engineering to prepare a handover and plan shipping the system into production. As we had limited Engineering resources, we defined a plan of shipping first minimal but impactful elements, the primitives ones (color styles, text styles and atomic components like buttons). This would give us a huge impact on making the app in production more consistent, while we’re shipping other batches of components in a slower cadence.
Thank You
Hope you liked the project.
