overview

my role
UX Designer, UX Researcher
1. Led user research (interviews, card-sorting)
2. Led semi-affinity mapping to analyze research findings
3. Designed and iterated News & Events
4. Planned feedback sessions and user testing sessions
5. Drafted agenda for all team meetings and controlled discussion flows
tags
UX Design, UX Research, Mobile, Desktop
time
Aug 2019 - Dec 2019
client
Communication Department, GaTech CoC
team
Jordan, Lu, Yuhan, Chaoyuan
tools
Figma, Miro, Qualtrics, Treejack
design problem
Why?

We aimed to improve Georgia Tech College of Computing website regarding:

1. Navigation/info architecture
2. Mobile friendliness
3. Page design & content
For whom?

Client: Communication team of GT College of Computing

User: Current and prospective faculty members of the college
(Based on the client’s task allocation, student users would be catered to by the other project team)
design outcome
Navigation

1. Combined and reduced navigation tabs & elements
2. Audience-based secondary navigation to complement topic-based primary navigation
Mobile Friendliness

1. More conventional interactions
2. Standard sizing to ensure accessibility (avoid wrong taps and illegible text)
3. Clearer signifiers for tappable items
Page Design & Content

1. Less scrolls & clicks
2. More salient, accessible, and connected info for faculty members’ needs
3. System Usability Score: 52.5 to 82.5
process overview

research

Content Audit & site map
1. To clarify project scope at a high level
2. To understand original info architecture to direct future navigation re-design
3. To ensure that we can understand users during future interviews
Content audit of 62 top-level pages: navigation title, page name, brief description, intended audience, URL
Site map: Hierarchical representation of top-level navigation, links among top-level pages
user interview
Why?

1. Understand faculty users’ tasks, preferences and behavior patterns in using the college website
2. Find problems with original design of pages, and even gather design inspirations
3. Understand faculty users’ behaviors and attitudes of using the college website via computer VS mobile
How?

Combination: semi-structured interview & contextual inquiry

1. I drafted and iterated the question list
2. I moderated 5/7 sessions to let faculty users walk us through their frequently used pages

Questions can be more important than answers: Most valuable insights were obtained from follow-up questions. An example:
card sorting
Interviewing some faculty users gave us some directions on focus areas in the website. To inform our creation of new navigation, we iteratively conducted card-sorting in 3 rounds. I moderated 4/7 sessions.
Challenge: How to analyze such messy card-sorting data?

Problem: Lack of quantitative analysis due to…
1. Small sample size (Since it’s hard to book time with faculty users)
2. Different card decks (So we couldn’t aggregate results from all sessions)

Solution:
1. Positioned card sorting as generative research, focused on qualitative input (participants’ think-aloud) to inform creation of new navigation
2. Planned tree testing as evaluative research, with larger sample size for quantitative comparison of original VS new navigation(mentioned later)
comparative analysis
Why?

Studying other school websites was actually among the first few things we did, but we didn’t get much out of it due to lack of priority during our first try.
From interviews and card-sorting, we got to know which parts of a school website matter for faculty users. Now it’s both feasible and helpful to see how other schools tackle these problems.
Also, during interviews, several faculty users stated their preferences by showing other school websites.
How?

1. Selected 4 counterparts (department/school/college of CS/Information) by referring to some university website rankings
2. Analyzed counterparts’ practice regarding features important to faculty users
3. Summarized common & unique practice, good & bad practice for prioritized features

View complete comparative analysis
research findings
General Usage

1. Seniority & roles affect users’ behaviors and needs
2. Most common & important info needs: Research, Faculty, News, Events
Navigation

1. Confusion: “For someone” or “About someone”? (caused by navigation elements named as “Faculty”, “Alumni”, “Employer”, etc)
Mobile Friendliness

2. Faculty users care more about the desktop version rather than mobile-friendliness.
Page Design

3. Too much scrolling & clicking
4. Info is hard to find and comprehend

analyze

personas
Why?

1. Build empathy for users
2. Clarify user segments based on seniority & role, which proved to be key factors affecting behaviors & needs (as a result, we generated 4 personas as: Administrative Faculty, Senior Faculty, Junior Faculty, Prospective Faculty)
task analysis
Why?

1. Prioritize parts of the website involved in faculty users’ tasks
2. Build a framework to group findings from interviews and card-sorting sessions
How?

1. Listed all tasks mentioned by faculty users
2. Sketched flows of all tasks
3. Matched tasks with corresponding user segments
SEMI-AFFINITY MAPPING
To group qualitative findings from interviews & card-sorting and derive design implications for relevant parts of the website, we created this hybrid method: group sticky notes into task flow charts.

