> **Design System Lead ✴︎ In-house/Storytel**
>
> **Role:** research, tokens and core styles design, components design, quality assurance, documentation, strategic planning, accessibility expertise, cross-functional collaboration

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FehJPlLkYv2QYya9dANqR8eTLkqv1%2FQG5oV6625ZXKPTvBBVoS%2Fa54e89f2-fa72-4461-b908-f42ebecd11b1.png?alt=media&token=20b28e88-87b6-4c22-84c9-14014eed2ff4","id":"a54e89f2-fa72-4461-b908-f42ebecd11b1","width":2286,"height":1180,"filename":"intro.png","type":"image/png","caption":"","border":false}]}
```

In 2020, Storytel, a leading audiobook streaming service, was in the middle of a rapid growth phase. Continuous hiring of designers and developers, as well as the reconfiguration of product teams, made it increasingly difficult to keep a coherent and consistent output. This fragmentation and lack of uniformity were reflected in the product, undermining the user experience and brand perception.

In less than two years, Storytel's apps have achieved significant progress in terms of a unified visual identity, brand consistency, and alignment with accessibility standards. The key driver of these achievements was the advanced design system that my team and I carefully designed and released.

### **Starting point**

Creating a design system for a mature product with an extensive design and tech legacy required an initial audit. We carefully inventoried the existing typography styles, colors, and components across our iOS and Android apps. The audit uncovered numerous inconsistencies, including a substantial number of redundant styles. For instance, we identified 260 colors and 48 font sizes, alongside disparities in interaction patterns. This inventory served as the foundation for defining the styles and components to be included in the design system.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FehJPlLkYv2QYya9dANqR8eTLkqv1%2FQG5oV6625ZXKPTvBBVoS%2F49d9453f-ab98-4dc1-803a-de37a8a05adf.png?alt=media&token=9a78f709-17cb-4053-bd92-5667dcb8c29d","id":"49d9453f-ab98-4dc1-803a-de37a8a05adf","width":3216,"height":2090,"filename":"Screenshot 2023-10-26 at 17.07.16.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FehJPlLkYv2QYya9dANqR8eTLkqv1%2FQG5oV6625ZXKPTvBBVoS%2F2a2cc0e1-cefd-40e2-b34e-ee7f1699dba1.png?alt=media&token=a07e0169-5d8a-439e-ae58-dd846d911761","id":"2a2cc0e1-cefd-40e2-b34e-ee7f1699dba1","width":3216,"height":2090,"filename":"Screenshot 2023-10-26 at 17.07.55.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FehJPlLkYv2QYya9dANqR8eTLkqv1%2FQG5oV6625ZXKPTvBBVoS%2F66a9114b-534e-488a-a9cc-d30e0633f033.png?alt=media&token=11019210-0f1e-4df6-b097-7ff5bad821bf","id":"66a9114b-534e-488a-a9cc-d30e0633f033","width":3216,"height":2090,"filename":"Screenshot 2023-10-26 at 17.08.53.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FehJPlLkYv2QYya9dANqR8eTLkqv1%2FQG5oV6625ZXKPTvBBVoS%2F122f3634-d309-4f0d-9ac4-3268380324e0.jpg?alt=media&token=744b58c8-d521-4164-b570-d3940ae643fa","id":"122f3634-d309-4f0d-9ac4-3268380324e0","width":3216,"height":2090,"filename":"Image 2023-10-26 at 17.10.jpg","type":"image/jpeg","caption":"","border":false}]}
```

### **Collaborative approach**

