Mockup

Competitive Analysis

We looked at a few other foodshare non-profits to determine which elements are beneficial and what is confusing.

Liked:

• cohesive design

• interactive components

• clear navigation and page sections

For: User Experience in Design - Fall 2023

Role: UX Designer

Tool: Figma

Skills Learned: Conducting User Interviews, Competitive Analysis, Site Mapping

Summary: My partner and I chose to redesign the homepage of a local foodshare non-profit organization. The current website is very difficult to navigate so it became our goal to make all of the information as easily accessible as possible for both volunteers and those in need.

Current Homepage

Insights

From the competitive analysis and user interviews, we decided on what we wanted to add to the homepage to make it more user-friendly. The four key points were to:

• explain how to volunteer

• make it trustworthy by sharing values and mission

• show upcoming events

• make it easier to navigate using buttons and header sections

For the nav bar, we wanted the drop downs to be more clear so that people can easily find what they’re looking for. We did this by expanding the the amount of items in the header and ordering them by priority. Then we presented our headers items and their drop downs to other peers and had them card sort to see if our grouping was intuitive.

UI Design

Here are some different style ideas we went through, along with the final UI design on the right. I decided to use an organic shape for the hero image to reflect the organic nature of the organization. I also chose the picture of the Kitchen Bus because I felt that it was more representative rather than a picture of lettuce. All of the pictures we used are from their Instagram which we made sure to highlight at the bottom of the homepage. The arrows are to help guide the user down the page. We made sure to add buttons linking to other pages for the users to easily interact with the website without having to dig around.

Navigation Bar

User Feedback

We presented our final UI design to other peers in our class and received the following feedback:

• want differentiation between the navigation and the body

• button styling is not consistent and the arrow on the button isn’t needed

• needs more consistency in text sizing and images

• footer is barren

From this feedback we made the following changes:

• different color for navigation bar

• fixed button styling to be consistent and added a dark green

• changed the links in the “Get Involved” section to buttons

• changed the order of events to be the closest date at the top and made the background white for more visibility

• fixed the text alignment in the “About Us” section

• rounded the corners of the social media images to be consistent with the other images

• added logo and a thank you message in the footer

Impact

Our design made the homepage much more usable by

• easing the volunteering process

• encouraging signing up

It now feels more

• welcoming

• easy-going

• informational

Volunteering at a new place for the first time can be intimidating so these are key improvements.

Hero Image:

• is overly large

• doesn’t provide any information

User Interviews

We conducted four user interviews, asking for their experience with volunteerism and use of websites and/or apps related to that. We used this information to figure out what is missing

Wireframe

After drawing a lo-fi wireframe, we created this digital one to get some rough ideas down and see how it all flows together.