diversity of africa - aquib sylvester · my thesis project, diversity of africa, is an interactive...

44
Diversity of AFRICA MFA FINAL THESIS BOOK AQUIB KWESI SYLVESTER / 02094726

Upload: others

Post on 30-May-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

Diversity of AFRICAMFA FINAL THESIS BOOK

AQUIB KWESI SYLVESTER / 02094726

Page 2: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

TABLE OF CONTENTS

Autobiography 3

Resume 4

The Pitch 5

Thesis Abstract 6

Statement of Interest 7

Proof of Concept 8

Strategic Process 10

Visual Process 20

User Experience Process 31

Information Architecture 32

Technical Details 40

Analysis & Conclusions 41

Portfolio Link 42

Links 43

Bibliography & Credits 44

Page 3: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

MY AUTOBIOGRAPHY

My name is Aquib Sylvester. I was born in

Brooklyn New York, but lived most of my

childhood in Trinidad and Tobago. I am a

Caribbean man at heart and the festive nature

of the Caribbean people and my family is

heavily saturated within me. My mother and

father are native Trinidadians. My mother is a

strong woman, full of life. I inherited this from

her. My father worked as a security chief for a

major security firm. He is very educated man

and critical thinker. I will attribute my critical

thinking to him. Both my parents fuel strong

cultural awareness and artistic drive within me.

As a child, I always expressed a skill and love for

drawing. On special events like Mother's Day,

Father's Day, and birthdays, I would draw cards

as gifts instead of purchasing them. Such

opportunities sparked a love in design and

illustration for me all the way to high school

when my family returned America in the early

90's. In the United States, I attended Calvin

Coolidge Senior High School where I graduated

with honors. With my expert skills in drawing

and illustration, I was able to obtain

scholarships at Howard University where I

major in Fine Art s, with a concentration in

Computer Arts.

While at Howard University (HU), I was

introduced to web development when I took

my first 3D Modeling Course. Since then, I have

never turned my back on the field. In my senior

year at college, I was able to get a work-study

job as an IT assistant where I designed and

developed websites for departments at the

university. This qualification proved very

beneficial in my initial career as a web designer.

By graduation I already had an extensive

portfolio attracting employers. I have since

worked at The Performance Institute,

Executive Office of President, US Government

Printing Office, CGI Federal, and VMD Systems

as a web designer and developer. During my

tenure as a designer and developer, I have had

the opportunity to work on several projects

including the WhiteHouse.gov Kids website,

Senate.gov website projects, SOCOM DVD

Interactive Application, Custom Internal CMS's

and the polarizing Healthcare.gov website.

Since I developed a relationship with Howard

University, I was invited to teach an

introductory course in Web Design. This

opportunity was the inception of my love for

teaching. The values I gained during that

experience stay with me and actually sparked

my desire to obtain an MFA. However, within

this industry, one's knowledge and skill are

enhanced not just through academics but also

through practical field experience. So I will like

my career to express this reality both now and

in the future. I want to be an educator while still

being an active developer. In such a way, I

remain both a student and teacher, which is the

ideal balance.

Page 4: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

PERSONAL RESUME

AQUIB SYLVESTERwww.AquibSylvester.me

202.841.6136

[email protected]

1600 S. Eads St. Arlington, VA 22202

EDUCATIONMFA in Web Design & New Media

Academy of Art University, San Francisco, CA

Anticipated Graduation Date: 2018

BFA in Computer Arts, 2003

Howard University, Washington, DC

SPECIALTIES

Information Architecture, Interaction Design,

Usability, User Experience Design, UI Develop-

ment

EXPERIENCE Senior UX & UI Tech Lead

American College of Cardiology

9/2016 – Present

Senior UI Developer & Designer

VMD Systems Integrators, Inc.l Reston VA

9/2013 – 2016

Senior Front-End/UI Developer

CGI Federal, Herndon VA

9/2012 – 9/2013

Senior Web Designer & Developer

U.S. Government Printing Office, Digital media

Services, Washington, DC

9/2007 – 9/2012

Web Consultant /Web Designer

Executive Office of the President (EOP), Wash-

ington DC

7/2006 – 09/2007 (Unisys Contractor)

Senior Multi Media Designer

The Performance Institute, Arlington, VA

6/2004 – 7/2006

Lecturer

Howard University, Washington, DC

