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 process, improving user satisfaction and operational efficiency by over 50%.
Role: Lead UX Designer IV
Client: Rackspace Technology
Timeline: Mar 2021-2023
Location: Mexico (Remote)
📈 The Impact: FDS Design System
📔 Project Overview
Rackspace Technology, a leader in hybrid, multi-cloud, and AI solutions, faced challenges with UI consistency and design efficiency across its products. As the Lead UX Designer IV, I collaborated with cross-functional teams to establish a unified design system that facilitated faster UI development and enhanced user experiences, leading to a 50% improvement in usability, engagement and satisfaction.
📌 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.
🎖️ My Role as Lead UX Designer IV
During my tenure at Rackspace Technology, I led the 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
🪢 The Challenges
- Outdated and inconsistent design components across products.
- Limited and often outdated documentation for developers.
- Navigational issues, making it hard for users to find necessary resources.
- Accessibility shortcomings, failing to meet industry standards.
- Resistance to change from some teams, affecting system adoption.
Initial Stakeholder Requirements
The stakeholders emphasized the need for a design system that:
- Streamlined UI development and updates.
- Enhanced user experience and accessibility across all platforms.
- Provided comprehensive documentation, examples, and code snippets.
- Supported rapid prototyping and iterative design processes.
- Ensured compliance with WCAG 2.1 standards and best practices.
🎯 The Solution
I led the creation of a centralized design system website featuring:
- User-Centered Design: A comprehensive components library with guidelines and code snippets. Also created a custom library with more than 50 icons for the new UI look & feel to increase brand awareness and aesthetics.
- Cross-Functional Collaboration: Integrated feedback from stakeholders, designers, and developers to refine the system.
- Enhanced Accessibility: Improved color contrast, navigation, and overall design to comply with WCAG 2.1 standards.
- Comprehensive Documentation: Provided detailed instructions and examples for implementing the design system.
- Continuous Improvement: Established a feedback loop to iteratively improve the design system based on user input.
Results and Impact
The new design system delivered significant improvements:
- +50% User Satisfaction: Positive feedback on the system’s clarity and usability.
- +50% Developer 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 data analytics 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.
- Developed user journey maps to visualize the user experience across different touchpoints.
- 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.
Test:
The testing phase was about validating the design solutions through usability testing and A/B testing. Feedback from real users was instrumental in identifying areas for improvement, ensuring the final design system met user expectations and industry standards.
- Conducted A/B testing to compare different design versions.
- Iteratively tested prototypes with users to validate design decisions.
- Gathered 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 final 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 design system’s implementation not only resolved existing challenges but also set a foundation for future growth and scalability.
- +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.