Hope Starts here​

Overview

Hope Starts Here is an identity and web redesign project that also involved development. Hope Starts Here needed help telling their story, identifying their purpose. Once they understood their story, we were able to create a strategy for their website’s structure.

My Role

For this project, I was the sole Product Designer and Developer.  Main areas of responsibilities:

The Problem

Goals

Out Come

The site was redesign during the start of the pandemic. We measured success by the decrease in phone inquiries. We created a website to meet and answer our user’s questions and continue to step up to the growing challenge.

Strategy

What is your Story?

Hope Start Here (HSH) is a non-profit food bank connected to Smokey Hill Vineyard Church in Centennial, Colorado. The goal of our first meeting was to uncover their story. Each team member identified their ideas of what HSH stood for in six domains. Understanding what you need begins with defining who you are.
Purpose post-it notes

Who are the characters in the story?

We explored the experiences of current HSH service users. We characterized the different personas by the positive and negative encounters and or feelings each persona might have while visiting the website or the food bank. I chose this exercise as it increased empathy and understanding for each persona, and allowed the team to tie in each persona with their story. In the second phase of the personas, I created a traditional version of a persona.

Personas

Our three primary personas are recipients, volunteers, and donors. We focused on each persona’s positive and negative states when visiting the food bank and the online website. I choose to include both the physical and online experiences because each experience overlaps with each other and sheds unique insights into problem-solving in both areas.
Volunteers
Recipients
Donors
HSH Food Bank Site - Recipients
HSH Food Bank Site - Volunteers

User Journeys and updated site map

Combination of user flow and card sorting to create a new site map. One of the pages that we changed was the original announcement page to the food distribution page.  HSH team and I knew that the purpose of the page was to inform and collect information from recipients primarily.

Re-structured site map & Content

iterations

Volunteer Process

The two pages that I would like to feature and show my design process are the Volunteer Sign up page and the Adopt A Child page.
I was able to address many user and development problems by creating the volunteer sign-up form. Through this process, I learned the importance of having an understanding of what can realistically be developed and the time and difficulty that may be required.

Research

Building Process

Previous Iterations

This current iteration of the volunteer sign-up process is simple and volunteers can select:
Final Design
Mapping out the user flow for the volunteer sign-up form. The process was missing the calendar of available days to volunteer.
User flow sketch
Sketch round1

I initially tried creating tabs of the dates for the calendar. This worked, but there was no way to keep the process up longer term. Who was going to be making these updates?

It was time to do more research and find a calendar plugin that would automatically create calendar and volunteer slots and a plugin that would remove a slot once it was selected.

Wireframe

Current Iterations

Volunteers now have a portal where they can log in to customize their availability and sign up for more volunteer slots.
Final Design
Volunteer Portal

execution

Style Guide

HSH Style guide

About Us Final design

Original Design
HSH Chrome Browser Light Copy 3
Final Design
HSH Chrome Browser Light Copy 3
Mobile Final Design

Food Distribution Final design

Original Design
HSH Chrome Browser Light Copy 3
Final Design
HSH Chrome Browser Light Copy 3
Mobile Final Design

Volunteer Final design

Original Design
HSH Chrome Browser Light Copy 3
Final Design
HSH Chrome Browser Light Copy 3
Mobile Final Design

Reflections​

What I learned

Wearing two hats for this project, a designer and developer, I learned:

Next steps

Copyright 2021 © All rights Reserved. Design & Developed by Lauren Richard