The creation of the design system was based on contributions from many stakeholders who were not part of the core design team. To set up this process, we established a collaborative model that ensured close interaction between the core team and the contributors. A shared roadmap with clearly defined sprints and milestones helped us generate the necessary momentum in the project. While designing and building the design system, we consistently communicated our progress to the entire Product & Tech department through regular presentations, focusing on the value and benefits of the design system for the organization. This helped us gain support from the product teams and ensure successful implementation after the MVP release.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FehJPlLkYv2QYya9dANqR8eTLkqv1%2FQG5oV6625ZXKPTvBBVoS%2Fd3d36688-3474-4782-a455-a3c9eea8abde.png?alt=media&token=b85ae388-08d4-4af7-8ac5-aa4a7762b9fa","id":"d3d36688-3474-4782-a455-a3c9eea8abde","width":1697,"height":1256,"filename":"process1 2.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FehJPlLkYv2QYya9dANqR8eTLkqv1%2FQG5oV6625ZXKPTvBBVoS%2Fac7221c2-5907-4885-897e-242d881ed8a6.png?alt=media&token=44ca97bf-dc15-43b4-bead-a82a327f08c6","id":"ac7221c2-5907-4885-897e-242d881ed8a6","width":2375,"height":1256,"filename":"process2.png","type":"image/png","caption":"","border":false}]}
```

### **New Digital Identity**

Using Storytel's brand visual identity as a foundation, we initiated the process of creating a digital identity for the Storytel app, resulting in a subtle yet noticeable evolution of the app's look and feel. We introduced an updated color palette, a new background color, refined typographic hierarchy, and added new visual elements, such as pictograms. Once the cornerstones of the digital identity were defined, we proceeded with the design and development of components. All components, assets, and templates were made available to the design team in Figma as they were built.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FehJPlLkYv2QYya9dANqR8eTLkqv1%2FQG5oV6625ZXKPTvBBVoS%2Fbb0c6ad1-bf86-4b7f-8b88-a84f54998250.png?alt=media&token=0b9cfd06-563f-4b71-a22d-dabd369fd80a","id":"bb0c6ad1-bf86-4b7f-8b88-a84f54998250","width":3196,"height":1800,"filename":"digitalid.png","type":"image/png","caption":"","border":false}]}
```

### **Key building blocks of the Storytel Apps Design System**

The core elements of the Storytel DS are tokens and styles, the assets library, and the components library.

**Theme libraries.** Contains color palettes for each supported app theme, typography styles include defined font families for each supported language, a typographic scale, and parameters for different types of text content.

**Assets library.** The Figma library is connected with iOS and Android asset libraries. An automated process keeps them in sync and allows adding or updating assets rapidly.

**Component library**. Contains UI components for iOS and Android, providing descriptions of states and variations for each. Components in Figma are designed to simulate the behavior of implemented components, which helps designers better understand the limitations of each implemented component.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FehJPlLkYv2QYya9dANqR8eTLkqv1%2FQG5oV6625ZXKPTvBBVoS%2Fdecf09c5-1900-46bc-9a14-1b7e903d3814.png?alt=media&token=fee37c5d-14f9-4632-9de8-4b233910c4d5","id":"decf09c5-1900-46bc-9a14-1b7e903d3814","width":2375,"height":1180,"filename":"ds1.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FehJPlLkYv2QYya9dANqR8eTLkqv1%2FQG5oV6625ZXKPTvBBVoS%2Fb2664ff2-02e3-44ad-b67d-d56a6aa0fcf6.png?alt=media&token=f8fba035-0d4b-4eee-a2c5-54943ef956b1","id":"b2664ff2-02e3-44ad-b67d-d56a6aa0fcf6","width":2382,"height":1020,"filename":"ds2.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FehJPlLkYv2QYya9dANqR8eTLkqv1%2FQG5oV6625ZXKPTvBBVoS%2F7de00b97-8146-42b3-aae6-56902eef0f4d.png?alt=media&token=ada5152b-56a3-4554-bcc8-f27d2254742a","id":"7de00b97-8146-42b3-aae6-56902eef0f4d","width":1975,"height":981,"filename":"ds3.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FehJPlLkYv2QYya9dANqR8eTLkqv1%2FQG5oV6625ZXKPTvBBVoS%2F42f6eaaf-fda2-46f3-9040-3f19ba657960.png?alt=media&token=dc782107-d13f-405d-ae3d-f0d4f088a073","id":"42f6eaaf-fda2-46f3-9040-3f19ba657960","width":2375,"height":1180,"filename":"ds4 2.png","type":"image/png","caption":"","border":false}]}
```

### **Enhancing accessibility through the design system**

Accessibility was a non-negotiable principle during the design system's creation. Color contrasts, font sizes, and styles were iteratively fine-tuned multiple times to create a truly inclusive experience for our users. I created guidelines and checklists for the design team to use in their daily work. Design and development of components were carried out according to high accessibility standards, which helped Storytel's apps take a significant leap in accessibility compliance with WCAG.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FehJPlLkYv2QYya9dANqR8eTLkqv1%2FQG5oV6625ZXKPTvBBVoS%2Fb2a7b4b7-342f-4dbb-a8b7-0797b4d5c3d3.png?alt=media&token=ab00b181-68c3-4557-95e4-ed473f2e0313","id":"b2a7b4b7-342f-4dbb-a8b7-0797b4d5c3d3","width":2375,"height":1256,"filename":"a11-1.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FehJPlLkYv2QYya9dANqR8eTLkqv1%2FQG5oV6625ZXKPTvBBVoS%2F2325cd98-7ed7-40ec-bd42-83f2becd007f.png?alt=media&token=a4a130de-8824-4099-b85b-04a4cfeba91d","id":"2325cd98-7ed7-40ec-bd42-83f2becd007f","width":2375,"height":1256,"filename":"a11-2.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FehJPlLkYv2QYya9dANqR8eTLkqv1%2FQG5oV6625ZXKPTvBBVoS%2Fe0e2d1dd-a16f-4b1a-843d-6f7af0ee7f97.png?alt=media&token=dbdff038-0067-444a-8321-00c8b52890e8","id":"e0e2d1dd-a16f-4b1a-843d-6f7af0ee7f97","width":2375,"height":1256,"filename":"a11-3.png","type":"image/png","caption":"","border":false}]}
```

