About One Family

One Family is Ireland’s national organisation for one-parent families. They make policy submissions to government, undertake research in key areas and advocate for better lives for one-parent families. They provide counselling services, parenting support and online programmes for their clients. In everything they do, One Family is solution-focused.

The Project

One Family Programmes is an eLearning website that provides personal and professional development programmes for single parents, facilitators and employers working with single parents.

The challenge

One Family’s main idea was to create an eLearning website which would contain all the programmes that had previously been delivered via emails.
The main challenge was to work through the low budget that was allocated for this project.
The second challenge was to create a website that would be simple, effective and aimed at three categories of learners.

My role

I was an employee of One Family.
My duties were as follows:

  • Creating the website ‘One Family Programmes’
  • Creating the graphics for the programmes’ lessons
  • Presenting UX deliverables to my manager
  • Creating / modifying content of four programmes
  • Adapting the content to an online programme format

Requirements

Those questions were asked:

  • Who are the users we are targeting?
  • Which features would be useful to them?
  • What needs and goals do they have?

Task flows

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

Here are some of the tasks flows I created:

  1. How learners access the programmes of their choice
  2. How they enrol in a programme without being a registered user

Sketches & 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.

Here are two wireframes representing:

  • Three versions of the navigation bar
  • Two versions of the homepage and parents’ page

The “less is more” approach was used by creating a lot of white space between the elements and making the programmes more visible.

Creating The Online Platform

Creating the online platform consisted in three main steps:

  • Step 1: Preparing the content (modifying and at times creating it to make it deliverable through an online platform)
  • Step 2: Transferring the modules and units into the website
  • Step 3: Creating infographics and images (one or two per lesson)

Delivering The Programmes

I trained the staff and facilitators to use the website. This included group and individual training. I also created a manual for facilitators and staff in charge of the educational platform.

A Word On Styling Concepts

Some of the colours present in the organisation’s branding and main website were used to maintain a consistent style. The dominant colour blue (light and dark shades) is a well suited colour for an online education website as it promotes relaxation and focus. It inspires safety and serenity. Dark blue is also associated with intelligence.  The addition of green is used to brighten the overall tone of the website.

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

A Word On Styling Concepts

Some of the colours present in the organisation’s branding and main website were used to keep the consistency. The dominant colour, blue (light and dark shades) is a well suited colour for an online education website, as it promotes relaxation and focus. It inspires safety and serenity. Dark blue is also associated with intelligence.  The addition of green is used to brighten the overall tone of the website.

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.

Visual Design

After all the wireframes were designed I moved onto making the mockups. I focused on designing a website that was simple and clean and inviting.

Mockup Programme For Parents

Programme For Parents Mockup

Mockup Programmes

Programmes Page Mockup

Mockup Homepage & Course Intro, Mobile version

Programmes Mobile Mockup

The Result

There were major benefits to this website:

One Family is now fully in control of their educational platform and will reach a wider audience throughout Ireland. Single parents across Ireland will be able to enrol in programmes and learn at their own pace. They will also be able to get feedback from the programmes’ facilitators.

Alterations to the original design may happen as I am no longer responsible for maintaining the website.

View Website

Alterations to the original design may happen as I am no longer responsible for maintaining the website.

View Website

Alterations to the original design may happen as I am no longer responsible for maintaining the website.

View Website