Design Import
Wizard that converts old version projects to new version.
Disclaimer:
There is a lot of sensitive data so I will only show few of the design because of restriction.
There is a lot of sensitive data so I will only show few of the design because of restriction.
Intro
Design Import is a wizard that converts the applications/project old version into new one. Just like transferring files from an old iPhone into New Android device.
Process
01 Getting Information
Since it hasn’t been released to the public, I started getting information to the developers, luckily enough they are also my teammates.
I asked these main questions:
- What part of wizard annoys you?
- What part of wizard you think needs improvement?
- Any feature you think is nice to have?
After getting all information, I organized them and prioritize which one should be tackled first.
02 Ideation and Wireframe
After getting the information, I realized that the Design import wizard would take 10 STEPS to finish the process. And that is a LOT of effort for the user just to finish 1 simple task.
So I remove any redundancies steps that doesn’t make any sense.
03 Feedback/Testing and Iteration
This is where I spent time the most, because after my ideation, some of the steps I did is “not yet” technically possible or some of the steps I remove is actually needed.
So the next question I thought of is:
"Is there a way to combine 2 or more steps into one?"
Well the answer is, THERE IS! After spending some time to properly combine steps and some POCs I asked for the devs.
We manage to reduce it to 6 STEPS and also removes any unnecessary actions under each steps!
Problems and Solutions
I listed below some of the problems I fixed. I will tackle this in Problem and Solution format.
#1 Unnecessary steps
Problem
The current design makes the user go through 11 Steps just to convert the old project version into new one. Here is the current process.
Step 1: Getting Started
This is not acceptable because user has to exert a lot of effort to convert applications. A wizard should make the user life more easy not harder.
Solution
There are steps that can be combine into 1 step. With that in mind, I manage to make it to 6 steps.
Initial iteration for the new steps of Design Import wizard
#2 Unclear Steps
Problem
The current design doesn’t allow the user to see the progress of converting. Wizard should have some kind of feedback of the progress the user made.
Solution
Introduced Stepper UI Element.
Low fidelity for Stepper UI Element
#3 Poor UX when selecting Data
Problem
- Information doesn’t have proper hierarchy.
- All information is being displayed all at once.
- Choosing another scope(or form) button is on the bottom part.
- User have to click everything if he want to select all data to convert.
As the image show, every information is out of place
Solution
- Create proper grouping of data.
- Introduce collapse function for each group.
- Change the button to dropdown, so user WON'T have to click the button, select through the drop of scope, then click ok.
- Introduce select all for each group.
This is the initial design for selecting forms and fields
Final Design
Here are the High Fidelities for the final design.
Step 1: Getting Started
What I learned
Communication is the key.
Good thing is I always communicate with the developers what can and can’t be done technically, so I can adjust my design accordingly
I know that the Design Import wizard can be optimize even more in the near future