Boris Soliz
UI Designer
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.
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.
Lets address the first problem
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:
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:
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.
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.
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 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.
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
Eases In
Eases Out
Eases In and out
Gentle Bounce
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.
