Rackspace Technology
Transforming UI/UX with a Custom Design System for Consistency and Efficiency
As a Lead UX Designer IV at Rackspace Technology, I spearheaded the design of a custom design system aimed at enhancing UI aesthetics, consistency, security, and accessibility across multiple digital products. This initiative significantly streamlined the design & development process, improving user satisfaction and operational efficiency by over 50%.
Role: Lead UX Designer IV
Client: Rackspace Technology
Timeline: 2021-2023
Location: USA-Mexico (Remote)
📈 The Impact: FDS Design System
📔 Project Overview
- Rackspace Technology is a global leader in cloud computing and managed technology solutions, helping businesses to optimize their digital infrastructure.
- Their services encompass: cloud computing, data management, cybersecurity, and enterprise applications.
- Rackspace also specializes in managed cloud solutions for leading platforms, including Amazon Web Services (AWS), Microsoft Azure, Google Cloud Platform (GCP), OpenStack, and VMware.
- This case study focuses on how I helped the company to transform UX/UI with a custom design system to optimize design and development processes, enhance UI aesthetics, accessibility and consistency across multiple digital products in the company.
- This initiative significantly streamlined the overall process, improving user satisfaction and operational efficiency by over 50%.
📌 The Problem Statement
Inconsistent components and outdated design tools at Rackspace Technology needed efficient UI creation and updates because they’re slowing down development times, security and decreasing productivity.
🪢 The Challenges
- Some of the problems and challenges included Enhancing outdated UI’s across products and inconsistent design components that were slowing down development times and decreasing productivity.
- There were issues with the Navigation that was making it hard for users to find essential resources, leading to frustration and inefficiency.
- There documentation was limited and incomplete for the design, development teams.
- THE the products accessibility didn’t comply industry standards from the WCAG, creating barriers for users with disabilities and limiting overall usability.
🎖️ My Role as Lead UX Designer IV
I had the pleasure to work at Rackspace Technology where I led the FDS Fabric design system initiative, working closely with stakeholders, developers, product managers, and designers. My responsibilities included:
- Leadership and Collaboration: Guided a multidisciplinary team to ensure the design system’s alignment with user and business needs.
- Technical Execution: Designed over 100 wireframes, mockups, and prototypes to refine the system’s usability.
- Mentorship: Provided guidance on UX principles and accessibility standards, enhancing the team’s capabilities.
- Strategic Planning: Defined the roadmap for the design system’s design and development.
- Stakeholder Communication: Regularly presented progress and updates to senior leadership, ensuring alignment with strategic objectives.
Reviews about my work as UX/UI Designer
Feedback from Team Members & Colleagues at Rackspace
🎯 Solutions/Actions
- In order To address these gaps, I led a team of designers and worked closely with a group of developers to incorporate a comprehensive library of components and patterns with defined design guidelines and documentation that I personally wrote and refined with AI Tools. All based on data analysis from UX research and feedback from end-users and stakeholders to ensure the alignment with the business and user needs.
- The Fabric design system aimed at enhancing UI aesthetics, consistency, security, and accessibility across multiple digital products by achieving the WCAG 2.1 compliance to extend the products’ usability to a broader audience, allowing us to pass the applied accessibility tests and heuristic evaluations.
- This effort significantly increased efficiency and user satisfaction by over 50% while ensuring a consistent and high-quality UI and UX across products at the company. Contributing to a 70% increase in positive user feedback and reducing by 50% overall time spent on tasks and due to more efficient workflows.
- I provided mentorship and guidance to the team of UX designers in English and in Spanish, focusing on core design principles, accessibility best practices, HTML/CSS markup, color theory, and web analytics, enhancing team’s capabilities. This mentorship fostered a culture of continuous improvement, collaboration and skills development, leading to consistent high-quality design outputs.
Results and Impact
The new design system reduced the time and effort needed to complete tasks by offering pre-designed components and templates that can be utilized easily:
- +50% User Satisfaction: Positive feedback on the system’s usability and accessibility.
- +50% Operational Efficiency: Streamlined processes, reducing time spent on UI development.
- +30% Adoption Rate: Increased system usage across various teams and projects.
- 50% Time Spent on Tasks: Faster task completion due to more efficient workflows.
- Enhanced Product Consistency: Achieved a unified look and feel across all digital products.
⭐ The Design Process
The design process at Rackspace Technology was focused on a user-centered approach, leveraging the Design Thinking methodology to ensure each phase of development was iterative and inclusive. This process involved deep collaboration across teams, with a strong focus on understanding user needs, ideating creative solutions, and continuously testing and refining the design system to meet both user and business objectives.
The research phase provided me with a clear overview of the design process.
Discover:
- Conducted stakeholder interviews to gather requirements and understand business objectives.
- Analyzed existing design components and tools to assess their effectiveness and usability.
- Reviewed competitor design systems to benchmark best practices and identify gaps.
- Created empathy maps and user personas to gain insights into user needs and behaviors.
UX Research:
- Conducted heuristic evaluations to pinpoint usability issues.
- Conducted 1-1 user interviews to find out how users are currently making use of the existing tools, identify why and how often users are using the design system. This helped to identify pain points and areas for improvement.
- Conducted a survey to identify users behavior patterns and gather quant data to support findings.
- Competitor analysis with direct and indirect competitors of the design system, compared features and identified differences between products.
- Facilitated usability testing sessions to gather direct user feedback.
- Used data from insights and analytics tools to track user interactions and identify trends.
- Collaborated with the research & design team to interpret findings and inform design choices.
- Documented research findings and prioritized them based on impact and feasibility.
Define:
In the define phase, we synthesized research findings to create clear problem statements and design principles. This phase was about narrowing down the focus to address the most critical user needs and business goals, ensuring the design efforts were targeted and effective.
- Synthesized research data to define key user problems and challenges.
- Generated user flows and journey maps to visualize the user experience across different touch points.
- Created detailed problem statements to guide the design process.
- Established design principles to ensure consistency and user-centered focus.
- Prioritized features and components for the design system based on user needs and business goals.
Ideation:
The ideation phase was a creative exploration where we brainstormed and developed multiple design concepts. Through collaboration and rapid prototyping, we generated innovative ideas that were then evaluated for feasibility and alignment with the project objectives.
- Facilitated brainstorming sessions with cross-functional teams to generate innovative ideas.
- Explored various design solutions through sketching and rapid prototyping.
- Conducted design sprints to quickly iterate and refine concepts.
- Encouraged team collaboration to combine diverse perspectives and insights.
- Evaluated ideas based on feasibility, desirability, and business alignment to select the best solutions.
Design:
During the design phase, initial concepts were translated into detailed wireframes and mockups. This iterative process involved constant refinement, with feedback from stakeholders and users guiding the evolution of the design system.
- Brainstormed and sketched initial ideas for new components and layouts.
- Created low-fidelity wireframes to explore different design directions.
- Developed mid-fidelity prototypes to refine layout and interactions.
- Designed high-fidelity mockups to present to stakeholders for feedback and approval.
- Built interactive prototypes for user testing and further refinement.
TestING:
The testing phase helped to validate design solutions through usability testing. Feedback from real users was essential in identifying areas for improvement, ensuring the new design system met user expectations and industry standards.
- I Conducted A/B testing to compare different design versions.
- Iteratively tested prototypes with users to validate design decisions, gather feedback on usability, accessibility, and overall user satisfaction.
- Analyzed test results to identify areas for improvement.
- Implemented changes based on test findings to enhance the design system.
🏆 Hi-Fi Mockups & Prototypes
The high-fidelity mockups and prototypes translated the design concepts into detailed, visually polished representations. This stage was essential for visualizing the final product and provided a platform for usability testing and stakeholder feedback before development.
- Visual Consistency: Ensured the high-fidelity mockups adhered to the established design system and brand guidelines, maintaining a cohesive visual language across all components.
- Interactive Prototypes: Created clickable prototypes to simulate real-world user interactions, allowing for thorough usability testing and validation of design solutions.
- Iterative Refinement: Conducted multiple design reviews, incorporating feedback from stakeholders and users to refine the prototypes and ensure they met user expectations.
- Stakeholder Engagement: Presented the prototypes to stakeholders for feedback, ensuring alignment with business goals and securing buy-in for the design direction.
- Development Handoff: Delivered detailed design specifications alongside the final prototypes, facilitating a smooth transition to the development team and ensuring design fidelity during implementation.
✨ The Outcomes and Impact
🎯 The impact & Results
The outcomes of this project were substantial, with measurable improvements in user experience, efficiency, and overall satisfaction. The new design system reduced the time and effort needed to complete tasks by offering pre-designed components and templates that can be utilized easily:
- +50% User Satisfaction: User feedback indicated a significant rise in satisfaction, driven by the improved consistency and usability of the design system.
- +50% Developer Efficiency: The streamlined processes and comprehensive components library reduced time spent on UI development, increasing overall productivity.
- +30% Adoption Rate: The design system was quickly embraced by various teams, demonstrating its practical value and ease of integration into existing workflows.
- Enhanced Accessibility: Compliance with WCAG 2.1 standards improved accessibility, making the system more inclusive and usable for a broader audience.
- Consistent Product Experience: Achieved a unified and professional look across all digital products, enhancing the brand’s image and user trust.
📙 Lessons Learned
In overall, these lessons not only improved the design of the project but also contributed to my personal and professional growth. This work emphasized the importance of user-centered design, collaboration, and continuous improvement in creating effective and impactful digital products.
- Continuous User Engagement: Regular feedback loops from usability testing ensured that design solutions remained aligned with user needs, leading to more effective outcomes.
- Importance of Accessibility: Early integration of accessibility standards, like WCAG 2.1 compliance, greatly improved the inclusivity and usability of the design system.
- Collaborative Problem-Solving: Cross-functional collaboration fostered diverse insights, enhancing problem-solving and the overall design quality.
- Empathy for Users: Developing empathy through user research helped in creating more relevant and impactful design solutions.
- Data-Driven Decisions: Utilizing analytics and user feedback provided actionable insights, guiding the design process and validating design decisions.
⏩ The Next Steps for the Design System
- Component and Documentation Review: Regularly update the components library and documentation to address bugs and introduce new features.
- Expanded Usability Testing: Conduct further usability tests to explore additional areas for improvement and new use cases.
- Enhanced Interactions: Introduce more interactive elements and feedback mechanisms to improve user engagement.
- Documentation and Icons Library: Continue to expand the documentation and custom icons library to support the growing needs of users.
- Accessibility Enhancements: Further evaluate and improve the system’s accessibility features, ensuring it meets evolving standards and user expectations.
Related Case Studies
"The best products focus on end-users and help to grow the business"
OUR SERVICES: HOW CAN WE HELP YOU?
The Best Solutions for Your Brand and Digital Products
At Fhang Media, we craft seamless UX/UI and Product Design solutions that elevate user experiences. Specializing in User Experience and UI design, Web Development & Analytics, Digital Marketing, SEO & Immersive Content Creation, including VR 360° video production, we help businesses connect with audiences in impactful ways. Let’s collaborate to create unforgettable experiences and drive growth through meaningful conversions.
UX/UI User Experience & User Interface Design for Accessible Websites & Apps
Design products that provide a meaningful experience to users. Responsive UI's with custom components libraries, brand guidelines and accessible design systems.
UX Research, Analysis, 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, eCommerce, Maintenance, Hosting & Support
Web domain and hosting services. Website analysis, custom development, maintenance and configuration on CMS platforms such as WordPress and Shopify.
Growth Marketing, SEO, Content Creation for websites & Social Media
Let's plan and implement growth marketing strategies with SEO-friendly content that is organic, engaging and relevant to your audience for long-term success and growth.
Web Design Software Courses, Photography Workshops & Conferences
Take our workshops and courses to learn Professional Photography and Software Design tools. Improve your skills with our courses taught by leading professionals.
VR 360° Virtual Reality Video Production & Professional Photography
We specialize in Professional Photography for products, services and content creation. We produce videos in VR 360º Virtual Reality with an 4-8K high-definition.
Need help with your digital product?
Let's create something amazing together! Reach out and tell us about your project.