Import NAS Server
Project Overview
Create step-by-step interfaces to enable the users to import the NAS server from a remote system into their own system.
Client
Dell Technologies
My Role
UX UI Designer
Problem Discovery
1. Current design is not intuitive
The current UI lacks clear visual cues, causing users to struggle with identifying clickable elements and determining the flow of actions.
2. Ambiguity in system identification
The current UI fails to tell users which steps are for the remote system and which steps are for the current system.
3. Insufficient steps in Import NAS Server wizard
The current UI lacks a crucial step where users can indicate their appliance selection from the remote system.
Workflow
1. Get to know the project
Met with the project manager and engineering team to thoroughly understand the project objectives, requirements, and constraints. We discuss the demo site's current UI state and identify useability issues
2. Create user flow
Created flow chat in Miro to create the user flow that outlines all the screens and steps involved in the NAS server import process. I map out the existing screens from the demo site's UI and identify gaps or areas for enhancement.
3. Screens mockup and problem-solving
Based on the user flow, I followed the design guidelines and design system to remake the existing screens from the demo site's UI. Then, I'll add new screens or steps as the project requires. Additionally, I'll identify any usability issues or design flaws and brainstorm solutions to address them.
4. Team review and making adjustments
Met with the project manager and developer team to address any concerns or suggestions. Then, I iterate on the UI design based on feedback received, making necessary adjustments and refinements.
Major Improvements
1. Add navigation graphics
I added a navigation graphic at the top of each step to show users where they are in the process. This helps them understand each step better and know which ones are for their system and which are for the remote system.
Based on the feedback and concern during the meeting, I changed the triangle navigator icon to a blue dot icon to prevent confusion about the triangle being an expand/collapse button.
Additionally, I avoid using blue text for current step navigation because users might think it’s a clickable link. I also add a light grey background behind the graphic to separate it from other sections.
2. Add additional steps
Based on the project requirements, I created mockup screens for new steps in the wizard.
3. Restructured the process
I split the "Assign Network Interface" button into its own step called "Select Network Interface." This modification aims to simplify user interaction and eliminate confusion regarding essential steps.
Final Import NAS Server Flow
Other Dell Technologies Projects
I had the opportunity to work on numerous projects for Dell Technologies. Here are some of the screens I have worked on.
