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 sole Product Designer and Developer.  Main areas of responsibility:

The Problem

Goals

Discovery

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

Define

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.
HSH Food Bank Site - Recipients
HSH Food Bank Site - Volunteers

Persona Needs

Volunteers
Recipients
Donors

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

Ideate & Create

Validate, Design, & repeat

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.

Volunteer 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

iterations

Mapping out the user flow for the volunteer sign-up form. The process was missing the calendar of available days to volunteer.
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 a calendar and volunteer slots and a plugin that would remove a slot once it was selected.

Updating the Volunteer Sign-up process. Stay Tune!

Adopt a child gift giving page

I had one weekend to build and design this page and test the functions. Through many trials, failures, and tests, I created a user friendly online “Adopt a Child” page.

Building Process

iterations

In the first round, I created buttons that would download the pdf wishlist. I was able to add custom code to disable the button once selected. There were a couple of problems when thinking about the user and functions:

In answering these questions I was ready to design and build for the second round.

So I decided to use the e-commerce layout and all of its functions. I treated the “adopt a child,” as a free store.

This allowed creating a preview feature, add downloadable pdfs as the product, and collect the user’s info before they can check out with the pdf. 

Final Designs

Final Designs

HSH Style guide

Home Page

Original Design
HSH Chrome Browser Light Copy 3
Final Design
HSH Chrome Browser Light Copy 3
New HSH Homepage
Mobile Final Design
New HSH Homepage mobile

About Page

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

Food Distribution Page (announcements)

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

Volunteer Page

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

Reflections​

Goals and success

How do you measure the success of a redesign when traffic to your sight has increased of 60% due to the Pandemic?  Hope Starts Here measures their redesign success through meeting user’s needs and creating positive user experiences.

What I have 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