Product goal
Mission and Role
The goal of this product was to let users without any technical background easily own their own private cloud. As the lead interface designer, I took part in the entire process, from product kick-off to launch, simplifying the installation flow, aligning the interface experience with existing cloud platforms, and building a component-based design system for all BeeStation built-in applications.
First time setup
Feature
The registration flow was simplified to make it easier for first-time users to understand. Each step — from powering on the device to entering the serial number — is presented on separate pages, with animations highlighting key actions. All pages were designed with responsive layouts, allowing users to complete setup directly in a mobile browser without downloading an app. The entire process takes less than five minutes, letting anyone experience their personal cloud in no time.
Device Setup Guide
The setup guide was designed with a one-step-per-page flow, using GIF animations to enhance visual guidance and help new users easily locate where each action takes place.
No additional app required — the setup can be completed directly on any mobile browser.
Defined responsive behaviors across all pages, and optimized the serial number input page for mobile. Users can bind their devices directly by scanning a QR code.
Easily enable cloud backup to help users keep their data fully protected.
Since BeeStation has only one hard drive and cannot form a RAID 1 or higher array, the final step of the setup guides users to enable the BeeProtect feature, which backs up data to Synology’s cloud server to prevent data loss in case of device failure.
BeeStation Portal
Feature
After completing the initial setup, users are directed to the device management page, where they can view the status of all devices under their account. Considering that users may own multiple devices and that new BeeStation models may be added in the future, the interface is presented in a card layout. The management page also displays onboarding tips, new feature updates, and other related notifications.
Welcome Window
After completing the setup process, users are directed to the device management page, which lists all devices associated with their account. Upon entry, a welcome window appears, informing users that two main applications, BeeFiles and BeePhotos, are preinstalled on the device.
Device Card Style
The card displays whether each device is functioning properly. By hovering over a device card, users can access the BeeFiles and BeePhotos buttons, allowing them to open both applications intuitively.
Migration Tips Hover Panel
A light bulb icon in the lower-right corner opens a panel listing common data migration methods, helping users efficiently transfer files from public clouds or personal drives.
BeeStation OS Update Window
When a new software version becomes available, a overlay window appears to notify users about the update and highlight the new Beta features they can try out.
Beta Tips
By clicking an item in the update window list, users can navigate to the next page to view detailed descriptions of the new features.
Build in applications
Application features
BeeFiles is the main web-based file management application where users can upload files directly through the browser. In addition to common features such as file preview, search, and sharing, BeeFiles offers a tagging system that allows users to organize files more efficiently by assigning custom labels. BeeFiles also provides backup integration with public cloud services like Google Drive and Dropbox, supporting both one-way and two-way synchronization. This helps users consolidate scattered files from multiple cloud platforms into their BeeStation device.
List and Thumbnail View Modes
Similar to common cloud storage services, BeeFiles offers both list and thumbnail view modes to make file browsing and previewing more convenient.
External Drive & Cloud Backup
BeeFiles allows users to back up files from different external drives and various public cloud services. Users can configure one-way or two-way synchronization and choose to sync entire directories or specific folders. Created sync tasks are displayed as cards, with the current task status shown in the lower-left corner of each card, helping users quickly understand the ongoing synchronization progress.
Quick Search Menu
Common file types are listed for users to quickly filter specific categories with a single click. Advanced search options are also available, allowing users to set filters such as date range and file size.
Avatar Menu
Users can access advanced settings from the Avatar menu, such as language preferences, version limit configurations, and log information.
Background Task Panel
When users upload or move multiple files at once, a task panel displays the progress of each operation. Backup tasks from public clouds and external drives are pinned to the top, allowing users to easily monitor their status at any time.
Desktop application
Application features
The desktop application allows users to synchronize and back up data from their computer. Users can set up on-demand sync folders, where files are only downloaded from BeeStation when opened, saving local storage space. Once installation and setup are complete, a tray icon appears in the system menu. Clicking the icon opens a floating panel that displays real-time file synchronization progress, along with BeeStation notifications and updates.
Tray Panel
A BeeStation icon appears in the computer’s system menu, changing its state during uploads to indicate the current operation status.
Set Up On-Demand Sync Folder
During the installation of the desktop application, users need to specify the location of the on-demand sync folder. Files are downloaded only when they are opened, allowing users to save local storage space. Users can also upload files directly within this folder.
Desktop Folder Backup Setup
The designated folders on the computer are backed up automatically. Users can choose to back up their files to BeeFiles or BeePhotos, and any changes made within those folders are updated in real time.
Folder Backup Method
Folder backup supports both one-way and two-way synchronization modes. In one-way mode, any file changes made in BeeFiles do not affect the corresponding folder on the computer.
Email Template
Features
The BeeStation email system is used to notify users of important updates. For example, after completing the setup process, users receive an email with helpful tips and tutorials. When a new system version becomes available, BeeStation also sends update notifications, introducing upcoming features and inviting users to join the Beta testing program in advance.
Welcome Email
After users complete the setup process, the system automatically sends a welcome email containing important links and software information for future reference.
Software Update Email
When a new software update becomes available, BeeStation automatically sends an email to notify users, summarizing the new features and improvements included in the version.
Design Systme
Features
BeeStation is built on a complete design system that defines typography variables, color palettes, and interface components in detail. By applying this unified system across all built-in applications, the overall visual style remains consistent and cohesive.
Visual Guideline
Features
In BeeStation, icon stroke weights and colors are standardized to ensure visual consistency. The logo color is also derived from the main interface palette, reinforcing a cohesive and recognizable brand appearance.
Next project
