My UX Design Process

Discovery

When I started at Bluehost, I was assigned to the onboarding team, which included the guide on the homepage. When it was time to start updating the guide, I took the results from our user testing from the MVP version (see below) and have been working on a solution. The MVP is not a bad design at all, it just wasn’t getting updated based on how users were interacting with it. Here are some key takeaways from the feedback we received:

• There was a mix of opinions if onboarding steps are mandatory or optional

• Tasks didn’t look clickable

• The tabs were unclear and didn’t know why or how the tasks would appear there

• Users thought the tasks would get automatically checked off when the step was complete (which isn’t the case, they had to check them off themselves)

• When checking off tasks, some would disappear, others would be replaced with new copy, which caused a lot of confusion

• Users didn’t like the image chosen and felt it was overpowering the task list. Another user said, “Poor George! It’s overwhelming to look at this picture - he is carrying so much, everything is going to fall out of his hands…” (We definitely don’t want our images to overwhelm the page, or represent the disorganization the users were about to face)

• Final ratings showed that the overall USERIndex for the Guide page is 4.20. “Usefulness”, “Ease of Use”, and “Appeal” were rated the lowest - 3.8 out of 5 each. (The value of USERindex ranges from 1 to 5: 4.7+ is exceptional user experience; 4.2 to 4.7 is good user experience; below 4.2 means you have uncovered areas for improvement)

Research

Another problem with the MVP design was that the checkmarks weren’t working properly. I set up and watched hundreds of Hotjar recordings, watching users interact with the guide and its checkmarks. In the discovery from above, users said they were confused with the checkmarks, so I wanted to see it for myself. They kept clicking them over and over. I noticed that the tasks kept changing. Instead of it saying, “Completed”, the task wording would change, basically turning it into another task. For example, “Customize your design” turned into “Check out your web customization settings”. Is it the same task? Is it a different one? To have completed tasks becoming never-ending tasks never gave users a sense of completion. The “Skipped” and “Completed” tabs were not getting clicked on, either.

I also did a competitor analysis on how websites presented their guides.

Ideate

After doing my competitor analysis, I took note of their design patterns, features, and ux. Then I started sketching some rough ideas; one was to enhance the guide we already have and add more tools that the users wanted, a better checklist that was more interactive, and maybe adding a progress bar. Other ideas included a “wizard” type experience; card-style guide, and a list-style guide.

Here’s a quick bird’s eye view of more high fidelity guide ideas I’ve tried:

Prototype + Test

I had two high fidelity designs that I thought would work the best and wanted to test: the “Card” and “Expandable list” styles.

I put together the two prototypes, met with the UX research team, and came up with a plan to test users on usertesting.com. We got 9 testers (3 novice, 3 intermedium, and 3 experts on web design). We showed half of the participants Option A first, Option B second; the other half saw Option B first, then Option A, just to be sure the results were unbiased.

Here are some key takeaways:

• 5 out of 9 people preferred Option B, the expandable list

• All interactions were as expected, clear, and intuitive

• Option A: Feedback was all positive; they thought the design was attractive, clean, easy to scan, but a bit overwhelming. Cards were not in order. Skip links were hard to read

• Option B: Organized and less cluttered, but takes a lot of clicks to learn about each task. They liked how tasks are crossed off after completion

• In summary, people wanted a more guided approach. “Attractive vs Order” = people would rather have order;, they wanted even fewer tasks; complete & skipped tasks should be kept where they are but treated visually different; when the guide is completed, they wanted to see a dashboard of their website stats

Next Steps

At the time, while my team and I were waiting for the guide to get prioritized to start building, we wanted to at least update the guide we currently have that had pain points. We took the 30+ tasks and trimmed them down to about 12 most important ones. We also fixed the confusing checkmarks, that, when it was checked, it gave you another “task” to do, instead of it going away. Plus, the actions were so instant that it was jarring and confusing, like, what just happened? (See the video on the left). For the update (see video on the right), I made it so that when a customer marks a task complete, the task fades out with a success alert at the bottom of the screen that confirms the action that took place, with an “Undo” action if the customer wants to bring the task back. The animation makes the interactions much smoother and it’s easier to see what just happened.

As for the end result of the entire guide redesign, the company’s overall priorities changed and decided to pull all focus to our new website-building tool, which negates having a guide.