Role: UX Designer & Researcher

Collaborations: Product Designer‍s, Developers, Product Manager

Duration: Jan 2020-March 2020 | 🚀 went live April 2020

Methods: User Research | Interaction Visual Design | Contextual Inquiry | Usability Testing | Prototyping

Tools: Sketch, Figma, InVision, Keynote

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.

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

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.

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.

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.

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.

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. 

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.

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

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

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

Old Profile Page

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

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

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

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.