PROJECTS

💡Activation Dialog Redesign

Usually, activation is a simple feature. Just a single click and it is over. However, in business product design, it could be complex, it may have many configurations relates the activation action. This article tells the story about how I find the existing usability issue and redesign the activation dialog.
01

What is the Initial Design Request

Initially, I was asked to design an extra feature for the original activation&deactivation dialog. User can activate Cloud/ Edge via activation dialog or deactivate Cloud/Edge on deactivation dialog. Sounds simple. But now, an extra feature is coming. User should be able to add custom tag pairs if the user choses to activate on Edge, and when deactivation happens, whether the tags are still valid is pending for further discussion.

02

Find out the Usability Issue

After receiving the original request, I found there could be some usability issue. According to David Hackworth in About Face, feedback is essential to users so that they know what they are doing. Right now, those two dialogs are just providing actions but not providing feedback. If custom tags feature is embedded, users do actions - adding tags, without any idea what the current "effective" tags are.

Okay, so what was next. I believed I should validate my thought instead of guessing. How to validate? User test! As expected, the test result demonstrated when testers activate/deactivate, they neglect whether the subject was currently active/inactive. Therefore, testers might activate the subject again and again. The unintended duplicate actions would cause a lot of data transmission burden, which was unexpected.

So for sure, the usability issue occurred and the real design question should be: how to allow the user to control the activation status on Cloud/Edge intuitively.

In the new design, the new feature-custom tags should be merged with existing features and the existing usability issue should be tackled too.


03

Think through ALL Circumstances

Also, some other questions regarding use scenarios should be answered before the real design time.

1. What happen if the activation is failed? Answer: Barely happened.
2. how long can user get activation status? Answer: Immediately.
3. Can user know why it is failed? Answer: In log, user can get error code.
4. May user want to activate again in some circumstances? Answer: So far, no such use case found.
5. How often does user activate/deactivate? Answer: Usually, it is one time thing.
6. Edge tags would be modified when inactive? Answer: Edge tags are useful only when Edge is activated on.





04

Brainstorm Design Ideas

Now it is design time! I came out 2 design proposals. Toggle was deprecated because it is used mostly in mobile scenario and indicating some actions which gonna be executed right after clicks. It is not suitable to use in a dialog. For the 2 proposals, Proposal 1 contained more information, Proposal 2 was more simple. Based on internal discussion with Product Owner and Tech Lead, we thought Proposal 2 provided enough information and redundant information may cause confusion in Proposal 1. So we decide to move toward Proposal 2.


05

Final Deliveries

In the meeting, I answered some challenging questions. For example, why the tags can not be edited all the time? I answered that because we want to make it clear, tags would be effective only when the Edge is turned on.

The final deliveries included two parts: an animated flow showing all the interactions, and detailed design specs.