### **The outcome**

Of course, the power of the impact of the design system directly depends on its adoption in the product, Storytel is already getting great outcomes:

1. **Enhanced Speed and Quality:** Product teams can design and build faster with higher product quality.

2. **Single Source of Truth:** The design system serves as a reliable foundation for designers and developers.

3. **Improved User Experience:** The Storytel app now offers a better, more consistent, and enjoyable experience to the users.

In summary, the Storytel Apps DS has transformed the product design and development process, resulting in a more efficient, consistent, and accessible user experience.

Storytel Apps Design System v1.0

> **Lead Product Designer  ✴︎ In-house/Storytel**
>
> **Role:** design exploration, interaction & interface research, visual design

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FehJPlLkYv2QYya9dANqR8eTLkqv1%2FqzWIxDEqGMTIidLZ8GLB%2Fe0f4870c-7fcc-4dc9-bc3d-cb554d6e5846.jpg?alt=media&token=f0191e45-847c-47cd-8b8d-6a249f5e22e7","id":"e0f4870c-7fcc-4dc9-bc3d-cb554d6e5846","width":1998,"height":1446,"filename":"Image 2023-10-25 at 17.16.jpg","type":"image/jpeg","caption":"","border":false}]}
```

Storytel, a premier audiobook streaming service, operates in more than 20 markets. The company has a playful and friendly visual identity, conveying the joy of listening to stories. However, the designers working on the digital product created their own interpretation of the visual identity and did not have unified recommendations to follow when developing the product's design.

As the lead designer, I spearheaded the research, exploration, and definition of the design principles for the digital identity of the Storytel app.

### **Research workshops**

Over a series of workshops, we got our brand and product designers together. We talked about what makes Storytel unique, checked out our past branding wins, shared some cool ideas, and brainstormed ways to enhance the experience and branding of the Storytel app.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FehJPlLkYv2QYya9dANqR8eTLkqv1%2FqzWIxDEqGMTIidLZ8GLB%2F146928c9-2ab3-4e54-ba16-d035435abe21.jpg?alt=media&token=996fde82-5646-4538-9c4f-fcb09781fcbf","id":"146928c9-2ab3-4e54-ba16-d035435abe21","width":3216,"height":2090,"filename":"Image 2023-10-25 at 17.07.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FehJPlLkYv2QYya9dANqR8eTLkqv1%2FqzWIxDEqGMTIidLZ8GLB%2Fe8c17b9d-6547-4c11-b3b7-1cc743459a62.jpg?alt=media&token=5cdb4dc9-f31b-431e-b4d1-161085a58c69","id":"e8c17b9d-6547-4c11-b3b7-1cc743459a62","width":3216,"height":2090,"filename":"Image 2023-10-25 at 17.08.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FehJPlLkYv2QYya9dANqR8eTLkqv1%2FqzWIxDEqGMTIidLZ8GLB%2F1a988991-93db-4746-bf7e-30e513c8e129.png?alt=media&token=0331c79e-f81f-4d01-bb88-d9c747037578","id":"1a988991-93db-4746-bf7e-30e513c8e129","width":3216,"height":2090,"filename":"Screenshot 2023-10-25 at 17.08.02.png","type":"image/png","caption":"","border":false}]}
```

