Roles & Responsibilities
UX Manager, Designer, Design System Architect
Multibrand Design System
Betsson Group's mobile app development division, bolstered by a dynamic mobile UX team and eight cross-platform development squads, faced the challenge of efficiently managing a burgeoning portfolio of native apps across diverse brands. The team recognized the pressing need for a scalable design system to streamline the development process and ensure brand consistency across Android and iOS platforms.
Collaborating closely with development squads, the design team endeavored to create a comprehensive design system capable of accelerating workflows and adapting to the intricacies of managing numerous apps on two distinct platforms.
Navigating the complexities of multiple native apps on Android and iOS while maintaining unique brand identities and authentic user experiences posed a significant challenge. The team worked to strike a delicate balance between cross-platform consistency and platform-specific nuances, aiming to ensure users encountered a genuine native app feel, regardless of their device.
Addressing concerns from brand stakeholders about potential app similarities, the team aimed to differentiate between brands, starting with brand-specific colours and typography. Future plans involved incorporating transition animations to imbue each brand's app with a distinctive character.
Betsson Group's mobile app development division has experienced rapid growth, comprising the mobile UX team and eight cross-platform development squads. With an expanding portfolio of apps catering to various brands, the team faced the challenge of efficiently delivering a growing number of native apps while ensuring brand consistency and maintaining a true native experience.
The need to streamline the development process and create a scalable design system became apparent. In response to this, the design team collaborated closely with development squads to develop a comprehensive design system that would enable faster, more structured work and adapt to the complexity of managing multiple apps on two distinct platforms: Android and iOS.
The primary problem at hand was the increasing complexity of managing a multitude of native apps across both Android and iOS platforms while maintaining a unique brand identity and preserving a native user experience.
The team needed to strike a balance between cross-platform consistency and platform-specific nuances to ensure that users encountered a genuine native app feel, regardless of the device they were using. In addition to this, the brand stakeholders were concerned about the risk of users perceiving apps from different brands as mere clones of each other. Due to limited resources, developing entirely unique app experiences for each brand was not a viable solution. The challenge lay in identifying the minimum requirements that would differentiate apps from various brands.
The primary focus initially was on brand-specific colors and typography, with future plans to incorporate transition animations between views, ensuring that each brand's app possessed a unique character.Multi-Brand Scalability
To create a design system capable of supporting a minimum of 10 different brands, totaling 20 apps, evenly distributed between Android and iOS platforms.
Cross-Platform Consistency
To ensure that the design system promotes a consistent user experience and visual identity across both Android and iOS, preserving brand consistency while adhering to each platform's guidelines.
Harmonised Components
To bring Android and iOS design components as close together as possible, fostering overlap in elements such as buttons, typography, and color palettes, to maximise cross-platform brand consistency.
Native Experience
To retain the intrinsic native feel of each platform by focusing on the unique navigation patterns, UI layout of navigation elements, and transitions that characterise Android and iOS applications. This was crucial to ensure that users experience a true native app feel on their respective devices.
These goals collectively aimed to strike a balance between cross-platform consistency and platform-specific nuances, enabling us to deliver a unified design system that enhances the user experience and maintains the integrity of each brand's identity.
Extensive research formed the foundation of our approach. The design team conducted thorough investigations into existing design systems and principles, ultimately choosing to base the new system on atomic design principles due to their scalability for multi-brand applications.
An in-depth analysis delved into what made iOS and Android apps distinct in terms of look and feel. These discussions centered on the unique navigation patterns, the layout of UI navigation elements, and transitions, elements that fundamentally define the native experience of each platform. It was critical to ensure that these essential components aligned with the platform's native characteristics while accommodating brand-specific nuances.
The design team also engaged with brand stakeholders to address their concerns about app differentiation. This led to a strategy of initially focusing on brand identity through color and typography, with future plans to introduce platform-specific transition animations to enhance the unique character of each app. By utilizing platform-specific animations, layouts, and design elements, the team aimed to amplify the perception of a genuine native experience, mitigating the risk of users viewing apps from different brands as clones.
Furthermore, our research extended to collaboration with our iOS and Android developers to understand how they preferred to structure elements within the design system. This cooperative effort culminated in a unanimous decision to adopt atomic design principles as the foundation for our system, aligning both the design and development teams on a common framework. This collaborative research and alignment ensured a seamless and efficient integration of design and development processes within the project. This research laid the groundwork for the development of a design system that would successfully address these complex challenges.
We were able to create a comprehensive pitch that addressed the needs and goals of cat caretakers and raisers while also showing the potential for a profitable and sustainable business. We created an executive summary, pitch deck, and detailed market research to attract investors and showcase the potential for a profitable and sustainable business. While team members had to pursue different career paths and I lacked the personal energy to move this forward at the time, the dream of bringing Zoomni to life remains. Overall, I am proud to have been a part of the Zoomni project and believe that it has the potential to revolutionise the way cat caretakers and raisers interact with each other and their companions. While the project is currently on hold, I am excited to see where the future takes us and hope to see the Zoomni app become a reality one day.
Our goal was to create a versatile design system capable of supporting a diverse portfolio of at least 10 distinct brands, equating to 20 apps split evenly between Android and iOS platforms. Our primary objective was to strike a balance between Android and iOS, finding common ground in components, styling, and design elements while still preserving a platform's unique, native user experience.
To achieve this, we delved into what defines an app's Android or iOS essence. We recognised that the key differentiators lay in the navigation pattern, the layout of UI elements within navigation, and the transitions. These fundamental elements contribute significantly to the perception of a "native" feel on each platform.
By addressing these aspects while maintaining a cohesive design system, we aimed to create a cross-platform solution that both embraces brand consistency and delivers an authentic, platform-specific experience to users.
Cross Platform Design System
Two design solutions with shared elements
Some components and patterns are essential to maintain an iOS experience. We decided to keep the navigation app bar consistent with iOS for all brands and use native transitions between views. Other examples of components that communicates iOS was the segmented controller. We decided that the segmented controller was a UI component that would preferable be used on iOS but we opened up the door for classic tabs to be used too. Hence the Android version was used on iOS on some brands, the other way around was deemed too iOS.
We decided to create a new brand that would serve as the core for all our design solutions. That way we could communicate design solutions to a number of brands with a neutral branding, hence avoiding brand stakeholders to get distracted by the designs having the wrong branding. We still produced two design solutions, one for iOS and one for Android per view, flow or project.
Example - Password Login
Above we can see the purple brandless view and its branded counterparts to the right.
Colors, text styles, fonts, corners
Brandions
Buttons, dialogs, cards, lists, list items, input fields etc.
Components
Password login screen, PIN login screen, etc.
Views
Login, Forgot password, Change password etc.
Flows
Login feature
Product / Feature
After looking at possible ways to document and archive our components, styles, patterns and flows we decided on a hybrid solution. We created an inhouse website that would allow us to maintain and present design documentation and since it was developed in house we would be able to add functionality as the system matured.
Repository
Flows
To communicate flows to developers and stakeholders we utilise inVision and Zeplin. inVision is preferred by brand stakeholders while a lot of developers prefer Zeplin. To communicate and specify transitions we use Principle app that enable us to design and show native animations.
Components
Components are specified and organised within our system. These are usually called organism or molecules, our design team did not see the advantage to split up components further and decided to just have a component section to save ourselfs from discussions around what goes where.
Views
All views are specified in Zeplin but with added information on our own repository website for developers. Components are marked out and linked to.
With the introduction of our design system we created more work for ourselves, and more importantly a different way or working.
Our goal was always to get things into production, as fast as possible without compromising quality. When we looked into our way of working and planned for the new system we put two main stakeholders in focus; UX and development. The process should work for and include both. The result of this was better interaction with development teams, and a smoother way of working.
A way of working
Process
We already had a good lean process in place where we isolated flows or views as individual projects with the goal of having them in production (live in app) on both Android and iOS but only on a pilot brand. Our new design system made us switch focus from delivering a brand specific flow to all brands instead. This meant extra work at the specs phase. We decided to continue with our process for projects since it was fast, proven and well integrated with stakeholders and development teams.
A new lane is born - Components & Repository
We already had a good lean process in place where we isolated flows or views as individual projects with the goal of having them in production (live in app) on both Android and iOS but only on a pilot brand. Our new design system made us switch focus from delivering a brand specific flow to all brands instead. This meant extra work at the specs phase.