Although affinity mapping “is supposed to be” purely bottom-up, we found that approach more reasonable for creating brand new solution from scratch by identifying and abstracting key themes. For incremental improvement on a college website, it’s more efficient for us to simply find user needs & problems for relevant parts of the website, and derive design implications accordingly.

We used task analysis charts as our framework, since this offered us a context where website design and user needs intersect. This would also help us identify important tasks left behind during our task analysis.
DESIGN TASKS
Based on user needs summarized from affinity mapping results, we proposed following design tasks:
Navigation

1. Reduce confusion between “For someone” VS “About someone”

2. Reduce navigation elements
Mobile Friendliness

3. Improve interaction and layout for mobile
Page Design

4. Re-design: Research, Faculty, Homepage, News & Events, Ph.D. Studies

design

Low-Fi & user feedback
We selected several parts of the college website which were most relevant to faculty users’ common tasks (Homepage, News & Events, People. Research, Ph.D. Studies)…
…and re-designed them based on design implications derived from our earlier semi-affinity mapping

I was responsible for 2 pages: News & Events and News Archives. I also designed the event info section on homepage.

We collected faculty users’ opinions via feedback sessions to guide iterations from low-fi to hi-fi. I drafted the script for all user feedback sessions and moderated 5/9 sessions. For the other 4 sessions, I was responsible for recording video, taking notes or adding follow-up questions. I’m proud of our team spirit: 7/9 sessions had all 4 team members present, and each of us played our role pretty well.


Navigation

Improvement: Added audience-based secondary navigation
Why: Avoid confusion of “About someone” VS “For someone
Feedback 1: The secondary navigation could barely be noticed
So what: Simplify and move it to the same level as primary navigation, to increase saliency, and adhere to Georgia Tech’s new visual guidelines

Feedback 2: “People Directory” and “Student Resources” were too lengthy and technical
So what: Change “People Directory” to “Directory”, break “Student Resources” into more specific groups


Homepage

1. Moved News & Events from the bottom to top-right, next to carousel
Why: Let users see upcoming events at a glance without scrolling; reduce page space taken by the carousel while maintain its aspect ratio

2. Collapsed 3 degree info sections into one Academics section, while moving up Research and Student Resources
Why: Reduce scrolling to see Research and Student Resources
Feedback 1: News & Events was a bit repetitive with the carousel
So what: Change it to pure Upcoming Events

Feedback 2: A constantly playing carousel caused accessibility issue
So what: Let the carousel be clicked through

Feedback 3: History and About info in the middle took too much space and don’t belong here
So what: Replace the content with navigation sections below


News & Events

1. I replaced Recent Features with Upcoming Events
Why: Add event info expected by users yet missed from current page; remove info replicating homepage

2. I added “View all news” and “View all upcoming events” to corresponding sections
Why: Let users see more information after seeing part of it

3. I removed Publications
Why: Reduce confusing info not expected by users
Feedback 1: Youtube video should be more prominent as visual engagement
So what: I would move the video to the top and let it play automatically

Feedback 2: Social media section was not pretty and took too much space
So what: I would replace the section with a set of social media icons


News Archives

1. I merged News Archives and News into a single News page
Why: Reduce redundancy caused by similar pages

2. I upgraded browsing by year to browsing by month
Why: Give users more flexibility in exploration
Feedback 1: Would be cool to group news elements by audience
So what: I would add tags & filters based on intended audience of news pieces


Although we decided to prioritize desktop version during this phase, we still designed the mobile version to ensure that we keep mobile friendliness in mind. However, due to limited availability of faculty users, we didn’t cover mobile version in our feedback sessions.
hi-Fi & expert feedback
We designed hi-fi pages based on user feedback for low-fi, and then iterated them based on expert feedback.


It was a challenge to ensure visual consistency within the team, due to differences in our interpretation of the Georgia Tech brand guidelines. We eventually managed through it after going through mock-ups together.

Navigation

We created a new site map for both the topic-based primary navigation, and simplified the audience-based secondary navigation to 4 major categories.


Please check mock-ups and explanations below for the general appearance and major changes.
1. Simplified secondary navigation to 4 audience groups and moved it to the same level as the primary navigation
Why: Make it easier to see and comprehend

2. Simplified primary navigation to purely topic-based
Why: Make it mutually exclusive and collectively exhaustive

3. Changed the dropdown to be triggered by click, instead of hover
Why: Avoid accessibility issue
I re-designed the mobile navigation accordingly

