Meet Super Shop World, an entirely-fictitious e-commerce brand. They have an established presence and maintain strict online brand guidelines. Recently, they added customer ratings and reviews to their site, and followed those guidelines to a T:

The look and feel is entirely on-brand and fits in quite well with the rest of the site, but will users be getting the most out of the user-generated content (UGC) with it designed the way it is? Probably not. With a bit of envelope-pushing, Super Shop World could alter their brand standards for UGC and win big.

Here’s how they can boost user experience and value to both consumers and the brand by following six, simple principles.

1. Embrace whitespace.

Whitespace is essential to making your UGC easier to scan and read, because it…

2. Vary typography.

Mixing in new font-sizes and colors to your styleguide can boost usability because variety helps to…

  • Establish a clear typographic hierarchy, giving the user a clear starting point and making complex content easier to digest
  • Prevent information overload by highlighting primary elements such as review titles and scaling back less important elements such as dates

3. Expand iconography.

Adding a new set of icons to interactive elements of your UGC boosts your brand and the content’s usability because they…

  • Make the content more visually appealing
  • Reinforce functionality of clickable interaction points such as feedback voting buttons
  • Present a new opportunity to design branded elements

4. Don’t reinvent the star.

Accepting the star as your main rating graphic of choice is another way to boost usability and your brand because …

  • The meaning of the star is easily understandable thanks to its ubiquity
  • Stars work for many different products and services, thanks to their generality
  • Stars can be styled with your brand’s accent colors to make them to stand out on the page

Don’t forget your secondary rating graphics either. In the example above, you’ll see that we changed the smaller globes for the price and quality ratings to solid circles. This solid shape makes them easier to read at a smaller size and their simplicity helps them stand apart from the overall star rating.

5. Celebrate contributors.

Call out contributor achievements and boost usability and your brand by …

6. Elevate the reviewer’s voice.

Reinforce the authentic, personal nature of the content and enhance the credibility of your content by…

  • Grouping user information in the same area
  • Adding a user avatar graphic as a visual anchor for the user info section
  • Using graphics like speech bubbles (if your brand is more playful) or quotes (if your brand is more serious) to surround the review content

So there you have it. Not only is the overall experience more usable, legible and inviting, but we also found areas where we could build in functional, branded elements that didn’t exist before. Above all, you’re the expert about your brand, but keep in mind that you’re creating a new design pattern for your web site when adding UGC. Being open to expanding your online style guide is a surefire way for you and your users to get the most of it.

6 Responses to “Six UGC design principles to elevate user experience”

  1. Billy Hollis

    Still such a great article! Timeless principles that are so effective. Well stated.

  2. Jeri Bowers

    Very helpful! The last example looks much improved compared to the original!

  3. Elyse Holladay

    Great post, Matt. I love the way you gave a detailed explanation of each step and clearly illustrated them along the way. Thanks for doing such an awesome job representing Design and why what we do is important! :)

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>