9/2005 – 6/2006

SOFTWARESAxure Pro, Adobe Creative Suite, Visual Studio

2010 (TFS), Visual Studio Code, JIRA

LANGUAGES & FRAMWORKSHTML5, CSS3, JavaScript, JASON, AJAX, Zurb

Foundation 6, Bootstrap, LESS.js

Page 5: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

THE PITCH

The continent of Africa is severely misrepresented in popular media due to

misinformation, disinformation, and generalization. Diversity of Africa is an

educational application aiming to providing a succinct solution to this problem by

promoting and showcasing the continent's beautiful diversity.

The contient of Africa has over 2000 languages. Yet why do

many still think someone is speaking “African”?

Articles from The Guardian

since 1 January 2012 that

talk of "Africa" without

mentioning a specific country.

8,601

http://africaisntacountry.herokuapp.com/

Mention only ‘Africa’

6,871 Mention South Africa

4,394 Mention Egypt

2,343 Mention Nigeria

2,783 Mention only ‘Asia’

15,126 Mention China

8,309 Mention India

7,913 Mention Japan

Page 6: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

PROJECT ABSTRACT

Diversity of Africa is an educational application that aims to inform and raise aware-

ness about the misconceptions of the lack of diversity in the continent of Africa. The

primary target audience is individuals in academia and public services who are

seeking to gain and convey information about the continent of Africa's ethnic

diversity succinctly. The secondary target audience is individuals who are Afrocentric

enthusiasts between the ages of 18-38 years. They will gain essential information

about ethnic groups, their geographical and geospatial reach, language, religions, and

artistic expressions.

Diversity of Africa will leverage elements and functionality of its predecessor's

Africamap by Center for geographic analysis at Harvard University, but in contrast

with its competitors, its user experience will be its most significant differentiator. It

will provide an engaging and cohesive interactive experience by incorporating data

visualizations, interactive infographic, audio, and imagery that are current.

Aesthetically, Diversity of Africa will have minimalistic style with vivid complementary

colors to bring harmony to the collection of various ethnic color presentations on the

map.

The contient of AFRICA has over 55 countries. Yet why to many

still say “I am going to Africa”?

Page 7: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

STATEMENT OF INTEREST

A man of Caribbean descent, married to a

Nigerian woman, and possessing an exposure to

many people from different African countries, I

have grown to love and appreciate the continent

of Africa. Unfortunately, there are many

misconceptions about Africa within the general

public that is filled with stereotypes and

misunderstandings. One such stereotype is that

the continent of Africa lacks diversity. With my

thesis project, I aim to educate and raise

awareness about this common stereotype by

utilizing my current skills, acquiring a new skill in

Google Map API and database, and using a

medium of interactive infographic exercise my

passion for designing and educating.

My thesis project, Diversity of Africa, is an

interactive infographic. During my first

introduction to infographic development, I had an

epiphany about the medium’s ability to express

two of my passions - teaching and designing. Being

a senior UI/UX designer and developer for over

ten years, I was simultaneously a teacher,

designer, and developer for my clients. As a

teacher, I needed to communicate the what, when,

why, and how to my clients about their web

applications. As a designer, I had to exercise my

visual communication expertise for the creation of

interfaces that guide users to information and

services. As a developer, I needed to know the

implementation of current technologies.

Throughout the years in my career teaching,

designing, and developing, it only seems natural

that I would gravitate to interactive infographics.

It is excellent visual communication that can

inspire, explain, and enhance the understanding

and transmission of the information via the user's

interaction. It fueled my enthusiasm during the

tenure of developing my thesis project.

To develop my thesis project, I needed to learn the

creation and organization of databases from

datasets. Also, I needed to acquire knowledge in

mapping software API for the creation of data

visualization. With the aggressive evolution of

mobile and wearable technologies, geolocation

and map-based apps are vital. The ability to

understand such data, then design, and develop

applications using it can prove very beneficial to

my future as a teacher, designer, and developer.

Page 8: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

1. User selects East Africa outline upon hover

All ethnic groups within region populates in modal panel.Comparative data load bolew.

User access an ethnic group’s art media

2. User select an ethnic group in modal panel

Map zooms in.Ethnic group information prompts with information over map.

User access an ethnic group’s informaiton

1. User click country of interest

Initial map of continent.Modal panel to the left.Comparative graphs will appear at the bottom.

