Website Revamp for Liba Education

Visit the site

Context

Liba is a platform providing project-based live courses taught by industry professionals. To increase leads and sales, I worked with a team of PMs, engineers, SEO, marketing to revamp the website.

What I did

Product vision & strategy
Research, prototyping, UI design
Mobile optimization
Coordinating content, SEO and UI
UI testing and iteration
Design QA

New website needed for the growth of business

Liba Education, has helped over hundreds of students get offers from their dream universities and companies through courses taught by industry professionals, which was a commendable achievement for a one-year-old startup. However, the current website which was the main channel for people to know about Liba, couldn't fully demonstrate the value it could bring to students due to being outdated and unorganized.

I converted the business question to human question, then tried to figure out the barriers and motivations of users applying for an online course, which were then compiled to define the design requirements.

For an information-oriented website, content is the key to drive customer experience and conversion rate.

Include content that is useful for visitors and convey the brand value

The old website didn’t have pages for student stories and instructor backgrounds, which were the most evident information to show Liba’s value. So I made individual pages for these two types of content.

Make it crystal clear what we’re about on homepage

Homepage is a visitor’s first glance into what Liba is about. The content elements were placed in an order intentionally, with each section also providing an entrance to access more details.

Fit together these content elements.

Use visuals to tell stories and engage visitors

A narrative video was used as the background of the banner on the home page, to engage customers at first expression. Contextual images of the programs, logos of the companies where instructors are and past students go, photos of students and instructors were placed properly to speak to visitors Liba's story.

Display information in a structured way so it’s easy to read

Tags, tables were used so it’s easy for prospects to scan the information and decide if it’s what they want to learn.

Mobile Optimization

Layout, interaction, and transition were tailored on the mobile so that the website is mobile-friendly and has a consistent cross-channel experience as well.

Make Design QA part of our workflow

I intentionally made Design QA an official step before releasing the website as inconsistencies crop up inevitably when design is coded. We noted and tracked things to fix through documentation. Those UX issues were described in a clear and contextual way, including screenshots, annotations and actionable items so it's easy for developers to understand and implement.