For Cisco, I led the design of the Mobile Design System, extending the CX Cloud experience from desktop to mobile. I created a scalable system aligned with the Figure 8 desktop design language, delivering 100+ reusable components and 400+ screens while ensuring consistency, developer efficiency, and long-term growth.
This insight underscored the need for a mobile CX Cloud app that kept users productive and responsive wherever they were.
By creating Cisco’s first mobile design system and accompanying documentation, I delivered over 100 reusable components and 400+ screens that not only ensured design consistency and scalability but also accelerated developer handoff, improved cross-team collaboration, and positioned CX Cloud for faster adoption across mobile platforms.
Upon defining the desired outcome for our customers, we encountered several challenges in the process.
Let's address the first challenge
When I joined, the design team only had Figure 8, a system built solely for the CX Cloud desktop app. Nothing existed for mobile, even though the demand—and deadline—were pressing. As part of the mobile team, I quickly produced screens to keep pace, but it became clear that what we truly needed was a dedicated mobile design system—one that could scale across devices while maintaining consistency with the CX Cloud experience. One of the outcomes we set out to achieve for customers was…
As a Mobile Designer,
When a mobile customer needs to add a note to answer a question,
I want to quickly and accurately design a form,
So I can move on with my day.
As a Mobile Developer,
When a form is required for adding a note to answer a question,
I want to quickly and accurately build the form,
So I can move on with my day.
So how could we help our designers and developers?
It's crucial to establish components and design patterns to maintain brand consistency and coherent user flows. This initiative should also establish a connection with the fundamental core elements of the existing design system to ensure alignment and continuity across the brand's design ecosystem.
To address this challenge, my approach involved creating a completely new Mobile Design System, guided by the following criteria for its initial version:
Initially, my focus was on comprehending the construction of the desktop design system and identifying core elements to maintain brand consistency, ensuring the new system would be closely aligned with its predecessor. Through research, it became evident that we needed to stay close to our brand, using the same core foundational elements for both systems was collectively agreed upon as the ideal approach. This ensured that the new system remained a sibling of the main design system rather than a distant relative, retaining a strong visual connection and coherence within the brand.
After aligning both teams on the use of core foundational elements for the new mobile design system, I started working on creating components, colors, patterns, and more. Leveraging Ionic as the base framework, we made significant progress in theming components to adhere to branding and FIG8 principles. Additionally, we crafted custom components to supplement what Ionic didn't offer, further enriching our V1 Design System and expanding its capabilities.
Components created
Screens designed for MVP
With the designers equipped and operating using components within version 1 of the Mobile Design System, the focus shifted towards addressing the second challenge. This marked the beginning of our version 2 design system.
It became apparent that there was a deficiency in documentation and specifications for our components, indicating a need to address this aspect to better support developers in utilizing and implementing the design system. Aligning ourselves to the existing Desktop Design System will help various teams in these various methods.
Through dedicated teamwork and collaboration across various departments, including the visual design team, development team, multiple mobile designers, and leadership, we successfully created a second version of the Mobile Design System.
Additionally, we aimed to introduce an extra layer of surprise or enhancement to further elevate the system.
During the creation of documentation for our mobile design system, the team sought to introduce motion elements to enhance the system's appeal. However, a lack of motion guidelines for both mobile and desktop apps was noted. Consequently, a dedicated team, termed the "Tiger Motion Team," was formed. This team's objective was to outline the desired goals for motion integration, ensuring alignment with our design principles and considering any necessary adjustments to these principles. After multiple design sessions, we distilled our motion principles to the following four:
Our customers are knowledgeable and don’t need us to explain every detail of our products and services. Motion should be unobtrusive, concise, & exist for a reason.
Our users are both busy and task-focused, therefore the animations should be limited to the task at hand. Motion should be selective and targeted.
Since our users are task-oriented, motion does not demand attention, but rather reinforces our user's goals and decisions with succinct and satisfying feedback.
Motion responds to customer inputs, and is choreographed and feels graceful. Our motion acts and responds as we expect them to in the real world. It just makes sense by giving our brand personality.
In exploring how motion could improve the app experience, I looked beyond simple delight and developed motion guidelines that evolved into a system-wide standard for both mobile and desktop. I aligned these guidelines with our design principles and refined details like timing, easing, and overall interactions to suit each platform. Let’s start with easing.
Easing
Recognizing the distinction between ‘Ease In’ and ‘Ease Out.’ I devised a new naming system for clarity in usage. Additionally, I introduced a standard and gentle bounce curve to infuse delight into various app situations. The timing aspects were informed by research and best practices observed in the industry's leading companies.
Color coding
To enhance comprehension, I color-coded the bezier curves (x1,y1,x2,y2), aiding both designers and developers in understanding the x and y coordinates. This approach proved valuable when creating specifications for developers. The developers, who would utilize this design system, appreciated the effort taken to clarify the motion specifications, acknowledging the benefit it brought to their work.
No Easing
Eases In
Eases Out
Eases In and out
Gentle Bounce
Timing and Duration
To keep motion consistent across mobile and desktop, I researched best practices for timing and duration, drawing from multiple sources. The result was a unified motion scale that aligned with our design principles and ensured smooth, consistent interactions across platforms.
This approach aided the team in comprehending the appropriate use of specific easings and timings for various UI elements. Here are some examples of the timing and duration in practical application.
Our work in detailing, designing, testing, prototyping, and animating added significant motion enhancements to the design system. The goal was to give developers a clear understanding of the design intent and how it should be implemented in code. Using tools like Aninix and Figma, we integrated motion specs directly into the documentation, providing component-level guidance and creating delightful, consistent interactions.
The Mobile Design System established a scalable foundation that transformed how Cisco approaches mobile design and development.
This project not only delivered Cisco’s first mobile design system, but also proved the value of a scalable approach—laying the groundwork for long-term adoption across teams.
Boris was a key member of our mobile design team as we built out the CX Cloud mobile app. He was very well liked by his coworkers, and contributed a balanced, calm, and confident vibe to our team. His key contributions were leading the mobile version of our design system, motion design guidelines, visual design, and marketing materials.