PROOF OF CONCEPT 3. User selects 'Art' menu to view

thumbnail of sample art media.

Thumbnails of art media loads below.

4. User select on thumbnail of art media.

Expand image loads below.

1. Ethnic group data poploate modal panel

User clicks ethinic group of interest

Map zoom and show statistical data

User Interaction

Highlighted

Selected

Page 9: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

1. User selects two countries on map

All ethnic groups within region populates in modal panel.Comparative data load below.

User view an ethnic group’s geographical reach within countries

2. User select an ethnic group in modal panel.

Map zooms in.Ethnic group information prompts with information over map.

User Interaction

Highlighted

Selected

PROOF OF CONCEPT

Page 10: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

STRATEGIC PROCESS

UNIQUE POSITION

Diversity of Africa is an educational application that aims to inform and raise aware-

ness about the misconception of the lack diversity on the continent of Africa. It

leverages elements and functionality of its predecessors but contrasts itself with its

user experience. It aims to provide an engaging and cohesive interactive experience

like incorporating data visualizations, interactive infographic, audio, and imagery that

are current. Aesthetically, Diversity of Africa is minimalistic style with vivid

complementary colors to bring harmony to the collection of various ethnic color

presentations on the map.

COMPARATIVE ANALYSIS

‘AfricaMap’

‘Scoring Africa’

‘Code Africa’

‘Africa on Wikipedia’

Interactive Data Mapping Case Study

The continent of Africa is a vast, temperate landscape that

contains deserts, rainforests, and snowy mountains. Yet why to

many think Africa is hot?

Page 11: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

AFRICAMAP

WorldMap.Harvard.edu/Africamap

Africamap relates to Diversity of Africa by

being an educational interactive about Africa’s

geographical information including ethnicity. It

is also similar with regards to the target audi-

ence and overall purpose, being a tool to educa-

tors. However where this interactive defers is

its lack of an overall theme, focus, and limited

interactivity.

USER REQUIREMENTS EVALUATION

The ability for users to view a map of Africa and

apply different dataset overlays, add different

dataset overlays, while zooming and sharing

map.

STRENGTHS

• Robust option of datasets

• Ability to view multi overlay as once

WEAKNESSES

• Visual busy

• User confusion with multi overlays

• No overall theme or concept, just data

• Very limited interactivity

• Lacks cohesiveness

Page 12: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

SCORING AFRICA

GreatBusinessSchools.org/Africa

Scoring Africa indirectly relates to Diversity of

Africa by being an educational interactive

about Africa’s geographical information

including ethnicity. Strictly an interactive

infographic, Scoring Africa do not showcase the

diversity of African countries but only rankings

in development. It also shares potential target

audience of stakeholders who have an interest

in knowing the development of different

African countries with regards to ethnic

groups.

USER REQUIREMENTS EVALUATION

Users can compare and seek relationships with

different African countries with regards to

development ranking and rating. The user can

formulate relationship and analyze information

based on the data presented.

STRENGTHS

• Succinctly assimilating of information

• Effective layout

• Good color use

WEAKNESSES

• Limit interactivity

Page 13: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

CODEAFRICA

CodeAfrica.org/github-africa/

Although this interactive infographic does not

showcase ethnicity of Africa, it relates to

Diversity of Africa because it has an intriguing

and efficient layout. It utilizes the workspace

efficiently while making information easy to

understand.

USER REQUIREMENTS EVALUATION

The ability of users to view a map of Africa with

country boundaries and gain a insight in Github

users within that location.

STRENGTHS

• Efficient layout

• Good visual hierarchy

• Effect use of typography

• Cohesive theme

WEAKNESSES

• Limit interactivity

• Limit features

Page 14: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

AFRICA ON WIKIPEDIA

RalphStraumann.ch/Projects/informa-

tion-imbalance-africa-on-wikipedia/

Although this interactive infographic does not

showcase ethnicity of Africa, it relates to

Diversity of Africa because it has an intriguing

way of showing scale on the map. The use of

the honeycomb pattern can be the effective

visual element to show interconnectivity and

complexity of that diversity.

USER REQUIREMENTS EVALUATION

The ability to find relationships and do a com-

parative analysis of African countries verse

users generated articles within Wikipedia

potential find any imbalances.

STRENGTHS

• Simple color scheme

WEAKNESSES