1. I enlarged element sizes
Why: Avoid wrong taps

2. Moved search box from bottom to the top
Why: Make it more salient, and avoid squeezing out the menu when keypad pops up


Homepage
Homepage - Mobile


News & Events
News & Events - Mobile


News Archives
News Archives - Mobile
final prototype

evaluation

tree test
Why?

1. Most common way to test/compare navigations
2. Larger online sample size to compensate for the lack of quantitative data in earlier card sorting
3. More inclusive user group (we re-designed the navigation based on problems identified from faculty users, but eventually the navigation is for all site visitors)
How?

1. Defined benchmark tasks based on earlier task analysis
2. Selected metrics for comparison: sucess rate, time taken, first click, destination, reported difficulty
3. Drafted same tests for original navigation and our re-designed navigation(with Treejack)
4. Distributed surveys online (Facebook, Slack, Twitter, Reddit, WeChat, you name it…)
user testing
Why?

1. Compare our improvement with original design
2. Identify further usability problems and provide recommendations
How?

1. I defined benchmark tasks for both mobile and desktop
2. I selected metrics for comparison: sucess rate, number of errors, expected VS experienced difficulty, System Usability Score, number of clicks/taps
3. I drafted the session script and moderated 5/7 sessions

reflection

Learnings

1. Think about why and so what, then think about how.
2. There is no perfect UX method. Always think about potential techniques to overcome limitations, or complement methods with each other.
3. Constraints are everywhere, then so what? Working on the user segment of faculty members forces us to make decisions and push the progress despite lack of access to users.
4. When wanna say “No”, say it early and clearly. Strive for consensus before things are already done.
5. Hard to reach agreement? Take a pulse, calm down, think about it, get more inputs, and then re-start the conversation in a more informed, objective and structured way. Nothing is worse than 2 hours of quarrelling.
6. Humble! Learn from everyone, teammates, users, stakeholders, competitors. It’s hard to fill what’s already full.
7. Essentials for an effective team meeting: agenda, timer, to-do list.
8. Stay positive: No matter how frustrated we become at some points, it’s actually not that bad.
Challenges

1. Task allocation: It’s hard to split up certain tasks, since increases in communication cost will potentially cancel out the benefits of teamwork.
2. Ambiguity and disagreements on logics of all methods: Which go before which? How should we analyze research data to drive design relevance? Should we create the site-map first and test it by card-sorting, or should we generate site-map based on card-sorting and then test it by tree test? Eventually we customized some methods and completed them in “non-standard” ways. E.g. grouping interview notes into task analysis charts; iterative card-sortings going back and forth between open and closed.
3. Trade-off with conflicting inputs: Users want desktop, stakeholders want mobile. Even users have conflicting opinions regarding the same design. Analyze reasons/rationales to find deeper roots of the differences, to make better trade-off.
4. Our scope is targeting only one user segment, but eventually the design will serve all users…
5. Many issues we found from the website are actually non-design issues: content management, administration, even internal politics…… Good user experience can never be accomplished by a single team.
What went well

1. Mutual efforts: All decisions are results of team consensus, all user feedback sessions have full attendance, and every single part involves contribution of all team members. (Even as small as providing feedback.)
2. A group of interesting people. A cognitive scientist, a writer, an industrial designer, and a banker. We help and learn from each other. During the design stage, we started talking about strengths and weaknesses of all team members, to fully leverage talents onboard.
What I would do differently

1. Keep the timeline in mind, from the beginning! We could have more time to deal with lack of user inputs during research phase.
2. Prioritization: We spent too much time talking over visual details when we were supposed to go more divergent regarding functionalities.
3. Better match between the fidelity of design and the type of feedback/evaluation/test needed. We should never add that yellow navigation bar to low-fi, as we wanted users to focus on functionality & content, not visuals.
4. Better positioning of the usability testing: Validation or iteration? Quantitative or qualitative? We could have used remote testing to get larger sample if we had only wanted validation of the usability.
Next steps

1. Further tests of new functions (e.g. directory filter, tags and month-based browsing for news) with the dev version
2. Info/content for secondary navigation (lay out content tailored for audience groups)
3. Content management: content update; avoid redundancy and inconsistency; inform key stakeholders in case of major changes
4. The friendship of our team goes beyond the project. No matter where we are, what we do, whom we become, we will always be there for each other.
HA!
The award I got from teammates :)
Georgia Tech Printing  /  College Mentorship  /  GaTech College of Computing Website
Tencent Internship  /  Research Dashboard  /  Vis Beans