Hatch

Hatch is a fundraising web application for people to crowdfund donations for charities and foundations, and allow people to donate to specific causes.

Branding

I chose the name “Hatch” because this project focuses on people creating projects and allowing others to fund or “incubate” their projects. If successful, then their project/dream will hatch and become a reality. Additionally, people from different situations will be coming to Hatch to create projects, so I wanted to focus on creating a brand that was warm and supporting. With this idea in mind, I chose a typeface for the logo that felt welcoming and chose friendly, bright colors that would make users feel more positive and pepped up about their cause.

Style Tile
Hatch Style Tile
User Flow

Hatch’s user flow focuses on four main functionalities: Project Discovery, Project Creation, User Accounts, and Support. Since Hatch encompasses a diverse user base, ease of use was the main focus when creating the user flow. For example, a simple search/discover flow allows users to easily view and donate to projects. Project creation is broken down into three primary sections to eliminate confusion: project information, identity verification, and project deletion.

Wireframes

When creating the wireframes for Hatch, ease of use still applied to the page layouts, particularly to project creation. Since a decent amount of information needs to be collected from a project creator, designing a consistent layout able to easily guide creators through the entire process was crucial. For project progress, displaying average donation collections through a graph reduced clutter and gave project creators a user-friendly, visual interpretation of important data.

Final Mockups

When creating the final mockups for Hatch, it was initially a challenge for me to remove myself from the mobile design mindset. In order to overcome this obstacle, I focused on viewing the content from a developer’s standpoint. Having a clear picture of how each page would be created through HTML and CSS was crucial to my mockup designs. Working with a web app allowed me to realize that what matters is the content itself and spacing between each content element, since I cannot control the width and height of a user’s visible area.

Hatch Screens