MULTIDISCIPLINARY DESIGNER | UX/UI - INTERACTIVE DESIGN - MOTION DESIGN
// PRODUCT DESIGN //
HELLO ALICE - CMS
Objective:
To drive the transition of legacy CMS from its outdated platform; building upon a project initiated by a team of former designers who were no longer with the company. In my role as a Product Designer (UI/UX), I focused on conceptualizing and implementing the vision and user experience for the new CMS.
Role:
- Senior Product Designer (UX/UI)
Contributions:
- Led conversations around design with the engineering team, product managers, and stakeholders (support and enterprise teams).
- Executed end-to-end design from conception to final prototype.
- Regularly presented designs to stakeholders and the company during product reviews.
- Conducted audit of the existing CMS and provided recommendations to the team on existing UX.
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
Guide Builder:
The guide builder was used by our content team to write and deliver guides as apart of
Hello Alice's learning and training material provided as a resource for small business owners.
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.
Fig 1.1 (Click to enlarge)
Feature Planning:
During these initial conversations, a list of features needed in parity was created along with a wishlist of enhancements after discussion with our content managers (primary users) and the team that highlighted flaws or points of friction in the current experience that could get improved upon with the new build.
Initial lo-fi wireframe:
Some lo-fi sketches and wires were shown in this phase and talked through with team.
alternative solution
The existing experience had users exiting the main flow to enter a different experience in order to build a guide - after reviewing the initial flow, an alternative mock/solution was developed to keep users within the same flow for a more seamless experience.
Though this solution was favored - we ultimately did not go in this direction due to some constraints with the logic and timeline.
UI Iterations:
Engaged in iterative feedback cycles for certain UI mockups, incorporating existing components from the current design system. Collaborated closely with developers to address constraints and limitations from their perspective.
Notably, challenges arose regarding consistency in component usage between developers and designers during the page-building process. These discussions proved valuable, serving to bridge gaps and underscored key areas for enhancement in the ongoing design system update.
Process highlight:
Fig 1.2 (Click to enlarge)
UI Iterations:
Zooming into the previous flow (fig 1.2) - the "Guide survey modal" component was meant to reflect and display the information that the user would input into the "Guide Survey Editor Screen" (fig 3.1)
Some considerations for this component included understanding what information would display from the editor screen to the modal, prioritizing the most important details. Another important factor for this component was the survey value mapping piece that determined how a user would progress through a guide, and what improvements we could make, if any, to this portion.
Prototype:
Presented prototypes to team for feedback on interactions / micro-interactions, discussion around build etc and during sprint reviews to external stakeholders and execs
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.
