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:
- UX analysis (flows, personas, a site map, and wireframes)
- Design (website and branding)
- Lo-fi prototyping (basic flow and interactions)
- Front-end development ( wordpress website custom theme and template)
The Problem
- The site was outdated, with no layout structure or content strategy for each page.
- Some features and functions had to be customized to meet the needs of the site or budget restrictions.
Goals
- The goal is to provide clear, easily accessible information to Denver’s community on available resources and ways to volunteer.
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.
- 38% decrease in phones inquiring about the food bank hours, location, requirements.
- 40% decrease in phone calls asking to be signed up to volunteer. Each week the signup slots are filled.
- 80% of the recipients visiting the food bank have pre-registered through the website.
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.
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
- A volunteer sign-up page
- Information on protocols during the pandemic
Recipients
- Information on policy and process for food distribution during the pandemic
- Calendar of distribution days and upcoming events that is easy for staff to update
Donors
- Information about HSH's mission
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
- I volunteered at the food bank to understanding the HSH set-up and a volunteer’s experience
- I learned about the different volunteer slots and shift times and that lifting boxes of food is a great workout
Building Process
- List volunteering requirements and information
- Create calendar and volunteer slots
- Create sign-up form
- Admin ease in setting up and updating
Previous Iterations
This current iteration of the volunteer sign-up process is simple and volunteers can select:
- Theirs volunteer group size
- Available volunteer slots
- Available time and date
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
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.
- Created more options and control for the volunteer when signing up.
- Reduced the amount of updates and phone calls admins have to make.
Final Design
- In the volunteer portal, volunteers will an automated email updates .
- Set up a volunteer availability schedule if you want to continue to volunteer.
- Volunteer can create their own calendar reminders
Volunteer Portal
execution
Style Guide
About Us Final design
Original Design
Final Design
Mobile Final Design
Food Distribution Final design
Original Design
Final Design
Mobile Final Design
Volunteer Final design
Original Design
Final Design
Mobile Final Design
Reflections​
What I learned
Wearing two hats for this project, a designer and developer, I learned:
- The most challenging and rewarding part of this project was helping Hope Starts Here communicate its story.
- I learned that it is okay to be creative with UX exercises to fit the client's needs as long as the exercises are based on the UX design process.
- Building a user interaction on a CMS site always remembers the user experience for the front-end user and the back-end user. It may work correctly for the user, but always review the maintenance requirements for the backend admin.
Next steps
- New design iteration of the volunteer sign-up page due to internal changes of how volunteers sign up and are scheduled.
- Work on the optimization and speed of the website.
