UIUX Design
Product ownership
2023 May - 2023 June
Inventory Management: Effortlessly monitor inventory levels and sales trends
Project Overview
01 | Objective
The team wanted to redesign the existing inventory management tool on Indeed for car dealership to increase customer's user expereince.
02 | Role & Deliverables
In this project, I worked closely with PM and four engineers. I was responsible for the end to end UX and UI design.
03 | Challenges
This project involved a few technical dependencies & design system updates with other teams & products.
04 | Impact
We launched the MVP in 2 months that increased our overall metrics significantly. We also received a lot of positive feedback from users
Background
HeyAuto Inventory Pro is an advanced online solution designed to empower dealerships by providing real-time inventory monitoring and valuable insights. However, the team has received constructive user feedback highlighting the need for improvements in the system's user-friendliness, as some users found it less intuitive.
Process
01
Define & Scope
Analyze user feedback, identify user problems, and set guidelines.
02
Design
Try different design solutions for the problems.
03
Validate
Execute A/B testing, analyze and conclude the finding.
Scope & Define
We spent entire two days sat together with the team(UX, PM, Dev, and QA) to talk about the goals, hypotheses, and constraints that helped to align everybody on the same page about what we want to achieve.
Define problems/ user's feedback
Viewing and editing are chaotic
😕
Car dealers express that the inventory table is hard to read. Compared to other sites, the information is too separated and difficult to find edit.
😕
The drawer modal is weird to use, and the inventory info is so hard to edit.
😕
In general, car dealers don't feel our site is trustworthy because nearly all the actions need to take so long to perform.
Problem
The inventory table UI is difficult to read.
The table UI is shown with capital letters, leading to a low readability. Plus, the hierarchy of titles, rows, and columns is unclear, so users couldn't easily skim through the table.
Information is unstructured and insufficient
The information we displayed in the modal was unstructured and lack of visual hierarchy. It caused a lot of cognitive load to users and it was not scannable.
Too many clicks and go-back-and-forth
Essential actions are difficult to perform. For example, if users would like to edit inventory information, they need to go back to the "add inventory flow" and accomplish all editable items.
Goal
Launch the new inventory page (MVP) that meets car dealerships' easy-to-view and use expectations.
After a few rounds of discussions as a team, we scoped out what's the feasible MVP to deliver on time. This launch is called “Clear Design”, which is about creating a modern UI with organized content that is much more usable and familiar to car dealers, it includes:
Clear table UI
This innovative approach begins with an easily navigable and clean UI, enabling automobile dealers to quickly discern various inventories. The objective is to incorporate visual elements in lieu of textual descriptions, enhancing user-friendliness. For instance, the status indicator can effectively display diverse inventory statuses such as "live," "pending sale," and "in transit.
More rich & structured inventory information
The MVP prioritizes establishing an inventory information hierarchy, aiming to simplify the process of accessing comprehensive data. To accomplish this goal, we've implemented a full-page rather than a modal layout, offering users a more expansive screen area for browsing detailed information.
Intuitive and simple behaviors
Our current "edit information" flow requires users to go back to the "adding inventory" flow, which is time-consuming and unnecessary. We propose deploying an edit button in each information section to simplify the editing process for users.
💡Why did we start with desktop design?
Given that 80% of our traffic came from desktop devices, and a lot of car dealers use laptops as their first option to browse and manage inventory.
Design Principle
The following principles are what I complied when I was designing the new experience:
01
Consistent
Even though this projects requires a big UI updates, we still need to align with the global UI at the foundation level to make sure we have a consistent experience across devices, platforms, and products.
02
Accessible
Car dealers used to see a lot of content on one page, we want to make sure the navigation is intuitive, and present the important function as the way they used to see.
03
Clear
Inventory management is a serious task, so the interface we provide need to be concise and clear, the wordings we're using should be consistent and understandable as well.
These are our components in our shared design library that allow me to use to keep the consistency.
Design Deliverables
Table UI redesign
The primary objective of the table UI redesign is to enhance readability. To achieve this, we have implemented several changes:
1. We have revamped the typography in the table title to ensure it stands out distinctly from the table content.
2.We have increased the height and width of the table's content cells to provide a more comfortable and visually pleasing experience
3. Furthermore, we have incorporated more visual elements to replace plain text. This allows users to quickly scan through the table content at a glance.
These enhancements collectively improve the user experience and readability of the table UI.
Table UI new
Table UI old
New layout with organized content
We observed that the old modal layout lacked sufficient space to accommodate all inventory information. Therefore, we have transitioned to a full-page layout to offer a cleaner visual presentation. Moreover, this full-page layout enables us to better organize the information with a clear hierarchy.
Info page new
Info modal old
The fixed UI on the right displays traffic metrics for car listings on our other product, Car Marketplace.
Image management
A full-page layout offers a more comprehensive view of image management, eliminating the need for users to scroll to see all the images. Additionally, we have enlarged the "Add a photo" button to make this action more accessible and user-friendly.
We have employed "chips" to categorize images, enhancing image organization. This approach enables dealers to easily determine whether they have included all the necessary views of their car before listing it on the marketplace.
Outcome
We A/B tested each new feature to make sure we see a positive impact on business and user side, then merge them back to our core MVP foundation.
As a result, this new search experience redesign was very positive in terms of many aspects, it massively increased the critical business metrics as well as the user engagement.
Learning & Takeaway
Throughout this process, I understood that a huge leap might take high risks but come with a high impact, the gradual experiments might slow us down but relatively safer. How to find the balance among time, resources, constraints, and goal is really important, I learned that prioritization is very crucial for the team to speed up and focus on the right thing to do.
Lastly, everyone in the team should clearly understand the goal, plan, and problem to build a more meaningful product as a team. This project helped me broaden my thinking to be more micro-macro balanced and built a stronger connections with the team.