Peer
Spot

Improving key product metrics while re-branding

Branding
Research
UI
Mobile

Overview

About Peer-spot

PeerSpot is an online community where enterprise tech decision-makers go to read unbiased peer product reviews in Cybersecurity, DevOps and IT. PeerSpot takes pride in providing reliable, detailed, long and thorough information by leveraging peer reviews from trustworthy and relevant professionals.

The project

Following a rebrand to the company (focused mostly on the marketing website), I proceeded to implement the new design language to the platform itself, while taking the opportunity to improve on key metrics.

acknowledgement

This project, and the branding project preceding it, was done as part of my work at Karen Segev's studio. My role was hands on design, working along with Karen my manager, and collaboration with Michael Shmilov - PeerSpot's VP Product, and the Marketing team.

Goal

Make the switch to the new visual branding without damaging conversion rates and SEO ranking.

Improve discoverability of relevant information

Starting point

PeerSpot had two websites:

  1. The platform itself
  2. Marketing website

Prior to this project I have worked on the re-branding of the company and redesigning the marketing website.

Old marketing website

New marketing website

Old platform

New platform

It was now time to implement the new design language on the platform.

Research

The user

Decision-makers in Forbes 1000 tech enterprises, looking to implement a new service. The implementation will have a big impact on the company, for better or worse, so getting reliable information is key before making a commitment.

Metrics & Data

  • Avg. time on page was over 2 minutes.
  • Users tend to read through the reviews - clicking on expand and scrolling (the reviews are long!).
  • Users tend to read through 1-3 reviews, not more.
  • Users check to see details about the reviewer - who are they, their title, company…
  • Users tend to focus on the overview and pricing sections before diving in.

Hierarchy

Important elements were not prominent enough, while un-important elements were too prominent.

Navigation

Some links sent to a different page and some were anchored to the main page.

Interface Fail points

Insights

1

When the content is relevant people will spend the time needed to read through it, regardless of its length.

2
3
4

Reliable reviewer = reliable content in the eyes of the user.

The most valuable information for the users is: overview, 2-3 relevant reviews and pricing. Therefore they should be viewed first.

Fixing hierarchy, navigation and layout problems might improve performances.

Branding

Concept

Content first. As PeerSpot takes pride in their high quality and thorough reviews and position themselves as the leading platform in the industry, the content should speak for itself.

Values

  • Confidence
  • Thoroughness
  • Trust
Primary Yellow
#FFD700
#ffffff

Colors

Bright, clean and minimalistic. Brand color is yellow: Optimistic, energetic and fresh in a blue-purple digital world.

Primary Black
#08090D
#FAFAFA
#F5F5F5
#E5E6E1
#4C4C4C
#666560
#848484
#A9A9A9

Font

Drawing inspiration from high quality content platforms:

  • Using serif font for the H1 titles and text body, associating with old, established, and reliable sources.
  • Using san-serif font for interactive components and secondary titles for practical reasons and balancing towards a modern look.
Medium.com
The New York Times

Interface

Mobile first

To get a better understanding of the right structure and the minimal information needed, I started by designing mobile first, focusing on the information hierarchy and basing my decisions on the usage data and company goals, bringing the most valuable sections to the top.

Change mockup view:
Hierarchy
Interface
AWS Directory Service
3.7
352 reviews
18 Discussions
2. Product headr
3. Product navigation
4. Overview
6. Download buyer's guide
7. Pricing
8. Comparisions

Compressing information

25% of the mobile users dropped after the first full height scroll, by the time they get to the fourth full height scroll this number dropped to 50%.

My aim was to compress as much information as possible to reduce scrolling while maintaining clarity, usability, and SEO needs.

AWS Directory Service
3.7
352 reviews
18 Discussions
Adjustable header on scroll
AWS Directory Service
6. Download buyer's guide
7. Pricing
8. Comparisions
Vertical scroll product menu
Featured reviews as cards on a carousel
Expandable snippets

Reviews anatomy

Being the centerpiece of the PeerSopt product, I took special care in designing the reviews.

  • Reviewer’s face is as large as possible to strengthen the idea that there is a real person behind the review.
  • Social proof such as badges, number of likes and shares to enhance reliability.
  • The reviewer info bar is sticky and adjustable while reading the review to maintain orientation.
  • “Jump to previous/next” button for ease of navigation between those long reviews.
  • Newly added ability to comment on reviews and start a discussion to strengthen the community and improve SEO.
AWS Directory Service
Jane Cooper
FileMaker Developer, Agile Software Quality Analyst, Consultant and Office manager at ICONIX, 10,001+ employees

Desktop layout

The old layout was very narrow, 980px in total. Adding to that, the inner split between the content and side-bar and the content was only 700px wide.

This made it hard to create versatile layouts and increased the height of the content, leading to extensive scrolling on the page and pushing down relevant information.

Old desktop layout

For the new layout I widened the page container to 1088, and since all the content in the sidebar already found a place in the main content I decided to remove it completely.

New desktop layout

Next Step

The new design is being incrementally implemented in order to monitor and measure the effect of the changes and allow us to make adjustments as we go.