top of page
Cloud Integrated Monitoring Backend Website

Cloud VMS l Access Control l B2B

Website l UIUX Design


Create an integrated control website for the company's cloud-based video surveillance and access control services. Grant access permissions based on user roles (headquarters, branches, suppliers) to extract required information.

My Role

UX Designer + UI Designer

Collaborated with PM and RDs to understand the cloud-based product website architecture.
Identified the company's products for cloud integration and planned development sequencing.
Created wireframes, designed styles, and organized functionality and items.
Developed flows and produced hi-fi mockups.


1. Requirements: Receive requirements from PM. In this case, it's a 0-1 project.

2. Discovery (Research): Discussed with PM and engineers.

3. Definitions (Solutions): I usually use hand-drawing on paper or lo-fi flow or flow chart with PM for checking solutions.

4. Lofis (flows, wireframes): Discussing with PM and engineers then revise screenshots through this period.

5. Hifis: Built a design system and components then showed hi-fi screenshots to double-thoroughly ensure all layouts and features.

6. Deliverments: Gathered design system files, slices, screenshots, and documents for engineers to construct the website.



To develop a 0-1 website.


The new website consists of a cloud desktop application - video surveillance software, while integrating it with other company products, considered as the annual project.


Discovery & Research

Desktop researches and discussions to define the architecture.


Definitions & solutions

During discussions, I utilized hand-drawn lo-fi prototypes.

- Solutions -

  • Established the objectives.

  • Determined and categorized the layers and functions.

  • Defined the relationships between the functional pages.

Using hand-drawing to discuss permissions, features, layouts of the new product with PM and engineers.


(UI-flows, wireframes, wireflow)

- Goal -

Conducted Lo-fi layouts to discuss all detailes

Created a single-color wireframe to define the layout, plan the workflow, and correspond between functionalities then designed wireflows
to double-check before visualizing the website architecture.



The main focus remained on establishing a clear workflow and defining functional placements in a simple manner. Vibrant, colorful hues were avoided at this stage to maintain the intended simplicity.

- Solutions -