✌️

— PROJECT NAME

Fullscript Aviary 4.0 -Design System Visual Lift


— ROLE

Product Designer


— DATE

2023

This case study covers one of my design system projects that involved the visual uplift of the Fullscript's platform.

 

As a product designer on the design systems team, my primary objective was to update the entire design system, that would result in a more modern and clean user interface for the end users. 


This comprehensive revamp required collaboration with nine other feature teams working on their respective projects to ensure synchronization of efforts and projects. 


In this case study you will learn about the challenges faced, the collaboration efforts undertaken, and process of execution.

I. Objective


The main goal of this project was to transform the existing online supplement dispensing platform by modernizing company's design system. By revamping the UI and introducing a clean and contemporary visual style, the aim was to enhance the overall user experience and bring a fresh perspective to the platform that will delight the users.

II. Challenges Faced


  1. Coordination and collaboration: 
  2. The project required seamless collaboration with nine feature teams working on parallel projects. Ensuring synchronization and aligning efforts across teams was a major challenge.

  3. Design and code overhaul: 
  4. The design system had to be updated both visually and technically. Meticulous planning and coordination were necessary to align the design and development aspects while maintaining consistency.

  5. Balancing change with familiarity: 
  6. Introducing significant changes to the platform while preserving its usability and familiarity posed a challenge. Striking the right balance between modernization and user familiarity was crucial for our user base consisting of healthcare practitioners who are typically averse to change.


III. Approach


  1. 1. Stakeholder Alignment: 
  2. First, I collaborated closely with stakeholders to understand their vision and goals for the updated design system.

  3. 2. Research and Analysis: 
  4. Then I conducted extensive research to identify current design trends, user preferences, and best practices in UI design and scalability.

  5. 3. Collaboration and Sync: 
  6. I regularly communicated and collaborated with the feature teams, ensuring aligning design system updates with their respective projects.

  7. 4. Usability Testing: 
  8. With designers from feature teams I reviewed usability testing results to validate the new design system solutions and gather feedback for further improvements.

  9. 5. Documentation and Training: 
  10. Finally I created comprehensive documentation and conducted a few jam sessions to ensure smooth adoption of the updated design system across the design team.


For initial alignment between the stakeholders we conducted a moodboard exercise. This involved collecting pieces of inspiration, identifying the common themes for the visual palette and feel of the product. After this multi-step brainstorm, I created a refined concept with two slightly different visual directions for practitioner user group (focused approach) and for patient user group (natural and human approach). Both directions shared a common theme of simplicity and effectiveness.

Moodboard exercise with stakeholders and designers




Moodboard for the two user segments with a different colour approach for each. Practitioner – focused UI, Patient – natural, human UI.




IV. Process of planning & execution


Month 1: Planning and Goal Alignment 


During the first month, the focus was on planning and aligning the project goals with the leadership team. This involved:


  1. Goal Definition
  2. Stakeholder Meetings
  3. Research and Analysis
  4. Roadmap and Timeline

Month 2-5: Active Design and Development


The next four months were dedicated to the active design and development phase, involving the following steps:


  1. Conceptualization and Ideation
  2. Iterative Design Process
  3. Design System Updates
  4. Collaborative Development
  5. Usability Testing and Feedback

Below is the Before/After of Phase 1 of the project. The main focus of this stage was to simplify and declutter the interface:



In Phase 2 the main focus of the work was on migrating top navigation to a more scalable and flexible side navigation as well as reducing the amount of colour used throughout the platform:




V. Results


  1. The updated design system was successfully adopted and much loved by designers and developers (who doesn't love a shiny new library?). 
  2. With the revamp, we had a chance to scrap some ancient-old patterns that existed in the system for years.
  3. The uplift went along with the Information Architecture project, that multiplied the amount of the UX debt removed from the platform.
  4. As the launch of the updated platform approaches, it is evident that the project has been executed successfully thus far. 





Final words & Learnings


  1. My key takeaway from this project was the amount of communication needed for such project to happen. Being in a position when you are the main actor overseeing multiple projects, while executing on a product that impacts all the teams – is a tremendous effort! But it was a lot of fun and I’m looking forward to what Design Systems work teaches me next :)