Slant.co

Redesigning a product by solving real world interface and user experience issues. The final result saw an increase in user interaction by over 200%.

Slant is a collaboratively edited Q&A site designed to help people make choices about what products to use or buy. Slant's aim is to take the pain out of product research to help people quickly make informed decisions.

I was brought in as a contract designer to evaluate some of the pain points of their product, and improve upon as much as possible with a tight schedule and budget.

What we started with

The core product consists of question pages, and answer pages. Question pages can have multiple answers to that question. Answer pages have facts about the product.

The primary goal was to increase user interaction on the website. To do that, we wanted to improve the rate that they clicked through past the homepage.

The original homepage

Homepage Before The homepage featured large boxes showing the days most popular topics. Each box featured multiple screenshots showing the top solutions, and a prominent red banner showcasing the number one solution.
Issues
  • Not enough items on page

  • Heirarchy difficult to read

  • Layout not informing concept

The homepage had a lot of content on it, but it wasn't being conveyed appropriately. The information hierarchy wasn't highlighting the key information, and the information density was very low.

The original question page

Question Page Before The question page showcased a list of possible solutions to the question a user asked. The solutions were presented in large boxes
Issues
  • Hard to see multiple solutions at a glance

  • Poor use of space with low information densi

How can we better show the depth of the content?

One of the challenges we tried to solve was how to improve the visual hierarchy on the homepage. Most importantly, how to solve the visual heirarchy of the questions listed.

The original, and two options are shown below. We took the original, and modified it so that the question felt like the most prominent aspect of the box. Everything else came after in the hierarchy. We introduced extra information from the answer page into this area, to clarify the options available to the user.

Question listing variations

Homepage Question (original)
  • Unclear what options are shown

  • Unclear how well each option is doing

  • Top answer is the most prominent part of the hierarchy, taking precedence over the question itself.

Homepage Question Revised
Features
  • Prominent list of top 3 answers to the question

  • Clear indication of the category, and similar topics.

  • Positive and negative votes for each answer is shown

Homepage Question Revision (Alternate)
Features
  • Same as above, with further use of color, and votes shown next to the question.

Iterating on the homepage

We experimented a lot with different styles of presenting the information. The goal was to convey to the user that there were many options available to them at a glance, and to convey the pros and cons of each one in a scannable way.

The first step was to increase the heirarchy of the question to make that the focal point of the page.

The next step was to shrink the answers to the question to allow the page to become more scannable, allowing the user to get a quick consensus.

Card Style presentation on Tablet (left) & on desktop (right) This was one idea we tried. We converted the previous answer sections into cards, and adjusted the heirarchy within the card to convey the information appropriately.

The Final Design

While the card approach seemed like a viable option, we ended up going with a more traditional list view. This design was based heavily off of the original, but with a more compact layout and higher information density. The result is cleaner and easier to scan.

Final Question Page (Left) & Final Homepage (right) These are the final designs used on the website today.

Chart of user interaction

As soon as we launched the first iteration of the design (above), Slant was tremendously happy with the results, citing the redesign as having caused over 200% increase in user engagement.