top of page

SoapUI Onboarding

for Smartbear

Screen Shot 2019-02-20 at 12.13.09 PM.pn

Project Overview

Client project for Smartbear, a software company based in Somerville, MA that creates Software Testing, Monitoring, and Developer Tools. They recently acquired SoapUI, an API testing software program that has a steep learning curve. They wanted to create an onboarding flow for new users.

Screen Shot 2019-02-23 at 11.43.01 AM.pn
Screen Shot 2019-02-23 at 11.43.47 AM.pn
Timeline
Tools

3 weeks

Sketch

AdobeXD

Platform

Open Source Software Program

Onboarding

Deliverables

Statement Of Work, Project Plan, Competitive Analysis, User Flows, Persona, Iterations

My Role

Conducting research interviews, affinity mapping, creating and sketching inactive onboarding solutions, oh-so-many usability tests, iterations in design based on user feedback, Adobe UX designs and flows.

DISCOVER

Discover
Problem Statement

Smartbear needs a way to help software developers learn how to use SoapUI Open Source because Smartbear wants to retain and grow its user base.

Solution Statement

We believe that by creating an onboarding experience for SoapUI Open Source, we will create a shorter learning curve for first-time users.

 

We will know this to be true when we see a 10% increase in customer retention within the first 3 months.

Research
Interviews
6 interviews

Interview Insights: Initial interviews were to see if current software developers would be able to navigate the program without prompts. They were not sure how to complete the tasks that were given to us as a scenario by our client. We also got great feedback about UI changes that seemed to trip them up.

“I have no idea where the Test Suite is.“

“Why are these tabs on the left side instead of the top?“

"Messy User Flow": What we observed from new users trying to get through the program without direction.
Screen Shot 2019-02-20 at 5.31.03 PM.png
"Real User Flow": The quickest way to complete tasks.
Screen Shot 2019-02-20 at 5.31.17 PM.png
Affinity Mapping
& Scenarios

Pain Points/Behaviors

 

  • Unclear

  • No direction

  • No Feedback

  • Give Up or Keep Playing

 

Scenario: given by client

 

Create project, URL to send request, add parameters or change method, test case, add assertions, test for validation

Screen Shot 2019-02-20 at 12.56.08 PM.pn
Research Insights

It took us a while to wrap our heads around what API Testing tools did. The software development terms were like a foreign language to us, but we muscled through looking up terms and gaining a better grasp on what the program is capable of through our research and interviews with developers. 

 

We discovered the true meaning of "You are not your User." We also discovered that software developers seem to have two different ways of learning: those who like to play around without guidance and those who like to be guided through a new program. With this idea in mind, we decided to create two onboarding experiences and conduct usability tests to see which was more effective.​

Define

DEFINE

Proto-Persona
Screen Shot 2019-02-20 at 1.13.01 PM.png
Competitive Analysis
SOAP UI Competitive Analysis
Design

DESIGN

Design Process

We split up the team to create two different onboarding processes.

 

  • Active Onboarding: Individual Pop-ups that physically guided the new user through tasks

  • Inactive Onboarding: Non-interactive screens showing a more traditional onboarding experience with pictures of the process without guiding the new users

Sketches

Brainstorming Onboarding Ideas

Screen Shot 2019-02-20 at 4.02.07 PM.png
Screen Shot 2019-02-20 at 4.01.25 PM.png
Screen Shot 2019-02-20 at 3.09.33 PM.png
Paper Prototypes

Active Paper Prototype

Inactive Paper Prototype

Screen Shot 2019-02-20 at 3.09.53 PM.png
Screen Shot 2019-02-20 at 3.33.05 PM.png

SOAP UI  "Soap Hub " Idea for additional support, tutorials, access to the active SOAP UI online forum

IMG_9908.jpg
Screen Shot 2019-02-20 at 3.33.20 PM.png
Usability Tests
20190204_153256.jpg

Insights:

• Both Active and Inactive Paper Prototype tutorials worked well.

• Decided to create Active version to better guide new users through tasks.

20190204_143444.jpg
Iterations

Creating Mobility

Original Prototype Issues:

• Only had two options: click on the icon to continue through the tutorial or end the tutorial.

• Users commented that the pop-up and background were too similar in style.

• Triangle pointer on the top left was not clear. They thought that the pop-ups were actually drop-down screens for the icons.

1st Iteration:

• Added "Go Back", "Skip" and an X in the top right corner.

• Users were confused thinking that "Skip" and the X would lead to the same conclusion of quitting the tutorial.

• Added SOAP UI branded green and fonts.

• More opaque green dot made it hard to see icons.

Screen Shot 2019-02-20 at 5.31.46 PM.png
Screen Shot 2019-02-20 at 5.32.33 PM.png

2nd Iteration:

• Changed "Skip" to "Next" in order to create a smoother flow through the tutorial.

• Made border thicker and added a line instead of a triangle to clear up confusion about pop-ups looking like drop-down menus.

Screen Shot 2019-02-20 at 5.32.04 PM.png

• Added an option to replay the tutorial.

Screen Shot 2019-02-20 at 5.32.13 PM.png
Deliver

DELIVER

Starting
Program
Screen Shot 2019-02-20 at 5.59.57 PM.png
Choosing
Tutorial
Screen Shot 2019-02-20 at 6.00.10 PM.png
Initial Onboarding Pop-up Screens
Screen Shot 2019-02-23 at 1.16.28 PM.png
Screen Shot 2019-02-23 at 1.16.42 PM.png
Soap Hub Learning Center
Screen Shot 2019-02-23 at 1.18.00 PM.png
Screen Shot 2019-02-23 at 1.17.48 PM.png
Help Mode
Screen Shot 2019-02-23 at 1.18.21 PM.png
High-Fidelity Prototype in Action
Next Steps​

Fleshing out the Soap Hub and help section more.

Having a "Dark Mode" for software developers that would like to have that option. 

Revisiting the idea of a Progress Tracker and making the tutorials pause-able for those that want to leave the program, but continue the tutorial later.

Reflection

Our client gave us free rein to experiment with this project which allowed us to dive into research and analyze what software developers were looking for in an onboarding process. 

 

This project also had some struggles with communication amongst our team of 4, but ultimately it was great practice to figure out effective communication techniques as well as troubleshooting how to plan for miscommunication within future groups.

bottom of page