Learning for the Users:
How UMICH Votes Can Better Support Students to Find Information
UMICH Votes represents the non-partisan collaborative efforts of University of Michigan programs and civic engagement organizations working to educate, expand access to, and engage our student and community voters in the democratic process. The website is a tool used by students and community members to get credible information on the registration and voting process.
TOOL & METHOD USED
Qualitative Research, Usability Testing, Interview
ROLE
Team Member: Developed user testing tasks and conducted website analysis. Conduct user testing and delivered actionable insights to the client.
TEAM
Organizer , Coordinator
Scott TenBrink, Rhea Acharya
Team member
Anandita Trivedi, Chiao Lin, Cindy Ye, Emma Zhang, Zack Wang, Angelica Wang
Why I join this project
Before coming to study at the University of Michigan, I had already taught myself website development and digital marketing, creating numerous websites for clients. Observing daily changes in backend analytics, I often wondered if users were finding the information they needed on my websites. How were they navigating to the relevant content? How could my website designs be improved? Consequently, after enrolling at the University of Michigan, I voluntarily joined the Civil User Testing Group to conduct user testing for the university’s websites. I understand clearly that a good designer must not only focus on aesthetics but more importantly on the effective utilization of information and providing a superior user experience!
I have developed numerous websites and have been closely monitoring analytics data for some time.
I want to understand how real users interact with these websites to enhance my skills in website design.
Chiao Lin
Overview
The current site for UMICH Votes was re-fashioned in haste in time for Fall 2022 Election. We know it does some things well for student users and others not so well. We would like to do some user feedback to formalize our understanding so we can revamp the site for re-launch in January 2024.
- Can students get their questions about registration and voting process answered on the website?
- Can students using the website find the resources available to them on campus to help them vote?
- Testing users’ familiarity with the UMich Votes website and its navigation
- Testing website’s ability to show reliable information about registration process (both in person and mail-in, online)
Task User Groups
Based on the website’s information, I have categorized users into several groups. They are divided into two categories based on whether they have moved recently (as some incoming freshmen come from out of state and have relocated). Additionally, they are further categorized into three groups based on their preferred registration method: Online registration, in-person registration, and Mail-in registration. By clarifying the distinctions among users based on this information, I can better organize tasks that align with different scenarios and are testable
Website Analysis and Task Development
After thoroughly reviewing the website, I have concluded that the tasks that can be performed on the website can be categorized into six types: General Tasks, Address Change Tasks, Timing-Related Tasks, Online Registration, In-Person Registration, Mail-In Registration, and Knowledge. Furthermore, I have compiled a list of tasks from the website’s information that can be included in the User Testing phase. During the preliminary testing, I will conduct a difficulty assessment with a volunteer.
Task Difficulty Assessment
Through preliminary testing, I can gain a better understanding of the difficulty of each task, including factors such as time required, potential navigation paths, and points of difficulty. Based on the information from the preliminary testing, I will attempt to create a task list that aligns with the time constraints of user testing and arrange the tasks in order of increasing difficulty. I will also discuss this with other team members during our group meeting.
Finalized User Testing Script
In our team meeting, we finalized the entire Testing Protocol and presented it to the client for review. In the following week, we will work on refining the User Testing Script.
You can click to see the full file.
Affinity Mapping
After the interview ended, we each went back to complete the interview analysis and organized our collaborative discussions to create an Affinity mapping. Through the feedback from each interviewee, we identified seven major commonalities, namely Website Design, Graphics, FAQ, Readability, Navigation, Register and Vote, and Miscellaneous.
Identify Issues
After further consolidation and analysis, we identified four major website design issues:
- The lack of distinction between registration and vote information leads to misinterpretation of the page’s purpose.
- Counterintuitive categorization and inconsistent terminology lead to excessive scrolling.
- Misplaced bold text, complex wording, and a lack of heading structure and graphics lead to poor readability and limited exploration.
- Users have an expectation that FAQs will answer their questions, but the lack of organization, structure, and glossary reduces its usefulness.
Issue Analysis #3: Readability
Here, I’d like to share the issue analysis and design recommendations I was responsible for.
1. Needs of Imagery Presence:
Visuals might provide readers a delightful visual pause amidst the text. Almost all pages on the website have no images or supporting graphics.
Imagery is not just about authentic, in many cases that act as an instrumental factor to provide visual puse, which gives user a rest when going through a bunch of information.
Additionally, imagery offer user a quick understanding of what information is about on that page, also act as a memory point for user to recognize the page quickly when they browsing through the website.
User Quote:
“Just reading through the content feels cumbersome.”
“Felt like I was reading a Google Doc, not a website.”
2.Unclear Visual Hierarchy
The content has a unique layout, and with a bit of visual hierarchy, it could flow even more intuitively for readers.
83% of interviewees couldn’t locate the information of ‘pick up paper registration form’ on the website. It’s only on the “elsewhere in Michigan” page, buried under an unrelated subheading of “Michigan residents can register to vote online” heading.
User Quote:
“I feel it is organized a bit difficult to read, not I can find it immediately”
“wording is complicated and text hierarchy is missing“
3.Textual Harmony
The bolded text has its own unique placement. Aligning it with the traditional “F-Shaped Pattern” might enhance the reading experience and make it even smoother for readers.
One-third of interviewees struggled to determine if an Mcard is valid ID for Election Day or if voting without an ID is possible. The information is buried deep in the content, and even after reading, some still answered incorrectly.
User Quote:
“My eyes just kept jumping to those bold words…”
“These texts are bolded inline. It is a bit distracting…”
4.Ambiguous Wording
Some content uses language that may cause confusion that needs explanation.
User Quote:
“How to decide?… Question mark is confusing in headings.”
“What does ‘MVIC site’ mean?”
Recommended Solution
Add Effective Imagery
+ Add Hero Image on the Top
help users to recognize the content subject without reading through text.
+ Other relevant imagery in the body
Providing a visual pause or “rest” for the readers also help reinforce the subject matter.
+ Use icons as visual hint
help users to recognize the content subject without reading through text.
Reduce Reading Burden
+ Apply Progressive Disclosure
Only show the full content when user need it. Helps prioritize their attention. Avoid having to scan past a large list of features they rarely use.
+ Place bolded text at the beginning
Following the traditional “F-Shaped Pattern” web reading behavior to enhance the reading efficiency. Limited to one phrase not the whole sentence.
Proposed Design Mock-up
Outcome
The project successfully completed user testing with 12 participants and provided actionable recommendations to the client within the planned timeframe. Since the scope of the project was limited to user testing, there were no further design proposals.
Reflections
This user testing involved a variety of task planning, including: website architecture, navigation logic, understanding of sentence length, and the relationships between internal links on the site. Throughout the process, I also discovered that designing an effective user test is full of intricacies.
The live user testing sessions allowed me to observe a diverse range of users, and some findings were quite surprising: some individuals had a very low task completion rate yet felt the website was well-made, others completed most of the tasks but found the website difficult to use, some showed logical and discerning in their information search, some consistently went to the same place to look for information, and some were meticulous in finding information but overlooked the most obvious areas.
It was truly eye-opening. This experience has shown me the real state of how varied individuals interact with a user interface. I have come to deeply understand that what may seem easy to me could be difficult for others, and just how crucial good website design is.
Through this project, I have learned all the stages of user testing and have gained valuable skills in conducting interviews and taking notes. I am also pleased that I took the initiative to develop the testing tasks, which made me realize the importance of information architecture and how human visual perception impacts our cognition. User testing allowed me to witness the diversity of users and, more importantly, deepened my understanding that design is meant to serve a diverse range of users!