• Limit interactivity

• Restricted data

• No Google Maps

Page 15: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

INTERACTIVE DATA MAPPING CASE STUDY

http://www.datalabsagency.com/

articles/mapping-data-visualisation/

Was built as a use-case for a low impact and

simple visualization of pre-existing data and

maps that could show large data sets in interac-

tive/explorable maps.

USER REQUIREMENTS EVALUATION

The ability of users to view a map of Australian

Bureau of Statistics accident statistics

centered around Melbourne, Victoria, as it is

the capital and population centered of Victoria.

STRENGTHS

• Efficient layout

• Very Good visual hierarchy

• Effect use of typography

• Cohesive theme

• Great accents

WEAKNESSES

• Limit interactivity

• Lacking features

Page 16: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

COMPARATIVE MATRIX: CONTENT

Map

Ethnicity Information

Geographical Data

Countries

Timeline

Visual Comparative

Cultural Information

Artistic Expressions

Languages

Data Visualizations

Detail Information

Multi Datasets

Charts and Graphs

Key Legen

Africamap Scoring Africa Africa on Wikipedia CodeAfrica

Page 17: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

COMPARATIVE MATRIX: INTERACTION

Clickable Map

Zooming Controls

Tooltips

Movable Map

Input Fields

Popups

Expand/Collapse Menus

Data Points Selection

Video

Audio

Africamap Scoring Africa Africa on Wikipedia CodeAfrica

Page 18: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

COMPARATIVE MATRIX: FUNCTIONALITY

Main Navigation

Sub-Navigation

Search

Toggle Views

Contextual Menu

Toggle Map Types

Zooming

RWD

Printable

Notations

External Embedding Code

Africamap Scoring Africa Africa on Wikipedia CodeAfrica

Page 19: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

COMPARATIVE MATRIX: DESIGN

Grid System

Icons

Theme/Mood

Typography Hierarchy

Logo

Africamap Scoring Africa Africa on Wikipedia CodeAfrica

Page 20: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

VISUAL PROCESS

During the visual design process, I sought inspiration for successful ways to

communicate the message I was to convey in my application. During that

research I found the following products that help achieve this task:

Shipmap.org

An inspiration visual for Diversity of Africa is the data visualization exhibited at

Shipmap.org. The narration brings personality to the data and the visual design

of the interactive map show immense numbers of ships.

Distancetomars.com

This website inspired successfully use layout to transform data into digestible

data to the average user along with a robust incorporate color and palette.

TheRefugeeProject.org

This interactive infographic was closely related to Diversity of Africa since it

involved census information and inspired utilizing clean design and UX model.

Skin complexions on the continent of AFRICA ranges from the

light beige skin to deep black. Yet why do many still consider

Africans has black complexion?

Page 21: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

MOOD BOARDS

Page 22: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

FINAL VERISON

VISUAL IDENTITY

INITIAL ITERATIONS

Page 23: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

MIND MAP

Page 24: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

PROTOTYPES

WIRERAME & PROTOTYPES

SKETCHES

Page 25: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

FINAL VERISON

MOCKUP DESIGNS

VERISON V1

Page 26: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

STYLE GUIDANCE

TYPOGRAPHY

The visual language of Diversity of Africa is based on

human commonality. As such, aesthetics and themes

utilize shared symbolic and universal visceral communi-

cations method.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna al.

Lorem ipsum dolor sit amet

The Diversity of Africa

Open SansCopy

Open SansLinks

Poppins LightHeadings

LAYOUT GRID

Main Layout Side Panel Layout Full Media Layout

COLOR PALETTE ICONOGRAPHY

#319CA9 MATERIAL ICONS#C90B1D #252427 #D8D9DA #95A4AC

Page 27: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

TARGET AUDIENCES

PRIMARY AUDIENCE

The primary target audience includes individuals in

academia the likes of students, directors, researchers,

and professors for universities and schools within the

age range of 14 – 38 years.

SECONDARY AUDIENCE

Members of non-profits, federal agencies in national and

international governments, and curators for museums

about the African Diaspora or Afrocentric themes are

secondary target audience within the age range of 18 –

42 years.

TERTIARY AUDIENCE

People who are Afrocentric individuals seeking to learn,

or to educate others about the cultures and practices in

the continent of Africa. These include parents, travelers,

and Afrocentric enthusiasts.

