Skillbox English is part of the Skillbox ecosystem, but it retains its own design since it was initially a standalone project acquired by Skillbox. I integrated the Skillbox English design system with the main Skillbox design system to ensure consistency and continuity across the product. Most of the visual design was developed within the product itself. Given the extensive updates, which impacted key user flows, we rolled out the changes in multiple phases.
Beyond the business goals, I aimed to align the Skillbox English style with the main Skillbox brand. To achieve this, I focused on creating a unified design system and establishing a streamlined process for delivering updates.
Building the system
First, I analysed which parts of the product needed to be updated and created a list of necessary components for the refresh. I categorised some components as style-defining and frequently used, and decided to borrow these from the main Skillbox design system. The other components were more unique, so I placed them in a new, dedicated Skillbox English design system.
Second, I gathered all the necessary elements in Figma. At the same time, I set up a process to synchronize updates with the main design system.
Third, I handed over the new components to the development team. Together, we integrated all the necessary components into Storybook.
New branding
While updating the interface, I realized that the visual language was also outdated. I analyzed the landing pages and in-product interfaces to identify the most commonly used formats and explored ways to refresh the design while minimizing resource use. I found a solution: create a new branding and use it as the basis for a toolkit to quickly assemble the necessary images, often as collages.
The main concept of the new branding was freedom in communication and learning a new language online. To convey this, I used interface elements like message bubbles, photos of people, and snippets of exercises from the platform. To highlight a light and fresh approach to learning, I added sticker elements. I also created a 3D pack of various shapes that aligned with the Skillbox brand style.
The third component was photos of real people. From user interviews, I learned that seeing real people in the communication was important to them. I developed guidelines for generating photos in Midjourney, which helped create a consistent photo style.
I created an image library that not only refreshed the product but also sped up the process of creating new visual solutions. This library continues to grow over time.
