FoodPantries.org Website Redesign
.png)
Design Timeline
Two-week design sprint to redesign foodpantries.org
Week 1: Research, Prototyping, Testing
Week 2: Front-end Development
The Problem
Current Website
Opportunities to improve usability, accessibility, and the overall flow of locating food resources for those in need.
How might we...
redesign the Food Pantries website to reduce mid-search bounce rate, drive more traffic to the website, and eventually increase the number of food pantries interested in being featured on the site?
(1) RESEARCH
Developing Our Persona
Proto Persona
User Persona
Executing Usability Testing
Key Factors
Users Tested: 5
Tests Given: 20
Tests Failed: 60%
What Are Users Saying?
"It's hard to find the city I'm looking for!"
-User 1
"The site looks different on my mobile device"
-User 2
"There are too many ads and the website feels spammy!"
-User 3
Observations
We observed that our users are struggling with the multi-step search process.
We noticed that users were encountering usability issues due to a lack of Responsive Web Design.
Our users could not access the search function through the navigation menu.
Redlining Important Elements
(2) define
Creating A User Journey Map
I created a realistic representation of the key user segment I wanted to design for. This was based on qualitative and some quantitative user research. It allowed me to begin empathizing with the user as I moved into the Define phase.
Competitor Analysis
Weaknesses
- Poor UX writing
- Blurry images
- Unorganized footer
- Confusing dual navigation
Strengths
- Simple homepage with clear CTAs
- Grid layout
- Color scheme
- Large, accessible buttons
(3) design
Low-Fidelity Wireframes
Creating a Style Guide
Mid to High Fidelity Prototypes
Iterate, Iterate, Iterate
Based on user testing data, we were able to quickly arrive at our final high fidelity prototype. We ran some usability tests using the same tasks from our testing plan.
(4) test
Initial User Testing
Tasks for users to complete:
- TASK 1: Find a Food Pantry
- TASK 2: Enter Search Criteria
- TASK 3: Click Search
- TASK 4: View Search Results
- TASK 5: Select a Food Pantry
- TASK 6: View Food Pantry Details
Results:
Users were able to complete all tasks successfully and thought the overall experience was simple, easy to use and helpful.
Final Coded Prototype
Github Repository:
https://github.com/vinneydawson/Final-Group-Project
Interactive Coded Website Prototype:
Never stop learning!
“Allowing the culminations of our past experiences to coexist will spur innovation.”