Bloomington Food Policy Council
Duration: 13 Weeks
Roles: UX/UI Designer and Researcher
Tools: Adobe Creative Cloud and Figma
Over the course of 16 weeks, I and 4 other Serve IT students, redesigned the BFPC’s website with updated infographics and UI. Redesigning the B.F.P.C aimed to solve:
“How can we increase availability of healthy, local food to all members of the Bloomington community?”
Research
Agency Research
Agency describes any stakeholder in products design. Weather that be the person receiving the product, or the person designing product. Understanding the scope of everyone's role in a product allows for designers and researchers like-myself to create products that functions properly for all. My team investigated agency in area’s like:
Mission of agency
Services offered by agency
Vision of agency
Funding of agency
Clients of agency
Volunteers of agency
Staffing involved in the agency
I was tasked with creating an agency overview of the staff listed on the website.
Agency Research Provided:
A better understanding of our clients goals. The BFPC website was instituted to help Bloomington residents find food. As well as recruit help to the organization through donations and adding members.
Identified our user and clients needs. Many of BFPC members and its users are apart of generation who didn't use computers in their youth. Our application must be accessible to all age groups
Gained insights about the non-profit industry. Non-profit websites work to explain the mission and impact of the organization. As well as instructions to get users involved in the organization.
Improved collaboration amongst our designers. After establishing all wants and needs, our entire team had parameters of which to design from. This made it easier to help fellow teammates work toward their idea .
User Retrospective Journey Mapping
After evaluating all stakeholders, our team began to iterate through a user-retrospective journey map. The purpose of creating a journey map is too put yourself in the perspective of the user. To better understand our user we created target audience visual on the:
Journey Phases
Our users journey can be divided into four different steps:
User finding website
Accessing the site
Looking for information from organization
Visiting (virtual/physically) organization
At each step in the process our team investigated the gain points(green) and pain points(red).
Website Competitor Analysis
After evaluating all stakeholders and mapping the users journey through the website, our team began to research fellow non-profit websites. The research would help our team learn what we want, don’t want, and trends that we should follow in our website.
After reviewing the website through a user and designer lens, we detailed:
Opportunities and Insights:
Actions to address insights:
The website needs an area where contact information can easily be found.
Add more content and fewer links, delete unnecessary pages, and update navigation.
Ensure website content is concise, clean, and organized.
Condense sub-pages in “About” section.
No information on how users can become involved.
Create a page (Volunteers) that Includes information for users who want to become involved with the client’s organization
Heuristic Evaluation
We organized our data in 5 different ways:
Heuristics- Any process or trait of website
Guiding Questions- Set list of questions, curated to search for any violation or needed recommendation.
Violation-Detailed explanations for how each heuristic infringes on the users ability to navigate throughout the site.
Recommendation-Suggestions on how to the fix the violation.
Severity- At the end of each heuristic our team would comment on the overall functionality using a unit of severity ranging 0-5.
_edited.jpg){kind=small}
From our heuristic evaluation we found problems with accessibility features like:
Visibility of system status - The buttons, the colors, and hyperlinks were all inconsistent parts of the system that confused the user, and left them lost .
To Fix - Our team recommended included breadcrumbs from the user. In example:
HOME/VOLUNTEER/RESOURCES. This way the user has a visible line that explains where they are in the site.
Consistency and Standards - Each page had different colors of text, different structures, and disproportionate amount of white space.
To Fix- We created a UI Kit that we could apply to entirety of the website. The kit yielded a cohesive and uniform design.
Error Prevention - The error messages outputed from the website were a result of information that had yet to be announced. The messages were general and didn't help the user.
To Fix- We created custom error messages for any resource that had yet to be filled in by the client.
After completing all our
(Research)
(Design)
we began
(Prototyping)
Prototyping
.jpg)
Sitemap
To start putting our research to work we began mapping out the functionality of our website. This was additionally important because it pointed out any user journey issues with our design .
Wireframe
To start putting our research to work we began mapping out the functionality of our website. This was additionally important because it pointed out any technical issues.
Building the layout gave us insight for how we wanted to implement our redesigns new colors.
UI Kit
Deployment
Old Version
New Version
