Case Study: Creating a design system for the Wix mobile app






Designing for large-scale and complex projects has inevitably led to Design Systems becoming common practice in today’s leading companies - many of them adopting different variations of the concept in order to maintain design integrity and scalability across their ever-evolving products and platforms. In this case study we’ll examine how we conceptualized and created the robust design system that is used today by the Wix mobile app team.

Initially, our team had no design system in place and we relied on meetings, team-syncs and group decisions in order to maintain a cohesive UI an consistent UX patterns. While this is managable in a small team and a relatively simple product, we quickly realized that this wouldn’t be sustainable as more parts of the Wix ecosystem were being integrated into our app.



Although we were  fully commited to developing using React Native, a framework designed to make such projects quicker and simpler to develop without the need for code duplication, our team was still maintaining two separate versions of the app for both iOS and Android. Every screen and flow had to be designed and QA’d for each platform which greatly hindered velocity for all teams involved.

For us designers, this meant that we had to learn and monitor all of the subtle differences in design, UX and behaviors specific for each platform. For example, we designed with San Francisco as the system font for iOS and Roboto for Android. In addition, the constant evolution of iOS’s Human Interface and Android’s Material Design demanded ongoing monitoring to make sure we were up to date with each of their design standards.

Besides the core team of 3 UX designers (at the time), we also needed to be capable of supporting ~12 other Wix verticals that were being integrated into the app in parallel - each with their own teams of designers, devoplers and PMs.  

It became obvious that designing on this scale required drastic changes to be made, and luckily one of our our lead mobile developers took this monumental task head-on, with others quickly jumping on board and realizing its potential.


Research and planning


From the beginning, I strongly believed that the key to our design system’s success was the unification of UX/UI across both platforms, allowing for a system that could be easily maintained on the design side but also the development side. To me, split designs seemed old fashioned and cumbersome, especially for apps that wish to have a more branded  experience. Such a change obviously required a fair amount of convincing due to the fact that most people are very loyal to their platform of choice - believing one is superior to the other in terms of UX/UI.

Researching how industry leading brands such as Airbnb and Spotify approached this dillemma strengthened our determination to turn our vision into a reality. We began by mapping out all of our components, from simplest to most complex, and decided on optimal guidelines for design and implementation. Although most components would become unified, some were deliberately left “native” in order to keep the familiarity associated with each platform. Here is an example of our custom top navigation that conforms to native guidelines but uses the Wix MadeFor font and custom icons.



Some components evolved into “hybrid” versions that mixed custom elements with platform-specific ones. For example, we made our bottom tab navigation adhere to iOS and Android dimensions and spacing, but we adapted the icon styles to fit our brand and removed the textual labels.  



In addition to those considerations, I believed that the Wix brand should be the prominent driving force behind our designs. Having our designs aligned to Wix’s brand would mean that our users would be benefiting from a holistic experience across Wix’s desktop & mobile products.


A Generic System Architecture


Because the app was constantly evolving, our secondary criteria for the design system was to create a flexible architecture that could adapt to future changes easily and seamlessly. Together with the lead developer we defined a generic structure upon which we would build the sytem - essentially breaking down all elements into their most atomic form. Most importantly, the most common elements like typography styles, colors, inputs and buttons would be detached from any specific context.

For example, we defined our typography styles with generic names instead of specific ones (i.e. “title” instead of “card-title”).


This decision proved to be key in the success of our design system. Utilizing this centralized method of control makes communication between devs and designers much simpler and most importantly enables us to make cross-app changes very easily.


Similarly, our color palette was broken down to system colors spread across several tints. This proved to be flexible enough for use but also scalable if needed for future expandability.

If we ever want to change the main color of the app, we could do it in one place and instantly change it across all components.

Besides the system colors, we automatically generate these tints for any color chosen by our user - allowing for true customization while still staying within the design system’s logic.



A system within a system


Having defined a basic system for colors, typography and spacing, we then moved on to the most basic elements such as buttons, inputs and forms since these would be the building blocks that make up more complex components and flows.

Creating new components suddenly became was simple because of the basic rules that we previously laid out. Every component that was added came with its own guidelines, specs and behavior based on any previous components it was made up from.



Taking a button as an example, we used our typography styles for the text, our color system to define the colors for every state and spacing presets to make sure everything could scale to different texts.

As a testiment to its success, the design system has managed to support very large-scale changes such as updating the app’s font, adding support for tablets and even things such as accessibility for the visually impaired and RTL support.



Today, the mobile design system is maintained by a dedicated team of over 10 designers and developers that support the various internal teams working in the Wix App environment. Head over here to see more about the Wix App itself.

A JOURNEY AWAITS YOU.


Journey is a collaborative travel app that makes it quick and easy to make sense of your travel plans. Whether you are the type of traveller that plans every step, or someone that prefers to get recommendations from friends - Journey keeps everything organized and easy to follow.
Starting a new Journey is easy - just add all the cool places you found, or get personalized recommendations based on things you have saved from previous Journies. If you’re travelling with friends or family, it’s easy to collaborate together and make the trip exciting for everyone.

If you need some inspiration for your next adventure, you can search for popular Journies from other users and discover places you never thought of visitng.



The Wix App enables users to manage their website from their phone or tablet. Users can write blog posts, update store inventory, create and manage events and even live-chat with clients viewing their site. Users can also create their own mobile communities called “Places" and invite their clients to join. Places allow members to interact directly with each other and the owner. 


As a Product Designer on the team, I was an integral part of planning the structure of the app, defining its design principles, developing the design language and also creating the main flows. Along the way we also created a mobile design system to help with consistency and velocity of design.

CREATE YOUR ONLINE PRESENCE.



The Wix App is constantly evolving as we analyze data and adapt to user feedback. I continue to work on maintaining and improving the mobile experience along with a strong team of PMs, developers and analysts. We release new features and products into the app on a weekly basis.

The Wix App is available on the Apple App Store and Google Play Store.


Wix Orders is an app developed by Wix's Restaurants team which can be installed on any website or template. It enables users to add ordering and delivery capability to their business. The app is fully customizable to fit the design of your site - including fonts, colors and styles.

ORDER
UP.



As part of the project, a fully responsive experience was planned and developed with many needed updates to the UI and responsive logic. After releasing the update, many of Wix’s amazing templates were refreshed to include the Orders flow as part of their offering.





Proposals for a bi-monthly program, new logo, opening night invitation, admission tickets, magazine advertisement, website and posters for the Batsheva Dance Company.

*All photographs used in this concept belong to their respectful owners










All projects, photos & images © Copyright 2021, Roy Sherizly