Website Redesign . 2021

CentSai Education

My Details

UXUI Designer,
Sketch, Zeplin, Jira
2 weeks

Overview

CentSai Education is a B2C site with student-focused content looking to shift to a B2B site aimed to introduce the learning management system (LMS) tool as a means to provide this content for schools.

My role involved redesigning the site fit for the new business model such as updating the information architecture, providing directions for the new language on the page, and redesigning the layouts of each page.

 

Design & Iterate

In collaboration with

Head of Education Service
Business Dev. Team
Editorial Team
Engineers

Part 1_ Information Architecture
Part 2_ Homepage Redesign
Part 3_ New Pages: LMS + Courses

Going into the project, multiple meetings were held with the Head of Education Service and the editorial team to cover the expectations and exchange ideas.

Along with the major updates on the structure of the website, the team was looking for a new look and feel as the design hasn’t been updated since the site launched in 2018.

Part 1

Updating the Information Architecture

CED_user journey chart.png
 

Understanding the New Target User

Before designing anything, it was imperative to understand the new users. New users’ motives in visiting the site would change drastically than that of the previous, and the content the site provides had to be updated accordingly.

 
 
 

New Information Architecture

To align with the new business model, some of our pages were to be removed while introducing new pages.

Pages with customer-facing content like Resources and Educator Spotlight were removed and only selective content pieces became available to the public as previews under a new tab called ‘Courses’.

A new page, Learning Management System, would cover any important information about the LMS.

 

Part 2

Homepage Redesign

CED_NEWHOME_1.png
 

Implementing New Elements

1) A summary was included introducing CentSai Education’s vision and the LMS product for our prospects. Along with the summary, two CTAs were added for our prospects to learn more about the product and/or request a demo.

2) The list of topics was replaced with types of mediums as our clients responded well when hearing the various content types the company offered.

3) Interface for newsletter sign-up turned to a header instead for better visibility.

 
 
CED_NEWHOME_3.png
 

Re-interpreting Elements

The content pieces were removed for exclusivity. Instead, the new design highlighted the multi-media aspect which also served as major interests for our clients.

 
 
CED_NEWHOME_2.png
 

Interface Updates

The interface embodied the new look and feel of the site while increasing the readability by replacing distracting color elements with a clean background.

The Education Service Team wanted to eventually add more quotes from their clients, and this new slider design allowed that without cluttering the page.

 
 
CED_NEWHOME_full.png
 

New Look and Feel

While the Education Service team was happy with the existing brand image, the team wanted a friendly yet clean look. So without stirring far from the original brand image, I focused on making the overall interface cleaner with more white spaces with hints of quirky illustrations and fonts.

These new updates highlighted the important elements with a friendly tone.

 

Part 3

New Pages: LMS + Courses

CED_LMS_1.png
 

The goal of the LMS page is to communicate the product’s values to the prospects take the conversation further. The orange CTA will download a one-pager PDF file to share or print.

 
CED_LMS_2.png
 
 

Working with the editorial team, the three summaries answering ‘why us’, ‘how’. and ‘what’ are properly created and revised. Working with an illustrator, unique and brand-specific images - almost like mascots - are created. (Perhaps these mascots be used in social media marketing)

 
 
CED_LMS_3.png
 
 
CED_Courses.png
 

Every page under ‘Courses’ tab consists of four sections: a short course description, CTAs to take actions, two content pieces for preview, and a grid to see other courses.

 
 

Implement + Launch

In collaboration with

Project Manager
Engineers

Even during the design process, I was constantly conversing with the project manager and the developers on the technical effort the new updates required, plus the bandwidth of our developers.

Before going live, the new design was first implemented on a prelaunch site to be tested for the responsive design on different screen sizes and check if everything functioned properly including the buttons.