Wiz Design System
Revamped new theme from B2C to B2B
/ Design System
CLIENT
Wiz Robotics
MY ROLE
End-to-end Product Designer
TIMELINE
March 2024 - Present
TEAM
Yichen He, Design Advisor
/ INTRO
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 AUTDIT
What do we already have?
I conducted an heuristic audit of the existing Wiz Partner interface to understand design issues and collected user feedback and painpoints.
The dated interface only serves the user the basic functionalities and requires manual work: take notes on paper and Excel sheets.
I decided to design the whole information architecture and product from scratch to save time, instead of redesigning.
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
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
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
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
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
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
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
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
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:
