Literator
UX + UI design, UX writing
〰️
Landing page redesign + branding for edtech company
Overview
The Client
Literator is an edtech company that helps teachers address the diverse reading needs of their class with custom prompts, progress tracking, and data reports for each individual student.
My Role
As Product Design Lead, I managed a team of product designers, UX writers, and illustrators, and acted as the liaison between our team and the CPO of the company.
Problem
Literator’s marketing landing page didn’t effectively communicate the product’s value proposition, which was reflected in its low conversion rate. Visitors who came across the landing page typically didn’t stay long enough to request a demo — their main gateway to product acquisition.
Hoping to lower the page’s bounce rate and increase conversion rates, Literator approached our team to execute a complete site overhaul, and in turn, increase visitor responsiveness. I led a team researchers and designers on a 6-week sprint to rebrand the site.
Solution
In the end, our team reorganized the information architecture of the landing page, rewrote copy to better communicate the product to consumers, and implemented a style guide that reflected brand principles. Visit the site here!
Final Tally
After a successful redesign, the website is now live on Literator. A summary of results from interviewing users before and after the redesign:
Quick preview of Literator before and after the redesign
“This site feels user-friendly —
there aren’t too many overwhelming options to click through.”
—
The Process
01. UX Research
Defining our audience
To start, we needed to know exactly who we were designing for: elementary school teachers. With input from our client, we created a persona that reflected Literator’s target audience. Meet Ms. Adams:
Testing the existing site
With our personas in mind, we tested the existing landing page for comprehension. We wanted to learn what visitors really thought when they saw the page. Eight people were tested, and this was what we found:
The page had a lot of text and information, yet the value proposition of the product was still unclear. People were also more likely to skim the page if their interest wasn’t immediately garnered at first glance, rather than trying to read and understand. There were content that the interviewers did not care for, and the information architecture definitely needed some rearranging.
Building a wireframe
To resolve the aforementioned issues, the research team reorganized the information architecture and incorporated (and removed) content to better communicate the product. Landing pages typically follow common patterns, and we analyzed Literator’s direct competitors in the edtech space to look at current trends. From our findings, we created a wireframe for the base of our landing page.
Along with some rewritten copy, we tested the wireframe to see if consumers would better understand the product. While the IA and flow of the landing page was an improvement, interviewers were still unsure of what the product is and/or does. The team would be shifting and fine tuning certain components in the wireframe as we revise the copy and incorporate the UI.
02. UX Writing
Setting the…
Voice
With our client, we determined Literator’s voice with a brand identity exercise. Literator’s main attributes are trustworthy, compassionate, and dedicated to the cause. It reflects their desire to help teachers save time and teach more efficiently.
Example — headline for “Product” page:
+ Tone
Their tone is conversational, and falls right in between personable and professional. While there should be an effort to maintain a playful tone throughout the copy, it is more important to be straightforward and clear.
For the landing page, it was important to give visitors just enough information about the product to catch their attention, but not overload them. On the “Product” page however, we incorporated research-backed details to help visitors understand how Literator can really benefit their classroom.
03. UI + Branding
Rebranding Literator
One of the main issues of the landing page was that our client didn’t think it represented their brand. Literator’s brand principles are: professional, trustworthy, and playful.
With that in mind, our UI team implemented design components to balance those principles. The original landing page had a mishmash of colors, illustrations, and text, so we thought a consistent and streamlined, yet colorful color palette would do the trick. We also thought a mascot would really cement Literator’s brand in the edtech space, making it more recognizable and marketable. Thus, our book and pie chart characters were conceived, as it clearly represents what Literator is for: reading and tracking data.
We designed the color palette around orange and teal, per our client’s request. In the case that Literator wants to expand, we created a style guide for their reference.
The Final Product
Putting it all together
The teams were codependent on each other for all the components to come together; the research affected the copy, which dictated a lot of the UI, etc. We put the work of all the teams together, and again tested the landing page with eight people. This time, the results were much improved.
We also applied the style guide to the “Product” and “Careers” pages, so the website remains consistent, as shown below.
Final Thoughts
Landing pages are strategic; from this project, I learned just how important every aspect of the landing page is, and how each section should engage visitors to scroll/click more, and thus learn more about the product.
Though a website may look “professional” or “design-y” overall, its content is the most impactful takeaway. What you decide to include, how you write the copy, and where you use color and illustrations so that they effortlessly guide visitors throughout the page — has to be carefully thought out and easily consumable, yet simple enough not to overwhelm.
Lastly, it is essential to be in constant communication with your client, to make sure that you are conveying their vision as well. It was incredibly rewarding to see how happy our clients were when they saw the final product. You can check out the website here!
