Udemy Design System
Date
Location
San Francisco, CA
Role
Senior UX Designer / Design Lead for Mobile
The Challenge
As the mobile and web applications both grew, became more complex and implemented quicker sprint cycles, there was a need to manage design assets that enabled rapid iteration, consistency across platforms, and simpler technology implementations.
Setting the Foundation
The entire effort was coordinated by the director of design, with myself leading the effort from the mobile side and another senior UX designer leading the web app side. The first step in creating the design system was defining the guiding principles that would help define our approach to our interface. While this may initially seem like a superfluous step, it would pay dividends down the road when it came to making decisions around our design system. When identifying these principles, we gathered product stakeholders and worked collaboratively to create a set of principles that we would apply throughout the product – not just on the design side.
Motivated
We are doers. We embrace the power of endless variety and unbridled possibility. We don’t dwell on challenges; we find solutions and act on them. No matter how large or small our ambitions, we are driven to take that first step.
Optimistic
We see opportunity where others see roadblocks. We believe that everyone can discover their potential and make it a reality. The future looks bright because Udemy enables courses for life and makes them accessible to all.
Approachable
In keeping with our mission of helping anyone learn anything, we welcome everyone into our community with authentic enthusiasm. We meet our customers where they are today and never judge their motivations or aspirations. In our communications, we are responsive and supportive, and our customers can trust us to speak truthfully and openly
Concurrently, we were going through the effort of determining the pieces of the system. Using the Atomic Design System as a basis for identifying and organizing each component, we started by performing an audit of all screens across all platforms to identify reusable items and patterns.
Examples of the various iterations of a course card use in the mobile and desktop products.
The audit was an eye opening experience in identifying how a single component can have so many variations. This one exercise alone was a perfect illustration of ways to increase efficiency in design and development. By reducing all of these variations, we can create a single reusable component to minimize design inconsistencies and speed of development.
Creating the system
After taking several weeks to compile and organize all of the interface elements and group them, we decided to tackle the challenge by addressing the core design elements first. By first defining a type system, icon style, sizing & spacing system, and several other core design elements, we aimed to lay the groundwork for all other components to build upon.
A lot of time was spent defining these core components, as there were major implications that would affect everything from individual components to overall layouts. A key example of this is the spacing system. There was many examples of spacing systems, such as the base-8 system, but for Udemy’s particular case, the decision was to use a base-5 spacing system. The rationale was to reduce initial design overhead, as the majority of components were already using a base-5 system. After some time however, there was a decision change to use the base-8 system. This caused inconsistency for some time since the majority of components and page layouts were already using the base-5 system, but would eventually open the system up for more nuance in the spacing system.
The spacing system for PC and mobile. Overall, the spacing systems match, but the mobile spacing system includes a spacer that defines touch sizes.
The other extremely important core component was the type system, as it was the basis for building everything upon. While we utilized different fonts for each platform (Open Sans on PC, Helvetica Neue on iOS, and Roboto Sans on Android), the sizing scale was similar.
The mobile type system was reduced to ensure readability and force a simpler experience. With the larger screen real estate on desktop, there was the opportunity for nuance in the type scale.
After coming to a direction with our type and spacing systems, we worked the updates into several key screens on each platform to determine where tweaks needed to be made. These screens were chosen since they utilized many components and would provide a good idea of how implementing new components would affect the experience.
Building on the spacing and type, we defined design elements such as corner radii, line weights, and color palette to define the look and feel of the product experience. We followed the same process of testing the updates against key screens and iterating where needed.
Rolling out the new system in the product
After months of getting a baseline out, we rolled out the new system as part of ongoing projects. The approach to implementation differed depending on which platform we were developing for. On the mobile side, iOS and Android had to have their own codebases which meant having to maintain two separate systems. When it came to design files, it also meant maintaining multiple files for each platform and device type (iOS/Android, smartphone/tablet). Using Sketch as the way to create our screen mocks, library files were created that contained all of the components
Deliverables to the development team referencing the styles from the design system.