Read Now

A free non-profit company that teaches Adults how to read

read now desktop.png

Overview

Read Now is a non-profit company that teaches adults how to read. The founder has over 12 years of success in the area of Austin, Texas. 

PROBLEM DEFINITION AND CONTEXT

I had an initial meeting  with the CEO of the company. This will be the first website for the company and he has no specific direction on the aesthetic appearance or structural composition.

This website must meet all rules of accessibility. It will be designed for Adults who read at the 3rd grade level.

Read Now also wants a way to have a way for people to make donations.

APPROACH / SOLUTION

1. Research other non-profit companies websites to get inspiration on design and layout. 

2. Work with Researcher and Developers to create a flawless accessible website.

3. All colors and typography need to meet accessible requirements while being age appropiate.

4. Create a donation page.

CUSTOMER + BUSINESS IMPACT

It is really important as a non-profit company to be able to receive donations in order to keep the business thriving. Read Now has 100% success rate with teaching adults how to read and we want to promote this accomplishment.

ROLE

Head UX Designer | A team of 4 ( 2 Developers, 1 Researcher) 

 

Research

I started with researching websites that focus on non-profit companies, accessibility concern and functions, and have a donation section.

download-1_edited.png
download-2_edited.png
download_edited.png
download.png
download-1_edited.png

​Takeaway:

  • The most visually appealing websites have open space, larger font size, and buttons to indicate clear call to action. 

  • Icons to support short text is an accessible way to convey an understandable message for the user.

  • All websites have a donation section. They are all accessible to use, gives the option of payment amount and reoccurring payments.

Clear call to action - Icons and short text 

Amesty International

Amnesty_Use of Icon plus Image.png

Room to Read

Room to read_call to action.png

Autism Speaks

Screen Shot 2020-07-18 at 5.27.17 PM.png

Site Map

Read Now Site Map V3.png
 

Iterations

Sketches - Lo fi Wireframes

sketch2.jpg
sketch1.jpg

I approached wire-framing with the idea of readability

  • A simple layout with large images. 

  • Boxes that have supportive images and icons. 

  • Text that is effortless to comprehend.

  • Highlighting the 100% success rate with testimonies. 

  • Explaining the heart of this company.

Home Page

HOME PAGE 1_V2.png
HOME PAGE 2.png
HOME PAGE 5.png

About Us

ABOUT 2_V1.png

Student

STUDENT 1.png
ABOUT 4.png
ABOUT 5.png

Style Guide - Color Palette

Style Guide_All colors.png

Design that meets W3C accessibility standards.

  • A classic color palette

  • Gender neutral

  • Bold and light shades to support black and white text

Medium Wireframes

Home Page

HOME PAGE V2_1.png

Header & Footer

MENU BAR_DROP DOWN_Student.png
FOOTER_V2.png
  • Working with icons and testing the validity of each one.

  • Color is used to place color blocking and call to actions.

  • More improvement on the Header and Footer.

Outcome

The new designs are currently in development and being applied to the desktop website. 

Creating the companies first website, the goal is to bring more awareness to the program : having more students and volunteers sign up. 

The donation option will also allow this non-profit company to make more money in order to expand their business. 

 

Final Product

Home Page

Screen Shot 2020-07-20 at 11.28.53 PM.pn
Screen Shot 2020-07-20 at 11.29.12 PM.pn
Screen Shot 2020-07-20 at 11.29.28 PM.pn
Screen Shot 2020-07-20 at 11.29.44 PM.pn
Screen Shot 2020-07-20 at 11.29.56 PM.pn

About Us

Screen Shot 2020-07-20 at 11.55.02 PM.pn
Screen Shot 2020-07-20 at 11.44.13 PM.pn
Screen Shot 2020-07-20 at 11.44.40 PM.pn
Screen Shot 2020-07-20 at 11.55.14 PM.pn
Screen Shot 2020-07-20 at 11.55.27 PM.pn
Screen Shot 2020-07-20 at 11.55.39 PM.pn

Students

Screen Shot 2020-07-20 at 11.57.38 PM.pn
Screen Shot 2020-07-21 at 1.40.56 PM.png
Screen Shot 2020-07-21 at 1.41.11 PM.png
Screen Shot 2020-07-21 at 1.41.23 PM.png
Screen Shot 2020-07-21 at 1.41.35 PM.png
Screen Shot 2020-07-21 at 1.41.42 PM.png

Key Takeaways

I loved working on this project and learning about all the ways a website needs to be accessible.  Accessible design is about learning to design for all people and I look forward to applying what I learned to future projects. 

I also strengthened  my skills of working inside a team with developers and other designers.