Covers some of the the design and decisions behind the Help and Services Portal for The University of British Columbia website. Presented on Nov 17, 2010

1. Help & Services Portal
DESIGN PROCESS

2. HELLO!

3. AS A DESIGNER...
data data
data

4. Design Process

5. Objectives
Understand design

6. Objectives
Understand design
Understand user motivations

7. Objectives
Understand design
Understand user motivations
Understand web navigation

8. Objectives
Understand design
Understand user motivations
Understand web navigation
Understand information architecture

9. Objectives
Understand design
Understand user motivations
Understand web navigation
Understand information architecture
See how all these fit in Help and
Services

10. Objectives
ABSTRACT
Understand design
Understand user motivations
Understand web navigation
Understand information architecture
See how all these fit in Help and
CONCRETE
Services

11. Design

12. What is design?

13. What is design?

14. What is design?

15. What is design?

16. “Well Designed”
STAINLESS STEEL THIN
RETINA DISPLAY APPS
ACCELEROMETER SLEEK USER INTERFACE
A4 PROCESSOR MULTI-TOUCH
MIC + SPEAKERS PACKAGING

17. Design = plan

18. Plan implies goal
Plan implies problems

19. Design = achieving goals
Design = solving problems

20. IN WEB DESIGN...
“What problem are we trying to solve?”

21. SITES NEED PEOPLE
(USERS, VISITORS, CUSTOMERS...)

22. User Motivation

23. Users have a goal

24. “Why are they on your site?”
Creating something

25. “Why are they on your site?”
Creating something
Performing a transaction

26. “Why are they on your site?”
Creating something
Performing a transaction
Controlling or monitoring something

27. “Why are they on your site?”
Creating something
Performing a transaction
Controlling or monitoring something
Conversing with other people

28. “Why are they on your site?”
Creating something
Performing a transaction
Controlling or monitoring something
Conversing with other people
Being entertained

29. “Why are they on your site?”
Creating something
Performing a transaction
Controlling or monitoring something
Conversing with other people
Being entertained
Finding information

30. PEOPLE WANT INFORMATION
(AT LEAST FOR OUR PURPOSES)

31. IN WEB DESIGN...
“What problem are we trying to solve?”

32. IN WEB DESIGN...
“What problem are we trying to solve?”
SITES NEED PEOPLE

33. IN WEB DESIGN...
“What problem are we trying to solve?”
SITES NEED PEOPLE
+
PEOPLE WANT INFORMATION

34. IN WEB DESIGN...
“What problem are we trying to solve?”
SITES NEED PEOPLE OUR SITE NEEDS TO
+ = HELP PEOPLE FIND
PEOPLE WANT INFORMATION INFORMATION

35. OMG

36. “How do people find information on
the web?”

37. Web Navigation

38. JOHN’S AWESOME BAND
Home

39. JOHN’S AWESOME BAND
Home
About
Music Contact
JAB

40. JOHN’S AWESOME BAND
Home
About
Music Contact
JAB

41. JOHN’S AWESOME BAND
Home
Tour About
Lyrics News Music Contact Gallery Fans Store
dates JAB

42. Home page = summary

43. JOHN’S NOT-SO-AWESOME BAND
Home

44. complex home page
=
complex summary
=
complex navigation

45. complex navigation is bad for finding
information

46. Solution? Portals
(Categories, galleries, etc.)

47. JOHN’S AWESOME BAND
Home
About
PORTALS News Music
JAB
Contact Fans

48. Portals are “intermediate summaries”

49. Hence...
Help And Services Portal

50. “But how do these portals work?”

51. Information Architecture

52. Information architecture is the
organization of content
(THROUGH CLEVER USE OF HEADINGS)

53. “Why?”

54. People are impatient.
(They skim when they read on the web.)

55. Examples of information architecture in
ACTION

56. 1
2
3
INFORMATION ARCHITECTURE
GOOD EXAMPLE

57. INFORMATION ARCHITECTURE
BAD EXAMPLE

58. Summary
Design = problem solving / achieving goals

59. Summary
Design = problem solving / achieving goals
Web design: Users want to find information

60. Summary
Design = problem solving / achieving goals
Web design: Users want to find information
Problem: How to get users to find information

61. Summary
Design = problem solving / achieving goals
Web design: Users want to find information
Problem: How to get users to find information
Proper use of navigation (e.g. portals)

62. Summary
Design = problem solving / achieving goals
Web design: Users want to find information
Problem: How to get users to find information
Proper use of navigation (e.g. portals)
Guide user to scan portal via proper headings

63. Help Portal

64. Services Portal

65. “Can we use the same solution from
Help to solve Services’ problems?

66. 1
2
4
3
SERVICES PORTAL
NO, YOU CAN’T BE LAZY AND REUSE THE HELP PORTAL’S LAYOUT

67. different content
=
different problem
=
different solution

68. Caveats

69. 1. Designs aren’t tested

70. 2. Portals (while important) aren’t the answer; content is.

71. Thus, as content writers
... good design depends on YOU.

72. Thank you!
john.chan@ubc.ca
@jtcchan