Project Overview

Client & Goals

Literator helps teachers, particularly those working in underserved communities that struggle with literacy issues, track their students’ literacy. We worked directly with Jing, co-founder, to clarify Literator’s goals, product, and visuals on the landing page.

Role

I led the branding + UI team which produced the new typography guide, color schemes, UI components, and illustrations. I used Adobe Illustrator and Sketch.

Results

Literator has already published our design! Click here to view it in action 😍

Brand + UI Style Guide

Process

Branding

Competitive Research

We looked into other ed-tech companies such as Lexia, Education.com, Kiddom, and ClassTag. Some elements we that we really liked were:

• Friendly hero image

• Testimonials

• Clean, easy to read text

• Bright primary/secondary color palette

Typography

Ideally, Literator would use the same font across its landing page and mobile + desktop app; however, the app currently uses Helvetica Neue, we wanted to be a bit more creative for the landing page! (Literator is working to incorporate the same font across its platforms.) I chose Museo Sans Rounded because it is versatile with its various weights, and has the “playful yet professional” brand words the clients were looking for. The rounded and bubbly features are not overdone.

Illustrations

Everyone in the branding/UI team sketched out a couple of ideas for a mascot(s) to go on the landing page. We were inspired by websites like Education.com and ClassTag that had fun, subtle illustrations sprinkled throughout the website.

Then I invited all of the Literator team to help us dot vote and decide which style of character we should go with. We ended up with the book and pie chart!

After my teammates sketched out the final poses, I used image trace on Adobe Illustrator to vectorize them. I had to clean up each drawing so that the overall look was sketchy, but not messy. My process is outlined below:

UI & UX

My job was to add the visual elements to the new landing page wireframe, which had new concise copy featuring Literator’s product. We kept honing in on the details for the final screen and here’s what we got!

Before the redesign, we had 8 people to look at Literator’s website and asked them some questions to see if they understood Literator’s product and features. We asked the same questions to 8 different people after the redesign, and were pleased to find out that the new visuals, flow, and layout of the website helped users to understand Literator much better.

What I Learned

This was my first time leading a group of visual designers. I had to be extremely clear in delegating tasks and deadlines, and remember to follow up on them. I improved my skills on Adobe Illustrator as I was finagling a lot with the mascot vectors. I also learned how to make better icons on Sketch! Overall, this project was really fun and I loved contributing to a company that is extremely dedicated to equality in education.