UX Design
Time Frame
Nov 2021 - Present
UX Designer
Figma, Whimsical
Figma Link
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.
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 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.
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.
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.
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
  • 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.
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.
The UX Design and Development teams reviewed the Donation page and discussed what aspects of the page could be improved.
Issues and 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.
Original Design
New Design
Other Design Examples
Home Page
Fellow Page Program