Go to Top


Mobile Design System

My Role:
Product Designer
Motion Designer
Component Designer
Visual Design

Cisco's highly successful Customer Experience desktop product, CX Cloud, boasts an impressive desktop design system known as Figure 8.
Recognizing the evolving landscape, the team acknowledged the necessity of delving into the mobile realm.

Before I joined the team, our research team had already conducted preliminary research revealing a considerable demand from our customers for a mobile version of the desktop CX Cloud App.

92% of participants reported interest in using a mobile CX Cloud app.

“When I'm away from my computer I still get questions. Being able to easily open an app and find information would allow me to respond without logging into my computer.” - Network Engineer

This insight emphasized the demand for a mobile CX Cloud app to enable easy access and responsiveness even while away from a computer.


Upon defining the desired outcome for our customers, we encountered several challenges in the process.

  • There was a lack of a comprehensive design system that designers could utilize as a reference or a framework for their design work.
  • We lacked proper documentation and specifications, impeding developers from swiftly accessing necessary guidelines to align their code with the design system.
  • Develop a motion design system that integrates core design principles to enhance our product(s) by introducing delightful and engaging animated elements.

Lets address the first problem

Designers lacked an organized design system

At the time, the design team solely possessed the Figure 8 design system tailored for the CX Cloud desktop app. However, a design system for mobile applications was absent. The mobile design team, which included myself, worked fast to create screens in order to meet the pressing demand and deadline for the app. There was a crucial need to create a dedicated design system for mobile that would align with the requirements of the CX Cloud app on different devices. For example, one of the outcomes we needed to achieve for our customers was:

Customer Outcome: Respond to a question

"When a question needs answered while im not at my computer, I want to respond back quickly and confidently so I can move on with my day.
- Network Engineer

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 FIG8 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:

  • Constructed by incorporating core foundational elements derived from the primary desktop design system (Figure8) to ensure a consistent brand and unified identity across platforms.
  • Develop a comprehensive collection of components and design patterns, empowering designers to create hybrid-ready designs with ease and confidence.
  • Collaborate seamlessly with designers and developers, enabling rapid iterations as designers craft screens for the application.

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.

Significant achievements.


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.

Lack of documentation slowed developers

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.

  • Gives designers more flexibility with components.
  • Helps us provide what people need with less components.
  • Helps eliminate confusion when going from designer to designer or designer to developer.

I led the team in creating an updated version of the Mobile Design system, leveraging the existing specifications and documentation style from our desktop app. This approach aimed to ensure a consistent transition for designers working across products and assist developers in understanding the standards for each component's design and coding. Collaborating closely with another Figma designer and the visual design team, we successfully developed a second version of the mobile design system, complete with comprehensive documentation and specifications. We also updated many of the components from version 1.

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.

Design engaging animations based on principles.

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.

Simple + Direct

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 the role of motion to enhance our app's experience, I delved deeper into its potential beyond adding delight. This exploration led to the creation of motion guidelines specifically for our app, which extended to encompass the entire design system, spanning both mobile and desktop platforms. I ensured alignment with our principles and tailored the timing, easing, and overall experience to suit the needs of both desktop and mobile interfaces. Lets start with Easing.

Recognizing the confusion among designers, including myself, regarding the distinction between "Eases In" and "Eases 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

cubic-bezier(0, 0, 1, 1)


Eases In

cubic-bezier(0.4, 0.14, 1, 1)


Eases Out

cubic-bezier(0, 0, .3, 1)


Eases In and out

cubic-bezier(0.4, 0.14, 0.3, 1)


Gentle Bounce

cubic-bezier(0.5, 1.65, 0.4, 0.8)

Timing and Duration
To ensure consistency in motion across both mobile and desktop apps, I dedicated effort to comprehending optimal timing and duration applications. It was crucial to maintain the same motion principles across platforms. Conducting extensive research and drawing from diverse resources, I developed a unified timing scale that effectively addressed this challenge for both platforms. By aligning the best duration and timing with our design principles, I devised a motion scale that harmoniously complemented our products.

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.

The extensive efforts in detailing, designing, testing, prototyping, and particularly animating, significantly enriched our design system with motion. The ultimate goal was to facilitate a clear understanding for developers regarding the designers' vision and its implementation in the code. Tools like Aninix and Figma played a pivotal role in making this achievable. Integrating motion specs into the documentation proved to be a fantastic approach to deliver component-level motion and delight.


The mobile Design system proved immensely successful for both designers and developers. With high utilization among designers, the next phase involved integrating it into the broader design system for all CX Cloud products. I am exceptionally proud of the team's collective achievements and the work we accomplished.

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.
- Jupiter Barton
Cisco - Product Design Director