Shaping the look of online education
Client
SuperHi
Role
Art Direction
+ Design
Year
2020
Features
With a clear vision to establish SuperHi as the go-to online destination to learn new creative skills, I crafted a unique and flexible illustration style that can scale as the company grows.
Image for the Foundation HTML, CSS + Javascript course.
About the project
SuperHi is an online education platform and a global community of creative learners from 80+ countries around the world. They started out as a code school, and have grown to teach so much more.
With a growing community of coders, designers, makers, and learners, SuperHi needed a new website to better represent their offering while cementing their position within the competitive edtech space.
As SuperHi's designer and art director, I led the brand refresh, art directing the visual direction of the marketing site, creating 25+ course hero images, and designing lead generation guides—all built into a new visual and brand system.
Image for the Visual Design + Branding course.
Design Challenges
With the SuperHi marketing site being revamped to automate processes, add new features and better represent the company's growing offerings as it went from an online code school to a full-fledged creative community teaching all kinds of skills, there was a clear opportunity to also elevate the brand. The edtech space is becoming increasingly crowded and SuperHi sought to better surface the parts that separate the company from its peers. I created the visual direction to support this growth, starting with its primary offering: its courses.
The courses are an integral part of the SuperHi experience and their representation is pivotal in both the new marketing site and student dashboard. The course artwork was previously either photography of props on brightly colored backgrounds or a vector illustration. While they were good on their own, this arbitrary mix of styles created confusion and was not consistent.
With the natural foray into teaching new creative disciplines and skills, the need for course imagery was ever-present. SuperHi needed a system to create their course images, that was flexible, scalable and instantly recognisable.
A second challenge was, of course, to explore how the new course imagery direction could impact and transform the look and feel of SuperHi's brand across its multiple touch points (the marketing site, the student experience, social media, paid ads).
Image for the Digital Project Management course.
Design Solutions
Looking deeply into our courses, there were two defining attributes that stood out as common across the entire SuperHi catalog: their subject and level of difficulty.
With this insight, I created a layered approach for each course image.
The discipline each course teaches is represented by the type of grid in the background and by the decorative elements in the foreground.
The course difficulty is emphasized by the density of the background grid and by the number of shapes in the middle ground and their scale.
From left to right, top to bottom: ➊ The possible backgrounds for each course, based on their discipline and difficulty level. ➋ The possible shapes and patterns used across all images. ➌ The quantity and scale of the shapes reinforces the difficulty level of the course. ➍ The possible decorative elements used on the foreground layer of each image. The bar-like elements inspired by loading states, paper folds and paper trimmings are specific to each discipline.
The course images
Easter eggs
Whenever possible, there are little nods to the contents inside the course, hidden within the images. Here, the Creative Coding image references the position and transformative movement of the elements in one of the projects.
A project from the Creative Coding course, a close collaboration of SuperHi with Guy Moorhouse.
Breaking the system
Plan, Design + Code Your First Website is a free course that aims to show SuperHi's teaching style, and belongs simultaneously to the three main subjects they teach. To capture this, a new specific background grid was created.
The website
The new layered system that was created for the course images was expanded to encompass other touchpoints of the brand.
It was important for the hero section of the website to feel different enough from the course images, while maintaining a consistent identity and feel.
I've selected a shape from each of the three core courses on code, design and project management, and played with a more vibrant combination of colors in each shape. The result is bold, clear and builds into the visual direction.
Shapes, patterns and grids were carried over multiple sections on the website to create a cohesive visual experience.
The guides
The First Steps guides are a lead generation and sales funnel content project. Their intent is to introduce people to SuperHi and their three main skill pillars, in a way that's approachable, real, fun and practical, with a lens on helping people make and use these skills, no matter what role or career path they have or wish to have. These guides can be read online or saved as a downloadable pdf.
For each guide I was responsible for crafting the covers, designing the complete pdf and illustrating each chapter opening.
Each guide consists of three chapters, with a consistent format to walk readers through a journey in first understanding the broad context of the skill (and establishing SuperHi's point of differentiation), then answering a common question to deepen reader's understanding of the breadth of the skill, and finally, leading into practical resources and next steps.
Visually, each guide builds on the corresponding course hero image, expanding the overall system. The covers introduce how typography can play in the design system and each chapter opening illustration uses the quantity of shapes to represent the chapter number.
The pdf is designed following the rules of the SuperHi blog in terms of information hierarchy, but introduces some playfulness to the way the blocks of text are laid out. The final document is optimized to be printed at home, encouraging a reading experience away from the screen.
“André displayed great attention to detail throughout the entire process, and was able to effectively align the content with our new SuperHi brand and marketing site, which he also creative directed. He's an incisive and talented designer with not only an eye for detail and the skill to take any brief and make something with it, but the ability to think from the big picture and approach projects contextually and within fast-paced startup environments.”
Ana Wang
Former Head of Content at SuperHi
and author of the guides mentioned above.
Credits
Course artwork
Art Direction
+ Design
André Cândido
Marketing Website
Art Direction
André Cândido
Product Design
James Shedden
Development
Chris Lawrence
First Steps to Learning Guides
Author
Ana Wang
Art Direction
+ Design
André Cândido
Shaping the look of online education
Client
SuperHi
Role
Art Direction + Design
Year
2020
Features
With a clear vision to establish SuperHi as the go-to online destination to learn new creative skills, I crafted a unique and flexible illustration style that can scale as the company grows.
Image for the Foundation HTML, CSS + Javascript course.
About the project
SuperHi is an online education platform and a global community of creative learners from 80+ countries around the world. They started out as a code school, and have grown to teach so much more.
With a growing community of coders, designers, makers, and learners, SuperHi needed a new website to better represent their offering while cementing their position within the competitive edtech space.
As SuperHi's designer and art director, I led the brand refresh, art directing the visual direction of the marketing site, creating 25+ course hero images, and designing lead generation guides—all built into a new visual and brand system.
Image for the Visual Design + Branding course.
Design Challenges
With the SuperHi marketing site being revamped to automate processes, add new features and better represent the company's growing offerings as it went from an online code school to a full-fledged creative community teaching all kinds of skills, there was a clear opportunity to also elevate the brand. The edtech space is becoming increasingly crowded and SuperHi sought to better surface the parts that separate the company from its peers. I created the visual direction to support this growth, starting with its primary offering: its courses.
The courses are an integral part of the SuperHi experience and their representation is pivotal in both the new marketing site and student dashboard. The course artwork was previously either photography of props on brightly colored backgrounds or a vector illustration. While they were good on their own, this arbitrary mix of styles created confusion and was not consistent.
With the natural foray into teaching new creative disciplines and skills, the need for course imagery was ever-present. SuperHi needed a system to create their course images, that was flexible, scalable and instantly recognisable.
A second challenge was, of course, to explore how the new course imagery direction could impact and transform the look and feel of SuperHi's brand across its multiple touch points (the marketing site, the student experience, social media, paid ads).
Image for the Digital Project Management course.
Design Solutions
Looking deeply into our courses, there were two defining attributes that stood out as common across the entire SuperHi catalog: their subject and level of difficulty.
With this insight, I created a layered approach for each course image.
The discipline each course teaches is represented by the type of grid in the background and by the decorative elements in the foreground.
The course difficulty is emphasized by the density of the background grid and by the number of shapes in the middle ground and their scale.
From left to right, top to bottom: ➊ The possible backgrounds for each course, based on their discipline and difficulty level. ➋ The possible shapes and patterns used across all images. ➌ The quantity and scale of the shapes reinforces the difficulty level of the course. ➍ The possible decorative elements used on the foreground layer of each image. The bar-like elements inspired by loading states, paper folds and paper trimmings are specific to each discipline.
The course images
Easter eggs
Whenever possible, there are little nods to the contents inside the course, hidden within the images. Here, the Creative Coding image references the position and transformative movement of the elements in one of the projects.
A project from the Creative Coding course, a close collaboration of SuperHi with Guy Moorhouse.
Breaking the system
Plan, Design + Code Your First Website is a free course that aims to show SuperHi's teaching style, and belongs simultaneously to the three main subjects they teach. To capture this, a new specific background grid was created.
The website
The new layered system that was created for the course images was expanded to encompass other touchpoints of the brand.
It was important for the hero section of the website to feel different enough from the course images, while maintaining a consistent identity and feel.
I've selected a shape from each of the three core courses on code, design and project management, and played with a more vibrant combination of colors in each shape. The result is bold, clear and builds into the visual direction.
Shapes, patterns and grids were carried over multiple sections on the website to create a cohesive visual experience.
The guides
The First Steps guides are a lead generation and sales funnel content project. Their intent is to introduce people to SuperHi and their three main skill pillars, in a way that's approachable, real, fun and practical, with a lens on helping people make and use these skills, no matter what role or career path they have or wish to have. These guides can be read online or saved as a downloadable pdf.
For each guide I was responsible for crafting the covers, designing the complete pdf and illustrating each chapter opening.
Each guide consists of three chapters, with a consistent format to walk readers through a journey in first understanding the broad context of the skill (and establishing SuperHi's point of differentiation), then answering a common question to deepen reader's understanding of the breadth of the skill, and finally, leading into practical resources and next steps.
Visually, each guide builds on the corresponding course hero image, expanding the overall system. The covers introduce how typography can play in the design system and each chapter opening illustration uses the quantity of shapes to represent the chapter number.
The pdf is designed following the rules of the SuperHi blog in terms of information hierarchy, but introduces some playfulness to the way the blocks of text are laid out. The final document is optimized to be printed at home, encouraging a reading experience away from the screen.
“André displayed great attention to detail throughout the entire process, and was able to effectively align the content with our new SuperHi brand and marketing site, which he also creative directed. He's an incisive and talented designer with not only an eye for detail and the skill to take any brief and make something with it, but the ability to think from the big picture and approach projects contextually and within fast-paced startup environments.”
Ana Wang
Former Head of Content at SuperHi
and author of the guides mentioned above.
Credits
Course artwork
Art Direction + Design
André Cândido
Marketing Website
Art Direction
André Cândido
Product Design
James Shedden
Development
Chris Lawrence
First Steps to Learning Guides
Author
Ana Wang
Art Direction + Design
André Cândido