top of page
Cloud Integrated Monitoring Backend Website

Cloud VMS l Access Control l B2B

Website l UIUX Design

Summary

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.

Process

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.

01

Requirement

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.

02

Discovery & Research

Desktop researches and discussions to define the architecture.

03

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.

04

Lo-Fis
(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.

wireframes

Wireflow

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 -

Tools