Case Study: Custom Design System at Rackspace Technology
Building a Design System For a Consistent User Experience Across Digital Products
As Lead UX Designer IV, I took ownership of the new custom design system to help developers and designers at Rackspace Technology to build UI’s faster, based on user-center designs to improve the look & feel, consistency and overall UX of multiple products from the company. This initiative streamlined the design process, increasing user satisfaction and efficiency by +50%, while ensuring a consistent and high-quality UI/UX across digital products.
Role: Lead UX Designer IV
Client: Rackspace Technology
Timeline: Mar 2021-2023
Location: Remote
📔 Project Overview
As a Lead UX Designer IV working on cloud technologies and web application services, I collaborated across projects with other specialized team members on creating new and engaging experiences for users, generate extensive documentation, provide guidelines and best practices to improve the user experience and user interface design for Rackspace Technology products to reach the business goals. All work was based on requirements, data gathered from users and UX research.
During my time collaborating across teams, I took ownership over our new design system. I worked with developers and product teams to ensure the design system was satisfying consumers. Fabric Design System will be available on a dedicated website where users can access to all the patterns & components library to build easily from scratch and update faster user interfaces for Rackspace Products. The design system also includes defined guidelines, instructions and documentation showcasing basic examples and code snippets that users can easily copy and paste on their projects.
The site optimization, new look & feel with +20 custom components and +20 new features that improved by +50% the engagement and overall user experience.
📈 The Impact
🎖️ My Role as Lead UX Designer IV
I worked as a Lead UX Designer IV at Rackspace Technology for more than two years, collaborating across projects with stakeholders, project managers and a team developers and other designers.
Some of my main tasks and responsibilities:
- I took ownership of the new design system and generated guidelines and documentation. I collaborated with developers to build the custom components library and help define the initial structure of design tokens.
- Worked with product managers and stakeholders to clarify and align business goals.
- I improved the accessibility for the new color palette that also has more extended values and harmonious contrast ratio.
- Worked on the UI and UX along with PMs, designers, and engineers. I generated wireframes, mockups and clickable prototypes for testing and validation.
- My expertise and knowledge allowed me to mentor other designers through the design process and accessibility standards.
- Collaborated with product managers and designers to conduct user testing and UX research.
- Generated source files for documentation and visual assets for the UI’s with a new look & feel.
Reviews about my work as UX/UI Designer
Feedback from Team Members & Colleagues at Rackspace
During our time working together, Mario took ownership over our new design system. He worked with developers and product teams to ensure the design system was satisfying consumers. Our team being completely remote, Mario was very good at reaching out and staying in touch with all parties to ensure progress was made.
I believe any design team would benefit greatly from the skillset that Mario offers.
L. Fielder
UX Manager at Rackspace Technology
I. Garcia
UX Designer III at Rackspace Technology
J. Kinley
Software Developer III at Rackspace Technology
S. Salinas
Tech Product Manager at Rackspace Technology
N. Arroyo
Software Engineer at Rackspace Technology
P. Doug
Software Developer at Rackspace Technology
🥊 Problem Statement
Developers at Rackspace Technology struggled with inconsistent components and outdated tools, making it difficult to efficiently create and update UIs, leading to long design/development times and reduced productivity.
Stakeholder Requirements:
- Develop a dedicated website for a design system to streamline UI development, ensuring faster and easier builds.
- Benchmark against competitors to enhance UX, site architecture, navigation, and documentation.
- Optimize task completion time and complexity for improved developer efficiency.
- Create comprehensive design principles and best practices for the Fabric Design System (FDS).
- Ensure the site and design system are WCAG 2.1 compliant and accessible.
Target Audience
Most of the end-users are project managers, developers and designers working at Rackspace Technology. Males and females between 30-60 years old.
The design system and website will easily help users to update and create new UI’s that are responsive and accessible. We want to test the usability and gather feedback from end-users in order to create a product that is successful, can compete in the market and increase satisfaction.
🪢 The Challenges
- Integrate over 20 new components and patterns to ensure adaptability across various layout sizes.
- Overcome issues with the current site, including limited documentation, broken links, and confusing navigation.
- Enhance consistency across products by providing a robust design system and components library.
- Develop a user-friendly website with docs and code snippets to support users in completing tasks without assistance.
- Follow WCAG 2.1 standards for better accessibility.
🎯 The Solution: Goals and Objective
To address the challenges identified, I led a strategic initiative focused on fostering seamless collaboration between developers, designers, and other key stakeholders. A pivotal element of this strategy was the creation and implementation of a robust new design system, meticulously crafted to ensure consistency, efficiency, and scalability across all platforms.
- Our primary goal was to develop a custom, user-centric website that would serve as a central hub for the design system. This site was designed to be fully accessible from any browser, whether on desktop or mobile devices, ensuring that users could easily explore and utilize the comprehensive components library and detailed documentation.
- By prioritizing cross-functional collaboration and a responsive, intuitive interface, we aimed to empower teams with the tools and resources they needed to accelerate development processes, maintain design consistency, and ultimately enhance the overall user experience.
- This initiative not only streamlined the workflow but also established a scalable foundation for future growth, ensuring that the design system would continue to evolve and meet the changing needs of the organization.
- Increased User Satisfaction: The design improvements have led to a notable increase in user satisfaction, with feedback indicating a +70% rise in positive responses. Users appreciated the clear visual hierarchy, interactive examples, and code snippets, which facilitated a smoother workflow.
- Enhanced Visual Hierarchy: By establishing a clear and logical visual hierarchy, I ensured that users could easily navigate within a page or section, guiding their attention to key elements and actions. The new UIs and flows helped users find what they need quickly, reduced frustration and improved overall satisfaction by +50%.
Enhanced Accessibility: Recognizing the importance of accessibility, I designed a layout that seamlessly adapts to various screen sizes, including smartphones and tablets. This mobile-first approach not only increased usability but also ensured that the design remained consistent and unified across all devices. By aligning with familiar design patterns, I reduced cognitive load, allowing users to navigate the product effortlessly and complete goals. The new design system and website updates passed the contrast ratio tests and significantly improved accessibility by +70%. The use of a clear visual hierarchy, readable text size, and an accessible color palette compliant with WCAG 2.1 standards contributed to a more inclusive user experience. The site also accommodates future enhancements like a dark theme.
Intuitive, Easy-to-Scan Navigation: Leveraging the principle of “recognition rather than recall,” I prioritized keeping all navigation options visible, particularly on mobile views. By avoiding hidden dropdown menus and instead presenting choices upfront, users could quickly scan their options, making navigation faster and more efficient.
⭐ The Design Process
One key strategy was fostering collaboration with developers and other designers to establish a new design system and a custom website. This ensured that users could easily access the components library and documentation from any browser, whether on desktop or mobile devices.
Elements from the UI like the navigation experience was continuously refined based on rigorous testing and UX research. By incorporating feedback from real users, I iterated on the design to address pain points and optimize the experience, ensuring that the final product met the highest standards of usability and user satisfaction.
The design was crafted to be instantly recognizable and familiar to users, aligning with common patterns and conventions. This familiarity significantly shortened the learning curve, enabling users to engage with the product more quickly and confidently.
📝 Phase 1: Discover
The process began with stakeholder and user interviews to gather essential data, followed by the creation of empathy maps to deeply understand the end-users and their needs.
Qualitative Research
I started gathering requirements and conducting Field Studies by observing end-users interact with the current product and tools in their work environment. This helped to understand better the user behavior and needs.
During this phase, we conducted interviews with over 10 end-users, including project managers, developers, and designers, via Zoom. Our goal was to understand how they interact with the existing library for building and updating UIs, identifying which components and pages were most frequently used and where the pain points lay.
Talking to the end-users allowed me to gather direct feedback, asking participants to complete specific tasks using the website and design system. This provided actionable insights for improving both the design and overall user experience.
Quantitative Research
To gain further insights, I conducted competitive research and distributed surveys that highlighted designers and developers needs for documentation with clear instructions and visual, interactive examples with code snippets.
Key insights included:
- Developers desired a new design system that is consistent and compatible to reduce the time and effort required for building and updating UIs.
- Users found the current site incomplete and difficult to navigate, leading to frustration.
- The existing color palette lacked sufficient contrast, and the font sizes were too small, negatively impacting accessibility.
- The icons library was limited, necessitating the creation of custom icons.
- To ensure the design system met user needs and market standards, I conducted a competitor analysis. This involved comparing user experience, information architecture, site maps, navigation menus, UIs, documentation, and examples from competitors’ sites.
Insights and Learnings
Strengths of Competitors: Some competitors stood out with robust documentation, comprehensive examples, and a clear, user-friendly interface. Their sites often featured well-organized content that made it easy for users to find and utilize the necessary resources.
Weaknesses Identified: However, even the strongest competitors had notable shortcomings. Many lacked sufficient customization options, leading to constraints in design flexibility. Additionally, some competitors overwhelmed users with too much information, while others provided too little, making it difficult for users to get started.
Opportunities for Differentiation: This analysis revealed significant opportunities for us to create a more balanced and user-centered design system. By addressing the gaps in competitors’ offerings, such as by providing a more accessible, customizable, and well-documented design system, we could position ourselves as leaders in the market. Complex navigation and hidden nested items further complicated user experiences. Simplify navigation to enhance usability.
Opportunities
We identified opportunities based on the the strengths and weaknesses of each competitor’s product, informing our direction:
- Some competitors offered extensive documentation and a custom website for their design systems, while others had limited features and components.
- Understand how users currently interacted with the product, identify pain points, and assess whether the design system site was intuitive. We also aimed to discover the challenges users faced when completing core tasks like installing the design system, finding components, and using code samples.
- Competitor sites often targeted a different audience, missing key components needed for our design system.
- Insufficient color contrast on competitor sites with low accessibility.
- The absence of custom icon libraries and assets reduced brand awareness potential.
- Focus the design system on specific use cases and end-users. Provide interactive examples with visuals and easily copyable code snippets.
👤 Phase 2: Define
In this phase, we created personas, empathy maps, and customer journey maps to further understand the users’ problems and needs based on the insights gathered from the research.
Most of the end-users are project managers, developers and designers working at Rackspace Technology. Males and females between 30-60 years old.
The design system and website will easily help users to update and create new UI’s that are responsive and accessible. We want to test the usability and gather feedback from end-users in order to create a product that is successful, can compete in the market and increase satisfaction.
Persona 1: Jason Simpson
Problem Statement: Jason is a busy developer at Rackspace who needs intuitive access to the design system’s library of patterns and components through a well-structured website with clear navigation and documentation that includes visual examples and code snippets. This will help his team streamline the process of building and updating UIs.
Persona 2: Smita Anand
Problem Statement: Smita is a project manager at Rackspace who requires access to the design system through a dedicated and accessible website. She needs to find information quickly through intuitive navigation and documentation with visual examples and code snippets to make the process of building and updating UIs faster and easier for end-users.
User Journey Scenarios
Understanding the user journey was crucial for creating a seamless and effective design system. To better understand different user types, we created detailed scenarios that depicted how various users would interact with the design system:
Onboarding a New Team Member: This scenario illustrated how a new developer would discover, learn, and start using the design system. We identified potential friction points, such as understanding the structure of the system or locating components.
Project Manager’s Overview: In this scenario, we focused on how a project manager would use the design system to oversee project progress and ensure consistency across teams. The journey revealed the need for dashboards or overview tools that allow quick access to essential resources and progress tracking.
User’s Advanced Use: This scenario explored and highlighted the importance of advanced search functionality, detailed documentation, and the ability to customize components, ensuring the system remains flexible and powerful enough to meet the needs of seasoned users.
Pain Points
- Develop a fully responsive site accessible to all users.
- Focus the design system on specific use cases and end-users.
- Provide interactive examples with visuals and copyable code snippets.
- Simplify navigation for a smoother user experience.
- Increase touchpoints and include a comprehensive FAQ section.
- Build a custom icons library for the Fabric design system.
- Enhance accessibility by optimizing contrast ratios and ensuring text readability.
💭 Phase 3: Ideation
In response to the identified pain points related to confusing website navigation and disorganized content categories, we initiated the ideation phase to address these issues. User feedback and data from interviews highlighted the need for a more intuitive and streamlined navigation experience.
Improving the Sitemap & Nav Menu
Using insights from user behavior and feedback, I developed the initial versions of the new sitemap. The primary objective was to simplify the navigation structure, which led to a two-level navigation system. This new structure aimed to enhance usability by reducing complexity and making it easier for users to find relevant information quickly.
Key Considerations
- Simplicity: Focused on creating a clear and straightforward sitemap to avoid overwhelming users with multiple layers of navigation.
- User Feedback: Incorporated comments and pain points gathered from user interviews to ensure that the new structure addressed their needs and preferences.
- Responsiveness: Designed with responsiveness in mind to ensure that the navigation system works seamlessly across various devices, from desktops to mobile phones.
✨ Phase 4: Design
The design phase involved translating the ideation concepts into tangible design elements.
The process followed these key steps:
- Paper Sketches
- Low and Mid fidelity wireframes with variations
- Clickable prototypes
- Final Design – High fidelity mockups
1. Paper sketches
With initial concepts in mind, I created paper sketches to explore different layout ideas and screen designs. These sketches helped visualize potential solutions for the navigation and content layout. Given the importance of responsiveness, I sketched variations for both desktop and mobile views, ensuring that the design would adapt gracefully across different screen sizes.
Landing Page and Details:
- Variations: Developed multiple layout variations to optimize content presentation and improve the overall user browsing experience.
- Responsiveness: Focused on creating adaptive layouts that maintain usability and visual appeal on various devices.
2. Low & Mid-fidelity Wireframes
Transitioning from sketches to digital wireframes, I developed low and mid-fidelity prototypes to further refine the design concepts. These wireframes helped establish the layout, hierarchy, and functionality of the pages.
Design Elements:
- Simplified Navigation: Implemented a sidebar for desktop views to keep navigation visible and accessible, preventing users from getting lost or having to dig through nested subcategories.
- Content Hierarchy: Prioritized the placement of visual elements and actions to enhance the user flow and make key information easily accessible.
3. Clickable Prototypes
I built over 20 low-fidelity clickable prototypes to test usability and gather feedback. These prototypes facilitated interactions and helped identify areas for improvement.
- Feedback Integration: Conducted usability tests to gather insights on design effectiveness, focusing on user interactions and identifying pain points.
- Hi-Fi Prototypes: Developed high-fidelity prototypes for detailed reviews and presentations. These prototypes incorporated feedback and refined design elements, including colors, typography, and interactive components.
View one FDS interactive prototype
4. Usability Testing
Ongoing usability testing was crucial in validating design decisions and making iterative improvements. I conducted A/B testing to compare different design variants and determine which options performed better.
Accessibility Testing:
- Color Palette: Ensured that color choices met WCAG 2.1 standards for sufficient contrast to improve readability.
- Design Principles: Collaborated with developers and designers to integrate accessibility features, including appropriate text sizes, visual hierarchy, and screen reader compatibility.
Accessibility Considerations:
- Color Contrast: Selected colors with adequate contrast to enhance readability for all users.
- Headings and Icons: Used clear headings and added icons to improve navigation and action recognition.
- Information Architecture: Optimized the menu structure for screen readers and mobile devices, ensuring ease of use for users with assistive technologies.
- Alt Text: Included descriptive alt text for all images and text labels for icons to support screen reader users.
💎 Findings and Refinements
The findings from usability testing guided the final design refinements:
- Accessibility Improvements: Enhanced text contrast and ensured font sizes met readability standards.
- Navigation Enhancements: Simplified menu structures and improved mobile compatibility.
- Content Accessibility: Added visual examples and code snippets to facilitate easier implementation by developers.
Updated UI Features:
- Visual Examples: Incorporated interactive examples with code snippets to streamline the development process.
- Consistent Navigation: Implemented a persistent sidebar on desktop and optimized navigation elements for mobile devices.
🏆 Hi-Fi Mockups
Developed high-fidelity mockups incorporating feedback from usability studies and team reviews. These mockups were designed to provide a polished and functional representation of the final design, ensuring a seamless user experience across all devices.
💻 Hi-Fi Prototypes
- The high-fidelity prototypes incorporated all the design refinements based on the feedback received during usability testing. This included updates to colors, typography, iconography, and layout to enhance visual appeal and usability.
- Maintained a cohesive visual style throughout the prototypes, ensuring that all design elements, such as colors, fonts, and iconography, were aligned with the established design system and branding guidelines.
- Updated content categories and added visual examples with code snippets as per user feedback. This included a comprehensive set of interactive examples and documentation to aid developers in integrating and using the design system effectively.
- Navigation Testing: The high-fidelity prototypes allowed for comprehensive navigation testing, helping to verify that the user flow was intuitive and that all key interactions were seamless. This included testing of menus, search functionalities, and access to documentation.
- Usability Insights: Conducted additional rounds of usability testing with the high-fidelity prototypes to gather final feedback on the design. This testing focused on ensuring that the design improvements addressed previous pain points and met user needs effectively.
- Feedback Sessions: Presented the high-fidelity prototypes to stakeholders for review and approval. These presentations provided an opportunity to demonstrate the design solutions in a realistic context and gather final input before development.
- Iterative Adjustments: Based on stakeholder feedback, made iterative adjustments to the prototypes to refine the design further and ensure alignment with project goals and user expectations.
- Validated Design Solutions: The high-fidelity prototypes successfully validated the design solutions, confirming that the navigation improvements, content organization, and interactive features met user needs and expectations.
View one of the FDS Interactive prototypes
✨ The Outcomes and Impact
🎯 The impact & Results
Impact Highlights:
Enhanced Accessibility: The new design system and website updates significantly improved accessibility. The use of a clear visual hierarchy, readable text size, and an accessible color palette compliant with WCAG 2.1 standards contributed to a more inclusive user experience. The site also accommodates future enhancements like a dark theme.
Improved Navigation: The intuitive navigation and well-organized content structure facilitated easier access to components and documentation. Users reported a more streamlined and efficient experience when finding and using design resources.
Developer Efficiency: The design system streamlined the process for developers by providing easy access to a comprehensive library of components and documentation. This improved collaboration across teams, reduced bugs, and accelerated the development of user interfaces.
Resource Availability: The design system includes a section with frequently asked questions, helpful links, downloads, and a custom color palette. It supports consistent solutions for common UI needs such as form fields, buttons, and icons.
High Adoption Rates: The design system’s adoption by various teams and projects underscores its effectiveness. Over 15 components have been added to the library, with ongoing updates and refinements to meet evolving needs.
Increased User Satisfaction: The design improvements have led to a notable increase in user satisfaction, with feedback indicating a +70% rise in positive responses. Users appreciated the clear visual hierarchy, interactive examples, and code snippets, which facilitated a smoother workflow.
Measuring the Results:
To assess the effectiveness and impact of the new design system, we established key metrics and KPIs. These metrics helped us measure the success of our design improvements and their impact on user experience:
1️⃣ Adoption Rate measurement:
- Percentage of teams and projects incorporating the design system.
- Number of teams using the design system vs. total teams.
- Number of projects utilizing the design system vs. total projects.
2️⃣ Consistency Score measurement:
- Degree of consistency in the use of design components across different projects.
- Frequency of standardized component usage.
- Audits to identify the percentage of inconsistencies in completed designs.
3️⃣ Component Usage Measurement:
- Frequency and variety of individual components used.
- Tracking the usage of each component.
- Identifying the most and least utilized components.
4️⃣ Design and Development Efficiency Measurement:
- Time and effort saved by designers and developers due to reusable components.
- Comparison of time spent on designing and developing new interfaces before and after the design system implementation.
5️⃣ User Satisfaction Measurement:
- User feedback and survey responses.
- Usability testing scores to assess user experience and satisfaction with the new design system.
📙 Lessons Learned
Reflecting on the project, several valuable lessons emerged that not only enhanced the design process but also deepened my understanding of user-centered design and collaborative workflows:
Continuous User Engagement: Engaging with users throughout the design process proved essential. Regular feedback from usability testing and iterative prototyping helped identify and address issues early on. This iterative approach ensured that design solutions were aligned with real user needs and led to more effective and intuitive outcomes.
Importance of Clear Navigation: The project highlighted the critical role of clear and intuitive navigation in enhancing user experience. Simplifying navigation structures and reducing the number of nested categories made it easier for users to find and use the components they need. This insight underscores the need for ongoing user testing to identify and eliminate navigational barriers.
Accessibility Matters: Ensuring accessibility from the outset was crucial. The project’s focus on WCAG 2.1 compliance and accessibility features like color contrast and readable font sizes improved the inclusivity of the design system. This experience reinforced the importance of integrating accessibility considerations early in the design process to create more equitable digital experiences.
Collaborative Problem-Solving: Working closely with specialized team members, including developers and designers, enhanced problem-solving capabilities. Collaborative efforts allowed for the exchange of knowledge and expertise, leading to more effective solutions and a better overall design outcome. This experience emphasized the value of teamwork and interdisciplinary collaboration.
Empathy and User Understanding: Deepening empathy for users through interviews and field studies was instrumental in creating a user-centered design. Understanding users’ contexts, pain points, and needs led to more relevant and impactful design solutions. This experience underscored the importance of conducting thorough user research to inform design decisions.
Continuous User Testing: Regular user testing is crucial to identify and address real user needs. The iterative design process highlighted the importance of ongoing feedback to refine and improve the user experience.
Empathy and Visual Communication: This project reinforced the value of empathizing with users and understanding their needs. Creating a comprehensive components and patterns library improved my skills in visual design and communication.
Effective Use of Metrics: Establishing clear metrics and KPIs to measure the impact of the design system was crucial for evaluating its success. Metrics such as adoption rate, consistency score, and user satisfaction provided valuable insights into the design system’s effectiveness and areas for improvement. This reinforced the importance of using data-driven approaches to assess and refine design solutions.
Overall, these lessons not only improved the design of the project but also contributed to personal and professional growth. They emphasized the importance of user-centered design, collaboration, and continuous improvement in creating effective and impactful digital products.
⏩ The Next Steps for the Design System
- Component and Documentation Review: Continually review and update the components and patterns library. Address any bugs, add new items, and refine documentation to ensure relevance and usability.
- Expanded Usability Testing: Conduct further usability testing to identify additional areas for improvement and explore new features. Develop new user flows and responsive prototypes based on user feedback.
- Enhanced Interactions: Incorporate more animated transitions and confirmation messages to improve user interactions and provide clearer feedback during processes.
- Documentation Icons Library: Continue expanding the site’s documentation and visual samples. Design and integrate new icons into the custom icons library to enhance the design system’s functionality.
- Code Optimization: Optimize code with design tokens and develop user interfaces for new use cases to ensure scalability and maintainability of the design system.
Training and Support: Provide training and support for teams to effectively utilize the design system. Create tutorials and documents to help users understand and apply the design system principles.
- Accessibility Enhancements: Continuously evaluate and enhance the design system’s accessibility features to meet evolving standards and user needs. Provide resources and tools to support teams in creating accessible designs and ensuring compliance with accessibility guidelines.
Select Other Case Study
"The best products focus on users and help to grow the business"
OUR SERVICES
The Best Solutions for Your Brand and Digital Products
At Fhang Media, we specialize in transforming your digital presence through expert UX/UI Design, Web Analytics, and Digital Marketing services. Our mission is to help you shape your ideas into compelling products that captivate your audience, drive engagement, and boost conversions. Whether you’re starting from scratch or looking to enhance an existing digital product, our comprehensive services are designed to deliver measurable results.
Our Services Include: UX/UI Design, Web Analytics and Digital Marketing. Partner with us to elevate your digital strategy, increase leads, drive sales, and grow your revenue. Let’s turn your vision into a high-impact reality.
UX/UI User Experience & User Interface Design
Design products that provide a meaningful experience to users. Design of responsive UI's with custom components libraries and accessible design systems.
Web Analytics & Conversion Rate Optimization
Increase your website's conversion rates with our effective web analytics and CRO strategies. Analysis of business and behavior of visitors to understand and optimize web usage.
Web development, Maintenance & Support
Web domain and hosting services. Website analysis, development and maintenance and configuration on CMS platforms such as WordPress and Shopify.
Growth Marketing Strategies & Content Creation on Social Media
Let's plan and implement growth marketing strategies with content that is engaging and relevant to your audience for long-term success and growth of your business.
Software Design Courses and Photography Workshops
Take our workshops and courses to learn Professional Photography and Software Design tools. Improve your skills with our courses taught by leading professionals.
Photography & Videos in VR 360° Virtual Reality
We specialize in Professional Photography for products, services and content creation. We create videos in VR 360º Virtual Reality with an 8K high definition camera.
Need help with your digital product?
Let's create something amazing together! Reach out and tell us about your project.
