Enhancing eBay's DE&I Learning Library Landing Page: A Case Study in Inclusivity
Introduction:
Embark on the transformative journey of eBay's Diversity, Equity, and Inclusion (DE&I) Learning Library Landing Page. As a UX/UI Front-End Designer at eBay, I spearheaded this project, collaborating closely with key stakeholders like Estelle Jackson, Global Lead - Diversity, Equity, and Inclusion, and Sarah Rawes, M.Ed., from the Diversity and Inclusion team. My objective was to enhance accessibility, align the design with DE&I's branding, and elevate user engagement. This initiative aimed to set a new standard for DE&I initiatives, delivering a superior user experience for all users on the platform.
Before: eBay's DE&I landing page, facing accessibility challenges and design inconsistencies.
Background:
The original DE&I landing page faced significant accessibility challenges due to its heavy reliance on custom code, which led to server instability. This reliance on custom code not only caused technical issues but also made the design difficult to maintain and update. Additionally, the design lacked coherence and failed to align with DE&I's branding, resulting in a disjointed user experience. Furthermore, promises of editability were unfulfilled due to platform limitations and the excessive use of custom code, making it challenging for the DE&I team to make simple updates and changes to the content.
Approach and Methodology:
Accessibility Audits:
The original DE&I landing page encountered substantial accessibility challenges because it heavily depended on custom code, resulting in server instability. This reliance on custom code not only caused technical problems but also complicated the design's maintenance and updates. The former People UX team promised editability, which remained unfulfilled due to platform limitations and the excessive use of custom code, making it difficult for the DE&I team to perform basic content updates and changes.Collaborative Design:
Working closely with DE&I stakeholders and team members was crucial to ensure that the redesign met DE&I's vision and goals. We conducted workshops and design sprints to gather feedback and ideas, enabling a more inclusive design process. This collaboration helped integrate stakeholder requirements and feedback into the redesign, resulting in a more user-centered and impactful design.Component-Based Design:
Adopting a component-based approach ensured consistency, scalability, and easier maintenance of the landing page. Utilizing SiteBuilder's component library and creating new components as needed maintained a cohesive look and feel across all pages. This approach facilitated easier updates and changes, as components could be reused and modified without custom code.Technical Optimization:
Enhanced user experience and reduced reliance on custom code by utilizing the platform's components and features. This approach improved performance and scalability while minimizing compatibility and update issues.
Challenges Addressed:
Accessibility:
Developed a monotone color scheme that adhered to DE&I's branding while improving readability and meeting accessibility standards. Implemented changes to the color palette and typography to ensure compliance with WCAG guidelines.User Engagement:
Simplified navigation and reorganized content into user-friendly sections, enhancing user interaction. Implemented clear call-to-action buttons and intuitive pathways to key content areas, improving overall user engagement.Branding Alignment:
Ensured design consistency with DE&I's branding and eBay's design system for a cohesive user experience. Updated visual elements such as logos, colors, and fonts to align with DE&I's brand guidelines.Editability:
Implemented backend changes to facilitate easier edits using the platform's components, enhancing flexibility. Provided comprehensive training and documentation to DE&I team members on updating content and making design alterations using the new system.
After: The redesigned DE&I Learning Library Landing Page reflects a harmonious blend of aesthetic appeal and functional efficiency, showcasing eBay's commitment to diversity and inclusion.
Transition to Component-Based Design
To address SiteBuilder's limitations and ensure a more stable and scalable solution, I removed all custom code from the DE&I landing page. Instead, I fully embraced the platform's components, updating and creating new components as needed. This transition significantly improved the page's performance, and scalability, eliminating the challenges associated with custom code.
Color Scheme & Linkable Card Component:
The Linkable Card Component was tailored through back-end CSS changes and collaboration with engineers, ensuring both aesthetic appeal and functionality. We chose to use eBay's own color scheme but took a monotone approach, blending the colors into a cohesive palette. This new color scheme was designed to be visually appealing while maintaining high contrast for readability, enhancing the overall user experience..
Feedback:
Sarah Rawes, M.Ed., from eBay's Diversity and Inclusion team, praised the redesign for seamlessly integrating her goals with UX expertise. She highlighted the project's timely execution and thoughtful approach, noting that the collaboration with the team not only met but exceeded her expectations. Sarah emphasized the positive impact the redesign had on user engagement and accessibility, citing specific improvements in navigation and content organization. She also commended me for effectively addressing technical challenges and ensuring the new design aligned with DE&I's branding.
Conclusion:
The redesigned DE&I Learning Library Landing Page represents a significant advancement in user experience design. Its success is attributed to meticulous planning, innovative technical solutions, and seamless collaboration. By surpassing expectations, the project has redefined the standard for user-centric design in DE&I initiatives, demonstrating the transformative potential of thoughtful and inclusive design.
Key Takeaways:
Collaboration is Key:
Close collaboration with stakeholders and team members is essential to ensure that the design aligns with the organization's vision and goals, reducing the need for third-party design solutions.Accessibility Matters:
Conducting thorough accessibility audits and making necessary changes can significantly improve the user experience for all users.Component-Based Design:
Using a component-based approach can lead to consistency, scalability, and easier maintenance of the platform.Editability and Flexibility: Implementing backend changes to facilitate easier edits using the platform's components enhances flexibility and ensures the ability to adapt to future needs.
Tools Used:
Figma
SiteBuilder CMS Platform