SmartBear
Creating an onboarding experience, to inspire first-time users to become experts of SoapUI more quickly.
OVERVIEW
Who is SmartBear?
.jpg)
Grown through acquisition and based in Assembly Square in Somerville, SmartBear is a leading provider of API solutions, it offers an impressive amount of tools for APM, software developing, software testing - the one-stop shop for software.
What is SoapUI?
When SoapUI launched in 2005, there was no API testing tool. The developer community collaborated and contributed code for it to eventually emerge into the world’s leading functional testing tool for SOAP and REST tests. It was acquired by SmartBear in 2011.
SO...WHAT'S THE PROBLEM?
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.
Course
General Assembly -
User Experience Design Immersive
My Role
Part of research and development.
Lead the style guide & app aesthetics.
# of Team Members
Four
Timeline
3 weeks sprint
Tools Used
Sketch, Adobe XD, Illustrator, Photoshop
When first receiving the project, I was a tad apprehensive. I myself, having no experience in software development, was unsure of how to approach a software that seemed way beyond my understanding. It was definitely a challenge when dealing with an unattractive interface and API testing terms that were foreign to me but I was ready and excited.
My Initial Feelings
RESEARCH
The Original Interface
What we were told: Developers want to be able to run their tests as efficiently and quickly as possible. People don't have the patience for software anymore because they don't have to. If users cannot figure how to navigate through SoapUI, they can easily abandon it and move on to a competitive product. Smartbear wants to address this abandonment rate and provide the necessary training wheels for users to explore SoapUI, like what it has to offer, and eventually transition to SoapUI Pro, the commercial edition.
At first glance:
The interface on SoapUI was pretty bare. It had a pop-up screen that was mistaken for an ad.
There were buttons that were turned sideways and small icons that were placed closely together.
OUR NEW PLACE
I'm a paragraph. Click here to add your own text and edit me. Let your users get to know you.
Target User
We knew we needed to connect with software developers and we were fortunate enough to have access to Web Development Immersive (WDI) students, so we used that access to our advantage.
We realized that the WDI students would represent the new wave of developers and engineers that would eventually come in contact with an API testing software such as SoapUI.
Interviews
We conducted interviews with 8 developers and while doing so, we gave them a task of performing a functional test within SoapUI. Most of them either decided to search for answers on Google, asked their peers, or reluctantly gave up halfway. We did have one person who after serious searching, finished after half an hour.
Unsure of next steps, eventually started to get frustrated.
Struggling through the test-suite.
Seeking help from peers.
Unsure of next steps, eventually started to get frustrated.
For most users:
-
They got stuck and weren't sure of the next step.
-
They weren't sure if they pressed the correct button because of lack of any indication.
-
A lot of confusion with screens that looked too similar to each other.
Next went through the affinity mapping process and developed some important insights.
Scenario Process
RUN REQUEST - They feel a little better and mention that the terms look familiar.
Action: They still click around but knows to add a parameter and switches to JSON and HTML smoothly.
ADD & TEST ASSERTIONS - At this step, if they get to it, they finish feeling defeated and disappointed. They start trying to figure out where they went wrong.
Action: Looks up assertions on the internet to get a full understanding.
CREATE A PROJECT - Our Interviewees are first positive and cheerful until they realize that they don't fully understand how to start.
Action: They start hesitantly clicking around.
CREATE & RUN TEST - The Interviewees start to get confused and frustrated. They can't figure out what they are supposed to do next. They start feeling unsure.
Action: Watch them click around when what they need to click is right in front of them, just blocked by another screen
Who are the competitors?
We kept hearing about Postman throughout the interviews. Although some of the developers that we interviewed stated they never used it, they heard of it, so we knew we needed to check it out.
How do software developers learn?
When asked, interviewees differed on their techniques of learning. There were a few that want to be able to just be free to explore new tools but some were expressed that in the case of SoapUI, they would rather be able to have the information up front because they would likely need SoapUP in a work environment when there is a time constraint.
Even though there was a split between active vs passive learning, they all wanted - an introductory tutorial to get their feet wet, directions on where to click next, the ability to practice again before creating & running a real test.
So with that in mind, we wanted to focus on the 3 main points below in our onboarding design:
ENGAGING
COPY
We wanted to give positive affirmation to the users to let them know that they are on the right path of understanding the API tool.
X
LIBERATING BUT NOT CONTROLLING
There are so many tutorials that just lead the user through the tour step by step with no way out or no option to explore. We knew we didn't want users to feel trapped.
IT'S OKAY, TO PUT TRAINING WHEELS ON SOMETIMES
Plenty of tutorials give the user a one-time walkthrough. We wanted to let the user know that there is always assistance when needed even if it's for one part of the tool process that they are using.
Before diving into sketching, we took a look at onboarding platforms that already existed. We pulled out what seemed to be appropriate for SoapUI. A couple of examples that we looked at were DropBox, Gmail, Photoshop, and Grammarly.
Thoughts & Reflections: RESEARCH
After the research was done, the problem was so much clearer. I also realized that it was best not to focus on the details and terms of this specific software. We had such a short amount of time for the project and I had to come to the understanding that what was important was to find a solution and in this case, the solution had nothing to do with me understanding the ins and outs of the software but how to get developers & engineers to feel comfortable enough to proceed with SoapUI.
DESIGN
Paper Prototype
We tested 6 new users with 2 paper prototypes, active and passive versions
Active
Users are guided through a step-by-step tutorial
Passive
Users are given step-by-step instructions upfront
Since time is the biggest factor in this use case, we observed which one allowed users to more quickly and confidently navigate SoapUI.
We discovered that the passive version would be more time consuming because new users had to recall all the steps. We see them eventually losing patience when they find themselves having to continually consult the material.
The active version allowed users to memorize the locations of the blue post-it bubbles so even though they successfully navigated the software, some admitted to just going through the motions but not actually learning. Given the users' quicker success from the active, we moved on to create a product tour that emphasizes interactive learning and avoids the mindless clicking that the paper prototype may have induced.
Testing & Iterations
There are a couple of iterations that we made to the prototype. we decided to test with both new and old participants. It was great to hear the feedback.
Before
PROGRESS TRACKER
Before-Initially we had the tracker sliding from the right of the screen but when asked users mention that they didn't recognize it because they were focused on the instructional pop-ups.
After- We decided to move the tracker on to the pop-up as just a progress bar. Also, we included steps to keep users aware.
After
CLOSE & NEXT
Before- We originally had the word "close" but people kept clicking on it by accident so we changed the wording to "skip" but the feedback from users was that they weren't sure exactly what to expect.
After- We changed "close" to just an "x" on the top corner of the pop-up and then changed the word "skip" to "next"
Here are just a few of the participant's comments:
Old Participants
"It's like night and day"
"A million times better"
"If I didn't have this (onboarding) I would be stuck"
"...exactly what I needed"
New Participants
"I am familiar with this format, it makes sense to me"
"It probably would have taken me a lot longer"
"I can go through the motions but I'm still not sure what I'm doing"
HELP MODE- CREATED TO ASSIST USERS, WHO DIDN'T FEEL THEY NEEDED HELP ALL THE TIME.
I created the idea of Soaphub to organize the current resources and the new feature that we created, help mode. we created the help mode due to the fact that participants have stated that they don't like to admit when they need help.
Before
After
Before- We added an explanation to the help mode but some participants felt it was insulting.
After- The copy was changed and no one seemed to have an issue with it although they still weren't sure what they were looking out for.
Prototype
Thoughts & Reflections: DESIGN
Although the API tool is very bland, I feel that the onboarding was able to still show through and integrate. We made sure to keep in line with the style guide.
I really enjoyed the process of iterating after major testing and see that such small details can make a huge difference. Getting feedback often and early in our design process was great. I learned that I should not be afraid to show unfinished work as long as I can explain my design decisions.
Evaluate
NEXT STEPS:
CONTROLLING
We made sure to always make a way for the user to decide on what they want to do. The idea of trapping them is very concerning so would like to do further testing to make sure we are still helping the user feel empowered.
INTERFACE
Despite the onboarding transforming users' experiences, we still need to address the interface. Is the product tour just slapping a band-aid on the problem? Even making slight changes such as vertical to horizontal menus and hover states provide that visual feedback users want.