Page 28: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

Age: 21

Gender: Female

Location: London, UK

Education: Public Health

Occupation: Student

Income: n/a

Computer: Mac

Family: Single, Mother, Father, Brother, Sister, Step

Sister

Interests: Movies, Theatre, Youtube

Hobbies: Photography, Singing

Tech Skills: Writing

Favorite movie: Coming to America, The Lion King,

Sound of Music

Security Feelings: Low

Design Tastes: Chic

Disabilities: None

Browsers: Chrome

Browser Settings: Standard

Network: Wifi

Motivation: Grace is a student at a university. She is

doing a research paper on the different ethnic tribes

cultural influences on public health in Nigeria. Diversi-

ty of Africa interactive infographic will help provide

Grace with information about diversity within that

country and neighboring countries.

"Being a Nigerian, I would love to see how many Nigerian tribes are also in the neighboring countries."

PERSONAS

GRACE AWEDA

Page 29: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

Age: 32

Gender: Male

Location: New York, NY

Education: BFA Fashion

Occupation: Costume Designer

Income: $68k/yr

Computer: Windows 8.1 Tablet

Family: Single, Mother, Father, Brother

Interests: Movies, Theatre, Museum, Fashion

Shows,

Hobbies: Fashion, Pet, Volunteers at High School

Tech Skills: Fashion Illustration, Drawing

Favorite movie: The Devil Wears Prada, Bomb It

Security Feelings: Low

Design Tastes: Afro Centric

Disabilities: none

Browsers: IE

Browser Settings: Standard

Network: Mobile Network

Motivation: Jamal is a costume designer at a small

studio. He wants aesthetic inspiration for a design

and wants to learn more about African cultures and

tribes. Diversity of Africa will help educate Jamal

about different cultures in Africa and their artist

expressions to inspire her design.

"I want to incorporate the visual styles and elements of Eastern African tribes in my

new fall collection."

PERSONAS

JAMAL JOHNSON

Page 30: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

PERSONAS

JACOB GODBOLD

Age: 42

Gender: male

Location: Oakland, CA

Education: Business

Occupation: Director of Asante Africa Foundation

Income: $82k/yr

Computer: Windows XP

Family: Married, Mother, Two Daughters

Interests: Charity, Education, Books, Travel

Hobbies: Soccer

Tech Skills: Management, Writing, Speech,

Favorite movie: Happy People, Cast Away

Security Feelings: Low

Design Tastes: Conservative

Disabilities: None

Browsers: Firefox

Browser Settings: Standard

Network: Cable

Motivation: Jacob is organization a new project

venture for his non-profit, which includes visiting

East Africa countries of Tanzania and Kenya. He is

seeking grants approval for his new project and is

researching information about these countries

demographics. Diversity of Africa will help educate

Jacob about diverse cultures in Africa and

geographical reach with these countries.

"For this proposal, I need to show that Tanzania and Kenya, although different countries, share similar

ethnic groups."

Page 31: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

USER EXPERIENCE PROCESS

The continent of AFRICA is the second largest continent in the

world that can fit United States, Spain, Ireland, Germany,

France, Norway, Colombia, Finland, Greece, Itlay, Turkey,

Poland, China, Ukraine, India, and United Kingdom all in it's

boundaries.

Page 32: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

INFORMATION ARCHITECTURE

Stage

Content Objects

Views Panel(s)

User Interaction(s)

UI Components

System Components

regions

Database

Database

Database

JS

HTML

CSS

jQuery Framework

Infographic Framework

export

Print

Embed

Toolsexport

Infographic Framework

Dataset

ModalPanel

ComparativeInforaphic

Countries

Population

EthnicsGroups

TotalNumber of

Groups

TotalNumber of

Groups

EnthicGroups

BirthRate

Mortality

Language

EnthicGroup

Population

GeographicReach

LanguageType

MusicName

SelectCountry(ies)

ComparativeInfographic

Countries

Name(s)

Region(s)

Countries

Countries

Population

SearchResults

BirthRate

Mortality

Names

Datatable

Art

GoogleAPI

MAP

Selection

SearchTerm(s)

HTML/CSS3/JSPrint

Embed

Tools

Database

HTML5, CSS3JS

Dataset

Dataset

countries

ethnicgroups

MultiSelections

ethnicgroup

SingleSelection

EthnicGroups

