Lori Chen | UX Designer

Work

Art

About Me

Work

Art

About Me

Redesigned a Website and Brand Identity

Client project with Bosch to leverage machine learning, LLMs, and sensor hardware to design for a new user market

Client

Plus Personalized Learning

Duration

7 months

Team

Internship Project

Role

Design Intern

Task

Discover new use case for Bosch's machine learning and sensor tech by conducting user research and designing product mockups

Project Overview

I led our team's user research methodologies and based off our findings, I created mockups for the digital and physical product

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

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?

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

What I learned

This method helped students visualize possibilities in the moment but not remotely outside of school walls.

Something Digestible

What I learned

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

What I learned

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

Meet the New PLUS Site

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

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

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?

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.

Things I learned

Trying to appeal to every user might lead to appealing to nobody

After discovering our design goals, there were numerous ways to achieve what we want. After much time researching, I realized it was more informative to try out different methods.

There’s multiple ways to approach a goal but the best way is to just try

Although our main users, students, already had a working methodology for choosing classes through word-of-mouth, it doesn’t mean the design solution should be a more streamlined way of communication.

If there was more time. . .

I would work more on the page layouts and prototype different animation interactions to build onto the engaging, interactive elements of the site.

Things I learned

Trying to appeal to every user might lead to appealing to nobody

After discovering our design goals, there were numerous ways to achieve what we want. After much time researching, I realized it was more informative to try out different methods.

There’s multiple ways to approach a goal but the best way is to just try

Although our main users, students, already had a working methodology for choosing classes through word-of-mouth, it doesn’t mean the design solution should be a more streamlined way of communication.

If there was more time. . .

I would work more on the page layouts and prototype different animation interactions to build onto the engaging, interactive elements of the site.