Sisters’ Camelot Homepage Redesign
A reimagining of a local foodshare non-profit’s homepage to increase navigability.
The problem
The current homepage is disorganized and it is hard to find information.
The goal
Make all of the important information easily accessible for both volunteers and those in need from the get-go.
Review of current homepage
When we were looking for a local non-profit organization to conduct this redesign for, we found that this one had a lot of potential. They have a lot of great images and a good story, but it was hard for users to find out how they could volunteer or get food.
Notes:
Hero image:
is overly large
doesn’t provide any information about the organization
Information is not well organized
Calendar has no events
Block of images is overwhelming and isn’t directed
Donation info listed three times
About Sisters’ Camelot
Minneapolis based
100% volunteer-run
Distribute 6,000 to 8,000 pounds of fresh groceries per week
At community kitchens and local food shelves
Serve prepared food in their “Kitchen Bus”
Uses food that would otherwise be wasted
Competitive analysis
We looked at a few other foodshare non-profits to determine elements of similar websites that are beneficial and what needs improvement.
We then conducted user interviews where we showed them the current website to find specific areas that could be improved. These users had previous volunteer experience and gave their input comparing the Sisters’ Camelot website to their experiences with using volunteer interfaces to do tasks such as sign up, find dates, and more.
Users said:
The website currently doesn’t provide clear information on how to volunteer
Should get rid of unused features to improve clarity
Needs to clearly provide information on signing up and upcoming events
Website is currently difficult to navigate
A large part of volunteering is the social aspect, should showcase that
It’s important to have a point of contact and clear location details
Liked:
cohesive design
interactive components
clear navigation and page sections
organic shapes
User interviews
The four key points were to:
Explain how to volunteer
Make the organization seem trustworthy by sharing values and mission
Show upcoming events
Make it easier to navigate using buttons and header sections
Our first step was to restructure the website’s navigation to be more intuitive and easier to find information. We did this by creating sitemaps to showcase the current structure and our ideas to improve clarity of the wording and organization.
Current
Our ideas
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 so they can find information more quickly and clearly.
Information architecture
Fourth iteration
Final iteration
I think that we really captured a feeling of being fresh and organic with this redesign. We also improved wayfinding by updating the navigation and adding more key information to the homepage. This project helped me learn more about branding, consistency, and information architecture.
For the menu, 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 our peers and had them do a card sort with each menu and submenu item to see if our grouping was indeed intuitive.
Wireframe
After sketching a low fidelity wireframe on paper, we created a digital one to get our rough ideas down and see how it all flows together.
Interface design iterations
We had a few different ideas for each section and made numerous iterations when creating mid fidelity wireframes. We reached our desired look with the final UI design below 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 their Kitchen Bus because I felt that it was more representative of their organization rather than their current picture of grocery bags. 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 encourage the user to keep scrolling down the page. We made sure to add buttons linking to other pages for the users to easily interact with the website from the homepage without having to dig around.
First iteration
User feedback
We put our final design in front of multiple groups of our peers to see what further improvements could be made to our design.
What they liked:
Image selection
Color scheme
Organic shape
Structure and order of information
What could be improved:
Need more differentiation between header and body
Button styling is not consistent, arrow on button not needed
More consistency is needed in headers and images
Footer is barren
From this feedback we made a number of changes.
Changes:
Different color for navigation bar to distinguish it
Fixed button styling to be consistent and added a dark green
Made the section headers larger
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