UX Brief

The Scenario

  • User: John, 34, lives and works in Austin at a small financial firm as a Human Resources Assistant. He uses a 15" Windows laptop and an iPhone 6. He's an active reviewer on Yelp and Amazon and shops primarily by testimonials / user reviews.
  • User story: John has been tasked with finding software that automates staff Time-off requests and assists with Onboarding. He has two days to produce a set of options for the HR Manager to purchase. John searches for "hr software reviews" in Google and clicks the "Top Human Resources (HR) Software" link for Software Advice. After exploring the HR software category page, John isn't sure which software to choose. He decides he wants to learn more about the Software Advice advisor service. He clicks the logo to access the homepage and begins reading through the content. He stops at the "Buyer's We’ve Advised" section.

The Task

Refactor the UI

  • Refactor the UI of the homepage "Buyers We've Advised" testimonials, introducing elements to build trust, strengthen the company's reputation, improve time on site, and curate content displayed based on previous page views.
  • Provide a better overall experience for the user.
  • Strengthen the user journey and the section's click throughs and/or CTAs.
  • Define any mobile specific interactions.
  • Focus on desktop and mobile breakpoints.
  • Execute and style with creativity, excellent typography, thoughtful hierarchy, and trust-building features.

The Deliverable

Static, Code, Walkthrough

  • Sketch or wireframe, then provide high-fidelity mockups of the UI.
  • Build a responsive prototype using HTML, CSS, JS/JQuery
  • Walkthrough the hows and whys, and next steps around the solution

1. High-fidelity mockups

2. The prototype

View the "Buyers We've Advised" prototype

3. The rationale

Previously, there were three static and random reviews in this section; but, the site contains hundreds of thousands of reviews. So, the new UI would demonstrate this with a dynamic counter to lead off the section. Next, the site would use cookies or query strings to determine where the user was prior to landing on this section. With that information, the content would customize to let the user know that the site has captured the type of software the user is looking for, and the interactive slider would display the top five software reviews for that same category. This not only establishes trust, but also saves the user time hunting for the software they are seeking. Finally, the various options for engaging with the site are consolidated and organized into a neat space. The primary call-to-action remains large and upfront; however, the other ways in which a user can get more information sit in close proximity to the primary CTA. This also saves the user time and helps them decide which way they are most comfortable accessing the information they seek.

The UI stays on brand with the company's signature blue and orange, as well as employing its custom fonts. The experience is equally enhanced on mobile with large touch targets, larger type sizes and mobile-friendly swiping gestures enabled for the slider.