### **Design exploration**

The results of the workshops were used to create a design brief, which served as a guide for me to begin exploring the future look and feel of the Storytel app. After a series of experiments, iterations, and discussions, we started identifying the key elements of Storytel's digital identity that would embody the Storytel brand and set us apart from competitors.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FehJPlLkYv2QYya9dANqR8eTLkqv1%2FqzWIxDEqGMTIidLZ8GLB%2F0d2d1594-7b32-47bc-a5c0-9079a609672e.png?alt=media&token=9be09978-74d2-410e-822c-6e88bcfd1a11","id":"0d2d1594-7b32-47bc-a5c0-9079a609672e","width":3196,"height":1800,"filename":"Process 4.png","type":"image/png","caption":"","border":false}]}
```

### **Digital ID Foundations**

The resulting concept became a subtle yet noticeable evolution of the app's visual appearance. I dedicated specific attention to crafting the color palette, introducing a new background color, revamping the typographic hierarchy, and creating new visual elements such as a pictogram system.

By taking a user-centered approach, we identified areas of the user experience that describe the context in which the user interacts with the service. For each experience area, we developed and illustrated UX principles and visual guidelines.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FehJPlLkYv2QYya9dANqR8eTLkqv1%2FqzWIxDEqGMTIidLZ8GLB%2F234e30b5-89cd-4f82-92d8-0f5a96a8171f.png?alt=media&token=ca12cf21-5a86-4a60-96bf-f1ea6b5c1e57","id":"234e30b5-89cd-4f82-92d8-0f5a96a8171f","width":3196,"height":1800,"filename":"Process 5.png","type":"image/png","caption":"","border":false}]}
```

### **Digital ID Guidelines**

The next step in our process was the development of detailed guidelines, offering clear 'do's' and 'don'ts' that encompass everything from typography to the correct usage of icons and imagery.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FehJPlLkYv2QYya9dANqR8eTLkqv1%2FqzWIxDEqGMTIidLZ8GLB%2F3dc06193-b4e4-4009-8cc9-fb5ebf787fcc.png?alt=media&token=7ab87c10-92c1-4b7b-b14d-ce520be19307","id":"3dc06193-b4e4-4009-8cc9-fb5ebf787fcc","width":3196,"height":1798,"filename":"Guidelines - 1.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FehJPlLkYv2QYya9dANqR8eTLkqv1%2FqzWIxDEqGMTIidLZ8GLB%2F0b2f48c4-7ed5-419f-bf2c-df238de42f04.png?alt=media&token=29585609-d996-4be4-a68f-bd1be1945a1a","id":"0b2f48c4-7ed5-419f-bf2c-df238de42f04","width":3196,"height":1798,"filename":"Guidelines - 2.png","type":"image/png","caption":"","border":false}]}
```

### **The outcome**

The creation of the Digital ID laid the groundwork for **Storytel's app design system**, developed in parallel. This transformation had a profound impact on the final product, delivering:

* **Streamlined & consistent UI:** A user-friendly, uniform interface.

* **Enhanced brand consistency:** Strengthened the brand presence in the app.

* **Thoughtful visual palette:** Enabled the creation of a more delightful user interface.

In sum, the Digital ID has streamlined the design and development process, resulting in a more enjoyable and cohesive Storytel app design.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FehJPlLkYv2QYya9dANqR8eTLkqv1%2FqzWIxDEqGMTIidLZ8GLB%2F6b65c3e5-3140-4f64-a0a9-f66f31960b76.mp4?alt=media&token=20e6e711-be07-48fe-b94d-103ae9c224c9","id":"6b65c3e5-3140-4f64-a0a9-f66f31960b76","width":1920,"height":1080,"filename":"final_video_1080.mp4","type":"video/mp4","caption":"","border":false}]}
```

Storytel App Digital Identity

Currently leading the design and implementation of design systems for storytel.com

Design System Lead

Currently driving the development of the next-generation design system, incorporating significant redesigns across Storytel apps and website for a cohesive cross-platform experience.

Storytel App Design System

Led the creation of the design system to streamline and enhance the user experience across Storytel apps.

Led the conceptualization and design of a unified Digital Identity for the Storytel app.

Cofounder + Product Designer

GETDONE is a dead-simple GTD-based task planner that we are building together with my friend. Available soon!

Serge Krutik

2023

2022