Project Details
Client:
Mars
Tool:
Figma ServiceNow
Mar's Design System Redesign & Platform Centralization
Mars needed a comprehensive redesign of their legacy employee portal to address critical usability challenges. The existing system suffered from inconsistent design patterns, complex navigation, and poor accessibility across departments. Our goal was to implement a modern design system that would create a unified, accessible experience for all employees.
Key Solutions
The new portal features a comprehensive design system with reusable components, streamlined navigation for easier access, and role-based dashboards that provide personalized experiences for each employee.
Results
The redesign achieved significant improvements:
70% reduction in time spent on common tasks
90% employee satisfaction with new interface
100% WCAG 2.1 compliance (Level AA)
50% decrease in training time for new employees
Design Process
My approach focused on creating a scalable design system:
The design process involved creating a comprehensive component library with design tokens, implementing accessibility guidelines across the system, and developing interactive prototypes to validate key user workflows.
I created templates for common pages like knowledge articles and microsites, ensuring consistent experiences for their global workforce across multiple languages and departments.
Design Process
My approach focused on creating a scalable design system:
The design process involved creating a comprehensive component library with design tokens, implementing accessibility guidelines across the system, and developing interactive prototypes to validate key user workflows.
I created templates for common pages like knowledge articles and microsites, ensuring consistent experiences for their global workforce across multiple languages and departments.
Design Process
My approach focused on creating a scalable design system:
The design process involved creating a comprehensive component library with design tokens, implementing accessibility guidelines across the system, and developing interactive prototypes to validate key user workflows.
I created templates for common pages like knowledge articles and microsites, ensuring consistent experiences for their global workforce across multiple languages and departments.
My Role
As the lead UX/UI Designer, I was responsible for:
Leading the migration of legacy portals into a centralized platform, working closely with developers on daily implementation of the updated design system, ensuring seamless integration and technical feasibility of design solutions
Created and tested interactive component prototypes to validate key user workflows and gather feedback through usability testing sessions
Created training documentation to guide employees through the new portal, including interactive tours that help educate new employees and those migrating in later phases about the features of the new centralized platform
My Team
I held weekly meetings with key stakeholders to align on the design vision. All designs went through a design approval board, which included the client's Creative Director. The UI and UX design managers collaborated with the Creative Director to develop the main usability testing prototype. I partnered with both managers to ensure proper integration of all design system components.
I presented work daily to Project Managers and developers to validate design decisions and ensure technical feasibility. Working in parallel with development helped ensure a rapid development cycle while we migrated all departments to the new platform. I created mockups that Business Analysts used to write development stories, collaborating closely with them to meet all client requirements.
Lessons Learned
Key insights from the project:
Employee feedback is crucial for adoption
We implemented multiple feedback channels throughout the experience to continuously improve the portal and ensure it meets employee needs
Design system documentation ensures long-term maintainability
The previous design system lacked proper documentation for version histories, changes, and implementation notes. This led to components becoming obsolete without any maintenance plan in place.
Accessibility should be considered from the start
The previous design system lacked accessibility considerations from the beginning. As a result, the updated system required a design approval board that evaluated both design consistency and accessibility standards. The team's designs occasionally faced accessibility-related questions and needed iterations before receiving final approval from the board.
Phased rollout helps manage change effectively
Due to the company's large size, we rolled out the new portal in phases by department. This approach maintained consistency across the experience while ensuring a smooth migration process for employees.
My Role
As the lead UX/UI Designer, I was responsible for:
Leading the migration of legacy portals into a centralized platform, working closely with developers on daily implementation of the updated design system, ensuring seamless integration and technical feasibility of design solutions
Created and tested interactive component prototypes to validate key user workflows and gather feedback through usability testing sessions
Created training documentation to guide employees through the new portal, including interactive tours that help educate new employees and those migrating in later phases about the features of the new centralized platform
My Team
I held weekly meetings with key stakeholders to align on the design vision. All designs went through a design approval board, which included the client's Creative Director. The UI and UX design managers collaborated with the Creative Director to develop the main usability testing prototype. I partnered with both managers to ensure proper integration of all design system components.
I presented work daily to Project Managers and developers to validate design decisions and ensure technical feasibility. Working in parallel with development helped ensure a rapid development cycle while we migrated all departments to the new platform. I created mockups that Business Analysts used to write development stories, collaborating closely with them to meet all client requirements.
Lessons Learned
Key insights from the project:
Employee feedback is crucial for adoption
We implemented multiple feedback channels throughout the experience to continuously improve the portal and ensure it meets employee needs
Design system documentation ensures long-term maintainability
The previous design system lacked proper documentation for version histories, changes, and implementation notes. This led to components becoming obsolete without any maintenance plan in place.
Accessibility should be considered from the start
The previous design system lacked accessibility considerations from the beginning. As a result, the updated system required a design approval board that evaluated both design consistency and accessibility standards. The team's designs occasionally faced accessibility-related questions and needed iterations before receiving final approval from the board.
Phased rollout helps manage change effectively
Due to the company's large size, we rolled out the new portal in phases by department. This approach maintained consistency across the experience while ensuring a smooth migration process for employees.
My Role
As the lead UX/UI Designer, I was responsible for:
Leading the migration of legacy portals into a centralized platform, working closely with developers on daily implementation of the updated design system, ensuring seamless integration and technical feasibility of design solutions
Created and tested interactive component prototypes to validate key user workflows and gather feedback through usability testing sessions
Created training documentation to guide employees through the new portal, including interactive tours that help educate new employees and those migrating in later phases about the features of the new centralized platform
My Team
I held weekly meetings with key stakeholders to align on the design vision. All designs went through a design approval board, which included the client's Creative Director. The UI and UX design managers collaborated with the Creative Director to develop the main usability testing prototype. I partnered with both managers to ensure proper integration of all design system components.
I presented work daily to Project Managers and developers to validate design decisions and ensure technical feasibility. Working in parallel with development helped ensure a rapid development cycle while we migrated all departments to the new platform. I created mockups that Business Analysts used to write development stories, collaborating closely with them to meet all client requirements.
Lessons Learned
Key insights from the project:
Employee feedback is crucial for adoption
We implemented multiple feedback channels throughout the experience to continuously improve the portal and ensure it meets employee needs
Design system documentation ensures long-term maintainability
The previous design system lacked proper documentation for version histories, changes, and implementation notes. This led to components becoming obsolete without any maintenance plan in place.
Accessibility should be considered from the start
The previous design system lacked accessibility considerations from the beginning. As a result, the updated system required a design approval board that evaluated both design consistency and accessibility standards. The team's designs occasionally faced accessibility-related questions and needed iterations before receiving final approval from the board.
Phased rollout helps manage change effectively
Due to the company's large size, we rolled out the new portal in phases by department. This approach maintained consistency across the experience while ensuring a smooth migration process for employees.