Noel Wong

Case Study: MOTIF Learning

 My Key Skills

Brand identity & Project Visual

Art direction
Brand architecture management communication

Concept UI design:

Storytelling Motion graphic

development Wire-framing

2
Table of Contents
1. About MOTIF Learning
2. My Role in MOTIF Learning
3. Branded Experience Across Digital Devices
4. Creation of MOTIF Brand Identity
5. Branded E-Learning Materials on motif.org
6. Achievements

About MOTIF Learning

The fashion world needs innovation, technical intelligence, and
practical skills to tackle the challenges of the future and counter
the global race for talent. MOTIF exists to bridge this gap and
gives learners access to training, professional development and
mentorship from the industry’s top practitioners.

4
My Role in MOTIF Learning
I was the Brand and Creative Lead in the team, playing a key
role in content development and marketing communications.
I joined MOTIF during the early stages of the company
growth. I took the lead in creation of MOTIF brand identity
and branding guidelines. From there, I was the owner and
keeper of the band guidelines through all the subsequent
web page designs, online course materials, marketing
campaigns and social media.

5
Branded Experience
across Digital Devices
Content on a course page is displayed on a
responsive grid system. The team has to make
sure that the content is brand-compliant and
rendered properly on screen.

6


 MOTIF Course Pages
The multimedia content of a course sits on a responsive grid system. It is crucial to make
sure the visual elements sit nicely across digital devices. We check the responsive layouts
on mobile, tablet and laptop before the official launch.

7
 UI Design Guideline for
MOTIF Online Courses
When it comes to UI design for courses, the
primary considerations are:
1) readability
2) a clear and simple information hierarchy
3) visual cues to guide the learners to learn
4) elements sit nicely on the responsive grid.
5) a consistent visual style that reflect the
publisher's brand identity.

The UI design guidelines are formulated based

on the above objectives. Vendors and
freelancers use this document to build pages for
online courses.

8













Creation of MOTIF Brand Identity

9
Challenges in the Early Stage of
the Company Growth

Problem
To empower the industry to reach a collaborative,
By the time I joined MOTIF Learning, the team had a Mission
responsible and sustainable future
MOTIF logo designed, a colour palette with 2 colours
only and a few lines about mission and vision. But the Vision
To curate, organize and fuel the industry’s
knowledge and best practices
team had clear ideas on the market positioning and
target audience.
Tagline To bridge the skills gap for the fashion industry

The information was insufficient for me to create branded

communication assets with high consistency and Target Audience
Professionals from fashion and apparel industry &
Training team from fashion and apparel company
articulate the brand story. The brand was lacking a
personality. The team had to think about how we want to
Age group 18-50
present the brand to MOTIF’s customers.
A brief summary of the descriptions about the brand in the early stage

10

Challenges in the Early Stage of

the Company Growth

Approach
It’s crucial to create a brand bible for the company to
keep a visual consistency across the course content,
communication materials and web design.

I led a brainstorm session with the team to come up with

the brand personality. I gave the team a bag of small
cards in which each card has an adjective on it, and I
asked the team to pick some adjectives that are good to
describe the brand.

With brand personality decided, we could complete the

brand voice, build the brand identity and integrate the
personality into the storytelling.
The brand personality articulated on the brand guidelines

11

An Example Showing
How I Further Develop
the Brand Guidelines
Trustworthy
This is an example showing how I develop the colour
palette from one of the brand adjectives. I looked for
references of tech brands, online education brands
and academic institutions that give a sense of
trustworthiness.

12



Some Screenshot of the Final Brand Guidelines

13
Branded E-Learning
Materials on motif.org
How to Run a Fit Session is one of the courses on
motif.org. I use it as an example to demonstrate
how I manage the design of branded content for
E-Learning purpose.

14
 Some Considerations When Designing Learning Materials
The considerations we took into account when creating the learning materials with instructional designers

Vision of instructional design My input

Create a roadmap for each course. If there are 6 modules,

there are 6 spots on the map. Each module starts with a
Show the overall picture of the learning process
learner icon stopping at the corresponding stop, which
indicates the progress the learner has been made.

Use icons to visualise the learning objectives. They are easy

Clear understanding of the learning objectives to recognise at a glance, helping learners to absorb the
information quickly.

Readability and clarity are important in designing learning

Clear and well-organised learning materials materials. The information is also chunked into small pieces,
which make the learning content more digestible.

Interactivity Make sure the UI design is intuitive.

15
 Downloadable
Alvanon is one of the publishers on motif.org. The downloadable content reflects the style of the brand.

16
 Screenshots of Course Video Guidelines
MOTIF ensures the publisher’s videos are brand-compliant. Video guidelines provide
direction on the graphical and typographical style, as well as the considerations that
should be taken into account when producing videos for e-learning purposes.

Table of content Target audience Our considerations in design Title and name
Background Professionals in fashion and apparel industry. Caring to our clients:
Use Montserrat Extra Light on the title
1. Target audience People may spend hours on the course content. It is crucial to make and Montserrat Regular on the name.

2. Our considerations in design Their needs: sure the course content is easy to read. Readability takes priority in
The font size of the name is two times
• How they read the content: they read the content in digital the content design. bigger than that of the title.

Course video design direction devices, but desktop and laptop would be the primary devices
Also, a simple and clean layout design helps to avoid distracting
1. Colour 3. Video
• Where they read the content: Considering they can use hand- people to read the content.
2. Typeface vi. Line height
held devices to access the content, they will start learning
3. Video vii. Numbered list
anytime, anywhere. Professionalism:
i. Typography and effect viii. Text list
The overall visual style needs to be in line with Alvanon brand
ii. Course title 4. Supporting graphic
guideline. The corporate orange and grey would be the main colours. Reference picture from The Fit Form course video
iii. Title and name i. Info-graphic style
iv. Typography and effect ii. Pointer
iii. Illustration

Numbered list Data point Pointer

Numbered list: Number and text: Dashed line: stroke with 3px and a
Set the height of the number icon to three The font size of the numbers is 4 times small arrow head.
times of the font size of the text. E.g. if the larger than the text. The space in
font size is 12px, the height of the icon between two data points is equal to
should be 36px. the height of a number.

Keep the text away from the number icon

by 1 lowercase letter (red square). The text
should not be all capitalised, except the
course title.

Each of the number icon is two lowercase

letters away from the next number icon.

Use Montserrat Light on text and Montserrat

Reference picture from Mechanics of Fit course video semi-bold on important phrases. The Reference picture from Mechanics of Fit course video Reference picture from Mechanics of Fit course video
numbers are in Montserrat Light.

17
 Iconography
A set of icons is created to illustrate the learning objectives of a course module.

18
Achievements

19
• Launched 20+ online courses, 2 big online conferences and 2 online masterclass series
during my 4 years of service.

• Expanded the follower base on Linkedin from 0 to 2K with the support of the content
marketing strategy.

• According to the end-of-a-course survey data collected from the launch date of a course
to 19 May 2020, customers gave an average 4.5 out of 5 for the multimedia content in
terms of professionalism and aesthetic appeal.

• “I highly recommended the trainings available on MOTIF. The videos, interactive activities,
definitions and exercises really make for a great learning experience. Whatever your
function in your company, you will learn more about the industry, how to re-define
communication process, improve efficiency among different departments and enhance
your working habits with best practices.” — 



Rama Sick, Product Technologist, 

Action N.L., Amsterdam, The Netherlands

20
Further information
Please also visit my portfolio site: noelwongsp.com. Should you
have any questions, please contact my email:
noelwongsp@gmail.com

21
“Thank you”

22