Tagboard

Improving Website Usability on Error Pages

Date: Dec. 2016 – Feb. 2017   |  Role: UI Designer  |  Team Size: 9 |  Software: Sketch, InVision, Photoshop, Illustrator

Company Overview

Tagboard is the easiest way to discover social media posts and quickly share it with your audience. Tagboards are used for campaigns by thousands of brands, sporting teams, and media companies to create billions of impressions. You can see them embedded on websites, integrated into mobile apps, shown on large displays and live broadcasts worldwide.

The Challenge

The product team wanted to improve usability of the platform and found that the 404 error page didn’t provide the user with a path to relevant content.

Design Brief

Objectives

• Better understand who hits a 404 page and track their steps by setting up analytics.

• Redirect a user to another page relevant to them.

Solution
Redesign the 404 page to inform the user, offer redirection, and make the experience pleasant without major disruption to their flow.

IA / User Flow

Our developers tracked all possible ways to hit a 404 error page on the platform and extended the scope to include the 401 error, "unauthorized". It was found that a live display was visually being served a 404 error to the user.

From there we explored possible user scenarios and noted information to track on future hits.

We wanted the 404 page to address new visitors, non-paying customers who use our search function, and paying customers with regular traffic. The suggested flow for those users accommodates both signed in and signed out experiences.

User Context | Platform
Signed-In: User is searching and curating content to their tagboards for upcoming live displays with their hashtag.

Platform 404 “Not Found” Page

The final design for the platform 404 page offers a simplified version of the site. Reducing the content noise to essential links, the user is easily guided to sign in or continue to their dashboard.

In a visual exploration, the first iteration of Tagboard’s illustrated character was used to add humor and empathy for the user’s experience. The copy is respectful of their time, while the illustration is respectful of their emotions.

Live Display 401 “Unauthorized” Page

The final live display 401 Page has low-contrast and a subdued palette which produces less glare. For users displaying their tagboard in stadiums or public events, this discreet authorization page allows them to quickly access their content without compromising details of their account.