top of page
Minimalist Neutral Multi Device Computer Mockup Website Launch Instagram Post.png

Zenu Software
redesign/design system project 

Duration February 1 -
• My responsibility: 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

Screenshot 2024-02-07 at 2.10 1.png

Current design

Frame 2608756.png

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.

Color Guidance.png

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.

Challenge 3: Improve the user-friendly table

  • The user's mission is to check Rest Area A (Station 1) (Station 2), Restaurant B (Station 1) (Station 2)... Much information and status is to be checked. Therefore, the table must be redesigned so that it is easy to read, easy to understand, and free from misunderstandings

  • Therefore, the previous table showed each store name on the left side of the table, but we changed it to show the store name on the top side of the table. By doing so, usability tests showed that we were able to reduce user misunderstandings to 0%.

  • The store name needed to stand out but not become a CTA button, so we chose light blue as the accent color and used a blue gradient to make it stand out naturally.

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.

bottom of page