46
Homepage Critique for the SMU website Greg Thomas - [email protected]

Homepage Design Critique

Embed Size (px)

DESCRIPTION

A critique of the homepage for Singapore Management University.

Citation preview

Page 1: Homepage Design Critique

Homepage Critiquefor the SMU website

Greg Thomas - [email protected]

Page 2: Homepage Design Critique

SMU Home Page

Page 3: Homepage Design Critique

Design First Impression

What’s the overall impression of the design of the web site?

Page 4: Homepage Design Critique

Everything is relative, so let’s benchmark the design impression

against other sites.

Page 5: Homepage Design Critique

Target Audience: Kids

Page 6: Homepage Design Critique

Target Audience: Prospective University Students

Page 7: Homepage Design Critique

Target Audience: Marketing Managers

Page 8: Homepage Design Critique

Target Audience: Young Adults

Page 9: Homepage Design Critique

Target Audience: Trendsetters

Page 10: Homepage Design Critique

Target Audience: Younger Adults

Page 11: Homepage Design Critique

Target Audience: Young adults with cancer

Page 12: Homepage Design Critique

Target Audience: Teenagers

Page 13: Homepage Design Critique

Target Audience: Business Managers

Page 14: Homepage Design Critique

Target Audience: Technology Managers

Page 15: Homepage Design Critique

Target Audience: Tech Managers

Page 16: Homepage Design Critique

Target Audience: Prospective UniversityStudents

Page 17: Homepage Design Critique

Target Audience: Tourists to France (Adults)

Page 18: Homepage Design Critique

Target Audience: University Students

Page 19: Homepage Design Critique

Target Audience: Bird Watchers

Page 20: Homepage Design Critique

Target Audience: Young Adults

Page 21: Homepage Design Critique

Target Audience: Advertisement Managers

Page 22: Homepage Design Critique

Target Audience: Pet Owners

Page 23: Homepage Design Critique

Target Audience: Banking Clients

Page 24: Homepage Design Critique

Design First Impression

Corporate looking personality It looks more like a traditional bank website than anything else. Perhaps a little boring.A bit busy (complex) makes it hard to know where to prioritize focus.

Page 25: Homepage Design Critique

Brand Personality

Brand Personality

Sincerity Excitement Competence Sophistication Ruggedness

•Down to earth•Honest•Wholesome •Cheerful

•Daring•Spirited•Imaginative•Up-to-date

Source: (Aaker, 1997)

•Reliable •Intelligent •Successful

•Upper class•Charming

•Outdoorsy•Tough

What personality is the site portraying.

Page 26: Homepage Design Critique

Brand Personality

Brand Personality

Sincerity Excitement Competence Sophistication Ruggedness

•Down to earth•Honest•Wholesome •Cheerful

•Daring•Spirited•Imaginative•Up-to-date

(Aaker, 1997)

•Reliable •Intelligent •Successful

•Upper class•Charming

•Outdoorsy•Tough

What personality do we want the site to portray? (up for debate)

Page 27: Homepage Design Critique

What about the functionality of the website?

Lets take a look at the web page functions, and examine each facet in detail.

Page 28: Homepage Design Critique

SMU Home Page

Page 29: Homepage Design Critique

Identity+Home Nav

Navigation Shortcuts Search

Contact

Feature

Urgent Notice

Timely Content

Legal Notices

White Space

White Space

Timely Info

New Developments

Thought Leadership

InspirationTimely Info

New Developments

Navigation to Business Units

Brand Identity

Navigation to Overview, Directories, Programs , Schools & Research

NavigationBy Persona

Be

low

th

e f

old

Ab

ove

th

e f

old

FunctionalityA breakout of the Home Page functionality

Notebook screen

Page 30: Homepage Design Critique

1. Identity+Home Nav

3. Nav Shortcuts 5. Search

4. Contact

12. Feature

13. Urgent Notice

14. Timely Content

15. Legal Notices

11. White Space

2. White Space

Timely Info

New Developments

Thought Leadership

InspirationTimely Info

New Developments

8. Navigation to Business Units

7. Brand Identity

