Palo

The authority in pay per call.

Overview

Palo is a pay per call marketplace that is helping publishers monetize their leads. Palo helps businesses to acquire customers by driving them inbound phone calls with highly interested customers on the other end.

Project goals

The goal was to improve the user experience and user interface.

Business Goals

Business goal is to attract new customers and increase profit.

role

  • UX
  • UI and visuals

Duration

  • 1 week, February 2019

Tools

  • Pen & paper
  • Photoshop
  • Illustrator
  • Adobe XD

The Problem

The old website had some major issues with visual hierarchy, visual clutter, typography, colors, and media.

Visual Hierarchy

There were no visual hierarchy, no alignment when you look at the website you have a feeling that everything is important. Too many things are screaming and fighting for our attention.

Typography

After inspecting the website, I found 8 different fonts that were used on the website. Also, the contrast between text and background in some places didn’t meet WCAG 2.0 standards. The content wasn’t easy to scan, and users had to spend more time to find what is important to them.

Colors and media

There were too many colors, images and background patterns that only made confusion to the users.

A quick look at before and after

Please have a look at before and after website. After a quick preview, you can read more about what I did to solve these problems and why. Enjoy.

Before

After

Solutions

Fact is that we don’t read pages, we scan them.
The old website was everything, but not easy to scan, so we had to do some work to solve that.

First things first

To solve the problems and improve the user experience we had to:

  1. Create effective visual hierarchies
  2. Break pages up into clearly defined areas
  3. Make obvious what is clickable
  4. Eliminate unnecessary distractions
  5. Format content to support scanning

1. Create effective visual hierarchies

People are usually in a hurry and have only so much mental energy that they can devote to the page. So the more we can strip away that doesn’t need to be there, the more we are going to help them focus and make easier decisions and that’s why creating effective visual hierarchies and reducing visual clutter is important.
Make important things more prominent and less important things less prominent.
Group similar things together and display them in a the same visual style.

2. Break pages up into clearly defined areas

Breaking pages into clearly defined areas helps the user to decide quickly which areas of the page are important for them and which one they can ignore.

3. Make obvious what is clickable

As users scan a page, they are looking for a variety of visual cues that identify things as clickable.

4. Eliminate unnecessary distractions

One of the great enemies of scannable pages is visual noise. Different users have varying tolerances for complexity and distractions, some people don’t have a problem with noisy pages, but many find them annoying. There are three different kinds of noise:
  • Shouting – when everything on the page is clamoring for your attention and users can be overwhelmed
  • Disorganization – no using grids to align the elements on a page
  • Clutter – to much stuff on the page
As we saw in before and after images, the old website had all of them, so we removed unnecessary fonts and stick only to three colors.

5. Format content to support scanning

To format content to support scanning we eliminated unnecessary fonts and used only one. We used 8 point grid, to align everything properly. To support scanning we used headings, short paragraphs and bullet points.

Wireframes & Mockups

Before any work on the design, I explored some variations of how to structure the site. I chose this version because it’s easy to scan and you can find the necessary information quickly.

Wireframe

Mockup

UI and Visuals

Typography

H1 – 42pt Semibold Montserrat
H2 – 36pt Bold Montserrat
Body – 24pt Medium Montserrat
Body 2 – 18pt Medium Montserrat
Links – 18pt Medium Montserrat

Colors

Graphics

Results

We have improved user experience on the website by making it easy to scan and understand. Users can find information and accomplish their tasks faster without unnecessary distractions that they had previously.

Thank you for reading this case study. If you have anything to ask or you are interested in collaboration, feel free to contact me.
Previous case study: Kuvo
View all work

Looking for someone to collaborate with, or just to say hello?
Feel free to reach me out 😀
mihajlobudo@gmail.com