How's Your Brain
Team
Team of 4
Deliverables
User research report
Persona/User Journey Map
Wireframes
Interactive prototypes
Data Visualisation
Design Reflection
Tools
Miro
Figma
Illustrator
Python
D3.js
Duration
Feb - May 2022
Project Overview
Who Is About My Brain
Develop brain-friendly leaders, teams and cultures. It's a scalable educational platform that provides skills development in brain-based leadership to help organisations and their people become more conscious, healthier, happier and productive.
Client Needs
A web-based interactive digital awareness piece that promotes the concept of why it is vital to create brain-friendly leaders.
Challenges
-
How to present the global data from the i4 Neuroleader Assessment?
-
How to translate the learning concepts from the documentary into an interactive piece to tell a compelling story?
-
How to attract more users to sign in with the institute?
Design Process
1:
Empathise
Background research
Data Analysation
56 Questionnaires
8 Interviews
User needs
2:
Define
Persona
User Journey
3:
Design
Frame Design Goals
Visual Direct
Sitemap
Wireframes
4:
User Testing
Think Aloud
5:
Solution
High-fidelity prototype
Design Reflection
Empathise
Background Research
With the design challenges in mind, we first researched online to understand the largest working population in the global market. From Deloitte's report, we found that Millennials (1981-1996) comprise 75% of the worldwide labour force since 2018, and 41% of Millennials feel distressed most of the time and care about self-growing.
Data Analysation
Then, we analysed the current users' data from the About My Brain Institute. Compared with other age groups of existing users, millennials have the lowest mean grade in 15/16 leadership abilities.
Target Audience
Millennials: Because they are the most significant labour force in the global market, they want and need to improve themselves.
Insights From 56 Questionnaires
Next, we conducted 56 questionnaires for millennials to deeply understand their leadership abilities, mental health status, and learning preferences. We found that more than 80% of participants don't know how to improve their leadership skills. More than 60% of participants don't know how to solve mental health problems. More than 70% prefer to spend 5 -30 minutes learning related topics.
Insights From 8 Interviews
Then, to better understand target users' needs for leadership online learning, we interviewed four managers and four non-managers from different industries.
When defining potential user needs, we used an affinity diagram and extracted the critical preference when users consider leadership online learning: Practical Learning, Beginner Friendly, Platform Credibility, and Curriculum Structure.
Affinity Diagram
Define
Persona
Based on the emphasise phase, we conducted two personas based on users' needs and issues. Feng is a manager who wants to learn more about leadership ability and to keep mental health. The other is Chris, a mid-engineer who knows nothing about leadership but wants to become a leader in the future.
User Journey
To put ourselves in users' shoes, design better user experiences for the website, and understand users' feelings and touchpoints, we conducted a user journey through 4 stages.
We found that the touchpoints are the qualification of the institute and the measurements function before learning.
Design
Frame Design Goals
Promote Brain-Friendly Leadership & Wellbeing to Millennials
For
business leaders and people who want to improve themselves.
To
agree with the idea of Brain-Friendly and believe the institute is trustworthy.
Our
"How's Your Brain"
Is
A user-friendly website that presents data and beginner-friendly curriculum information.
Which can
let audiences understand in 5 minutes:
What is brain-friendly
Why do we need to embed brain-friendly leadership and well-being practices in the workplace?
How to improve brain-friendly leadership practically.
Visual Direct
All colours and fonts are from the About My Brain institue.
#C75B48
#FDC344
#FDC344
#1BBDD4
#FFFFFF
Brandon Grotesque Black
H1 72pt
H2 36pt
H3 32pt
H4 24pt
Proxima Nova Regular
Paragraph 16pt
Caption 12pt
Shape the sitemap
Then, we generated a sitemap to understand where the user could go.
Join Us
Welcome Page
What is i4
Learning Journey
Why i4
Documentary Information
Data Visualisation
Strategy
Future fit
Industry recognised
What is performance
What is innovation
What is collaboration
What is agility
Impactful
Cross disciplinary
Measure
Reflect
Develop
Grow
Journey
Watch documentary
Based on science
Scalable & Sustainable
Wireframes and Iteration 1
After user testing with 12 different users, there are two problems.
1: They think the curriculum is not beginner-friendly after reading the contents.
2: They believe the design could be more attractive.
Iteration 2
During this stage, we made many modifications to solve the attractive problem and created a new "learning journey" section to tell users that this curriculum is beginner-friendly.
In this round of user testing with another 12 different users, we found the following:
1: the data page needs some titles and descriptions.
2: Too many luminous objects reduce the readability of important information.
Heuristic Evaluation
We also used heuristic evaluation to evaluate the website's usability.
1: We violated the "flexibility and efficiency of use" on the Welcome Page, where there is no button to skip the animation.
2: We broke "aesthetic and minimalist design" on the "Learning Journey" page, in which the connecting lines look cluttered and superfluous.
Final Design
"Welcome" Page
-
A short animation shows the general information of the “about my brain” institute.
-
An enter button to speed up the interaction for the expert user.
"What is i4" Page
-
A clear and straightforward curriculum structure allows users to find the contents of the i4 curriculum.
"What is i4" Page - After clicking
-
When hovering, show the importance of developing this competency and related data.
-
Added a line of text to prompt users that the mouse hover area is clickable.
-
Reduced the graphics and changed the layout in the i4 interface to make the page more readable.
"Why i4" Page
-
Shows the irreplaceable advantages of the i4.
(e.g., Qualification, Impact.)
"Learning Journey" Page
-
Clear and straightforward learning steps to tell users this curriculum is user-friendly and beginner-friendly.
"Documentary" Page
-
Transform the documentary's contents directly into the text version with specific sections.
-
Touchable user experiences and strategies from the documentary tell the magic influence of the i4 Neuroleader™ Model.
"Data Visualisation" Page
-
Support the credibility of the I4 Neuroleader™ program by visualising the demographic information of our existing users.
Design Reflection
Credibility
“There are data to support, which looks more reliable.”
“The part of Industry Recognised was quite convincing to me.”
Content
“It is clear at a glance. I can get the information I want to know directly.”
Willingness to Further Explore
6/6 participants expressed interest in learning more about i4 Neuroleader Methodology.
3/6 of them showed interest in the documentary “Make Me a Leader” and wanted to watch the film.
4/6 said they want to search i4 Neuroleader to explore more related content.