Inconsistent user experience across the whole platform
The Alli platform is almost 10 years old and was built by piecing together different tools together. The UIUX team is looking to establish a design system and work with the development team to revamp and unify the user experience of the whole platform. We not only look to create a consistent design guideline, but we are also taking this opportunity to build alignment between the development and design team.
A whole new revamp of the platform
Although the design team had an Alli UI Kit we were drawing from, the developers were customizing Ant Design components to match the design. It lead to a lot of inconsistencies and time wasted when different front-end developers are working on the designs.
A design system is much needed.
The cross-functional project consisted of a dedicated front-end developer, a PM and the design team with me as the design project lead.
We utilized Tailwind Design System as a foundation for the development team to utilize; however I established a color system and spacing to match our brand guidelines.
01 - Manage workflow to accommodate mismatching priorities between teams
Due to the lack of resources, we approached the project as a long term side project on top of everything else we have on our plate. This means many team members would be pulled away whenever there are more urgent deadlines on other design projects. Having only one dedicated front end developer also means the development progress would be slow and steady. Maintaining consistent team effort and timeline requires a lot of communication and reprioritization.
02 - Establish system guidelines at the same time as implementation
Leadership had decided to take an continuous integration approach. After we established and built out the main key components, we started integrating them into our current / new designs while the team continuously build out the rest of the system. Keeping track of component progress and managing the deliberate inconsistencies are the main challenges.
03 - Maintain trust in project amongst team & stakeholders
The scale and impact of this project is a double edged sword. On one hand, it can greatly improve the platform’s user experience while improving development efficiency; however, on the other hand, the huge project scale concerns many stakeholders. The team faces a lot of doubts and pressure whenever a change is implemented.
01 - Misalignment & workflow
Detail documentation + Jira ticketing system:
To document all the progress and decisions being made, the designers kept a detailed documentation of design guidelines on Figma. My design manager and I are responsible for maintaining this documentation while I created a Jira ticketing system for the developers to keep track of tasks.
Project standup x2/week:
I hold standups for the team two times a week to discuss any progress made. I found that it’s a good cadence as there are many design and development alignments that need to be discussed.
02 - Implementation
Storybook - single source of truth:
Utilize Storybook for documentation. It provides robust functionality for FE to document semantics while it shows the visuals and variants for designers. It acts as a single source of truth for any team to reference.
Design team alignment:
The design team utilized white-boarding meetings to discuss any new components or large impact design decisions that are needed.
03 - Trust
Reports & case study share-out:
I provide weekly project updates on Slack and monthly progress report during our monthly sync with the tech director. At the early stages of the project, my design manager and I put together a lot of case studies of other design systems to garner support as well.
Vision mock:
Mocking up final prototypes with the brand new design system gives user a glimpse into the future of the platform. It gets people excited and builds trust in the project. I mocked up two sizzle reels for the March 2024 All Hands and it was very well received.
Ongoing developer project handoff
We had contracted a front end developer to work on the project; however due to timeline complications, he was not able to continue on the project.
An internal FE developer had stepped in to take over the role; however the hand-off was crucial since most things were set up from scratch by the contractor. They worked closely together for two weeks before they completed the hand-off. I also set up frequent meetings with the internal FE developer to make sure he understands the workflow and is caught up with all the different moving timelines.
Defining more rigorous QA workflow
We ran into trouble where what was produced by the developer did not match the Figma designs. There were sometimes misalignments on the interaction and differences in spacing.
The PM and I worked together to establish a QA workflow where the designer would need to go through new components with the developer before it goes into production. We also set up CodeSpaces which allows designers to test he PR before it is deployed to staging.
Designing for AI
We ran into trouble where what was produced by the developer did not match the Figma designs. There were sometimes misalignments on the interaction and differences in spacing.
The PM and I worked together to establish a QA workflow where the designer would need to go through new components with the developer before it goes into production. We also set up CodeSpaces which allows designers to test he PR before it is deployed to staging.
New & improved side nav
Since the start of the project, 50+ components have been built. The biggest implementation is the newest side navigation. It is now collapsable which allows more screen real estate which is important with a data / dashboard heavy platform. We also tweaked the feature hierarchy organization.
The new change was announced during the March 2024 all hands and it was well received by the whole company. I worked with the product marketer to craft the right messaging and content to send out. I also produced two sizzle reels to highlight the new change.
Consistencies across all projects
The new pages that has gone into production has been more consistent and it has saved FE lots time during development. It has also helped the design team cutdown on QA time, as it eliminated most of the misalignment in the design handoff process.
01 — Communication is the key in building an efficient workflow
Doesn’t matter how good and bullet-proof the workflow is setup, consistent and open communication is still needed for everything to work smoothly. I learnt how to facilitate good conversation during standup meetings by asking the right questions and prompting the team to speak up.
02 — Be flexible and ready to pivot when working on such a foundational and overarching project
This is the first time I took on a leading role in such an impactful project. It touches every aspect of the platform development, so there are lots of moving parts: everything from reprioritized timeline to changing team members. It is important to plan ahead and stay flexible when approaching a project like this.