Zenu Software
redesign/design system project
Duration February 1st - 14th
• My responsibilities: Project manager, Product designer
What:
-
The Zenu software redesign project includes creating our new design system
-
Zenu is a software to helps our clients (restaurants) to allow gig workers can work as remote order-takers
Why:
-
Since we have some pain points from our clients (restaurant managers), we need to update our UX/UI
Current design
New design
How:
-
Utilize the 2 weeks design sprint for each page, we conduct below:
1. Research
-
Analyzing user’s pain points
-
Prioritize their pain points
-
Ideation
2. Prototyping
-
Wireframing
-
Lo-Fi prototyping - Getting feedback
-
Making our new design system simultaneously
-
Mid-Fi prototyping - Getting feedback
-
Hi-Fi prototyping - Getting feedback
3. Test
-
Usability testing - update
-
Performance review from stakeholders
1. The key pain points from the usability testing
1. The dashboard (we call it the lobby) page is not user-friendly and not intuitive and cannot be understood UI elements
2. We need to help users know some of the terms. Especially categories (ninja in queue) (observer) (reserve) (at station), etc.
3. Organize the UI elements nicely. We have tables with important information.​
Sketch, Wireframing, and A/B design getting feedback from stakeholders
2. Design System
2. Design System
2. Design System
2. Design System
Color
-
Old design: Since we have several restaurants as clients, we wanted to be able to customize the header and side navigation to match the client's brand colors. However, according to user interviews, their priority was not customization, but software that was easy to use, intuitive, and simple.
-
New: The color scheme should be white, with a light gray gradient for the rest of the basic UI.
-
To maintain consistency, icons should be blue and green only.
Fonts:
-
We are using Google Material Design 2 to build our design system, so we are using Roboto fonts. We surveyed our competitors and found that Google, Apple, Atlassian, and Apple software used almost the same size for titles and headers
Side navigation:
-
Old design: there was a "My Account" avatar at the top of the side navigation bar, but users could not easily find it. This is because the avatar is only visible when the user opens the bar.
-
New design: The user's avatar is now placed on the right side of the header. Users can easily find their avatar
Header:
​
-
To maintain consistency, partitions should be white and light gray shadows only.
-
Soft name as lift, "client' lobby" dropdown, and user's avatar on the right.
-
Added the ability to click on the hamburger menu to open the left navigation and the hamburger menu becomes three dots. Also, the side navigation disappears when the three dots are clicked.
Components:
​
-
Using iconography to understand easily and intuitively
Challenge 1: Keep all information organized, clean, and simple.
​​
-
Align all elements from left to right and be consistent.
-
Use sufficient negative space, keep it clean, and make fonts and tables narrow.
-
Add tooltips to the "User Status" dropdown terms to avoid users confusion.
​
Challenge 2: Organize categories using boxes
​
-
Use boxes to display and organize the four categories
-
-Since we are displaying Ninja's aviators, we need to keep it clean. So use a box and display the title, number of people, and aviators in it. This way, users can intuitively see how many people are in that category.
What we gained from the 2-week design sprint
-
It was efficient and effective
​
-
Having a deadline meant that no time was wasted. Even when other stakeholders told us differently, we said, "Thank you. Because we have deadlines and we have MVP goals."
​
-
By utilizing agile methods, you can continue to update the system a little bit every day
​
-
At the end of the sprint, we can invite some people to conduct usability tests and get good feedback
​
-
At the end of the sprint, we could get performance reviews from the stakeholders who helped with this sprint
​
-
The 2-week sprint was able to proceed efficiently despite the lack of sufficient time, budget, and human resources
-
In addition to the two-week sprint, we also provided "documentation."
​
-
As project manager, was able to manage all timelines and stakeholder meetings
​
-
Set MVP Goals By utilizing OKR, we were able to define specific goals with numbers
​
-
Set success criteria and create a checklist. Ensure that when we conduct usability testing, we can see how our updated design is better than before