KR Tutor Site: bringing a small college prep company's values to life in their web presence.

KR tutor, an in-home pre-college tutoring company in suburban Chicago, needed a website update. They needed a designer to update and streamline their website, and better communicate their company’s values to convert new users.

TL;DR

To summarize the summary of the summary:

Through the design company Phlint, I was given the task of redesigning the landing page for a small tutoring business in the Midwestern United States.* The KR Tutor* team specializes in college essays and tutoring for preparatory exams such as the SAT and ACT. They seeked a designer who could interpret and bring the company values to life with strong branding and UI.

*Prompt and project not sponsored nor commissioned by KR Tutor.

Role: Product Designer
Tools Used:
Pen and paper, InVision, Adobe Illustrator

The Problem

The website was out of date, and they needed a design update as well as a visual and technical audit of their current website. How do we convey their company values in a way that will attract new customers and keep them engaged?

Process

My process followed the following structure:

Explore, Understand, Evaluate, Sketch, Expound

(Based on Susan Verba’s Sponge, Filter, Voice)

Explore

for deeper understanding.

In order to design the best web presence for KR Tutor, I first immersed myself in their current website to determine where the problems lay from both technical and design perspectives.

In short, there was a lot to work with.

KR Tutor Screenshots, April 2017

Some salient discoveries were:

  1. The website was not responsively coded or designed, This makes viewing on mobile devices difficult; that is significant, since 2 of every 3 minutes spent online are on mobile devices. *
  2. *Source: comScore via Hubspot.
  3. There are three typefaces in the Impresa Wordpress theme. This is visually distracting, and doesn’t add to the practical value of the site.
  4. Contact information is not available anywhere on the website, which will drive away 44% of website visitors. * According to 51% of people, this is the most important element missing from many company websites. *
  5. *Source: KoMarketing, via Hubspot.

Understand

a.k.a. how to conduct user research when your users are 2000 miles away.

The next question was: who are KR Tutor's users? KR Tutor’s clients are parents in the midwest seeking college preparatory tutoring for their high-school age kids. Because data fromKR Tutor was sparse, I did outside research in order to make educated, statistics-based conclusions.

SAT tutoring in the Western Surburban area of Chicago costs $55 per hour on average *, so I inferred that the users are likely to be middle-class income families, which implies a median household income of $54,726. ** Given that the parent that is using the website is likely to be working as well, that results in a short viewing period, leaving not a lot of time for successful conversion.

*Source: Thumbtack (https://www.thumbtack.com/p/sat-tutoring-cost)
**Source: Best Places (http://www.bestplaces.net/economy/zip-code/illinois/addison/60101)

Evaluate

I carefully compiled a list of the values that KR Tutor possessed and presented as a company as seen on their website:

Then came the challenge of translating company values into design values that I could carry with me into the site design. Converting the philosophical into the visual resulted in this:

Holistically, I knew that it was crucial to redesign the website to display all the crucial onboarding information (success statistics, contact form, and types of services) on the homepage to maximize the chances of repeat site visitors.

After making holistic design principles to follow based on company values, I crafted deliberate and precise design decisionsto bring those principles to life. I researched the psychology of website design, current design trends, and cognitive psychology findings so that the design would appeal to the modern audience but also be accessible to parents in their 40s and 50s who would be the end-users.

Some key decisions included:

  1. Hero images, catch phrases, and sections that either end above the fold or give the user obvious cues to keep scrolling.
  2. Following the Guttenberg Diagram-- which says that users will read from top-left to bottom-right, given no other visual hierarchy-- I chose to adopt the repeated z-pattern (zigzag pattern) to keep the user engaged for every screen.
  3. Utilize a grid layout that is heavily influenced by mobile design and will easily convert (both in terms of design and in terms of code) to mobile design sensibilities.

Sketch

After considering the design decisions, I researched competitors to get a stronger sense of information architecture and site flow. I noticed that successful business websites utilized vertical scroll to minimize page reload and not losing users because of apparently missing key information. I decided on a landing page flow consisting of hero image, call to action, company values, service packages, customer recommendations, and contact information. Structuring the website so the main content is one layer is a typical business tactic for both transparency and for user retention.

Which led to the wireframes springing to life.

Expound

Using the classic design tools of color theory -- aka geometry for designers--, color psychology, and flat design, I developed a modern design system based on a few key decisions:

  1. Using one typeface with many weights has the benefits of simplicity, which will better ensure that the parents stay on the website longer; it also has the benefits of varied typography through use of different font weights, to help ensure clear visual hierarchy. I chose Lato for all of these properties.
  2. Blue communicates reliability and trust
  3. Red communicates excitement and action—hence the intentional use of red as the background color for all calls to action on the webpage.
  4. I chose the color palette based on the intersection of men and women’s favorite colors. Blue and green were both cited as top three favorite colors for both men and women.

Next Steps:

“A problem well stated is a problem half solved.” — Charles Kettering

If I were to continue on the project, I would conduct in-depth user testing next, and validate or invalidate my assumptions about site usability and user delight. I would then evaluate the results, and translate those results into quantifiable design decisions to be implemented. Then we would go live and collect data on user activity, and test and modify the website as needed until desired user retention and conversion rates were achieved.