Warning: implode(): Invalid arguments passed in /home/q2jbh94teh6a/public_html/wp-content/themes/semplice/partials/project-panel.php on line 28
Droplr

Droplr User Onboarding

Overview

Droplr hired me as a freelancer to redesign their product's user onboarding flows. Our goal was to drastically improve the conversion rates from their freemium tier to paying customers. The project began with some dedicated design research and user testing. Eventually I took the vetted wireframes to high-fidelity user interface designs.

At that time, Droplr's headquarters was in Auburn, CA so I was able to have a nice mixture on in-person collaboration and focused, remote work. We met in-person a few times to kick off, review user testing results and refine interactive prototypes. The result of this engagement was a completely redesigned flow from UX to UI, which was validated by real users via some online flow testing. 

Details

Freelance

90% Remote

Web Application

4 months

2016–2017

thumb-770-droplrthumb-770-droplr

Primary Challenge

My challenge in this project was to improve the conversion rates of new users from casual creators to engaged and paying customers. Analytics revealed that those users who created more than 10 drops were significantly more likely to see the benefits of the application and become paying, long-term users. 

The average Droplr user interacts with 2-3 of their products to best streamline their digital workflow. I was tasked with first redesigning the user on-boarding flow to boost conversion rates and engage new users. Additionally, I provided a new visual design for the dashboard in an effort to define the overall interface language for the company's full suite of products.

USER ON-BOARDING FLOWS

My first step was to document the product's existing user flow and dive into the company's analytics. Next, I defined a product strategy that I would use as a reference in my redesign of the flow.

My documentation of the product's legacy on-boarding flows.

Guiding UX Principles

01

SEAMLESS FLOW

Droplr as a product stands apart from its competition by staying simple and doing a few things very well. I am aiming to reinforce this notion throughout the user on-boarding flow, making it a seamless process for all new users.

02

DEMONSTRATE VALUE

Droplr's value as a product is simple in practice, yet difficult to describe simply. To remedy this and gain more traction with new users, we will consistently demonstrate our real world value to users. Clear examples, social proof and use cases for the product in a everyday workflows are encouraged wherever possible.

03

DELIGHTFUL PROCESS

In correlation with a seamless flow, the brand personality of Droplr is lighthearted, helpful and engaging. The onboarding flow should return to these values whenever possible, transforming an everyday lackluster process into one that is delightful and reinforces a positive brand experience with our new users.

My optimized on-boarding flow, ready for prototype creation and user testing.

PROTOTYPING & USER TESTING

Next I translated my optimized user flows into a clickable prototype in preparation for user testing. Each screen was wireframed and included persistant data such as the user's name and account informaiton, providing a realistic protoype experience for testers. 

A birds-eye view of the wireframed screens in Sketch.

[unex_ce_button id="content_6et1bnxvz,column_content_vk8u7pm7q" button_text_color="#ffffff" button_font="semibold" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#5d5191" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#5d5191" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#4c4175" button_border_hover_color="#4c4175" button_link="http://mgqacs.axshare.com/" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]OPEN LIVE PROTOTYPE[/ce_button]

ITERATIONS & UI DESIGN

With the user testing results in-hand I was able to further optimize the flow, clarifying any points of confusion that were revealed through testing. 

Next, I took the wireframes and brought them to full graphic fidelity. I skinned the entire Droplr dashboard including the many new on-boarding states and modals which were designed to familiarize new users with the product. Examples of social proof are now found throughout the flow and I guided new users to download the necessary applications by demonstrating their value to a user's process.

onboardingonboarding
application-landingapplication-landing