UX/UI : designing a Website for children and youth’s foundation.

7 min readJul 7, 2021

The client is a familial Foundation which develops projects for youth and children. They have a particular way to operate as each member of the family is in charge of one project and coordinates it.

The Foundation’s fundings are for now mainly coming from family incomes but this is a point they would like to improve in allowing other funders to donate through the website.

TL ; DR

Project duration: From february to may 2021
Goal: Re-designing the Foundation website
Research methodology: Qualitative

Outcome Highlights :

An UX audit, an ideation workshop, several MVP and 1 interactive final prototype desktop and mobile were generated;
I gathered feedback from 7 interviews and 5 user tests;
The final design answers the 3 main difficulties encountered by users :

Modernising the design,
Allowing to apply online,
Finding easily how to donate and information about the different projects.

A. Empathize

First, I discussed with the client to better understand their expectations and what were the goals behind the redesign. We also discussed about why they wanted a more modern website and how they would imagine it.

Then I started with an audit of the existing website and a benchmark of other Foundations.

The first thing I observed is the absence of CTA so the user engagement wasn’t existing at all.
There were a lot more pictures on other foundation’s websites
The information wasn’t well hierarchise and it was complicated to find information on projects
Finally, the foundation’s mission wasn’t clear enough from the home page

Research Methodology:

In that case I decided to use only interviews as users weren’t enough for a survey and interviews are very helpful in better understanding users expectations and needs.

I conducted 7 interviews starting from family members involved in each project as well as specific users such as beneficiaries.

During the interview I asked them to navigate on the existing website and tell me their feelings, pain points and misunderstandings. From this first testing we can remember that most of them took a lot of time to find information and often the content found wasn’t precise enough. Also there was a lack of CTA and pictures to help users navigate smoothly.

The family was thinking of making online donations available and allowing people to apply to different projects directly from the website. These two features were well received by the interviewees.

Also, beneficiaries were often checking the website to have information on the Foundation in order to write their motivation letter or prepare their applying interview but sometimes couldn’t easily find information such as other foundation activities or how to apply.

Persona:

From these interviews I was able to define two types of users. The first one is a young law student who wants to get the Foundations support and needs to find info online. The second is a friend of the family who wants to support the Foundation through a donation. She would like to have an easy way to do it online.

User journey map:

I created a multiple personas journey map in order to better visualise how they navigate and feel while using the actual website. Finally it helped me understand their main pain points and imagine opportunities and solutions to improve the overall experience.

B. Ideate

In order to get creative ideas to improve the website globally and propose new features, I facilitated an online workshop on Miro with the family members. I used a creative matrix to ideate collectively :

By specific users :

Beneficiaries
Journalists
Family and friends
Founders

And segments :

Discover the Foundations projects
Donate to the Foundation
Apply or get information to apply to a project
No more about the Foundation

We first started with a discussion about persona and outcomes from the interview to keep in mind user needs during the workshop.

A lot of great ideas came back from this exercise such as :

Add link to supported charities
Add a contact section / Creating an email address for the Foundation
Add more project pictures
Add online payment
Allow to apply online / Download application form
Add a “what have they become” section
Newsletter
Videos to present the different projects
Add a private access to former laureates contact & details

Then we decided together what was possible now, later or what we shouldn’t do through a prioritisation map. For instance we decided to implement first:

Add link to supported charities
Add a contact section / Creating an email address for the Foundation
Add more project pictures
Download application form
Add a “what have they become” section

And to do later:

Add online payment as it’s needs a bigger budget
Allow to apply online as it is difficult to make it through Wordpress
Newsletter as a significant amount of time is needed to create it
Videos to present the different projects as it takes time and money to produce
Add a private access to former laureates contact & details would require a sharper development

We also decided that some of the propositions would not be implemented at all such as:

Allow people to choose a specific project to invest in : impossible to do while being hosted by the Fondation de France
section with family member picture and profile as the family didn’t want to put themselves forward
Chatbot as it is technically more complicated and it is not really needed by the users for now

C. Prototyping:

With all the information gathered in the previous phase, I started to make user flow as well as a sitemap to better understand how users navigate through the website and hierarchise information.

Finally I was ready to sketch a MVP on Marvel to include the several features and sections decided from the research and the ideation workshop.

Then I conducted 5 user tests on Marvel with some of the interviewees.

I set up a test protocol in asking them first to navigate freely on the landing page and click wherever they wanted to. At the same time they were sharing their feelings, thoughts or misunderstandings.

Then, I gave them some specific tasks such as :

- Go over some project and donate

- Check the Foundation missions

- Go over the two different pages of prix Etienne et Philippe Riché and get more info on them

The tests showed me that some information was missing such as :

Information on what former loreates became
Add a link to the Fondation de France on the home page
Put all the 4 projects directly on the home page

But also clarifying some aspects such as:

improve CTA wording with verbs
Highlight the “Donate” CTA

I iterated the MVP with all this information.

D. High Quality prototype :

Then I was ready to design a High Quality prototype on Figma in using mainly the logo colours as starting point and played a bit with them to create an elegant colour palette.

Then, I created a UI Kit ready for the web development.

And finally here is the final interactive prototype :

Afterthought and difficulties :

It was quite difficult to find users to interview as the Foundation is really small and doesn’t have a lot of projects
The website is developed through Wordpress which offers limited possibilities of features
Budget difficulties made impossible to develop features such as the online donation for now