ZENLAYER
UX Intern
I was exposed to the a unfamiliar field - cloud services, and independently optimized the lifecycle of entire product line, built sub-pages in the user dashboard, built a light version of the component library.
TIMELINE
07/2023 - Now
TOOLS
Master Go
Webflow
TEAM
Design and Research｜Ruiyun Feng，Eva Zhang Chailyn Wu
Engineer｜Otis Lin
Product Manager ｜ Jin Hu，Plus Zhu
UX Writer｜Miya Zhou
Intro
Zenlayer offers on-demand edge cloud services in over 290 PoPs around the world, with expertise in fast-growing emerging markets like Southeast Asia, South America, the Middle East, and Africa. Businesses utilize Zenlayer’s global edge cloud platform to instantly improve digital experiences for their users with ultra-low latency and worldwide connectivity on demand.
Design Process
Task 1
Senario：Enable clients to import images on the dashboard
I want to create a Virtual Machine based on an image provided by myself！
Got it！
Competitors Analysis
Determine the functions of the platform through research on Tencent Cloud
.png)
.png)
Step 1: Click "Import Image"button in dashboard
Step 2: Read the step-by-step guide
Step 3: Enter image information
Customer Journey Map
Import Image in Tencent Cloud
User & Product Research
Understanding zenlayer's user base and technical limitations
.png)
-
Zenlayer‘s clients have specialized knowledge and don't need a step-by-step guide
-
Technically there are size and format restrictions on imported images
-
Due to technical constraints the processing time takes about 10-20 minutes
-
Only supports up to 5 custom mirrors
UX Flowchart
User flow / Shipped version
Add hint to guide the user to import the image
.png){kind=small}
Page：Image list
Section：Choose image
Page：Virtual machine creation
Consider various scenarios when parsing a url
Popup：Import image
( when less than 5 images in one same zone )
Ease user anxiety with hint for long wait times due to technical limitations
Popup： Import image
( when euqual or more than 5 images in one same zone )
Final wireframe
Task 2
Improve sub-page interactions
Scenario：When users want to create a security group, they need to name it. But there is no hint of this on the relevant page.
Before
After
Error Message
Task 3
Built light theme color palette, bound all the components to design tokens to support the switching of the theme color
Light theme color palette (part)
Switching of the theme color (dark to light)
What I learned
1. how designer can quickly get started in an unfamiliar area
Understand the terminology: Wikipedia search / Browse competitor's product documentation
Draw User Journey Map of competitor's product to understand the structure of a new product quickly
Learn more about a company's products through design walk-throughs
Before start to develop a product / webpage, do technical research / product research / user research.
2. how to build component library
Detailed understanding of the significance and application of design Tokens in the design system, understanding the classification logic of the component library, and mastering how to independently build component libraries.
_edited_edited.jpg)