9. Navigation to Overview, Directories, Programs , Schools & Research

6. NavigationBy Persona

Critique

What’s Missing?

Does the page

inspire?

Is their a logical

hierarchy to the site?

Is navigation clear?

Is information

findable?

Does the user (by

persona) know where

to begin?

Does the page use

defacto standards?

Are page

subsections well

identified?

Does the page

optimize search

engine rankings?

Are there shortcuts

for experts?

Is it obvious what’s

clickable?

Is important

information identified

as such?

10.

Page 31: Homepage Design Critique

1.

3. Nav Shortcuts 5. Search

4. Contact

12. Feature

13. Urgent Notice

14. Timely Content

15. Legal Notices

2. White Space

Timely Info

New Developments

Thought Leadership

InspirationTimely Info

New Developments

8. Navigation to Business Units

7. Brand Identity

9. Navigation to Overview, Directories, Programs , Schools & Research

6. NavigationBy Persona

10.

Critique

1. Identity & Home

Navigation

The logo tells

visitors where they

are and as such is

typically the first

thing visitors to the

website seek.

The logo image is

blurry and that

gives an impression

of a low quality

brand.

11. White Space

Page 32: Homepage Design Critique

1. Identity+Home Nav

3. Nav Shortcuts 5. Search

4. Contact

12. Feature

13. Urgent Notice

14. Timely Content

2.

Timely Info

New Developments

Thought Leadership

InspirationTimely Info

New Developments

8. Navigation to Business Units

7. Brand Identity

9. Navigation to Overview, Directories, Programs , Schools & Research

6. NavigationBy Persona

Critique

2. White Space:

This white space is

dead space which

could be used to

express brand

identity.

10.

15. Legal Notices

11. White Space

Page 33: Homepage Design Critique

1. Identity+Home Nav

3.

5. Search

4. Contact

12. Feature

13. Urgent Notice

14. Timely Content

2. White Space

Timely Info

New Developments

Thought Leadership

InspirationTimely Info

New Developments

8. Navigation to Business Units

7. Brand Identity

9. Navigation to Overview, Directories, Programs , Schools & Research

6. NavigationBy Persona

Critique

3. Navigation

Shortcuts: Shortcuts are

confusing due to

unclear naming.

Prospective students

will not understand

these are for intranet

navigation.

New users (staff,

students, teachers,

researchers) will not

understand the

options due to

ambiguous naming

(eWise, SMUVista,

Oasis, OnTrac).

Plainspeak naming

works better than

fanciful naming. For

example, use “intranet

portal” generic naming

instead of eWise

which is a system

name.

10.

15. Legal Notices

11. White Space

Page 34: Homepage Design Critique

1. Identity+Home Nav

3. Nav Shortcuts 5. Search

4.

12. Feature

13. Urgent Notice

14. Timely Content

2. White Space

Timely Info

New Developments

Thought Leadership

InspirationTimely Info

New Developments

8. Navigation to Business Units

7. Brand Identity

9. Navigation to Overview, Directories, Programs , Schools & Research

6. NavigationBy Persona

Critique

4. Contact Us:

The contact us

navigation is not

noticeable. (After a

year of using the

page I only realize

it is there during

this analysis).

10.

15. Legal Notices

11. White Space

Page 35: Homepage Design Critique

1. Identity+Home Nav

3. Nav Shortcuts 5.

4. Contact

12. Feature

13. Urgent Notice

14. Timely Content

2. White Space

Timely Info

New Developments

Thought Leadership

InspirationTimely Info

New Developments

8. Navigation to Business Units

7. Brand Identity

9. Navigation to Overview, Directories, Programs , Schools & Research

6. NavigationBy Persona

Critique

5. Search:

The search field

could use smart

search.

Search should not

pop-up in a net

window.

The search return

results is not well

optimized. I have

better luck using

Google.

Button name

should be “GO” not

search to simplify..

Search could be

delimited by “web”

and “people” with a

radio button

defaulted on “web”.

10.

15. Legal Notices

11. White Space

Page 36: Homepage Design Critique

1. Identity+Home Nav

3. Nav Shortcuts 5. Search

4. Contact

