A Digital Product Designer with experience in
UX Design, UI Design, and Web Design
Felix Project
![felix.png](https://static.wixstatic.com/media/1a55d7_ffddd0f0b8374e469a1ee777af22aba5~mv2.png/v1/crop/x_236,y_0,w_2195,h_2012/fill/w_982,h_900,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/felix.png)
Type
Independent work
Lenght
2 weeks
Role
UX Research
UX Design
UI Design
Platform
Responsive website
Problem Space
Felix is the largest end-to-end food redistribution charity in Europe: they rescue good, surplus food from the food industry that cannot be sold and would otherwise go to waste, collect or receive food from over 539 suppliers and deliver food to almost 1000 front-line charities, primary schools and holiday programs in London.
They are particularly concerned with their online presence that doesn't seem to be effective when it comes to donations.
Our evaluation pointed out the following problems:
-
The layout of their website is old and doesn't look good;
-
The user experience with their donation process is difficult;
-
Donating something different than money is hideous;
-
There's no information hierarchy;
-
They lack content organisation and their content is scattered;
-
Colour and design could be improved maintaining their brand identity
Here's their current donation page:
![Group 13858.png](https://static.wixstatic.com/media/1a55d7_51ec89a9601646b5aab8470032460847~mv2.png/v1/fill/w_734,h_809,al_c,q_90,enc_avif,quality_auto/Group%2013858.png)
User Interviews
We conducted a round of user interviews with 5 participants.
At the end of each session, we asked the users to test the donation process on Felix's website in order to identify which problems they were experiencing, and understanding their behaviours and goals.
Pain Point
“I’ve always wanted to donate
but I don’t trust charities”
Behaviour
“I don’t really donate to charities, I just donate to people on the streets when they ask”
Pain Point
“There’s no alternative to donating money, it’s always money or nothing”
Goal
“I want to help them, even if
its only impacts one of their days”
Recognising that trust was the primary concern, we understood that the key pain point in the website's was the user experience, and we needed to enhance its reliability.
Users also expressed a desire for diversified donation options beyond merely monetary contributions, including volunteering time or donating food.
By expanding the donation process to offer more choices, we anticipated an increase in user engagement and participation.
How might we provide users with
alternative ways of donating
so that donations are accessible to anyone while improving the overall UX of the website?
Design Priority Matrix
To pinpoint areas requiring our attention, we created a Design Priority Matrix, enhancing our understanding of the intervention's crucial points.
![Screenshot 2024-02-03 at 22.16.01.png](https://static.wixstatic.com/media/1a55d7_6f6c71384c7b43c29629918fbbc0dd5d~mv2.png/v1/crop/x_779,y_0,w_1689,h_1372/fill/w_678,h_551,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Screenshot%202024-02-03%20at%2022_16_01.png)
Wireframes
![wireframes-felix.png](https://static.wixstatic.com/media/1a55d7_ad0355942f47437f8ac6017467136a27~mv2.png/v1/crop/x_126,y_88,w_2266,h_1092/fill/w_944,h_455,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/wireframes-felix.png)
Colours
![Screenshot 2024-02-03 at 22.35.02.png](https://static.wixstatic.com/media/1a55d7_786d4bf5cc85440cacc7c8c5d3e8295e~mv2.png/v1/crop/x_0,y_109,w_1526,h_1240/fill/w_678,h_551,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Screenshot%202024-02-03%20at%2022_35_02.png)
We created the colour palette by enhancing the existent colours and introducing additional shades of blue. The aim was to manipulate these colours later in a manner that exudes elegance and modernity, surpassing the current aesthetic on the website.
Typography
![Screenshot 2024-02-03 at 22.56.59.png](https://static.wixstatic.com/media/1a55d7_79ba514bd5aa406cb762918215982179~mv2.png/v1/crop/x_59,y_0,w_1619,h_688/fill/w_741,h_315,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Screenshot%202024-02-03%20at%2022_56_59.png)
Following the same principle, we revamped the aesthetic of the website through the typography with new font combinations. We used the bold Abril Fatface for the headings and Roboto in different weights for the body.
Hi-fidelity design
We developed an high-fidelity prototype in Figma and then tested the solution with our users for further improvement.
The content hierarchy has been meticulously restructured, ensuring a seamless and intuitive presentation.
The donation process is now divided into 6 distinct steps, displayed on the left side throughout the entire journey for an improved user experience.
Users are empowered with immediate choices, allowing them to opt for a food donation, a monetary contribution, or to volunteer their time.
And everything is now integrated into the revamped user interface that adopts colours from their brand identity in a more modern and delicate way.
![Donate_Selected.png](https://static.wixstatic.com/media/1a55d7_7a4e6ae55c884ca884232f50dadb1a6e~mv2.png/v1/fill/w_980,h_1210,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Donate_Selected.png)
Key takeaways & next steps
Improving the design and user experience of a website poses a unique challenge, especially when intertwining research and the introduction of new features. However, as designers, it's a challenge worth embracing to formulate new strategies of improvement.
In a landscape where the majority of companies has one or multiple digital products, our emphasis should shift towards helping them in refining their current websites or apps. This involves providing insightful consultancy and hands-on enhancements to their design and user experience. Additionally, extending our assistance in the integration of new features becomes a pivotal aspect of our work.