About Stronger Families

Aimed at lone parents and professionals working with lone parents, Stronger Families is a European initiative funded and led by the European Commission which helps parents improve their skills and/or progress to employment. It provides work and vocational skills through innovative, creative and entrepreneurial blended learning programmes. The project is a partnership between five European organisations.

The Project

This four year project was a collaboration of five charities across Europe, involving a team of eleven people. We followed a user centered approach and iterative process to complete this project.

The challenge

This project had to follow strict requirements from the European Commission. These requirements involved the creation of a blended learning website that would host programmes in four countries, translated in three languages. Some programmes would be delivered online and others in class. The programmes were aimed at three types of learners. The main challenge was to create a user experience that would be simple, effective with a very clear navigation.

My role

I was an employee of One Family.

Although I was involved in every stage of the project, I was mainly responsible for:

Presenting all UX deliverables to the team
Designing and developing the website and the online platform (except the branding)
Designing the programmes for the online learning platform
Designing the web graphics, flyers and posters

Requirements

As always, we started to ask questions:

who are the users we are targeting?
which features would be useful to them?
what goals do they need to accomplish?
what are the users needs and desires?

Personas were created and allowed us to achieve the goal of creating a good user experience for the target users.

User Task flows

Task flows helped me to think through the design, before a feature is actually developed. It helped me to interject the user into the flow of the application, and determine if the conceptual model agrees with the user model.

The task flows shown below show the steps that learners need to take in order to reach their objectives: how learners access a programme depending on their country of residence and language and also how they enrol in a programme.

Wireframes

I always start any project by sketching first; this process allows me to painlessly add changes and alternative solutions almost immediately. When the project manager and myself were satisfied with how the main features worked out on paper, I made wireframes using Figma.

The wireframes presented below display two versions of the navigation bar.

The team wanted to see different ways of displaying the programmes sections on the homepage. Three wireframes were created for this purpose.

Testing and Iteration

After our wireframes were created, it was time to do some first one-to-one interviews in which users would be asked to perform a series of tasks such as enrol in a programme, go to Programmes page for parents, Ireland and Programmes page for professionals, Italy, reset password, etc.

By watching our test users perform the tasks, we found that some areas were confusing, not simple enough and needed to be improved on, removed or altered. We updated our wireframes and invited potential users to a second interaction. For example, users preferred to have all the countries displayed in the navigation bar.

A word On Styling Concepts

The pink colour from the logo was used throughout the website to keep the consistency. I have slightly darkened it though to give more depth to the look and feel of the website.

The 3 main colours are pink, light grey and dark grey. They were used in pictures, backgrounds and buttons. Pink brightens the website and combined with light and dark grey, they give a sense of coolness and calm.

The chosen typography flows naturally across large paragraphs, inspiring a healthy rhythm for long stretches of reading. It is clear and enough so visitors can read effortlessly. It is applicable across browsers and computers. The overall feel is a clean layout with generous white space.

A word On Styling Concepts

The pink colour from the logo was used throughout the website to keep the consistency. I have slightly darkened it though to give more depth to the look and feel of the website.

The 3 main colours are pink, light grey and dark grey. They were used in pictures, backgrounds and buttons. Pink brightens the website and combined with light and dark grey, they give a sense of coolness and calm.

The chosen typography flows naturally across large paragraphs, inspiring a healthy rhythm for long stretches of reading. It is clear and enough so visitors can read effortlessly. It is applicable across browsers and computers. The overall feel is a clean layout with generous white space.