CUHK Chemistry Department Laboratory Safety

We were approached by the chemistry department of the Chinese University of Hong Kong to create a small education platform for university students to learn about laboratory and chemical safety. This platform would allow students to read information and get quizzed in chapters.

Target Audience
University students, studying chemistry. Mostly aged 18 to mid 20s and/or are early in their university studies.

Agency: Jump
Creative Director: Josie Ling
Designer: Jin Wang
Front & Back-end Developer: Gary Tong

My Responsibilities

Wireframing
Design research
Design concepts
Design - desktop version only

Sitemap

This was the intial sitemap when first starting the project. The scope of this project was small so we had to stick with the very basics of what was needed in an education platform. The majority of the focus of the wireframing and UX design had to go into the two main branches of information - General Laboratory Safety and Chemical Safety. This was where the main learning information and quiz questions would be in.

Design Research

The client gave us one reference on what they wanted functionally - but aesthetically, it was up to us entirely. Alongside with my creative director, we researched various education sites and applications for design references. There was some focus on education platforms that were on tablets, as we believed that students were more likely to use tablets to access this platform.

We came up with three different design directions for the client to choose. The three different design concepts looked to appeal to young university students in different ways. The client chose the first concept of ‘Bold & Bright’.

Wireframes

General Pages

Information & Quiz Pages

During the wireframe process, I had to really look into the different ways of navigating through the different modules and how a student would read and retain information. The sidebar where the user could navigate through the different chapters was something I focused on, due to the large number of chapters for each module. There was also a lot of research on how to properly showcase the different questions - as there were different types of questions, such as multiple choice or trying to match answers. The quiz pages were also created with the intention that all the information would show on one screen without any scrolling.

Design

Once the wireframe process was done and signed off by the client, we worked on the design concepts. This was my design concept. I focused on the homepage and two general information pages to get the look and feel of the website first, based off the feedback that was given in the design research.

Colours

Font Styles

Key Components

︎