Project 1

Project Overview

Hatch is a non-profit organization that facilitates free tutoring by pairing volunteer tutors with students from underserved communities.

My Contributions

As Hatch's volunteer lead UX designer, I strive to make experiences more enjoyable and easy to use for the internal team, tutors, tutees, and parents. My team and I have worked on re-desiging several website pages including the Donation, Matching Portal, Review Portal, and Error pages. To facilitate the design handoff to developers, we created a design checklist along with a Hatch Figma library for fonts, colors, and logos.

Explore Sample Projects

Figma Library Review Portal Donation Page

External Links

Hatch Website Hatch Figma Library Donation Page Figma Design

Hatch Theme Library

The Hatch Figma Library was created to promote design coherence across the team, and make it easier to onboard new designers. The library consists of website colors, fonts, and logos. It also includes a design checklist that designers must review before handing off their wireframes to engineers. Underdevelopment, we are working on creating reusable components such as headers and buttons.

Typography

Fonts

Typography Scale

Nunito was chosen as the primary font in alignment with marketing. It is a well balanced sans-serif typeface created by Vernon Adams with rounded terminals. It is used for headings and body text.
‍
Lora is the secondary font. It is a contemporary serif that is elegant and sophisticated with ornate treatments—specifically in the letterforms y and r. It is used for Headings within the Hatch theme.
‍
Nunito pairs well with Lora as it doesn't distract from Lora's sophistication.

Choosing the base body type defines the entire typography scale structure. Once a body size is chosen (usually between 14 px and 18 px), then a typography scale can be applied to generate the rest of the font sizes. For Hatch, the body size for Nunito is 1 rem = 16 px. We apply the Perfect Fourth scale as its provides enough size contrast between the body and the headings without being as drastic as Perfect Fifth or the Golden Ratio.

Primary Font: Nunito

Secondary Font: Lora

Color Palette

Hatch's website color palette was create in alignment with marketing colors. To communicate Hatch’s enthusiasm and optimism, we use the colors in a way that results in a bright final design. Orange is our main color.

Logos

_________________________

Review Portal

The Review Portal is a section of the Hatch website that is used to review tutor applications. Along with my fellow UX designers, I worked on re-designing and improving the pre-exisiting portal.

Define

The goal of this project was to re-design the Review Portal on the Hatch website. This portal is used by Hatch members to review tutor applications and requires actions such as approving, rejecting, or waitlisting an application as well as sending out emails to the applicant. The main features of the portal include a filter section followed by a table with information such as application link, status, and time stamp.

Ideate

A meeting was setup between the UX Design, Outreach, and Executive teams as they are users of the Review Portal. The UX Design team listened to the pain points of the users. We then constructed a list of desired features based on the pain points. We integrated the features into low, mid, and high fidelity wireframes using the website Whimsical.

Pain Points and Features

Pain Points

Features

Application status is not clear
Table is too wide had has too many columns
There is no way to export the information in the table
Only 5 applications can be seen per page

Color-coded visual for application status
Consalidate the information in the columns
Button for exporting the table to a spreadsheet
Dropdown for adjusting the number of applications visible per page

Original Design

Low Fidelity Mockup

High Fidelity Wireframe

High Fidelity Wireframe (with pop-up)

_________________________

Donation Page

The Donation page on the Hatch website is a place where users can read about the impact Hatch has on the community. They also have the option to donate using electronic methods of payment.

Define

The goal of this project was to re-design the Donation page on the Hatch website. The task was to review the page and note down what could be improved.

Ideate

The UX Design and Development teams reviewed the Donation page and discussed what aspects of the page could be improved.

Issues and Improvements

Issues

Improvements

The dontation buttons are small and don't capture the user's attention.
There is a lot of text on the page, all of which are similar in size making it difficult for the user to direct their attention.
To understand the positive impact of the Hath program, the users have to read through a lot of text.

Make the donation buttons larger and add a drop shadow effect to give them the affordance of pressing.
Have a short clear message in larger font about the intent of the page at the top, encouraging the users to donate.
Add visual components to the Hatch community support statistics to reduce the brain processing power required by the user.