Site Design for FairTutor.com

PSD only. No coding. Clean, Fun Web2.0 look & feel

About the site

FairTutor is an online tutoring website, focusing on Spanish Language tutoring. It's American students connecting with language tutors in South America, with all the tools they'll need to do so. "Fair Trade Tutoring" is the idea we're trying to convey to the world, with direct human to human contact, and fair, transparent pricing. Students can expect one-on-one tutoring with a native Spanish speaker, using an online interactive whiteboard with voice and video support. This piece will be handled by an embedded Twiddla whiteboard, so you might want to play around with one at www.twiddla.com to understand how it works. We're looking for a site design that is clean and fun, and that conveys the goodwill of the Fair Trade movement. We'd like to build a strong brand around a logo or avatar, so the use of illustration could play a role in the design.

About the target audience

First priority: Southern California Housewives who watch Oprah. Next: Women in general. Finally: Everybody else. Women seem to stick with language classes more than men, so realistically we'll want to target the site to that demographic. We want to target people who realize that by using this service, they are actually making a difference in somebody's life. So while it's important to show that the site offers online Spanish tutoring, and the lessons offered are certainly less expensive than they would be in the US, those things are less important than making the user feel that they are making the world a better place.

Requirements

Deliverables include a logo and homepage design for FairTutor.com, in PSD format. No HTML or CSS coding is required, though care should be taken that the design can actually be converted to a functioning website.

Primary elements

  • Clean web 2.0 look
  • Use of illustration, color and/or whitespace to emphasize calls to action
  • 2 main calls to action: "Find a Tutor Now" and "Learn More"
  • The site is called FairTutor, capitalized as you see fit, but ideally without a .com attached.
  • H1 text should read: Fair Trade Tutoring

    • Messaging.

    These concepts need to come across in the design, or better still are spelled out in content:

  • Learn Spanish online
  • One-on-one instruction, in a live online classroom
  • "Fair Trade Tutoring" – professional Spanish teachers in South/Central America earning a fair wage
  • Start Learning Today
  • (implied but not necessarilly spelled out) You (the user) are going to make a difference in somebody's life. By using the site you'll be giving somebody in the developing world a good job with a comfortable wage.
  • (implied but not necessarilly spelled out) This is going to be FUN. It's not charity. It's not school. It's learning Spanish online with a real live native speaker. You're going to enjoy yourself.

    • Secondary Elements:

  • Logo/Navigation/login bar up top
  • Footer containing columns of stacked links. Extra points for a cool footer design
  • Prospective Tutors need a way to learn about the site and sign up for accounts. This should be discoverable for them without distracting from the main audience, which is Students.

    • Optional:

  • We'll have a demo video. If it makes sense to place this on the homepage in lieu of the "learn more" call to action, go ahead.
  • We have screenshots of the classroom application that you can use in the design if it makes sense to do so.
  • Reusable header for use in other parts of the site.

    • Sites we like (and why)

  • http://www.mailchimp.com/ - good use of illustration. Easy to discover what the site does. Easy to find and compelling calls to action. Appealing secondary points and additional information about the product. Great footer.

  • http://www.twiddla.com/ - says what it does quickly. Prominent call to action. Lots of whitespace, with less important things presented more in a more subtle font. One downside in that it doesn't lend itself for reuse as an overall site design since the header and footer are white bars (thus necessitating that the content have a grey background on every page)

  • http://basecamphq.com/ - This is pretty much the gold standard for this sort of design. Says what it does quickly, gives you a clear call to action, and has plenty of "pretty" built in. This might be a bit to "Male" for our target audience, but it has a lot of elements we like.

  • http://wufoo.com/ - All of the above + fun. It's important that we don't come across as an educational site full of photos of people in caps & gowns holding diplomas. It's informal, one-on-one, and it's fun.

  • http://silverbackapp.com/ - Nice clean illustrative description & CTA above the fold. I like the way it invites you to scroll down and learn more. (NOTE: Just because two of our preferred designs have monkeys in them doesn't mean we want one in our design!)

    • Thanks in advance for your help. I'm in the UK at the moment, so please forgive any delays in communication.