Responsive Web Redesign: Non-Profit Organization
Built using a consistent UI guide, information architecture strategies, mobile first designing and frequent usability testing.
Timeline: 3 weeks
Role: User Researcher, UX Designer and UI Designer (Group of 3)
Deliverables: User Persona, Feature Prioritization Matrix,
Sitemap, Wireframes and Hi-Fi Prototypes
Tools: Adobe XD, InVison, Google Suite
What is the Atlanta Community Food Bank (ACFB)?
The ACFB is a non-profit organization that works with more than 600 nonprofit partners—including food pantries, community kitchens, childcare centers, night shelters and senior centers—to distribute over 60 million meals to more than 755,000 people in 29 counties across metro Atlanta and north Georgia.
The ACFB's website does not provide an efficient process for donations, nor does it provide an intuitive way for users to find sources of food when in need.
The redesign will benefit users by using visual mapping elements, create a platform for quick donations and provide a more functional events page for users.
Research: Personas, Interviews and Data Synthesis
Current website images
When initially evaluating the website it appeared to have a very clean design. However, after digging deeper into the website we found that navigation was extremely confusing and page organization was inconsistent.
We identified two initial proto personas for the website. One was for volunteers/donors and one for those needing assistance from the organization.
Interviews and Surveys
After creating a research plan and hypothesis we began interviewing.
This was a key insight found while interviewing.
A few key insights from the survey results
After creating an affinity diagram to synthesize the data. We converted our data into a user persona.
We synthesized our data into 4 key insights.
- Users need a faster way to give to an organization
- Users wanted to verify organizations by testimonies
- Users wanted to know what difference their contribution was making for the cause
- Users wanted transparency from organizations
Definition and Ideation: Problem Statement, Feature Prioritization, Value Proposition, Card Sorting Activity, Sitemap, Task Flows
Users are finding it hard to have enough time to donate due to their busy schedules and lack of information. How might we make it easier for users to donate time and money to help others in need?
Brainstorming and Feature Prioritization Matrix
We used an "I Like, I Wish, What If" activity to brainstorm additional features to include on the site.
After that we categorized the ideas and placed them in a Feature Prioritization Matrix
The most important feature we thought the website needed was a more convenient way for users to donate. We planned to make that happen by providing quick donation elements on the homepage.
We are building a community free of hunger, one donation and volunteer at time.
Card Sorting Activity
As apart of our information architecture strategy, we used a card sorting activity to determine how we should create our sitemap and navigation.
After analyzing the card sorting data, we created our initial sitemap to act as navigation blueprints for the website.
Prototyping and Testing: Wireframes, UI Style Guide, Mid-Fi Prototype, Hi-Fi Prototype and Usability Tests
We began by sketching our designs then reviewing the sketches and deciding on elements that we liked to bring over into our wireframes.
When creating our wireframes, we started with a mobile-first design so that we could then expand into our web design.
After this stage, we performed usability tests on our wireframes to determine what we could improve upon before we started our style guide and higher-level prototypes.
We began by deciding on what we wanted user to feel when using our site. We wanted a site that was bright and energizing to users. We then began selecting a color palette that reflected our direction. After that we began selecting fonts, icons, images and determining our button states and other clickable elements.
Mid-Fi and Hi-Fi Prototypes
When began converting our wireframes into mid-fi prototypes and using our style guide, consistently.
Next, we usability tested our prototypes again, analyzed the data and made iterations to the original sitemap. We then used the iterations to make our high-fi prototype.
We began by making the iterations to our previous prototypes and creating our hi-fi prototypes.
Mobile Hi-Fi Prototypes
Web Hi-Fi Prototypes
After creating our final hi-fi prototypes, we completed a final usability test. During this test we determined what our next steps would be for this project.
The collaboration was difficult on this project because we had to move to remote collaboration. It was much easier to collaborate when we could give instant feedback.
We would love to implement some additional features into our web page that we had determined during the ideation phase. Some of them include:
Donation Pick Up: Users would be able to schedule donation pickups, so they could donate with a busy schedule.
Specialty Food Items: Since many people have food allergies we thought that it would be a great feature to provide a way for users to donate and find specialty items.
Social Media: Through our research, we learned that users enjoyed volunteering and sharing that experience on social media. We would want to provide a feature that allows users to view a social media feed on the homepage.