The UX design process strives to create the best experience for users while meeting an organization’s business goals. The UC San Diego Library consciously applied this process in its most recent website redesign, from initial planning to the design and build stages of the project. We will discuss our decisions about selecting and using multiple UX tools and methodologies and the effect this approach has had on the project. Presentation was given in Designing for Digital 2017

1. Really Baking It in:
Integrating the UX Design Process
with a Website Redesign
SuHui Ho
Jenn Dandle
Jenny Reiswig
University of California San Diego Library

2. Overview
• UX design process – what is it?
• Incorporated UX design process in website redesign
• Methodologies in plan, design and build stages
• Lessons learned
• Future applications

3. UX Design Process
• What is UX Design
“The process of enhancing user satisfaction by improving the usability,
accessibility, and pleasure provided in the interaction between the user
and the product.”
-Wikipedia

4. What is UX Design?
• Interaction
• Experience
• Emotion
• Manipulated
• A process

5. What is UX Design?
Who, what, why, &
how people work

6. UX Design of a Website
Who – people
What – what they do, their
activities
Why – why they do it
How – how they behave, and in
what context

7. UX Design Model
https://www.usability.gov/what-and-why/user-centered-design.html

8. UX Design Model
https://www.usability.gov/what-and-why/user-centered-design.html

9. Our UX Design Stages
• Plan
• Design
• Build

10. Applying UX Design Process
• Planning Stage (P)
– User interviews
– Participatory design
– Heatmaps
– 20 Questions
– Persona and audience priority

11. Applying UX Design Process
• Design Stage (D)
– Comparative study
– Card sort with Optimal Sort
– Tree testing with Treejack
• Build Stage (B)
– Wireframe prototype test (First-Click)

12. Website Redesign Project Overview
• Goals – Establish a Library website that:
– Supports users’ information search, discovery and learning, while still
effectively providing information about library news and events as
well as general library services.
– Is informed by studies of user behavior, data on actual user behavior,
and best practices from our peers.
• Additional Goals:
– Provide pathways that meet the distinct needs of specific user
communities such as faculty and graduate students.
– Integrate our social media presences with the website.

13. Website Redesign Project Scope
• Development of a new Information Architecture (IA) and in-
site navigation
• Development of a new Library home page
• Incorporation of responsive design to eliminate the need for a
separate mobile Library website
• Development of enhanced search function for the home page

14. Website Redesign Project Structure
• Steering Committee
• Project Task Groups:
– Information Architecture (IA)
– User Studies
– Home Page Design
– Search
– Website Management

15. User Research (P)
• User interviews
• Participatory design
• Study purposes:
– Library research process
– Website goals
– Website tasks
– Navigation and information architecture
– Content and terminology
– Layout and visual design

16. User Research (continued)
• Ten users including students and faculty
– Current research process and approach to finding information,
– How/whether they use the library website
– “XO” exercise of all of the top navigational menus and menu items
– Sketch exercise

19. User Top Tasks
• Catalogs
• Off-Campus Access
• Hours
• Reserves
• E-Resources Pull-down: e-Journal Titles
• My Library Account
• Research Tools: Databases A-Z
• Reserve a Study Room

20. Key Findings
• Focus on research
• Reduce redundancy
• Create audience navigation
• Make it simple and focus on a few main tasks
• Encourage exploration for library resources
• Put online guides and help after users perform search
• Put a universal discovery tool or a multi-tabbed search box
front and center

21. Heatmaps (P)
• to inform user needs and key tasks - quantitative

22. Homepage Usage Rank
Function Counts
Search 15216
Explore for Resources (Databases A-Z,
Subject A-Z, Ejournals, etc.)
4332
Carousel (total click count of 75 carousel
items)
1233
Reserves 987
My Account 804
Spaces 799
Hours 328
Services 204
Ask a Librarian 192
eBooks 187
About the Library 145
Help 103
News & Events 99
New Users 53
Faculty 40
Printing & Copying 35
Maps & Directions 32
Social Media 13
Recommend a purchase 8

23. 20 Questions (P)
• 20 Questions - Design Research: Who, What, Why &
How

24. Persona and Audience Priority (P)
• Students who are not experts in library research
• Users with experience in library research – upper-division,
graduate students
• Faculty
• University staff
• Campus visitors
• Other libraries
• Potential donors
• Job-seekers

25. Primary Audience Persona: Kevin

26. Recommendations (1) Based on Audience
Priorities:
• The home page, primary navigation and first-level default
landing pages should be designed primarily to meet the needs
of students who are not experts in library research.
• The home page and primary navigation will provide
shortcut paths for experienced users, as well as links for
visitors, job-seekers, donors and other libraries.

27. Recommendations (2) Based on Audience
Priorities:
• Role/Audience-based navigational pathways will be designed
for
– Faculty / instructors
– People brand-new to UCSD – potentially divided further such as “new
graduate students”
– People with disabilities
– Members of the community
• News and event information will continue to have placement
on the home page.

28. Design Stage
• Comparative study to inform homepage design and
Information Architecture (IA)
• Card sort with Optimal Sort to inform IA
• Tree testing with Treejack to define and test IA

29. Comparative Study (D)
• Comparative study to inform homepage design and
Information Architecture (IA)
– Website Inspirations
• Systematic review of other libraries’ websites
• We try to solve the same problems – why start from scratch?
• Expand our thinking
• Get design ideas
• Solve “design by committee” problem

30. Card Sort (D)
• Card sort with Optimal Sort to inform IA
• User centric vs. organization centric

31. Tree Testing (D)
Portion of the Information Architecture we tested using
the TreeJack tool.

32. Tree Test Results for IA v.2

33. Top Navigation Adjustments
Current Top Navigation
• Home
• Spaces
• Hours
• Research Tools
• Collections
• Services
• Reserves
• Catalogs
• My Library Account
• Ask a Librarian
• Help
Post-Launch Top Navigation
• Research & Collections
• Borrow & Request
• Computing & Technology
• Visit
• Ask Us
• About

34. Wireframe Test (B)
• First-click test on static image of home page to determine if
users are “on the right path.”

35. Challenges and Successes
• Challenges
• Successes
• Lessons Learned

36. Challenges
• Baking UX into the process is SLOW. Really slow.
– Perception: website work should be fast
– Reality: every step takes time
– Vetting conclusions takes time
• Sometimes your result is overridden.
– Morale issues for the team

37. Successes
• More user-centered site as a result (Will need to be
confirmed)
• More library staff understand what UX is for
• Project staff and management are now convinced
…which leads to another challenge

38. New Challenge!
• Now everyone wants user input on everything!
– Proliferation of feedback forms, links
• Implement a toolkit for getting user feedback?

39. Lessons Learned
• Managing expectations:
– Slow down that timeline
– Prepare the project team for some overrides
• Communicate at every step
• Be ready for a change in mindset!

40. Future Application of UX Design Process
Upcoming Web projects
• Digital Library interface redesign
• New ILS/Discovery system ahead
• Closer look at mobile
• Third-party vendor products
Upcoming Tools/Practices
• Feedback toolkit
• Tools for refining our current site – tag manager
• Goal: UX beyond the website: extending to service design

41. Resources
• Buley, Leah, The User Experience Team of One: A Research
and Design Survival Guide., New York: Rosenfeld Media,
2013.
• The UX Design Process: An Actionable Guide To Your First
Job In UX
• User-Centered Design Basics