Keylinks

KeyLinks isa reading list management system used by academic, public and health libraries to organise and manage content into reading lists.

Year

2020

Team

Kortext

Project Type

Product / UI design / UX collaboration

Role

UI Designer

Project Overview

Redesigning for librarians

I was brought on to help redesign Keylink's marketing site interface and develop a design system that would be adaptable, expandable and flexible as the platform grows and evolves.

Challenge

○ Unclear messaging
○ Confusing information architecture 
○ Inability to find relevant information
○ Unnecessary clicks and inconsistent content blocks
○ Lack of contrast and low readability which impacts UX significantly 

My Role/Responsibilities

UI Designer
Design system management
UX design. support

Research & Planning

Differentiating in a dense, competitive landscape

A visual identity, marketing website, and product had already been created before I was brought onto the project. These elements served as jumping off points for the development of the design system.

Competitive Analysis

The first step I took was to conduct a journey map to understand potential pain points of the platform.

Old designs

Before the redesign, the Keylinks website had a busy design, complicated user paths and a relatively slow load speed.

Design

Establishing a fresh, dynamic and scalable design system

With a clear scope of the competitive landscape, I developed a design system that was visually calming and easy to use though the following practices:

Design System Ethos

01

Minimal, purposeful use of color

02

Typographic hierarchy and contrast make important information stand out

03

Similar component layouts that repeat throughout the dashboards

Typography

Open Sans was chosen for its classic, neutral, Helvetica-like qualities and it's legibility at small scales.

Color Palette

Using the four hues of the Keylinks identity as a starting point, I expanded the colour palette to accommodate the needs of the platform’s complex dashboard system.

Key Considerations
  • Shades of the primary colors facilitate visual hierarchy
  • Clear messaging is created via a bold secondary palette
  • Contemporary and vibrant tertiary tones standing out in the marketplace

Final Dashboards

Images speak louder than words

Most people perceive and decode images much faster than words. In the final design, the hero image is an informative part of the page, providing a quick visual message about the content. We aimed to gain potential costumer's attention and keep them on the site. After the redesign, the new website is clean, easy to use and fast to load.

Home Page

The new hero image instantly grabs attention and allows for setting the quick visual, emotional, and informative connection with the user.

Illustrations

Illustrations can also serve as visual markers for categories of the content or rubrics of the copy. These visuals helped us with the messaging.

Final outcome

Live website

We focused on storytelling in the format of the each landing page. We introduced useful information about what Keylinks offers and supported with illustrations.

More Case Studies