LanguageLine

A series of screens from the redesigned LanguageLine website, shown in the context of a desktop computer

Overview

In 2023 LanguageLine LLC, an interpretation and translation provider, contracted Hero Marketing to refresh their brand. In addition to various print, copywriting and video projects, Hero was tasked with updating the LanguageLine website. The team (comprised of copywriters, designers, developers, and the client) was spread out over 4 states and 3 countries, so a design system was necessary to align the team and speed up the process. I was brought in to assist with translating Hero’s print designs into modular components for the website.

responsibilities
Design System
Brand Coordination
Tools
Figma
Adobe Photoshop
Adobe Illustrator
role
This was a client project at Chronos Interactive. As Senior UX/UI designer, I worked closely with the team at Hero Marketing to complete the project.

Site Audit

Design System

Wireframes

UI Design

QA Checks

Audit of Current Site

The first step in the process was to audit LanguageLine's current site, which was built on the Hubspot platform. The client was hoping to re-use some of the existing components where possible so we evaluated and and sorted them into three groups: components that would need slight style refreshes, components that would need architectural modification, and components that would no longer be needed. In addition, based on the copy decks, a list was drawn up of new components that would need to be created.

Example screens of the design library for the LanguageLine website

Style Guide

While the site audit was being performed, I began work on the style library. I started by documenting the foundational elements of typography, colors, and grid system. As the design process progressed, the library expanded to include  button styles (with all states), shadow effects, and a full icon set. Every component for the new LanguageLine site was comprised of styles and elements from this library.

Typography
‍Where possible, typographical styles were given names that were separated from functionality (e.g. ‘headline-2x’ rather than h1) in order to keep the styles more universal and agnostic from HTML semantics.
‍
‍Color
‍A series of color palettes was created and suggested color pairings/distribution  defined. Additionally, color and background combinations were evaluated for accessibility based on their ability to comply with WCAG recommended contrast ratios.
‍
‍Grid system
‍Because this was a refresh of an existing site, it was important that any new components created would follow the size and spacing guidelines already set out.

Component Wireframes and Page Templates

Based on the results of our site audit, the team at Hero came up with a list of components for the site build. These components were a modular system of horizontal blocks that could be placed on a page in a variety of configurations to create unique page templates. The blocks had to work seamlessly with each other in whatever configuration they were used. Additionally, they needed to be flexible/scalable  to accommodate fluctuating amounts of content and variable elements.
An artistic rendering of mid-fidelity component wireframes for the LanguageLine website
An illustration of a webpage wireframe turning into a high-fidelity design

Layering on the Design Language

Once the wireframes had been approved, the styles from the design library were applied. In a matter of a few hours, by combining the wireframes and design library, we had high fidelity designs of around a dozen unique page templates. The frame of each page could be built in less than 30 minutes, and from there it was a matter of flowing in  new content and swapping out images.

Developer Handoff

During the wireframing stage, the developers had been consulted to make sure that everything was on par with the project scope and no modifications would need to be made to fit the timeline and budget. Once the component designs had been finalized, Figma files were handed over to the developers. Included was:

  • A style library, including svgs of all icon sets
  • A component library with contextual notes for component behavior and variables
  • Fully built out page templates as they were approved by the client
A close-up sample of the types of in-context instructions given to developers during design hand-off
A series of page designs from the LanguageLine website

Results

Utilizing our system, the design team was able to rapidly build out nearly 70 pages of content for client approval.

The design system and pattern library of components provided the development team with a single source of truth from which to reference - minimizing the chance of repeated work and conflicting styles.

Past initial launch, the client now had a library of over 30 fully modular components that they could use to seamlessly update their site and create new pages where necessary.

View the site

www.LanguageLine.com

Please note that this site is connected to a client-managed CMS. As a result, page layouts and graphics may have changed since site launch.