Design System

Design System

Design System

Revamped

Revamped

Revamped

B2C to B2B

B2C to B2B

B2C to B2B

Wiz Design System

Rapid evolvement for the Wiz Design System.

My Rols

Product Designer

Timeline

March 2024

Team

Yichen He, Design Advisor

Overview

Wiz Partners, the new product in the Wiz eco-system needed a new theme.

I initiated existing design system audits, conducted rapid evolvements and created new composable components.

This initiative defied the new theme and visual style at early stage to maintain design consistency.

DESIGN AUDIT

DESIGN AUDIT

DESIGN AUDIT

What do we already have?

Before jumping in to design, I conducted an heuristic audit of the existing Wiz Partner interface to understand design issues and start collecting user feedback.

The very dated interface only serves the user the basic functionalities combined with manual work: take notes on paper and Excel sheets.

As much as it’s good to start with something, I believed we can reimagine the interface and move pass the existing platform.

Previous Wiz Partners Platform

Image

Previous Wiz Partners Platform

Image

Previous Wiz Partners Platform

Image

What else?

The recently updated product Wiz Learner has a more mature design system for me to leverage. The PM and the owner also expressed that this is the new visual standard and style we are carrying forward.

As the Wiz Learner was designed mainly for students, I was still able to identify elements and components to carry forward for evolvement:

Previous Wiz Partners Platform

Image

Previous Wiz Partners Platform

Image

Previous Wiz Partners Platform

Image

New Primary Color

After the team decided to use Blue as the new primary color to bring in calmness and professionalism, we generated different shades to kick off the design process.

What can we expect before designing?

The target users for the new product shifted from students to busy admin staff. Based on the interviews with the existing admin team, we learned that the initial painpoints are in these areas:

North Star Design Principles

UI Simplicity

Step 1: Navigation Bar Clean-up

Reduced the logo size and gave the square footage back to the navigation bar for more functionalities. Replaced icons with dropdown icons to accommodate sub-menu titles according to the information architecture map.

Navigation Bar Clean-up Comparison

Image

Navigation Bar Clean-up Comparison

Image

Navigation Bar Clean-up Comparison

Image

Step 2: Top Menu Bar Clean-up

Replaced user greetings with a more critical feature - calendar view - and to stay on top of the task-oriented approach. The language button stayed as we have a large number of Chinese users and replaced the class point icon with a notification to keep users informed at all times. Profile dropdown for any setting features we will need.

Top Menu Bar Clean-up Comparison

Image

Top Menu Bar Clean-up Comparison

Image

Top Menu Bar Clean-up Comparison

Image

Visual Consistency

I kept the same dashboard layout, information architecture and most of the button styles to maintain visual consistency with the existing Wiz products.

Dashboards Comparison

Image

Dashboards Comparison

Image

Dashboards Comparison

Image

Usability Excellence

Through the early user interviews, I was able to narrow down some repetitive tasks that the admin wanted to perform without going into any detail pages.

Smarter Dropdown Menu

A smarter dropdown menu that contains the essential features with visual cues would help the user speed up the process to get repetitive tasks out of the way as fast as they can.

Dropdown Menu Comparison

Image

Dropdown Menu Comparison

Image

Dropdown Menu Comparison

Image

New Progress Bar

A clear progress bar with visual cues brings clarity to all users, especially the more senior ones and keep them informed where they are at while registering forms.

New Progress Bar

Image

New Progress Bar

Image

New Progress Bar

Image

Detailed Dropdown List

One unique situation I learned from user interviews is that a few customers and staff have the same first and last name. To differentiate people and avoid confusion, I added their emails as hint notes on the dropdown menu to help the user.

Staff List Dropdown Menu

Image

Staff List Dropdown Menu

Image

Staff List Dropdown Menu

Image

The New

Besides all the new adjustments and creating, I was efficient in converting modular existing components into the new theme by changing the color from purple to blue.

Through working with the team on the new workflows, I created more brand-new components. Here are some old and new examples:

New Components Overview

Image

New Components Overview

Image

New Components Overview

Image

Project Takeaways

The early exploration helped us to build a better understanding of the tool that we will be working with.

Here are a few takeaways:

Let's make something great together!

roxy@roxyshi.com

Copied

2024 Roxy Shi. All Rights Reserved.

Made with love, passion and the right amount of OCD.

Last updated by Roxy on

Sunday, Nov 3, 2024

Let's make something great together!

roxy@roxyshi.com

Copied

2024 Roxy Shi. All Rights Reserved.

Made with love, passion and the right amount of OCD.

Last updated by Roxy on

Sunday, Nov 3, 2024

Let's make something great together!

roxy@roxyshi.com

Copied

2024 Roxy Shi. All Rights Reserved.

Made with love, passion and the right amount of OCD.

Last updated by Roxy on

Sunday, Nov 3, 2024