Brief
FareShare is a UK-based charity organisation that focuses on tackling food waste and food poverty. It was founded in 1994 and has since become one of the largest food redistribution charities in the UK. The primary mission of FareShare is to rescue surplus food from the food industry that would otherwise go to waste and redistribute it to charities and community groups that support vulnerable individuals and families facing hunger.
Problem
A charity website focused on reducing food waste and seeking more user involvement in supporting their emergency relief campaign.
Solution
Creating an appealing UI redesign to show the charity's impact and encourage more user donations through better storytelling.
Process
1
Site audit
4
Competitors
3
Viewports
Discover
User Interview
To kickstart my research, I conducted a thorough audit of the homepage, evaluating the current branding and visual design elements.
Through this site audit, valuable insights have been gained. These findings provide me with a clear roadmap for improvement. By addressing these issues, I can work towards enhancing accessibility, optimising content hierarchy, improving the tone of voice, and making the overall design more inviting and responsive. This site audit has served as a valuable foundation for generating ideas and developing a strategy to create a more user-friendly and effective UI.
Competitive and Comparative Research
As this project was solely focused on UI and did not involve user interviews, competitive research proved to be invaluable in identifying essential user needs. By analysing and comparing the user interfaces and experiences of competitors or similar products in the market, I gained valuable insights into what works well in encouraging people to donate and attracting new visitors. This research allowed me to understand user expectations, common industry standards, and emerging trends, all of which guided my design decisions.
I observed common themes among these three competitors which further informed my design approach:
​
-
Incorporating images of people enhances the homepages, making them more engaging and relatable, especially happy ones.
-
Donate buttons are highlighted as buttons.
-
Top navigation bar with clear call to action buttons.
-
Using plain statistics to validate the assertion.
-
Big, bold text alongside hero image.
Creating The Brief
After conducting extensive research, it was time to shape the visual and auditory identity of my UI project for FareShare. Analysing their brand and those of their competitors, it became evident how the brand voice should resonate. Given FareShare's commitment to aiding vulnerable individuals, I developed personality maps to refine the brand voice, aligning it with their values.
Being a charity, the primary aim was to instil confidence and trust among donors and users. Consequently, I aimed to revamp the brand, focusing on attributes such as trustworthiness, heartfulness, informativeness, positivity, impactfulness, inspiration, and community orientation. By embodying these qualities, I could foster increased user engagement and attract potential donors.
Typography
In terms of selecting the best typefaces for the website, I opted for two fonts. I chose 'Roboto' to impart a professional and trustworthy appearance to the website, and 'Work Sans' for its readability, which contributes to a clean and modern overall design.
Mood board
In developing the colour palette for the food charity website, I drew inspiration from the mood board, which was carefully curated to align with the brand's values and mission. The primary colours, green and blue, were chosen for their symbolic representation of growth, hope, and trust – qualities that resonate strongly with the charity's commitment to alleviating food poverty and fostering a sense of community.
Green, a colour associated with freshness and abundance, reflects the charity's mission of providing nourishment and support to those in need. Blue, on the other hand, symbolises trust and reliability, instilling confidence in donors and users that their contributions are making a positive impact.
To cater to specific calls-to-action (CTAs) such as 'Donate' I introduced a touch of red, a colour that inherently draws attention and urgency. This choice serves to emphasise the importance of taking immediate action and contributing to the cause.
For the background and neutral elements, I opted for muted, neutral colours. These soft, understated shades provide a balanced backdrop, allowing the vibrant primary colours to stand out while maintaining a sense of professionalism and readability throughout the website.
Style Guide
Having my mood board in hand, I then created a style guide to maintain consistency throughout the redesign of the website.
Redesign
Mobile
Tablet
Desktop
Solutions
-
Enhanced credibility and trust for the charity by implementing testimonials.
-
Increasing the transparency and accountability of the charity by directly presenting the charity's measured impact on the homepage.
-
Using happy images to create a positive and inviting atmosphere, encouraging more engagement and support.
-
I've ensured that all colors on the website meet accessibility standards, and I've integrated the color red into call-to-action buttons, these changes can contribute to a more effective and user-friendly website, potentially leading to increased support and engagement.
Next Steps
-
Redesign the logo.
-
Consider adding more screens across the 3 viewports.
-
Consider adding a donation box to offer donors a straightforward and hassle-free method for contributing.
Key Learnings
-
This project has greatly deepened my understanding of how visual design can foster empathy with users and the significant impact that colours and typography can have on enhancing the user experience.
-
Discovering how charities boost their donation rates.
-
I delved deeper into UI trends and expanded my knowledge of Figma.
