MULTIDISCIPLINARY DESIGNER | UX/UI - INTERACTIVE DESIGN - MOTION DESIGN
// PRODUCT DESIGN //
HELLO ALICE - CMS
Main Objective:
- To redesign and migrate the existing Content Management System (CMS) to a new platform. As the sole product designer, I focused on maintaining functional parity with the original CMS while enhancing the user experience through a modernized design. The goal was to successfully sunset the legacy CMS by ensuring a seamless transition to the new system, working closely with a multidisciplinary team including front-end and back-end engineers, as well as a product manager and QA. This involved not only redesigning the interface but also ensuring that the new CMS met all functional and usability requirements.
​
Role:
- Senior Product Designer (UX/UI)
Contributions:​
- Led conversations around design with the engineering team, product managers, and stakeholders (support and enterprise teams).
- Regularly presented demos and designs to stakeholders and the company during product reviews.
- Maintained and updated design system dedicated to new CMS.
Results:
- Successfully sunsetted the legacy CMS by Q4 of 2023.​
- Completed end-to-end design for 3 out of 7 pages, finalizing the overall experience of the CMS​
- Various component updates to the design system
- Overall UX / UI enhancements, delivering a seamlessly integrated experience
CMS Overview:
The CMS consisted of the following main pages:
-
​Guides (designed)
-
Applications (designed)
-
Question Bank (designed)
-
Programs
-
Resources
-
Partners
-
Owners
​
While there was a base design system in place for the CMS, several of these key pages involved end-to-end design, managing the entire process from initial research to final implementation, while also incorporating elements of 0-1 design as new interfaces were created to replace the legacy system.
Highlight: Guide Builder
Guide Builder:
The Guide Builder is a key feature of the CMS, designed to help users group content into comprehensive "guides" that appear as resources in the main app. It consists of three interconnected components:
​
-
Guide Surveys: Collect data points and user feedback.
-
Guide Steps: Outline step-by-step process.
-
Guide Milestones: Track progress and achievements.
​
These components are seamlessly linked using a node builder, providing the content manager a flexible and intuitive way to create detailed guides.
View of a guide from the main web app - including view of a guide step and a guide survey
Additional Key Pages Designed For CMS:
Application Builder:
Enables the content team to create forms or applications for the main app users (owners).
​
Question Bank:
A centralized dashboard of all questions used in the Application Builder and Guide Surveys, ensuring consistency and efficiency in form creation.
Guide Builder Case Study
Main Flow:
Reviewed the existing flow with the development team to make sure all logic etc. would be accounted for in parity with the current experience.
(Click to enlarge)
Flow with live screens:
Guide Builder
Initial Audit
Reviewed the existing flow with the development team to make sure all logic etc. would be accounted for in parity with the current experience.
Feature Planning:
Collaborated with content managers (primary users) and the development team to identify necessary features and create a wishlist of enhancements. This phase highlighted current points of friction and areas for improvement.
Initial lo-fi wireframe:
Developed low-fidelity wireframes and sketches, which were reviewed and discussed with the team to visualize the new Guide Builder structure and interactions.
alternative solution
The existing experience had users exiting the main flow to build a guide in a different section. After reviewing the initial flow, an alternative solution was developed to keep users within the same flow for a more seamless experience.
Despite favoring this solution, constraints with logic and timeline prevented its implementation.
UI Iterations:
Engaged in iterative feedback cycles for UI mockups, incorporating components from the current design system. Collaborated closely with developers to address constraints and ensure consistency in component usage.
Process highlight: Guide Survey Modal
​
The "Guide Survey Modal" was designed to reflect and display information inputted into the "Guide Survey Editor Screen."
Key considerations included prioritizing the most important details and improving the survey value mapping to enhance user progression through a guide.
Wireframes:
Legacy vs. new design - guide survey modal:
UI Iterations:
Legacy vs. new design - guide survey editor:
Prototype:
Developed interactive prototypes to demonstrate functionality and flow, presented to the team for feedback on interactions and micro-interactions, and discussed during sprint reviews with external stakeholders and executives.
Final Build:
The final build deviated slightly from the prototype due to time constraints and limitations, including dependencies on the code package the developers were working with. However, consistent communication helped minimize these gaps. Additional improvements have been scheduled for upcoming sprints.
Conclusion:
​
The redesign of the Guide Builder was a critical component of the overall CMS project. Through a user-centered design approach, we were able to create a more intuitive and effective tool for content creators. This case study demonstrates the value of thorough planning, iterative design, and stakeholder collaboration in delivering a successful product.