MyLiaison

Product DesignWebsite Design

CLIENT

MyLiaison - A platform for students to explore programs of colleges and universities and discover valuable resources. Liaison International, LLC

SCOPE OF WORK

  • UI/UX
  • Design System
  • Product Design
  • Website Design

TEAM

  • Project owned by Concentrical, LLC.
  • Worked in a team of 3 UX designers.

ABOUT

Background

MyLiaison is a groundbreaking website designed to connect prospective undergraduate and graduate students with their ideal educational and career paths.

The website’s unique features include high-value articles, detailed profiles of educational institutions, and lead generation for affiliated programs. Students will be able to explore content and programs of interest, save their profile information, and click a link bringing them to the application(s) of their choice.

The copy above is taken from this article.

Constraints:

  • Tight deadline
  • Features and objectives not clearly defined
  • Brand guidelines weren’t finalized

Overview

MyLiaison platform consists of 3 main modules:

  • School Directory
  • Article Directory
  • User Profile

Flows UX team mostly focused on:

  • Search and browse schools and articles
  • Create account and complete profile

Main UX objectives:

  • Landing page – Provide social proof since it’s a new product on the market. Lead users to search and browse school profiles.
  • School Profile page – Provide clear and concise information students actually need. Lead users to main CTA – Apply or Create Account.

PRODUCT DESIGN

Filter

Filtering search results is one of the platform’s most essential functions. It was critical to create an easy to use filter for users. We tried to employ the most user-friendly choices while maintaining accessibility.

Both grad and college filters use four different filter item types. Three of them are expandable and share the same heading, whereas one is not expandable and is simply a checkbox.

School Profile

We conducted competitor research to determine how we may improve the display of student-relevant information. Because most competitors use the same database as MyLiaison, the design and usability of these pages were critical in distinguishing themselves and keeping users engaged.

  • The type of school and association with liaison are indicated by the tags and badges at the top of the page.
  • Sticky navigation on the left provides overview of the content and easy navigation.
  • In certain areas, such as the Quick Facts section at the top, the boxes indicate the most significant information, which is shown prominently.
  • To make the statistics easier to read and more aesthetically pleasant, infographics were created.

User Profile Flows

We devoted a lot of time to designing fluid workflows for both the platform’s account creation process and any further user journeys inside the user profile pages.
Due to the constraints of needing to gather a large amount of information from users, it was a challenge to organize all of the necessary questions into logical sections and to create input fields that were simple to navigate.

Create account and Complete profile flows.

DESIGN SYSTEM

Colors

A challenging color scheme was handed over to us by the client. To make the palette easier to work with, we introduced just a few neutral colors to it.

School Profile Components

School profile cards, infographics and tables.

Resources Components

Some of the components created for blog pages.

Main Navigation

Input Fields

One of the most challenging components we had to create.