ws macbook.png

UX Design & Research | Onboarding

UX Research & Design | Responsive Web

Designing the Onboarding Experience for Dev Tools

WayScript existing home page

WayScript existing home page

 

WAYSCRIPT

 

Overview

WayScript is a drag and drop programming platform that allows users to automate their workflows using variables, functions, and logic to trigger events. In plain terms, it provides you with the opportunity to automate really cool workflows like receiving daily or weekly alerts on stock markets you’re interested in following. Our client approached us with two objectives - create an onboarding experience and improve customer retention on the platform.

 
 

Details

Role: UX Designer & Researcher

Team: Caroline Morant, Patricia Gomez

Methods: User Research, Interaction Visual Design, Contextual Inquiry | Competitive & Comparative Analysis, Prototyping, Usability Testing

Tools: Sketch, Keynote, InVision

Timeline: 1 month

 




 

UNDERSTANDING THE PROBLEM

WayScript offers a variety of tools and integrations on the platform, however users lack understanding about specific use cases and workflows WayScript could be used for. This yielded a need to dive deeper to identify areas of opportunity and also investigate the challenges that users currently faced.


Our high level goals were to: 

1. Create an onboarding process for new users that clarified the power and value of the software

2. Explore possibilities of adding or enhancing or features to increase customer retention

3. Reimagine working the existing features into a better workflow that is more engaging and focused on the value it brings to users

 
mock_laptop_wayscript.jpg

Significant user dropoff occurred

after creating an account

After users created an account, they landed on the“Profile” page and were unsure of what to do next.

 
 

GETTING TO KNOW THE USERS

Moving into the research phase we knew that we had two areas of focus- discover how existing users were using the platform and identify the first time user experience. We employed contextual inquiry method since we wanted to get an insider view of existing users’ context of use and workflows. We learned that while users like to save time by automating tasks, they weren’t using the platform much since they didn’t understand the value proposition of WayScript. A key takeaway from the interviews with both new and existing users was that the platform was viewed as a complex system to learn.

 
WAYSCRIPT_01.jpg
WAYSCRIPT_02.jpg
 
 
 


EARLY INSIGHTS FROM THE USERS

Based on the user interviews conducted with users on the existing WayScript platform, we found the following key insights:

  • Users preferred to see how other developers’ built workflows and solved problems; found value in the Marketplace and Community

  • Users valued clean and intuitive design and were overwhelmed by the steep learning curve 

  • Users didn't fully understand the value proposition of WayScript, but saw potential


MEET LOGAN

Utilizing the insights gained from the interviews, we constructed a provisional persona, Logan, a back-end programmer who enjoys finding simple and intuitive automation processes to alleviate his complex workflows.

wayscript new persona.png
 
 
 
 

VISUALIZING THE JOURNEY

We used experience mapping techniques to visualize and communicate the users end‐to‐end experience across various touch‐points. This allowed us to represent user pain points and identify where we needed to focus our attention. Defining the users emotions was key to setting client expectations about the aspirational emotional state we were aiming to design for.

 
ws journey map.png
 

REFRAMING THE CHALLENGE

We moved into redefining the focus of the project and fine tuning the vision statement. After synthesizing all of the research and data points, we created a design statement to guide us through the design process.

How might we help users find the value in using WayScript to create flows that automate tasks involving application integration?”

VISION AND SOLUTION

Once we discovered that we had three primary research insights to focus on and a clear idea of where users were dropping off, it was time to translate our insights into design features for improvement on the platform.

 
 
New dashboard.png
 
 

Feature 1: Dashboard

Feedback from interviews showed that users were unsure of how to create their own workflows from scratch and preferred to see sample setups.

Using this input, we decided to create a dashboard with sections for Marketplace and Community which hosts tutorials and scripts to help users get started.

Onboarding tutorial.png
 
 

Feature 2: Onboarding Tutorial 

In order to address initial confusion and pain point of the steep learning curve users were experiencing, we resolved to design an onboarding walkthrough with the option to skip tutorial. 

Script preview.png

Feature 3: Redesigned Script Preview page 

The existing script preview page caused caused users to be unsure of how to open scripts and duplicate them. We redesigned the layout so it would be more straightforward to the user. 

 
 



TESTING IT OUT WITH SKETCHES

With a more cohesive visualization, we created an initial prototype in Keynote and conducted a usability study to validate our initial findings and gather additional feedback from our users. 

At the start of each session, we asked two introductory questions about the visualization:

1. What type of tasks could they use system for?

2. Could they create their own workflow?  


After answering the introductory questions and completing the onboarding process task, we asked the participants follow-up questions regarding their overall impressions. 

 


WHAT WE FOUND

Users in both rounds of testing completed all tasks with minor issues. Initially, our ideas were well received by our users during testing. We found major success with the beginning of our new onboarding as well as the redesigned profile page to dashboard. Users expressed that they would be interested in exploring the site’s integrations to see what workflows they could automate and that the onboarding made the platform easier to comprehend.

WAYSCRIPT_03.jpg
WAYSCRIPT_04.jpg

REFINING THE DESIGN

User testing was an iterative process where we met with users at each phase to ensure that we were capturing all areas of pain points with the current product. Once feedback was gathered, we would revisit the prototypes and test again.

With the brand UI in mind, we created a clean UI onboarding that was consistent with current branding of the product and included redesigns for better optimization.

 
 

Old Sign-in Page

old version.png

During interviews, we noticed that users didn’t read the value proposition messaging on the right side of the screen as they were focused on completing form and reading left to right.

New Sign-in Page

updated vs.png

We inverted the form fields for better visibility and improved the messaging for clarity of the product services offered.

Old Profile Page

old profile page.png

Many users were confused about what to do next once they arrived on this screen and struggled to get started. A few users also questioned what ‘invites remaining’ meant, is this an exclusive membership? We took these findings into consideration as we designed a new dashboard.

New Dashboard Page

new dashboard.png

Once users sign into their account and complete the onboarding tutorial, they land on the dashboard. Many expressed interest in seeing sample scripts from the marketplace and community so we decided to showcase these new sections on the page. The ‘hello world’ tutorial could easily be found on the dashboard for users to revisit.

Old Script Page

old script preview.png

Many users expressed uncertainty on how to interact with the Script Preview page and were unsure of where to go next after arriving on the page. The CTA buttons on this screen were tricky to find and caused the process of cloning and editing an existing script to be difficult.

New Script Page

new ish.png

Taking feedback into consideration, we designed the page so that relevant information would be showcased front and center and users could preview the workflow without having to click into it. We moved the CTA buttons to a more optimal location for better visibility.

 

Onboarding Flow Tutorial

To address one of our biggest insights from user research, we created an onboarding flow to help users become more familiar with the system components and also complete a “hello world tutorial” to test it out and option to “skip tutorial.” Upon creating an account, we asked users to complete a few questions about their profession, programming languages and api’s they’re familiar with in order to better tailor their dashboard.

 


 

IMPLEMENTATION

WayScript expanded on our recommendations and launched the first time user experience on the platform in April 2020. So far, all of the metrics indicate great improvements after the launch.

By designing an onboarding experience for first time users, we helped to reduce new user churn and continue to monitor metrics and analytics on the performance.

 
 

Want to get in touch? Feel free to reach out ↠ emilymariecarlson@gmail.com