EthnicGroups

OverlapingEthnicGroups

Languages

Countries

ComparativeInfographic

Page 33: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

GRACE AWEDA

Start ClicksNIGERIA

View AllETHNIC GROUPS

within country

clicksAN ETHNIC

GROUP

DisplayETHNIC GROUP

infoEnd

Africa Map

ETHNwithin country

Infographic

.

"Being a Nigerian, I would love to see how many tribes are within Nigeria

Stage

Views Panel(s)

User Interaction(s)

Page 34: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

JAMAL JOHNSON

Startclicks

EASTERNmap outline

View AllETHNIC GROUPwithin regions

clicksAN ETHNIC

GROUP

DisplaysAN ETHNIC

GROUPinfo

End

ClicksART

DisplaysMedia

Africa Map

ETHNIC GROUwithin region

Infographic

Modal Panel

"I want to use that visual styles and elements of many African tribes in Eastern Africa within my new Fall collection."

Stage

Views Panel(s)

User Interaction(s)

Page 35: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

JACOB GODBOLD

Stage

Views Panel(s)

User Interaction(s)

Startclicks

KENYA,TANZANIA

View AllETHNIC GROUPSwithin countries

clicksAN ETHNIC

GROUP

DisplaysAN ETHNIC

GROUPinfo

End

ClicksGEOGRAPHIC

REACH

DisplaysMap Highlights

Africa Map

ETHNwithin countrie

Infographic

Comparative

ClicksEXPORT

"For this project proposal, I need to show statistical data that both Tanzania and Kenya share similar ethnic groups."

Page 36: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

USABILITY TESTING

Four rounds of testing were conducted to focuses on the ease and

quickness of specific user tasks application. These user tests were

recorded on video. The following interactions were testing

including:

1. Usability of accessing an ethnic group’s information

2. Usability of accessing ethnic group’s expression media

3. Usability of comparing ethnic group’s geographical reach

4. Usability of accessing ethnic group’s language sample

PLAN

Testing included a facilitator, a note-taker, and a tester. Testers filled

out a pre-test survey. Upon completion, they were prompted to

complete tasks on the online high-fidelity prototype. Afterward,

some users were interviewed on general feelings, usability, and

opinions about their experience, and asked to finish a short

response questionnaire.

OVERALL IMPRESSION

The overall response was very positive. Many of the participants

appreciated the mission of the application and was able to achieve the

tasks successfully. However, many expressed dissatisfactions with Task

#4 in which foster an overhaul of that experience.

Page 37: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

TASK ONE

User has successfully navigated to a country to view ethnic group information

Contextual Script:

You would like to view information about ethnic groups Nigeria including a total

number of groups.

Instructions for User:

How many ethnic groups exist in Nigeria?

Inputs/Assumptions:

1. The user has a web browser.

2. The user has had familiarity with Africa map geographically.

Time for Expert:

2 -5 minutes (with content)

CONCLUSION

All user successfully achieve the task. Many rating the experience satisfactory and

suggest in post-interview more clarity with the dropdown in switch views of the map.

The also suggested visual clues in charts.

BEFORE

AFTER

TEST RESULTS ENHANCEMENTS

Page 38: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

TASK TWO

User has successfully navigated to an ethnic group’s sta-tistical data.

Contextual Script:

You would like to view population data of ethnic groups in Nigeria.

Instructions for User:

What is the population of the Yoruba ethnic group in Nigeria looks like?

Inputs/Assumptions:

1. The user has a web browser.

2. The user has had familiarity with Africa map.

Time for Expert: 2 -5 minutes (with content)

CONCLUSION

All users successfully achieved the task. The overall feedback encourages more visual

clue on navigation item of tabs. Although all users rated the interaction, positively the

majority suggested there be elucidation the statistical data of charts and felt the

proposed infographics didn't effectively convey the qualitative data.

BEFORE

AFTER

TEST RESULTS ENHANCEMENTS

Page 39: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

TASK THREE

User has successfully navigated to multi countries to view statistical data.

Contextual Script:

You would like to compare the consensus population of different ethnicities within

two countries.

Instructions for User:

What is the population of the Igbo ethnic group in both Nigeria and Ghana?

Inputs/Assumptions:

1. The user has a web browser.

2. The user has had familiarity with Africa map.

Time for Expert: 2 -5 minutes (with content)

