Learnable.ai

Brand identity and website design
leb_cover.png

Overview

Learnable, Inc. is a startup that focuses on building educational solutions powered by Artificial Intelligence (AI). As the UX Design Lead, I led a team of 4 designers to create Learnable’s corporate identity and official website: learnable.ai. I also acted as a front-end engineer and implemented our designs with code.


Lead UX Designer
Jan - Jul 2018
Jiaju Ma, Jiayu Zhou, Mengqi Wang, Lan Wei
HTML, CSS, JavaScript, Adobe XD, Illustrator, After Effects

Problem

Learnable, Inc. focuses on developing AI-powered solutions for educational institutions. Their products range from Optical Content Recognition (OCR) engine for mathematical problem sets to classroom monitoring system. It already has a strong team of engineers and researchers. However, they lack any visual identity that represents the company and explains their mission and products. Moreover, their products are technical solutions, instead of tangible products. Traditional still graphics do not satisfy the purpose of showcasing and illustrating the features and functionality of these non-physical products.

Process

My team and I took different approaches when designing the corporate identity and later the official webiste. We want the corporate identity to reflect the vision of Learnable's core leadership, so we had many rounds of meetings and discussion with them before we started our design. Corporate identity was completed first to ensure a cohesive style for the webiste. Moreover, since the website should reflect faithfully the functions and features of Learnable's products, we worked closely with program managers and software engineers in order to know the latest development.

Corporate Identity

leb_process_1.png

Official Website

leb_process_2.png

Findings

The co-founders want the identity of Learnable to have a mixture of two qualities: developing cutting-edge technologies, while maintaining a sense of approachability. Moreover, the company’s current clients are mainly academic institutions and other educational companies, and thus the unique and advanced features of Learnable's products should be highlighted for such enterprise audience.

Client Personas
school_1.png
school_2.png

Branding

In order to fulfill the co-founders' twofold vision for Learnable, I decided on a color palette of soft blue tones, and used a combination of sans-serif fonts.

Color Scheme

leb_colors_4.png

Typography

leb_type.png

Logo Drafts

leb_logo_drafts_2.png

Final Design

leb_logo_line.png

Website Design

Due to the nature of Learnable’s solutions, I decided to create a series of motion graphics to illustrate the main features of the solutions. Also, the website is made fully responsive to accommodate users using any device.

Landing Page Motion Graphics

Home Page

leb_phone_home.png

About Page

leb_phone_about.png

Career Page

leb_phone_job.png

Structure

Information Architecture

leb_information.png

Wireframes

leb_wireframe.png

Other Pages

Product page 1

leb_eke.png

Product page 2

leb_ecr.png

Product page 3

leb_cca.png