Marketing & UX

WayScript

 

WAYSCRIPT

ROLE: UX/UI Designer

CLIENT: WayScript

TOOLS: Figma, Keynote, Zeplin

METHODOLOGIES: Usability Testing, User Interviews, Low to High Fidelity Prototyping, Low to High Fidelity Wireframing, Competitive/Comparative Analysis, Feature Prioritization, Spec Documentation Creation

OVERVIEW: A case study looking at our consulting work for WayScript, a visual programming platform for developers. As a startup, WayScript wanted to get a better understanding of their target audience and update their platform to increase customer retention. We created a repository of user research and designed an onboarding flow in order to align business goals and user needs.

WayScript.png

 

RESEARCH

With WayScript releasing their Beta site just a few months back in September of 2019, a primary goal that founders Jesse and Lane had was to better understand their target audience. One of our main objectives was helping them better understand how customers were currently using their platform and how potential customers would use their platform. We gathered this data in order to inform both design and business decisions as WayScript launched into their next phase of growth.

Supplementing a provided list of current WayScript users, we sent out a screener survey to collect a diverse pool of developers who had never used WayScript before. With these nine users, we conducted a mixture of contextual inquiry and user interview with each. Our goal was to see how new users first interacted with the site, their thoughts and expectations, and their pain points. Our contextual inquiries with four existing customers shed light on what kinds of scripts they were building, whether they were using them for personal or professional reasons, and how they perceived the value of using WayScript as a task automation program in general.

After affinity mapping and synthesizing our user research, we developed three key insights that would inform what direction we went with our design implementation.

KEY INSIGHTS

PERSONA

We used these insights to develop a persona, which focused our design decisions as well as provided a digestible understanding of the target user that WayScript founders were looking for. Our persona, Chris, embodied common sentiments from our user interviews and laid out the framework for the problems we ultimately solved for.

JOURNEY MAP

For a deeper understanding of Chris and where our opportunity to help him really was, we developed a journey map to address his emotional experience when being faced with a coding challenge. This journey revealed what kind of resources Chris turned to when stuck, what pain points he experienced when first interacting with WayScript, and how valuable he found WayScript’s content in terms of finding solutions to his programming needs.

 

From our insights, persona, and journey map, we identified the problem space through one question to guide us through our design process:

how might we help people like chris find the value in using wayscript to create flows that automate tasks involving application integration?

 

IDEATE

Now that we had three primary research insights to focus on and a clear idea of where users were getting stuck using WayScript, it was time to translate our insights into design features. Being conscious of our time constraints, we focused on three changes that would have the biggest impact with what we could accomplish within our timeline, but could also be iterated and improved on moving forward.

KEY INSIGHTS TO DESIGN FEATURES


DESIGN

Onboarding proved to be the primary focus of our insights and ultimately our design. We approached onboarding both directly and indirectly, making it easier for users to navigate WayScript’s platform not only the first time they interact with it, but every time, whether that’s the next day or a month from their first interaction.

USABILITY TESTING

We found major success with the beginning of our new onboarding as well as the redesigned profile page to dashboard. The majority of users we tested confirmed their understanding of WayScript as a drag and drop programming platform after the new onboarding, and we had users express the interest and value of having example content once dropped into the dashboard screen. However, we did a number of rounds of iterating the actual flow of our newly designed onboarding tutorial for the script building screen. We worked to improve the controllability and clarity of the tutorial so that users could easily navigate the information on their own terms.

FEATURE IMPLEMENTATIONS

Let’s take a closer look at the three major design changes we created for WayScript, comparing the existing site to our proposed changes.


Original Sign Up/Onboarding Screen

Updated Onbaording Screen After Sign Up is Complete

Our biggest item we tackled was the direct onboarding. What initially existed on WayScript’s site was a new user sign up form next to a screen explaining WayScript’s value proposition. From there, users were immediately dropped into their profile with no additional information on how to start a script or what kind of script to even build. Because we noticed focusing only on signing up and completely missing WayScript’s value proposition, we separated these steps so that users could solely focus on inputting their login information before reading about WayScript’s task automation functionality.

First Screen of New Walkthrough Tutorial

The second part of the onboarding process became a step-by-step walkthrough tutorial we built out. While there are many different routes we could’ve taken with onboarding, a walkthrough guide was our best bet given that users felt the tool was simple to understand only upon explanation. The above image shows the first screen in the tutorial, where users are shown around the different functions on the page and are then taken through a simple example script building exercise to familiarize themselves with how to use the tool. We also decided to clean up the UI here by narrowing the side panels, as users felt this screen was very overwhelming with information.

Original Profile Page

Updated Profile Page to “My Dashboard”

Adding an onboarding flow alone couldn’t totally address our users’ pain points and needs, however. Our indirect form of onboarding involved changing the profile page to My Dashboard, providing users with a lot more content and direction when they first land on the site. They can see example scripts that show different valuable use cases for the platform under the Marketplace, and they can see samples of what other users have built, providing credibility and inspiration. The tutorial also exists on this page should a user ever need to return for a refresher on how to use the platform. Additionally, a link to WayScript’s Documentation sits in the body of the page should users need to access that information. All of these updates to the dashboard address retention, inspiration, and learning, not just for FTU, but for returning users and existing users that want to maximize their use of the platform.

Original Script Overview Page

Updated Script Overview Page

The last update we made to WayScript’s site was the script overview page, which is the screen you’re shown when you click into a script before you’re taken to the main script builder. Almost all users couldn’t figure out how to preview or clone the script from this page due to the CTA buttons being all the way in the top corner. We resolved this confusion by providing an image preview as well as centralizing the CTA buttons that are more visible for users.


DELIVER

Our work was comprehensive, but we saw many areas for both us and WayScript to progress. During our presentation and debriefing session with the WayScript team, we proposed a few key items to address going forward. For our work, iterating the onboarding and revisiting key heuristics would be the first leg to tackle.

NEXT STEPS

Next Steps WayScript.png