Freshspring Junior

A bespoke e-learning platform that encourages primary school children to pursue STEM and maritime subjects or careers.

Freshspring Junior UI

In the UK there is a substantial lack of STEM skills in the workforce. 89% of STEM businesses struggle to recruit, which in part is down to challenges in encouraging school-aged students to take up STEM subjects.

The Ship

The SS Freshspring is a non-profit, heritage steamship, recognised as a Vessel of National Importance and is moored in Bideford, North Devon. The SS Freshspring Trust operates to engage and advance the education of the public through the preservation, operation and the promotion of maritime studies, particularly among young people, for the public benefit.

Photograph in black and shite showing SS Freshspring Steamship in Bristol Docks.
SS Freshpring pictured in Bristol circa.1980.
_
ssfreshspring.co.uk

The Brief

We were approached to develop a dedicated website for primary-level school children and teachers. The website needed to extend the experience of school visits by introducing children to STEM topics with a focus on engineering and maritime issues and a range of possible maritime careers. The proposed web platform would enable them to follow up this theme at the learner’s own pace and in accordance with their interests.

Illustration of A Seal character with a orange woollen hat on a blue background.

My Role

My role primarily involved front-end development (SCSS, Twig) but due to the nature of having a small team I often became involved with back-end development, design and UX. Problem solving other aspects such as user flows for the various stakeholders was essential and accessibility concerns for younger users were researched. I also heavily documented the project and compiled a user guide to clearly aid the Trust to manage the site. I also subsequently ran a workshop to walk-through how the theme works for the required stakeholders.

On a more personal level. This was the first project to be made using an early version of the Hozokit framework (created by Cristiano Almeida) and it introduced me to a component based architecture and new libraries such as Twig and Timber that helped me grow as a developer, learning fast on the job.

The Challenge

  • The design, navigation and layout must be suitable for children in primary education.
  • The site must be password-protected and enabled with a school-specific access code.
  • Theses codes must be easy to manage and generate from the admin area for provision to new school partners.
  • A shared, fully moderated discussion space for participants motivated by STEM-related topics (including media upload).
  • Avatar selection and limited account control for users.
  • User types that determine the level of access and resources available. For example teaching resources will only be available to teacher accounts.
Illustration of lighthouse on beach.

Features

  • Custom bespoke theme that’s component based.
  • Fully responsive design.
  • Illustrated characters that appear across the site with different personalities and roles to inform children.
  • CSS animated SVGs.
  • Account creation in bulk by teachers.
  • Avatar selection for all users.
  • Teacher resources available to teachers to help plan maritime based STEM lessons.
  • Discussion area developed as a hybrid between a forum and a chat-messenger style.
  • Case studies area with short articles about careers and life at sea.
  • Interactive games and activities.

Showcase

A light blue background with a wavy texture with the Freshspring logo and a title below it exclaiming All Aboard! in navy and a rounded font. Three illustrated characters are standing inline. A seal wearing a striped t-shirt and an orange hat. A sailor with a grey beard and another seal in the captains outfit.
The picture is of text and reads the following: About. Freshspring Junior is a bespoke e-learning platform for young students, extending the existing SS Freshspring's education project. Freshspring Junior enable students to continue learning after visiting the steamship and become part of a community with similar interests and aspirations, supporting their career development.
UI of the login screen.
Freshspring Junior UI
Typography and Colours overview. Helsinki for mean title and Open Sans for sub-title and body.
UI of Case study page. A collection of experiences focused on career development in STEM and maritime life.
UI continued of Case Studies page.
UI of Teaching Materials page. Lists activities, workshops, engineering boxes and other resources that facilitate lesson planning with students.
UI of Disscussion page. Students can engage with stimulus Captain Steam makes available, putting forward learning challenges to incite discussion and questions.
UI for Avatar selection showing a number of colour options and characters.
UI for 404 not found.

Credits

Full-stack/Project Manager – Cristiano Almeida
UX and Design – Theng Yen Chen
Illustrations – Edgar Priednieks
Director – Paul Matthews

Tags: Front-end Development, UX