Published on | Prototyping: From UX to Front End — Medium Tregg Frank

A design challenge case study in which I learn the ambiguity of language in UX.

Spoiler alert, this is one of my final screens ^

I was asked by SendGrid to analyze their website (or another SaaS company’s website), and to improve something.

Since I’m not privy to their customer’s demographic information, nor their analytics I decided to approach their website with a critical eye and couple user tests.

Here are the steps I took:

Identified potential problem areas with a quick heuristic evaluation
Using Usabilityhub, conducted a few quick user tests
Made adjustments (Wireframes, user flows, and UI Design)
Tested changes

Heuristic Evaluation

Keeping heuristics in mind (referenced Weinschenk and Barker’s heuristics, as well as the Nielson Norman Group set of 10) I browsed the SendGrid site looking for any potential problems.

The one that stuck out to me the most was the “Try for Free” button interaction. I, upon clicking it, was anticipating I would land on a page describing the free trial or something similar. Instead you are currently greeted with a sign up form with very little copy.

This bridges into both Predictability and interpretation. Essentially, the user has a mental model of how the site will function and it is paramount to both match that mental model, and shape it when needed.

In my quick evaluation, I concluded that the “Try for Free” button may be lacking in predictability. But let’s see if I’m right.

Testing the existing site

I used UsabilityHub to conduct my user tests. Due to the limitations of my account being on a free plan, I had to make the test take less than 2 minutes. Thankfully I had enough credits to test with 5 people. I settled on testing for two simple and quick tasks:

Find the button to try the product on the homepage
Identify how to change your plan on the sign up page

I assumed a few things about SendGrid’s demographics. They’re probably professional developers, marketers, and founders. So, when setting up my tests I chose demographic information that would lead me to those types.

Demographic settings on the first user test

Operating under the assumption that ghost buttons have the potential to be bad for conversion, I was attempting to identify any possible affordance issues due to their visual weight.

Additionally, while self-referential in nature, I personally was confused as to what I was looking at upon clicking on the “Try For Free” button.

Existing Site Test Results

While it appears that users are confused as to where they need to click to learn more, all the areas clicked make sense contextually.

If a user is more of a “learn as much as I can before signing up” type, they may be more likely to compare other plans or read more about features before clicking into a free trial.

And, as it turns out, the two additional clicks lead to pages that have CTAs asking for the user to sign up.

Written responses to the firstfollow up question

This is where I found the most helpful information from the tests.

One user wasn’t familiar with what the software’s function was, which is fine as it does fit a niche. But the sentiment remains the same: they all were expecting more than a signup page.

They want to know more about what they’re getting themselves into.

I was personally surprised that users were able to find the account type button as easily as they did. While there was one user who did not click the correct spot, 4/5 did.

That said, my assumption was that users may want to know more about what they’re getting into and that validated by the previous question, so that’s the area I chose to tackle.

User Flow Diagram + Sketches

User Flow with comments. Click here to see a full sized PDF version.

I went ahead and created a user flow diagram and sketched some wireframes on sticky notes. Doing so helped me flesh out the interaction, fully understand what was required, and get the ball moving for the UI design stage.

Starbucks Sketching. Look at those sticky notes. They’re large.

And I had a pretty solid White Chocolate Mocha while I was at it. Normally, I’m a black coffee kind of guy, but today… today was different.

Final UI Designs

For these design I recreated elements to be as close to the SendGrid style as possible, and remixed their existing design.

The form portion is a screenshot of the original form, reworked to exist in a modal with carousel dots indicating place.

Test Results: The ambiguous nature of language

So, English is hard sometimes. I had to run two tests because I believe I lead test participants down the wrong path with poor wording, either on the test or the UI itself. I never claimed to be a copywriter…

The problems arose when trying to specify that I wanted to user to change their plan. It seems that the ambiguous nature. Technically, clicking the “select plan” could be leading users to “selecting their plan”…

Oops. 🙄

Nonetheless, if we fall, we pick ourselves back up. Or we spend 10 more credits to do another round of tests.

Now, this isn’t to say that the first round of tests was useless; quite the contrary. In the first round I had a preference question.

I asked if they preferred the old or the new and why.

Results from the preference testWritten explanations from the users that chose the new option

“This one seems okay” — Glowing review from an anonymous user

Even in the second test, one user replied that clicking the “Select Plan” button was them “Selecting a plan of sending 40,000 emails.” Which, while technically correct, wasn’t exactly what I wanted of them…

There aren’t 5 responses yet because it’s 12:46 AM 😴

But hey look, they seems to get that the dropdown is a dropdown. So that’s cool. Doin’ the ux.

Overall the results show that the dropdown was successful and that my new edits are a slight improvement. While clearly not perfect, and perhaps even forgoing any technical limitations for the existence of the current system, it was a success.

Since it’s likely possible that my choice of words was causing the problem, so in one last iteration I updated the UI to say “continue” rather than “select”.

Revised copywriting

Expected Impact

Assuming these results scale to the whole audience of the SendGrid website, you could expect to see much less bounce rate on the signup form. Users will have more context as to where they are, and the site will be behaving as expected.

Additionally, in this revised flow the user will have more potential to understand what the free trial itself entails due to the description coming to the forefront.

It’s possible to see a slight up tick in users upgrading their plans through this flow as well, but I did not test for that, nor do I have the metrics to measure.

And that should do it!

Thanks for your time!

My name is Tregg. I’m a product/interaction designer.

You can check out my portfolio at https://tre.gg/ and if you want to get in touch, email me at hi@tre.gg

SendGrid: Sign Up Interaction Iterations + User Tests was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

SendGrid: Sign Up Interaction Iterations + User Tests

Cool stuff, every week

More Articles