12. Feature

13. Urgent Notice

14. Timely Content

2. White Space

Timely Info

New Developments

Thought Leadership

InspirationTimely Info

New Developments

8. Navigation to Business Units

7. Brand Identity

9. Navigation to Overview, Directories, Programs , Schools & Research

6.

Critique

6. Persona

Navigation:

The personas are

not well defined.

Graduate student

prospects are

abandoned.

Too many options

can confuse new

users.

Navigation is

vertical which is

less optimal than

horizontal

navigation.

10.

15. Legal Notices

11. White Space

Page 37: Homepage Design Critique

1. Identity+Home Nav

3. Nav Shortcuts 5. Search

4. Contact

12. Feature

13. Urgent Notice

14. Timely Content

2. White Space

Timely Info

New Developments

Thought Leadership

InspirationTimely Info

New Developments

8. Navigation to Business Units

7.

9. Navigation to Overview, Directories, Programs , Schools & Research

6. NavigationBy Persona

Critique

7. Brand Identity

The brand identity

takes prime space

on the website, but

delivers little in

terms of driving

brand identity which

is generally

accomplished by

revealing the story

of the brand.

The image is

static which can

cause wearout

(boredom).

The image does

not feature the

thing that people

connect most

deeply with, and

that’s people.

10.

15. Legal Notices

11. White Space

Page 38: Homepage Design Critique

1. Identity+Home Nav

3. Nav Shortcuts 5. Search

4. Contact

12. Feature

13. Urgent Notice

14. Timely Content

2. White Space

Timely Info

New Developments

Thought Leadership

InspirationTimely Info

New Developments

8.

7. Brand Identity

9. Navigation to Overview, Directories, Programs , Schools & Research

6. NavigationBy Persona

Critique

8. Navigation to

Business Units:

This navigation

bar takes several

seconds to load,

which defeats ease

of use for expert

users,

Its not readily

apparent this is an

alternative

navigation bar (it

took me months to

realize).

10.

15. Legal Notices

11. White Space

Page 39: Homepage Design Critique

1. Identity+Home Nav

3. Nav Shortcuts 5. Search

4. Contact

12. Feature

13. Urgent Notice

14. Timely Content

2. White Space

Timely Info

New Developments

Thought Leadership

InspirationTimely Info

New Developments

8. Navigation to Business Units

7. Brand Identity6. NavigationBy Persona

Critique

9. Navigation to

Overview,

Directories,

Programs ,

Schools &

Research: Making this

navigation serve the

needs of everyone

means no single user

group (persona) is well

served.

Internal users and

external users are

mixed (causing

confusion).

Resources for

internal users are best

left to gateway pages.

IITS is in the centres

submenu, which is

misclassification.

Home button is

duplicative, as the

defacto standard is to

use the site ID as a

home button.

10.

9.

15. Legal Notices

11. White Space

Page 40: Homepage Design Critique

1. Identity+Home Nav

3. Nav Shortcuts 5. Search

4. Contact

12. Feature

13. Urgent Notice

14. Timely Content

2. White Space

Timely Info

New Developments

Thought Leadership

InspirationTimely Info

New Developments

8. Navigation to Business Units

7. Brand Identity

9. Navigation to Overview, Directories, Programs , Schools & Research

6. NavigationBy Persona

Critique

10. News:

Ideally a front

page with content

acts as a teaser,

like a magazine

cover, for people to

want to learn more.

Inspiration and

updates can be

used well for this

but timely updates

are often better left

to One-2-One

comm like email

(click-through rates

can help confirm).

There is no

section header so

people do not know

the function of this

page region.

10.

15. Legal Notices

11. White Space

Page 41: Homepage Design Critique

1. Identity+Home Nav

3. Nav Shortcuts 5. Search

4. Contact

12. Feature

13. Urgent Notice

14. Timely Content

15. Legal Notices

11.

2. White Space

Timely Info

New Developments

Thought Leadership

InspirationTimely Info

New Developments

8. Navigation to Business Units

7. Brand Identity

9. Navigation to Overview, Directories, Programs , Schools & Research

6. NavigationBy Persona

Critique

