**Note: Some details of this project have been modified or white labeled to protect private information
This project focused on completely modernizing a critical internal application used by over 20,000 associates at a major luxury retailer.
The goal was to replace the outdated, pre-2008 Struts front-end with a sleek, unified suite of Angular apps. A key part of the transformation was building a scalable design system that balanced brand consistency with flexibility across multiple applications.
UX Design & User Research | Prototyping | Project Strategy | HTML & CSS
Conducted comprehensive user research, interviews, and usability testing.
Designed and implemented a robust design system and reusable components.
Facilitated team workshops and pair-programming to introduce UX best practices.
Advocated for accessibility, scalability, and a user-centered approach.
Supported front-end development with HTML and CSS, as well as design mentorship.
The rewrite was a multi-year effort, involving parallel updates to the old system while building the new one.
Challenges included a small team with limited UX experience, shifting deadlines, and the need to replicate the look and feel of the customer-facing e-commerce site. Building trust between teams, tackling tech debt, and accommodating diverse user needs added complexity, but our focus remained on creating a solution that was efficient, intuitive, and reliable.
The application rewrite aimed to balance modernization and usability for a diverse user base, including store associates, call center agents, and corporate teams.
The project faced significant challenges, such as addressing tech debt, integrating new technologies, working within an immature UX culture, and accommodating competing stakeholder demands. With little documentation available, the team relied heavily on live-site analysis, cross-team collaboration, and iterative user feedback.
Key audiences included:
Front- and back-end developers & QAs collaborating on the rewrite.
Daily users across the company: store associates, call center agents, warehouse employees.
Corporate stakeholders: project managers, user support staff, and executive decision-makers.
The Process
1. Observing and Asking Questions
The first step was diving in to learn everything I could. I connected with key stakeholders like the manager, BA, and developers to understand the project’s purpose, scope, and goals. I dug into the application’s history and functionality while talking with corporate liaisons to get a sense of how the app was used daily by store, call center, and warehouse teams. Advocating for direct conversations with end users outside the corporate office was a new approach for the company, but it proved invaluable for uncovering real usage patterns and building trust.
2. Writing, Sketching, and Researching
I kept thorough notes of all my observations, questions, and early ideas while sketching out initial concepts and workflows. Along the way, I researched best practices for design systems and UI frameworks to bring a solid foundation of knowledge to the project. This prep work helped me lay the groundwork for a scalable, user-focused approach.
3. Establishing a Design Plan
To get everyone on the same page, I ran a workshop introducing UX principles and design concepts, fostering collaboration and trust within the team. Then, I presented a structured plan and timeline for the Admin app’s design and development. Using card-sorting activities, I tackled the overwhelming navigation structure, cutting it down from 80+ items to fewer than 15 for the Admin app, which made the interface easier to navigate and learn.
4. Talking with Users
To better understand user needs, I conducted interviews and observations with various groups, including User Services, store associates, managers, warehouse teams, and call center agents. These sessions provided invaluable insights into their workflows and challenges, which shaped the designs for the Admin app. Seeing how users actually interacted with the application helped me prioritize what mattered most to them.
5. Creating Wireframes
I started simple—sketching on paper—then moved to mid-fidelity wireframes in FigJam and Figma, eventually refining these into high-fidelity prototypes. Each iteration went through team reviews and critiques, allowing me to incorporate feedback and ensure we were all aligned as the designs evolved.
6. Building a Design System
I created the first components and variables for the design system in Figma, using the approved prototypes as a guide. These were built into a shared styling library, published through JFrog, to make it easier for developers to implement a consistent look and feel across the app.
7. Collaborating with Stakeholders
Working with stakeholders was key to keeping the project on track. I presented progress and plans to get their input, aligning the designs with both user needs and business goals. Their feedback helped refine the overall direction of the project.
8. Iterating and Testing
This project was all about cycles—design, review, development, and testing. Each iteration improved the designs based on user feedback and team input. It was a collaborative process that ensured we got things right.
9. User Feedback and QA
Once prototypes and early builds were ready, we tested them rigorously. User feedback and QA testing uncovered areas for improvement, and user testing validated that the designs worked in real-world scenarios. It was all about fine-tuning to meet user expectations.
10. Beta Testing and Beyond
We rolled out a beta version of the Admin app with call center associates, gathering valuable feedback to fix bugs and make adjustments. The plan moving forward includes a full deployment to all users and adding new features and functionality as needed. The feedback loop we established will keep the app improving over time.
Building Trust and Navigating Challenges
The project improved communication and trust across teams, despite political, timeline, and management obstacles. Close collaboration helped create a more unified approach moving forward.
Staying Ahead of Development Flow
Prepping HTML and design assets ahead of time helped keep the project on track and streamlined the development process, ensuring smoother handoffs.
Advocating for User-Centered Design
Despite some resistance, pushing for user research, accessibility, and mobile responsiveness was essential in creating a more user-friendly and inclusive application.