Redesigned a Website and Brand Identity

Redesigned a Website and Brand Identity

Project with AI startup to redesign + rebrand the website
Project with AI startup to redesign + rebrand the website

Client

Plus Personalized Learning

Duration

7 months

Team

Internship Project

Role

Design Intern

Task

Redesign the website, branding, and design system for Plus Personalized Learning

Project Overview

I led the timeline and visual conceptualization of the rebranding and redesign.
Check out the new website
As a design intern for PLUS Personalized Learning, I spent 2 semesters working alongside the web development team. For the first portion of my internship, I maintained and updated site content while also creating new relevant assets for the site pages.
For the second half of my internship, I was responsible for onboarding four new design interns to the web dev team and leading our website and branding revamp project. I was given a Figma file with the previous design language decisions.
My first step was to analyze how we got to the current design, where we want to go, and how do we get there.
Initial Questions

Getting to know PLUS

Getting to know PLUS
Before updating the PLUS brand, we need to learn about what PLUS is all about
What does PLUS even do?
PLUS is an non-profit, AI tutoring startup that focuses on promoting equity in education to underserved middle schools.
By combining human and AI tutoring, PLUS aims to bridge the opportunity gaps in math education.
Who are the users?
PLUS has multiple users that use its resources but not everyone needs the website.
• Tutors use the AI tools to curate and track student progress.
• School look to the website to learn more about how PLUS works and if they want to incorporate it to their schools. Parents are an important stakeholder to schools and need to know what their children are learning.
• Investors need a way to see what PLUS is about and why they should help the cause
What are the pain points of the current site?
From analyzing the home page, I found the following issues about the site:
• Unclear wording about the product or what the site is about
• Confusing information hierarchy
• Layout feels very standard but not innovative
What would success look like?
The website should prioritize showing how AI tutoring works to the middle schools and parents.
Although PLUS has multiple users (students, tutors, school admins, parents, investors), the website is not for everyone.
The site should be a place for schools and parents to learn more about PLUS and to explain why they should partner with PLUS.
Primary Research

What message should the site give to users who are looking to learn more about PLUS?

What message should the site give to users who are looking to learn more about PLUS?
As I start to brainstorm ideas for the new brand identity, I need to research what our intended messages are to the users.
After aligning with my design manager and fellow designers, I have the following goals for the site and brand identity.
The new site should be . . .
Informed + Knowledgable
The site should convey how our product is backed by research.
Approachable + Accessible
Our mission is to serve middle schools so the language and tone should be easy to understand.
Fun + Enjoyable
The site should showcase our product and company as an innovate yet enjoyable addition to education.
So how do we achieve these things?
To ensure I convey the right messaging to our audiences, I need to make sure the colors, typography, and assets align with our tone. In other words, let’s update the design system.

Colors

Before
There is a range of colors, but the dark saturation makes the branding more mature and professional.
After
Still keeping a variety of colors, they are now brightened for a more youthful, fresh look.

Typography

Before
The font Lato is used to give a reliable, classic, and versatile feel.
After
Keeping to sans-serif, I’ve update the font to DM Sans to maintain the versatile feel while the larger letter spacing makes the tone more modern.

Pattern Library

Before
A cascading layout makes the site easy to navigate but lacks excitement or differentiation from most sites.
After
By updating it to a bento box format, the info is still easy to read while providing a more visual, modern, and playful appeal.
Iteration Station

Time to Design

After updating the design system to resonate with our desired values and message, I can start wire-framing possible designs.

Here's what I tried

Something Eyecatching
Main Takeaway
This method helped students visualize possibilities in the moment but not remotely outside of school walls.
Something Digestible
Main Takeaway
This method gave me a better understanding how how students think of themselves but didn’t really get students to think about their future selves.
Something Knowledgeable
Main Takeaway
This method was helpful to see how students organized and visualized class info but didn’t really help me understand the student themselves.
The Solution

A website layout that represents the info in an approachable, informative, yet fun way so schools and parents can feel confident to rely on PLUS for their tutoring needs

A website layout that represents the info in an approachable, informative, yet fun way so schools and parents can feel confident to rely on PLUS for their tutoring needs

Meet the New PLUS Site

Meet the New PLUS Site

Simplified, Relevant Info

Simplified, Relevant Info
With the bento box layout, information is easier to digestive while scanning. Viewers can see important bits of info more clearly.

Vibrant Colors

Vibrant Colors
The muted tie dye background and colorful components connect with PLUS’s message of being a young, innovate, and fun brand.

Playful Illustrations

Playful Illustrations
The illustrations bring more attention to the images, guiding viewers to important bits of information in a more playful way.

How's this different from the old site?

How's this different from the old site?

Before
After
In the new layout, the updated font size, content, and format make it immediately clear to viewers that PLUS is about math tutoring through tech.
Before
After
The updated layout displays the information in a more engaging way by breaking up and separating the statistics and incorporating icons to draw in the viewer’s eyes.
Before
After
The new site also informs the viewer more relevant, easy to read content by blocking off information into different sections with large headings and including more photos of actual students and tutors.

What's the outcomes?

2x

Faster prototyping

30%

Reduction in redundant design work

1

Unified design system

What's the outcomes?

2x

Faster prototyping

30%

Reduction in redundant design work

1

Unified design system

What's the outcomes?

2x

Faster prototyping

30%

Reduction in redundant design work

1

Unified design system