11. White Space:

This is dead

space.

It could be used

for more features,

imagery, social

media integration,

student news,

Podcast, and a

zillion other things.

As of now it does

nothing.

10.

Page 42: Homepage Design Critique

1. Identity+Home Nav

3. Nav Shortcuts 5. Search

4. Contact

12.

13. Urgent Notice

14. Timely Content

2. White Space

Timely Info

New Developments

Thought Leadership

InspirationTimely Info

New Developments

8. Navigation to Business Units

7. Brand Identity

9. Navigation to Overview, Directories, Programs , Schools & Research

6. NavigationBy Persona

Critique

12. Features:

The features

space is too small,

The feature does

not convey why to

click, one only

learns if they

mouse over that it

is a clickable

region.

When selected it

spawns a new

window (worst

practice).

A leader like

“Discover our

milestones...” could

get people to click-

through. Or “tell us

your experience

with SMU” is even

better.

10.

15. Legal Notices

11. White Space

Page 43: Homepage Design Critique

1. Identity+Home Nav

3. Nav Shortcuts 5. Search

4. Contact

12. Feature

13.

14. Timely Content

15. Legal Notices

2. White Space

Timely Info

New Developments

Thought Leadership

InspirationTimely Info

New Developments

8. Navigation to Business Units

7. Brand Identity

9. Navigation to Overview, Directories, Programs , Schools & Research

6. NavigationBy Persona

Critique

13. Urgent

Notices:

It would be goo d

to call this “Urgent

Notices” so people

get used to seeking

information there.

As I write this the

email service is

down today. It

would be good to

have system status

updates on this

section so we know

when to expect

service outages to

be fixed.

10.

11. White Space

Page 44: Homepage Design Critique

1. Identity+Home Nav

3. Nav Shortcuts 5. Search

4. Contact

12. Feature

13. Urgent Notice

14.

15. Legal Notices

2. White Space

Timely Info

New Developments

Thought Leadership

InspirationTimely Info

New Developments

8. Navigation to Business Units

7. Brand Identity

9. Navigation to Overview, Directories, Programs , Schools & Research

6. NavigationBy Persona

Critique

14. News and

Events:

How is this section

different from the

section 10? (it should

be apparent from

naming).

This is listed as

“News & Events” but

only events are listed.

The events listing is

cramped and does not

indicate which

audience should

attend (students,

academics, business

community).

An event highlight

area could feature top

upcoming public

events.

Selecting an event

spawns a new window

(worst-practice).

Many public events

are not listed.

10.

11. White Space

Page 45: Homepage Design Critique

1. Identity+Home Nav

3. Nav Shortcuts 5. Search

4. Contact

12. Feature

13. Urgent Notice

14. Timely Content

15.

11. White Space

2. White Space

Timely Info

New Developments

Thought Leadership

InspirationTimely Info

New Developments

8. Navigation to Business Units

7. Brand Identity

9. Navigation to Overview, Directories, Programs , Schools & Research

6. NavigationBy Persona

Critique

15. Notices: This

section provide

additional fields

that are commonly

used such as a

“contact us” and

“emergency

information”, and

“site credits”.

Some additional

features such as

“make a gift,” &

“accredition” may

be of use.

10.

Page 46: Homepage Design Critique

1. Identity+Home Nav

3. Nav Shortcuts 5. Search

4. Contact

12. Feature

13. Urgent Notice

14. Timely Content

2. White Space

Timely Info

New Developments

Thought Leadership

InspirationTimely Info

New Developments

8. Navigation to Business Units

7. Brand Identity

9. Navigation to Overview, Directories, Programs , Schools & Research

6. NavigationBy Persona

Critique

15. Navigation

Confusion: Navigation

alternatives take up a

majority of the prime

real estate space on

the homepage.

Some of this

navigation is

duplicative.

Excess options on

the home page

provides cognitive

overload for new

users.

The website’s

primary target of

prospective students

are not well served.

The remainder of the

space above-the-fold

is leaves little room for

featuring content to

engage (which is a

reason to return to the

site).

Expert navigation

options are too limited.

10.

15. Legal Notices

11. White Space