The clients needed platform managing smart parking lots that dedicated to charging electric vehicles, so they contacted us for assistance. These smart parking lots include hardware devices like floor locks, speakers, induction loops, cameras, and LED displays. These hardware devices interact with each other. For example, when a camera detects an electric vehicle pulling into a parking space, it releases the floor lock and allows the car to park in the space. These smart parking lots can operate smoothly without the need for on-site personnel. However, to manage and monitor these hardwares, the clients need a backend system to view their real-time status and send commands remotely to each hardware.

Because this system involves many hardwares and users, we use the following use case to clarify the relationship between each other. This use case was a powerful tool in the design process because it helped us identified user roles and interactions.

Based on the above process, we created a site map of this backend system. This sitemap visualized the structure of the system and helped us discuss and plan how users would navigate the system. After creating the sitemap, we discussed it with engineers and managers to ensure its feasibility.

Then, we designed the user flow based on the site map structure. The user flow helped us focus on users' sequential actions to achieve specific goals. With user flow, we decided what features and blocks we should display on different pages. Also, we discussed it with engineers and managers to align our expectations. Below is a part of the main user flow.

Next, I shared and discussed my low-fidelity wireframe idea with Jessy, the lead designer. After the discussion, we designed high-fidelity version of the design on Figma. The following are part of the wireframes.

After completing the main functional wireframe flows, we conducted an internal usability test with our colleagues. (Mainly engineers, who are also the end users of the system) Our aim was to gather their feedback to iterate our wireframes and user flows. I designed three scenarios for them to test the system through scenario tasks. We wanted to discover any issues that users might have with the system.

I analyzed the interview feedback and worked together with lead designer to develop possible design solutions. On the other hand, we made some adjustments after we discussed with managers. Below are a few design decisions that we made based on users’ feedback and discussion.

We then created a design system based on the Ant Design UI library. Ant Design was chosen because it has a variety of components related to backend system, as well as the Vue front-end framework used by the developers we worked with. By establishing this design system, I can ensure the system's consistency. It also improved the working efficiency. Most importantly, with a design system, the team can scale this system freely in the future.

Next, we designed the mockup for this project based on the design system and wireframe. To match the image of "Smart Parking Lot", we chose blue as the primary color. Due to the previous preparation and discussion, we created this mockup efficiently.

Due to time constraints, our company had not documented different versions and reasons for iterations in previous projects. As a result, the management of version iterations and design decisions became confusing and ambiguous. We often iterated to check and resolve interface issues that had been previously discussed. Therefore, I took the initiative to write this PRD to document the various versions of the product for future review and version management. Doing so allows the product to be scaled up more efficiently.