Video Recording of the session - https://www.youtube.com/watch?v=Bu7R6AAoF7c The session will focus on examples of real User Experience (UX) & Information Architecture (IA) deliverables created as part of the re-launch of the Woodsworth College website. (wdw.utoronto.ca). These best-practices help teams prioritize features, align diverse stakeholders, and ensure that the website you build is the most effective possible for your end-user communities. The presentation features videos or actual live website links where attendees can review the deliverables used to create the site.

1. Discovery to launch;
A user experience focused case study
for U of T ‒ Woodsworth College
@finteractive!

2. Intro: About Us"
linkedin.com/in/aidanfoster/
@finteractiveAIDAN FOSTER - FRONT END ARCHITECT, UX DESIGNER
fosterinteractive.com
alumni.utoronto.ca medicine.utoronto.ca uc.utoronto.ca

3. wdw.utoronto.ca

4. Photo by Tim Mossholder on Unsplash

5. 3
1
DISCOVERY & INFORMATION
ARCHITECTURE
2
USER INTERFACE & DESIGN
CONCEPT
3
WEBSITE DEVELOPMENT
METHODOLOGY

7. END USERS STAKEHOLDERS
Discovery - Kickoff + Interviews☼

8. Discovery - Kickoff + Interviews☼
CLIENT
CORE
TEAM
UX / DEV
TEAM

9. Discovery - Kickoff + Interviews☼
CLIENT
CORE
TEAM
UX / DEV
TEAM
PROGRAM
A
ALUMNI
REGISTRAR
PROGRAM
B
PROGRAM
C
STUDENT
LIFE

10. Personas☼
♥
User
Goals
$
Insights &
Empathy
%
Framework
for Disagreements

11. Personas☼

12. Content Audit'
Delete
Junk
Content
Scan
Analytics
Legacy
Sites
Audit
Tool
Assign
Owners

13. Content Audit'

14. Information Architecture☼

15. *
Iterate
Analysis
IA Testing☼
$
Candidates
Email
)
Tree Test
IA
○
User Tasks
Personas

16. IA Testing☼

18. 3
1
DISCOVERY & INFORMATION
ARCHITECTURE
2
USER INTERFACE & DESIGN
CONCEPT
3
WEBSITE DEVELOPMENT
METHODOLOGY

19. User Interface (UI) Wireframes"
☼
Navigation
Patterns
UI Content
Blocks
+
User
Testable
$

21. User Testing Wireframes"

22. Creative - Kickoff discussion"
/
Imagery
.
Layout
-
Colours
,
Typography

23. Creative Concepts - The Brief"

24. Creative Concepts - Presentation"

25. Photo by Evan Dennis on Unsplash

26. Content Writing Workshop"
Editorial
Style Guide
+
Writing
for Accessibility
0
Inverted
Pyramid
1

27. Content Writing Workshop - Component Library"

28. Content Workshop"

29. The course material overlaps with many other Social Science disciplines. Students in
our program are interested in the following areas of study:
• Criminology
• Political Science
• Sociology
• History
• Philosophy
• Ethics, Society & Law
• Employment Relations
• International Relations
• Peace, Justice, and Conflict Studies
• Equity Studies
• Economics
• Psychology
The co-curricular activities in this section will also explore opportunities for careers
in Jaw, politics, economics, and advocacy.
-------------------------'CORE COURSES
Students in this stream are required to take two half-credit courses (one in the fall
f-_:_:__r:_e_,r_:_:_d_i:_at_:_e_d:_g_·:_:e_er_· t-e-rm_)_. T-h-i'":"s-c-ou_n_t_s_a_s_o_n_e_t_ota_l_c-re-d-it_t_o_w_a_r_d_t_h-ei-r-----+' /~!i,plo,J,
WDW151H1 - Order and Disorder I: Individuals, Groups, and Society •/ L-~•
Societies require law and order, but at what point does order become oppression?
How do crime, immigration, and economic inequality intersect with the law? What
are the intended and unintended effects of our laws?
WDW152Hl - Order and Disorder II: Global Affairs and Emerging ()
Technologies .r:"~ r'Vf'O,Jt-.,
What causes war and what have been the trends in warfare? How does cooperation / ~J
arise? How have trading relationships created global order? How has technology
transformed global order in the past, and how might emerging technologies such as
Big Data, 3-D Printing, and MOOCs transform our current world?
CO-REQUISITES
Match UI Components to Legacy Content"

30. The course material overlaps with many other Social Science disciplines. Students in
our program are interested in the following areas of study:
• Criminology
• Political Science
• Sociology
• History
• Philosophy
• Ethics, Society & Law
• Employment Relations
• International Relations
• Peace, Justice, and Conflict Studies
• Equity Studies
• Economics
• Psychology
The co-curricular activities in this section will also explore opportunities for careers
in Jaw, politics, economics, and advocacy.
-------------------------'CORE COURSES
Students in this stream are required to take two half-credit courses (one in the fall
f-_:_:__r:_e_,r_:_:_d_i:_at_:_e_d:_g_·:_:e_er_· t-e-rm_)_. T-h-i'":"s-c-ou_n_t_s_a_s_o_n_e_t_ota_l_c-re-d-it_t_o_w_a_r_d_t_h-ei-r-----+' /~!i,plo,J,
WDW151H1 - Order and Disorder I: Individuals, Groups, and Society •/ L-~•
Societies require law and order, but at what point does order become oppression?
How do crime, immigration, and economic inequality intersect with the law? What
are the intended and unintended effects of our laws?
WDW152Hl - Order and Disorder II: Global Affairs and Emerging ()
Technologies .r:"~ r'Vf'O,Jt-.,
What causes war and what have been the trends in warfare? How does cooperation / ~J
arise? How have trading relationships created global order? How has technology
transformed global order in the past, and how might emerging technologies such as
Big Data, 3-D Printing, and MOOCs transform our current world?
CO-REQUISITES
Copy & re-write legacy content to structured word
template
"

31. Copy word template to Drupal"

32. 3
1
DISCOVERY & INFORMATION
ARCHITECTURE
2
USER INTERFACE & DESIGN
CONCEPT
3
WEBSITE DEVELOPMENT
METHODOLOGY

33. MAIN-SPRING.IO

34. https://youtu.be/YAL_2Ok5CBE
Front End Architecture"

37. Website Development - CSS Grid"
Rachael Andrew - gridbyexample.com

38. Development - Navigation"

39. Photo by SpaceX on Unsplash

40. Photo by Morvanic Lee on Unsplash