Creating the Design System for the Cisco U. Learning Platform
Jorge Tello Aliaga
Client: Cisco
Role: Senior UI/UX Designer
Tools: Figma
Introduction
Cisco U is a digital learning platform aimed at providing a comprehensive and personalized learning experience. Cisco U. offers courses from 3rd parties such as Microsoft, Google, Skillshare and others.
To ensure a consistent and efficient user experience, I was tasked with creating a cohesive Figma Design System.
The Challenge
The initial designs for Cisco U were inconsistent, with various elements not adhering to a unified grid or style. The goal was to standardize these elements and create a robust design system that other designers could easily use.
Process
1. Initial Design Collaboration
Worked with Cisco designers and an external agency to define the initial look and feel, covering welcome pages, landing pages, and main platform pages.
2. Asset Standardization
Updated all assets to fit within an 8-grid system, addressing inconsistencies in sizes, padding, and auto-layouts.
3. Creating Responsive Design Comps
Once the desktop comps were completed and approved, I needed to create the responsive versions of the comps. After meeting with the engineering team, we agreed on 5 breakpoints to cover all devices: Phone, Table, and Web.
I used the "Breakpoints" Figma plug-in to connect the comps and demo the responsiveness in real time.
4. Creating the Component Library
Organized component blocks into categories: Foundations, Elements, Components, Patterns.
- Foundations: Included basic elements like color styles, ensuring accessibility compliance using Stark (a Figma plugin).
- Elements: Developed small pieces such as buttons, which included multiple states, sizes, and styles.
- Components: Created more complex elements like cards for different content types (courses, tutorials, blogs, etc.).
- Patterns: Constructed full UI sections, such as playlists, using the created components.
5. Design Training
Once the Figma Design Library was completed, I conducted training sessions for the designers on my team. This ensured that everyone was proficient in using the library to create consistent and cohesive pages.
Results
The Cisco U Design Library took around 6 months to complete and was well-received by peers and stakeholders. It enabled designers to create new comps efficiently and consistently.
Launched Cisco U:
Cisco U was launched in June 2023 and has been well-received due to its comprehensive and personalized digital learning experience.
