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
Process of discussions and revised details
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.