CONCLUSION

All users tested expressed frustrations with the Compare Mode failing to achieve the

task. They felt it was easily obscured and were generally not satisfied with the

interaction. The result encourages me to reexamine my approach for this feature and

overhaul experience to be more intuitive.

BEFORE

AFTER

TEST RESULTS ENHANCEMENTS

Page 40: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

SYSTEM CONFIGURATION

To access this application, users will use a web

browser with Internet connection.

System Requirements

Macintosh OS 10.X

Microsoft Windows 8, 10

BROWSER REQUIREMENTS

• Chrome

• Safari

• Firefox

• Internet Explorer (version 8.0 & above)

TECHNICAL DETAILS

BACKEND

• Google Map Javascript API

• MySQL

• HighCharts.js

• JSON

• AJAX

FRONTEND

• HTML5

• SASS/CSS3

• JQuery/JavaScript

• Zurb Foundation 6

• Pug.js

• Material Icons

Page 41: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

ANALYSIS & CONCLUSION

The continent of Africa is severely misrepresented in popular media due to

misinformation, disinformation, and generalization. Diversity of Africa aims

to solve this problem by promoting and showcasing the continent's beautiful

diversity. By providing an easily digestible data for users to understand the

ethnic diversity of nations, the cultural expressions, and languages, a user

can obtain an understanding of the continent's robust complexity.

The process to create an educational application inevitably came with

several challenges including the collection of relevant data. Statistical data

on ethnicities along with their geospatial data is frequently historical and in

various formats. Another obstacle faced was resource compatibility which

was documented weekly in journal logs for the project. However, the

recourse and professors at AAU provided guidance and good working

examples to learn and grow from when this challenge arose.

Great gains and successes were achieved aside from the challenges. Besides

the technical expertise, I gained a substantial philosophical appreciation for

interaction design, and cultural impact of art was the most vital lessons

learned. Courses such as 'Interactive Design & Concepts ' and 'User

Experience' refined why, how, and what of a product lifecycle. As a result, the

midpoint review goal - to develop a potentially socially impactful application

to promote the beauty and subtilty of diversity - was achieved. There are still

opportunities for improvements and expansion is available.

SUCCESSES

• Clean UI

• Succint Interface

• Impactful Infographic

• Full Stack Development Expertise

CHALLENGES

• Data Curation

• User Testing Scheduling

• Development Library Compatitiblties

KNOWLEDGE GAIN

• Mastery UX Process

• Mastery in Typography

• Inforgaphic Understanding

• Cultural Impact of Visual Communcation

• Database Development

• Coding Efficiency

Page 42: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

View my progression and growth the link to my online portfolio. This portfolio

showcases digital media pieces that reflect my mastery of typography concepts,

interaction design, and other visual communication mediums.

PORTFOLIO LINK

https://attachments.academyart.edu/rest/attachments/download/44663071

Page 43: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

APPLICATION

AquibSylvester.me/DiversityOfAfrica

CONCEPT VIDEO

AquibSylvester.me/DiversityOfAfrica/concept-video

Screen Capture

Vimeo.com/264487862

AquibSylvester.me/DiversityOfAfrica/screen-capture

PROJECT LINKS

Page 44: Diversity of AFRICA - Aquib Sylvester · My thesis project, Diversity of Africa, is an interactive infographic. During my first introduction to infographic development, I had an

RESOURCES

http://africaisntacountry.herokuapp.com/worldmap.harvard.edu/africamapwww.greatbusinessschools.org/africawww.ralphstraumann.ch/projects/information-imbalance-afri-ca-on-wikipedia/codeafrica.org/github-africa/maps.fphlcc.cawww.bigstockphoto.comdribbble.comwww.pinterest.comen.wikipedia.org/wiki/Ethnic_groups_in_Africadevelopers.google.com/mapshttps://worldmap.harvard.edu/data/geonode:etnicity_felixhttps://hub.arcgis.com/datasets/nga::africa-hwm-ethnicity?se-lectedAttribute=Shape__Areahttps://joshuaproject.netwww.nationmaster.comwww.clinecenter.illinois.edu/data/comp/www.indexmundi.comwww.videoblocks.comwww.bigstockphoto.com

THANKS

To my professors, advisors, testers, friends, and all my fellow students who provided useful feedback and suggestions towards the success of this project.

BIBLIOGRAPHY