Scorelink

Bringing data-collection and analysis to schools

Scorelink screenshot

Client

Hypercore

Project

Responsive Web App

Year

2017

The challenge

Scorelink is a first-of-its-kind software for the data revolution. Used by over 100 South Australian schools. With the focus on data-collection and analysis, it makes teachers more productive and gives oversight for leaders.

The Scorelink app had paying customers and was in a growth stage. But without a designer on their team, Hypercore needed some outside help. They approached me to improve the user experience and interface design.

My role

As the UX team of one, I worked with Hypercore to develop the UX design, UI design, and HTML & CSS.

Icon design

Navigation icons

I designed custom icons for the primary navigation bar. Shown below from the production app with hover states for labels.

File type icons

I also designed icons to accompany file type downloads. Shown below are two options, we ended up going with option 1.

Scorelink file icons
File icon design idea generation. I presented all ideas in colour and greyscale, as we also used the icons in black and white printed reports.

Pattern library

I designed a pattern library to document all the interaction patterns in the application. This allowed us to take stock of which components from Bootstrap were being used in the application, and therefore needed styling. We also added any new components when they were used in an interface design.

The pattern library significantly reduced the number of interfaces that needed custom design work, as many of the interfaces were compositions of pattern library components.

Design System
The pattern library is a comprehensive, code-based collection of branding elements, base design elements and reusable components.
Scorelink reports
PDF reports I designed which are generated from data within Scorelink.

Interface design

Below are several interfaces I designed for Scorelink.

Some users have access to multiple schools, so we designed an interface for users to choose schools when logging in, or switch schools once logged in.
Version choice interface for the user to choose if they are logging in to Server or Cloud.
Scrollable tables with fixed headers.
Enrolments tab for a student's profile.
Google authenticator onboarding.
Inline document viewer interface.
Cloud login.
Students listing interface.

Final deliverables

  • Interface designs
  • Responsive HTML templates, SCSS for stylesheets
  • HTML/CSS pattern library

Takeaways

  1. A pattern library reduces scope. Creating the pattern library from the outset meant that I didn't need to design each and every interface. Some of the more straightforward interfaces were essentially done once the components were updated to the new style.
  2. Using colour with purpose isn't easy when each colour has meaning. Scorelink uses colour-coding for student scores, so we had to choose a palette that contrasted against these colours and didn't cause confusion.
  3. CSS frameworks aren't my favourite way to work. Bootstrap was a convenient shortcut for Hypercore to build the interfaces, but we found that customising Bootstrap felt hacky and resulted in far more CSS in the project.