Project Overview
A key part of the Century Tech product is its Content Creator and the high-quality content produced for teachers and students by the teachers. This led to a demand for consistent, branded content thumbnails. As the course list expanded, various image systems were created over the years. With new requirements, a more sustainable version had to be designed.
Requirements
Bright and colourful to stay on brand
Looks good on dark and light background
Readable on as small as 36px scale
Covers all subjects
Quick to creates
Scalable library
Versions
Versions evolved over several years as the startup focused on larger projects to drive rapid growth.
Version I
This option was developed by design team before I’ve joined. At the early stages of the product, CMS was intended to be used by users (teachers) to create their own content and thus it was suggested to allow users to upload their own thumbnail images.
Version II
One of CENTURY Tech main selling points is to ‘reduce teacher workload’. To speed up teachers process we explored possibility to creat an image gallery along side thumbnail upload. These images would be subject specific.
Main issue: requires a lot of resources to create images and for ever growing subject list on the platform this is not sustainable.
Version III
At this point in time app usage proved that CMS is not being used by the users as intended. Instead Teachers use Century content created by an internal curriculum team. This highlighted a need for more branded approach to image system. Therefore a simplified image style and subject colour coding was introduced to replace thumbnail upload system all together.
Main issue: this approach still requires a lot of resources to create images and lacks in scalability due to colours chosen for the subject are limiting variations.
Design
This is a final version that has been successfully implemented and is currently in use.
Research
I’ve research UK exam boards and run research groups with internal curriculum team to map out subjects that are already on CMS and predict on how it might scale in the future. This produced a list of 50+ subject that later was analysed, refined and grouped into disciplines.
Mapping
Main subject fall under one of the disciplines: humanities, languages, natural science, formal science, sports, arts, and digital. A century bran and ‘other’ subject disciplines were added to the list to allow for subject that doesn’t fall under any previously listed. Each discipline is then assigned and individual colour to be used across the app and marketing.
Background
Each subject inherits base colour from their parent discipline. Second layer of colour is then applied to the base colour that is assigned to the subject. This colouring is a form of transparent gradient to expose the base colour and create a cohesive gradient.
Iconography
New icon style was inspired by images used in the app sign in page background. These images tick off a lot of requirements:
look like they were hand drawn
playful and refreshing for all user age groups but mores for the primary school users
simple enough to produce quickly thus cutting on resources required to maintain the library
simple enough to look good in multiple sizes
First images were directly taken from the background image to develop a scalable style guides:
no more that 3 defined line sizes (1px, 2px and 3px).
only use colour white (#ffffff)
avoid extending image to the edges of circular container when possible
partner content is the only one that can include solid shapes for their logos, ideally in addition to a custom iconography that matched above guidelines.
Icons are mapped to one or more subjects in back end and overlayed over a subject background as selected in image selector in CMS
Library
Icons and backgrounds exist on distinct layers that seamlessly combine automatically when a specific selection is made. In the content management system (CMS), it is required for users to select a subject to start new course and The background image is applied right away. The system intelligently and randomly chooses an image from the extensive array of available subject-specific options. Should users wish to change the background image, they can easily access the image library and browse through the various options available to select their preferred choice.
Product Impact
This project was more challenging than expected, requiring three iterations to achieve a final result that has run smoothly for five years. It has also significantly influenced overall product development.
Content filters
Setting clear rules for color meanings and usage can extend to other parts of the app related to subjects and courses. This includes color coding for subject labels and adding color codes to content filters. Some course materials can also adopt these colors to enhance the subject's atmosphere.
Client customisation
Some clients choose to invest more to create their own style and brand. One of these clients, BPP, branded all app with their colours and added their own course images. The course image system is designed for easy theme switching and prioritizes custom images throughout the app.
Marketing
Course images are a key part of company brand and are featured in many marketing materials. Their colorful and fun style allows for diverse promotional designs that grab attention and create positive feelings.
