sk.

BCITO

A light blue background with a white desktop computer displays the file library UI from the BCITO application.

context

BCITO (Building and Construction Industry Training Organisation) is the largest provider of construction trade apprenticeships in New Zealand. As apprentices learn on the job, they require a digital platform to record and upload evidence of their work for supervisors to assess.Working alongside a small team at Catalyst IT, we created a solution to present to BCITO. Many businesses presented solutions, however they went with ours.

Tech

UXPin, Mahara ePortfolio

Date

October 2018

Skills

UX Design, Prototyping, Theming

Desktop UI of the dashboard page. It welcomes the user Tabitha (a supervisor). Here she can browse through a list of her students to view their work/progress.

solution

Using a combination of Mahara mobile and a customised version of Mahara’s ePortfolio system, apprentices are able to upload media such as images, videos, voice recordings from their mobile which they can later edit and tag to the relevant skill they are working towards and submit for assessment.

Role

Working closely with Catalyst’s head of design to develop wireframes for each user’s journey - the apprentice, supervisor and employer. My familiarity with Marahara’s ePortfolio system, meant I could help advise on how we could utilise Marahara’s existing UI while implementing the experience and functionality required by BCITO.

From here I created a high fidelity prototype that presented each user’s journey through the application. This was then presented to BCITO to provide a close representation of how the application might look and function.

Desktop and mobile UI of the dashboard page. It welcomes the user Johnny (an apprentice). Here he can quickly access his overview and evidence pages, as well as upload evidence.

Mobile first

Because not all apprentices own computers, it was important the application could work seamlessly on mobile devices. The below UI is based on the ‘Mahara mobile’ app and demonstrates how an apprentice might upload and tag a piece of evidence from their mobile.

Customised version of the Mahara mobile UI. Large blue buttons allow the user to quickly upload evidence.
Mahara mobile pending uploads screen shows an image of a builder hammering nails. Blue buttons show edit, delete and upload to your Mahara.
Mahara mobile details screen shows a title, description and tags input that can be edited and saved.
Mahara mobile pending uploads screen. The asset 'johnny-img.jpg' is ready to be uploaded to his Mahara file library. A blue button reads 'upload to your Mahara'.

File Library

Once an apprentice uploads a piece of evidence, it shows up in their file library. This is a place where they can spend time editing and tagging evidence to the relevant skill set they are working towards. To avoid the scroll of death, a filtering system provides an easy way to find evidence.

A cropped view of the file library UI. The title reads Carpentry by Johnny. Underneath the title is filtering options, followed by individual assets laid out in a tile like design.
Desktop view of the file library showing the detailed asset view. When a piece of evidence is selected, a draw like modal slides in from the right. The evidence is a picture of a builder hammering nails.

Overview

Evidence that’s ready for assessment can be submitted to the apprentice’s Smart Evidence page. This provides a visual overview of their progress towards achieving each skill set. This is where supervisors can approve evidence, leave feedback through comments and sign off skill sets when the criteria has been met.

Cropped view of the smart evidence page. The title displays Carpentry by Johnny. The skillset 'Tools and equipment of the trade' has four pieces of approved evidence and one piece pending review.