Control Panel
User Interface Redesign
QNAP System Inc.
Team
UI & UX Designer: Ching-Min Tseng
UX Researcher: I-Ching Lu
PM: Sharon Hsieh
Developer: Software Dev Team 1
​
Role in Project
Research, Wireframe, GUI Design, Prototyping
​
Duration
4 Months (January-April 2022)
Project Overview
The significance of revamping the control panel has increased over time.
The Control Panel, a core application of QNAP NAS, is designed to manage settings across over 100 diverse storage products, each with unique functionalities. Recent shifts towards new design guidelines and a modern visual language, along with significant user feedback, highlighted critical usability issues with the interface. Tasked with leading its redesign, I aimed to enhance user experience, streamline interactions, and maintain consistency across devices, aligning with QNAP’s commitment to customer satisfaction.
​
The Previous UI
Originally built on a Linux framework, the Control Panel was designed for basic operations but expanded significantly over time to support QNAP’s growing product range. These expansions, lacking a unified design strategy, increased system complexity and reliance on technical knowledge, which magnified the learning curve. The result was a user-unfriendly flow that complicated device management, leading to significant usability challenges for both new and seasoned users.
Privilege Settings
Home Page
Difficulties in Navigation
User feedback was pivotal in sparking the redesign of the Control Panel. Users frequently cited issues with navigation, the overwhelming number of options, and inconsistency in visual elements. There was a clear call for an interface with an intuitive layout to simplify use and improve overall functionality, emphasizing the need for an update to meet modern usability standards and user expectations.
Challenges
Several business challenges had a significant impact on the redesign of the Control Panel during the project.
1. Diverse Product Line
QNAP's extensive range of over 100 storage products, each with its own unique set of features, posed a considerable challenge. This diversity necessitated a highly adaptable and scalable interface that could cater to the broad spectrum of user needs and technical specifications.​
2. Lack of Updated Design Files
The design files for the Control Panel had not been updated or modified by a designer in the last three years. This neglect had led to outdated user interfaces that no longer met modern usability standards or aligned with current technological advancements.
​
3. Insufficient Documentation
Each time QNAP introduced a new product, a separate specification was created, but no overarching, comprehensive product specification document existed for the entire product range. This fragmented approach made it challenging to fully grasp and consistently integrate the diverse features of each product. The absence of unified documentation impeded efforts to develop a cohesive and user-friendly design that could seamlessly accommodate the functionalities of all products in the lineup.
Goals
01.
Incorporate the New Visual Language
To align the Control Panel's design with QNAP’s latest design guidelines, adopting a modern visual language that enhances aesthetic appeal and supports a more intuitive user interaction.
02.
Improve Consistency Among Products
To ensure a uniform experience across QNAP’s extensive range of storage products, fostering a seamless user experience that simplifies navigation and reduces the learning curve for all users.
03.
Enhance Usability
To significantly enhance the overall usability of the Control Panel, making it more accessible and easier to manage for both new and experienced users, thereby increasing efficiency and satisfaction in interacting with QNAP products.
Preparation and Planning
The redesign began with a thorough understanding and preparation phase, aligning the project scope with the broader goals and ensuring all team members were on the same page regarding expectations and deliverables.
-
Project Scope and Deadlines: I initiated the discussion with the new product manager to define the project scope and establish realistic deadlines. These conversations ensured that the redesign efforts were aligned with the strategic objectives of QNAP and integrated smoothly with other ongoing projects.​
-
Engagement with Engineers: Multiple meetings were held with the engineering team to gain a deep understanding of the various products and their unique features. This engagement was crucial to ensure that the redesign would accommodate the specific needs and complexities of QNAP’s diverse product range.
-
Requirements and Specifications: All product requirements and specifications were listed and organized. This step was fundamental in ensuring that the new design would provide consistency across different devices and facilitate easy navigation for users.
These initial steps laid a solid foundation for the subsequent phases of the redesign process, which included heuristic evaluation, user flow redesign, usability testing, and iterative UI design. Each phase built upon the insights and structures defined in this preparatory stage, aiming to create a more intuitive and visually appealing Control Panel.
Design Process
The redesign process was structured into a series of strategic steps, each aimed at enhancing usability, consistency, and integrating a new visual language.
1. Heuristic Evaluation
We initiated the redesign process with a heuristic evaluation, conducted in collaboration with two other UX professionals. This evaluation critically assessed the existing Control Panel against recognized usability principles to identify key areas for improvement and inform the subsequent design phases.
2. Redesign User Flow
Informed by the insights from the heuristic evaluation, we redesigned the user flow to enhance navigational ease and efficiency. The revised flow was visualized through a detailed wireflow, outlining the interactions and transitions between different user tasks and screens, ensuring a logical and user-friendly progression.
3. Graphic Interface Design & Iterate
After selecting the most suitable visual style, we applied it across the high-fidelity prototypes of the Control Panel. This phase also involved continuous collaboration with UX researchers to conduct user testing and interviews, allowing for iterative improvements based on direct feedback. This iterative process ensured that each design element was optimized for usability and aesthetic coherence.
Creating New Visual Language
To align with the new visual language, various visual style proposals were developed and evaluated. These styles were designed to modernize the Control Panel’s aesthetic, aligning it more closely with contemporary design trends and enhancing the overall user experience.
Style Proposals
Icons I Created
A key aspect of redesigning the control panel was enhancing efficiency. By utilizing SVG format for icons, we achieved a visually appealing design while reducing file sizes.
UI Guidelines
In the UI guidelines for the control panel, I provide comprehensive instructions that encompass high-level directives, font sizes, scaling options, and interaction details. These guidelines are designed to ensure a consistent and intuitive user experience across the control panel, integrating both aesthetic considerations and functional coherence.
Usability Improvement Highlights
Focusing on the reported issues gathered from internal and external users, I came up with UI improvement suggestions, and make high fidelity prototype for internal testing.
Highlight 1 - Home Page
-
Enlarged Icons: The use of enlarged icons allows users to quickly identify functions through clear visual cues, reducing the need to read text and speeding up navigation.
-
External Application Links: Over the years, many features within the Control Panel have evolved into separate applications that are not opened on the Control Panel page but through external links. I incorporated a hyperlink icon in the bottom left corner, allowing users to anticipate this behavior before clicking, enhancing predictability and user experience.
-
Improved Navigation and Visibility: In previous versions of the Control Panel, pages displaying more than a certain number of functions would show a 'more' option, hiding full functionality without further interaction. In the redesigned version, all functionalities are fully displayed. Users can quickly find the necessary functions using a search bar in the top right corner, which supports keyword and related string queries.
Highlight 2 - Privilege Management
-
Streamlined Information Display: In the previous version, users had to click on various icons in the far-right column to open pop-up windows for editing and viewing detailed settings. The meanings of these icons were unclear, requiring users to hover over each icon to see tooltips, which provided explanations without needing to open the window. In the redesigned version, users can click directly on any field to expand it, allowing them to view all information without navigating away from the page.
-
Enhanced Editing Interface: Previously, users needed to click on different icons to edit information, which was cumbersome and slow. The new version consolidates all editing options into a single window with multiple tabs, allowing users to switch between different types of modifications more efficiently and quickly when in edit mode.
Highlight 3 - Create New User Flow
-
Redesigning the Editing Process: The original process to add new users involved cumbersome expansions and collapses within pop-up windows, complicating the editing tasks in a restricted space. In the revamped version, I restructured each section of this process into clearly defined "Steps," arranged in a sequential flow. With the step bar at the top displaying concise titles, users can quickly understand the data requirements and smoothly transition between different steps. This redesign significantly cuts down the time needed to read and comprehend the interface, reduces scrolling and data verification efforts, and enhances the overall completion rate of adding new users.
Final Outcome
The redesign of the Control Panel has been a transformative initiative for QNAP, culminating in significant improvements in user experience, operational efficiency, and system aesthetics.
Here are the key outcomes of this project:
The successful redesign of the Control Panel has not only met but exceeded the initial project goals, setting a new standard for user interface design within QNAP. This project has proven that thoughtful design, coupled with user-centered strategies, can lead to substantial improvements in both user satisfaction and system functionality.
Thank you for reading!
Next Project
Design Systems & Component Library
QNAP System, Inc.
Role in Project: Research, User Experience, Interface Design
I developed and launched a comprehensive design system and Sketch Library, significantly reducing the UI update process time for over 150 applications. This enhancement greatly benefited our 18-member design team, streamlining their workflow and boosting productivity.