Onboarding OpenDNS

THE ASK

Redesign the OpenDNS onboarding experience to provide a seamless user flow

QUESTION

What should people's first-time experience on OpenDNS be and how do I demonstrate to them the value while onboarding them?

My Role

This was a one-week design challenge where I was an independent contributor. I was involved in research, interaction design, prototyping, and validation of the designs. 

PROBLEMS IDENTIFIED

Convoluted Initial Setup

The initial setup flow involved the need to shift between multiple tabs, moving from one screen to another, thereby making the setup process arduous and confusing. 

convoluteduxconvolutedux

Value of Product Not Obvious

After setting up, the existing onboarding flow does not show the value of using OpenDNS upfront. Empty graphs and a mass of text do not help a first-time user get a sense of the unique selling point of using the services.  

THE SOLUTION

Streamlined experience

Providing a straightforward experience by eliminating the need to jump between multiple tabs or pages, and keeping the onboarding limited to a singular flow helps with retaining the attention of a first-time user. 

streamlineduxstreamlinedux

Value of product presented up-front

One of the biggest drawbacks noticed was the inability of the product to present its value during onboarding. Introduction of product snapshots, clear empty states, and responsive feedback loops helped in creating a simple yet powerful onboarding experience. 

vop_svop_s

Key Design Changes

PRODUCT SNAPSHOTS

Snapshots of the features of OpenDNS Umbrella in four easy to read highlights. The fifth screen is a call-to-action that encourages users to set up their device.

GUIDED TOUR

A browser-enabled setup wizard that runs a first-time user through the journey of setting a network up.

LUCID EMPTY STATES

Empty states designed to indicate the status of the system at every point. Also, links to highlight the value of the system are presented at such empty states. The button 'How secure am I' would reroute to internetbadguys.com.

CLEAR FEEDBACK

Feedback presented while onboarding keeps the user updated about the status of the system and informed about what to expect in the next few steps.

Design Process Overview

Phase 1

Research & Synthesis

This phase included self-onboarding, heuristic evaluation, contextual inquiries, comparative analysis, affinity diagraming and a meshed experience map. 

 

Phase 2

Sketching

Sketched over 5 different user-flows and filtered them to a final two which was further filtered to one after validation of the different concepts. 

Phase 3

Validation

Conducted 6 usability tests that helped with understanding the pros and cons of the two different concepts. Also, this process helped with iterating on interface level details. The two concepts were then compared based on the data collected from the usability tests which helped in picking one design flow to go forward with for the onboarding process. 

Phase 4

Prototyping

Created high-fidelity prototypes using Sketch. Microinteractions were created using Principle, and a final demo video of the complete onboarding design was put together for presentation. 

View the entire case study with an in-depth explanation of process and research. 

[unex_ce_button id="content_ruwvol5s2,column_content_16txs8gcp" button_text_color="#ffffff" button_font="semibold" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#e66028" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#000000" button_border_hover_color="#000000" button_link="https://drive.google.com/open?id=0B42KT_nXXTg9d291cW5UUzRZZXM" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]View Case Study[/ce_button]

Reflection

If I were to work on this more...

Activity Volume - I would like to work on the Overview tab. I feel there is a lot of scope for improvement with the “Activity Volume” chart, it is quite ambiguous and does not deliver much value. Also, it does not contain an empty state chart — that is — when there is no data to display; that is something I’d like to put more thought into.

Visualization - The visualizations on reports are a lot more lucid that the overview tab. Probably, I’d like to delve deeper into what data is being presented and what respective alternative charts could be used to represent that data.  

Onboarding Snapshot Animation -  The current snapshot design shows what the product is capable of, but effective onboarding processes have neat animations that very subtly show what functionality the product is capable of. How can this be done for an enterprise product like OpenDNS is something I’d like to work more on.

What did I learn?

Planning -  I planned the entire process and this roots from experiences where I have failed in proper planning to executive a good design deliverable.

Data to the rescue - When I was stuck with two good solutions, I decided to use data to pick the better of the two to work on further. 

Finding a focus - I was stuck at a point when I realized I was trying to solve for all the problems I noticed, which is when finding a focus to work on for this short project really helped.