Abi Mason (Supporting UX Researcher)
Eila Roberts (Stakeholder)
Sue Hill (Stakeholder)
Helping
MSU Integrative Biology Students Succeed
Supporting student success at Michigan State University with a human-centered website redesign.
Who I Worked With
My Role
Project Lead
UX Research (Primary)
UI Design (Primary)
UX Writing (Primary)
Research Methods
Content Audit
Web Analytics
In-Person Interviews & Card Sort
Competitive Analysis
In-Person Moderated Usability Testing
Tools Used
Axure
Adobe InDesign
Adobe Photoshop
Flowmapp
Marvel Pop
The Challenge
What do Students Need to Succeed?
How can university units be assured that their ever-changing student body is receiving the resources that students actually need?
The Department of Integrative Biology (IBIO) is home to more than 500 students majoring in Environmental Biology-Zoology, Integrative Biology, or Zoology. To help the greatest number of students, the department needed to become more strategic with its limited time and resources. The goal of this project was to understand what challenges department majors encounter and how to help these students achieve their academic and career goals.
I initiated, designed, and led this project for the Department of Integrative Biology at Michigan State University. This project was approved by Michigan State University's Institutional Review Board.
Design Process
Discovery
Content Audit + Card Sort
What Current Resources Exist?
The undergraduate section of the Integrative Biology Website included 43 webpages, nine of which were listed under the main navigation. The older webpages were very text-heavy. The information architecture and user interface needed improvement.
In the past year, only one new page was added, the Hands-On Opportunities Database. This database was developed based on real user needs.
To understand how to restructure the website's information architecture, we asked students to complete a card sort activity. Each student participant was handed a stack of index cards (i.e., each card represented a page in the undergraduate section of the website) and asked to sort the cards in a way that makes sense to him/her. The purpose of this activity was to understand their mental models of the website's information architecture.
Card sort data were analyzed by looking for themes and patterns.
Web Analytics
How do Students Use the Website?
One way to understand how people were using the website was to review the Google Analytics data. I evaluated the top-visited pages, landing pages, exit pages, bounce rates, and the content drill down. I found similar patterns in the data across multiple years.
The data suggested that users primarily accessed the website with their computer using Google. They used the search engine to go directly to the webpage of interest, circumventing the Homepage. These findings were later corroborated during student interviews. The top visited webpages are listed below.
#1 Undergrad Degrees
#2 Advising
#3 Overrides
#4 Undergrad Program
#5 Hands-On Opportunities Database
Student Interviews
Talking With Real Users
My empathy and interpersonal skills have been exceptionally useful to build rapport with users quickly and collect valuable data. We interviewed 15 students from the Integrative Biology student body who met our participant profile. These participants were diverse across class standing, majors, gender, etc. We continued interviewing students until we reached the point of data saturation.
During these interviews, we sought to understand topics such as:
- How do students get the information they need for their majors?
- Academic and career exploration challenges.
- What MSU correspondence do they read?
- Communication preferences.
- User feedback on potential web design ideas and student resources that were currently in development.
The interviews were audio-recorded and transcribed into affinity notes. The data were analyzed using flow models and an affinity diagram.
Flow Models
Device Usage
Flow models were created during each interview debriefing. Flow models were a quick, visual overview of the user's interview data. The sample flow models accompanying this text show a visual representation of communication mediums used by a student, how he/she used them, the relationships between these mediums, and relevant pain points (designated with an X).
In general, students prefer to use a computer for academics. This finding was corroborated by web analytics. Students use their smartphones to look up quick information while they are on the go.
Affinity Diagram
Synthesizing Interview Data
Interview data were analyzed using an affinity diagram, a hierarchical grouping of affinity notes. We selected an affinity diagram because:
- It was an effective way to organize information across users to show common themes, challenges, and needs.
- All data could be viewed in one place.
- An affinity diagram allowed us to see patterns and themes in the data without losing the individual variation.
The affinity diagram was comprised of ~1,500 affinity notes (note: the photo only shows half of the completed affinity diagram). Key insights from the affinity diagram are listed below.
Themes From User Data
Students are overwhelmed when they are provided too much information.
It’s hard for students to use websites with too much information. They only want information that is directly relevant to them. Poor content organization and formatting are a turnoff for students. For example, they get burned out reading a bunch of text on a webpage. Instead, they prefer visuals. Students also reported that they get confused if there are too many pages or navigation options to choose from. They prefer simple, and easy to use websites.
Students have a hard time finding the information they need.
Students only look for information when they need it. Students struggle to find the information they need because they either:
- Don’t know where to go from information.
- Don’t know what to search for.
- Don’t know how to piece information together.
- Don’t want to dig through a bunch of content to find the information they need.
They reported that the IBIO website is hard to use. Students would prefer to start with fewer options and funnel down to get more information.
Students find it helpful when information is consolidated.
They like having all the information they need in one place. For example, students would like each major to have its own webpage which provides resources specific to that major (e.g., complimentary minors, careers, jobs, etc.). They also find hyperlinks very helpful.
Students don't know what major is best for them.
Students explore majors by comparing curriculums online. They would like more information about the majors online to help them determine which major is the best fit for them.
Students have a hard time connecting their major to a career path.
Although students have begun career exploration, they don’t know what to do with their degree. They want to know what type of careers they can have with each curriculum, possible entry level jobs they can pursue, and the skill sets they need for these positions. They don’t understand graduate school.
IBIO Students like to read examples of what their peers are doing with their major (or have done in the past). They said it would be helpful if there were stories about what alumni have done with their degree. They are also interested in learning about the career trajectories of their professors.
The best way to communicate with students is via email.
Students reported that they check their email at least one time per day. The subject line and who the email is sent from dictates whether they open it; they open emails related to their academics. The students like the IBIO Student eNewsletter and its current distribution schedule.
IBIO students don’t want to see school-related stuff on social media, and they don’t check the department website regularly.
Personas
Who Makes Up the Student Body?
Based on the affinity diagram data, four personas were developed to help us understand the users and guide design decisions. These personas are a representation of the department's student body.
User Journeys
What is the Student Experience Like?
A user journey was created for each persona. Each student persona has its own unique goals, touchpoints, and challenges that need to be considered for brainstorming ideas and making design decisions.
Ideation
Sketching
Brainstorming Solutions
We generated more than 200 design ideas from user data. Sketching was used to brainstorm, capture, explore, and communicate my ideas. Ideas ranged from hosting student assemblies (with optional live streaming) or redesigning the curriculum to website enhancements. Design ideas were prioritized.
Comparing Degrees: Students choosing a major don’t know the difference between majors offered by Integrative Biology. A comparison chart could help students choose which major is best for them.
Major Webpage: Students requested a page with curated content for their specific major. This is a sketch of a potential design layout.
Competitive Analysis
Are Competitors Already Implementing These Ideas?
I conducted a competitive analysis to get a better understanding of how MSU's Department of Integrative Biology's web presence compared with its namesake competitors across the United States. Only ten departments with the name 'Integrative Biology' were identified. All ten were included in the competitive analysis. The features compared across the websites were based on user data and potential design ideas for this project. An exert of the competitive analysis is below.
The findings suggest that most Integrative Biology Department websites provide their students with sample course plans and a course list, two areas where MSU is lacking. In general, these websites included very basic information for undergraduates and either limited to zero information about career preparation (a high priority topic to department undergraduates). None of the websites included in the competitive analysis had modern web designs. Similar to MSU's current IBIO website, these websites were text-heavy and provided limited visuals. Overall, I discovered that many of my design ideas generated from the affinity diagram have not been implemented by MSU's competitors.
| Features | UC Berkley | Oregon State University | University of Wisconsin | Oklahoma State University | University of Illinois |
|---|---|---|---|---|---|
| Major Comparison Chart | |||||
| Comprehensive Major Page | |||||
| Sample Course Plans | |||||
| Hands-On Opportunities Database | |||||
| Sample Resume | |||||
| Sample Cover Letter | |||||
| Academic FAQs | |||||
| Course List | |||||
| Alumni Career Stories | |||||
| Visuals | Limited visuals. Text-heavy. | Limited visuals. Text-heavy. | Occasional hero images. No visuals of students. | Limited visuals. Small & hard to see. | |
| Videos | Student Life Video | Prospective Student Video & Undergraduate Research Video | |||
| Modern Web Design |
Recommendation: A Website Redesign
A website driven by human-centered design is a powerful tool that had not been fully leveraged by the Department of Integrative Biology. The few webpages that were created based on user needs in the past have been very successful.
Redesigning the website (e.g., information architecture, content, and design) was the first step to bolster the academic and career success of department majors. The data suggested that students rely on the website as a reference. Improving the website could reduce the cognitive load of users and create an easy to use, informative, and enjoyable user interface for students. Providing students with useful, online resources could also help reduce the overwhelmed advising workload and serve as helpful artifacts for advisors to reference during advising appointments.
Enhancements began with high priority features that students could not find elsewhere.
Design & Testing
Sitemap
Improving Usability & Findability
Using student data, the information architecture and content organization of the website (i.e., the undergraduate section only) were redesigned to align with students' mental models. The total webpages were reduced from 43 to 27, and every webpage can be reached in 3 clicks or less.
New Sitemap
Old Sitemap
Content Design, Paper Prototype, & Usability Testing
Preliminary Design Ideas
I began designing the website with a paper prototype because it was a quick way to work out our design ideas. I rewrote all the headers and web copy to be simple, and straightforward. More than 50% of the old web copy was eliminated.
Scans of the paper prototype were uploaded into MarvelPop, a tool that makes sketches interactive like a real website. I conducted moderated usability testing with ten students who were pursuing majors offered by the Department.
Overall, student feedback was positive. Students reported that the prototype was much easier to navigate than the pre-existing website (average student usability rating was 8.1 of 10). In fact, one student said, "I really like it. I want to use it right now. It's a lot easier for arranging my internship."The average completion rate across scenarios was 73%.
The big takeaway was that some of the designs included too much text. Feedback was incorporated into the next iteration of the prototype.
High Fidelity Prototypes & Moderated Usability Testing
Refining & Digitizing Design Ideas
Design Iteration 1
I created a digital, high-fidelity prototype using Axure. Images for the prototype were carefully selected to be representative of the student body's diversity and support the department's commitment to diversity, equity, and inclusion (DEI) efforts.
Student Feedback was positive about the organization, design, features, and usability of the prototype (i.e., we were on the right track). However, there was still room for improvement. Web copy and button text were refined as necessary to address students' comments, confusion, and suggestions.
Design Iteration 2
A second iteration of the high-fidelity prototype was developed and tested for usability with students. This iteration of moderated usability testing used the same scenarios as those tested with the paper prototype for data comparison.
Overall, the students' average successful completion rate across scenarios increased by 1.85% to 75%. Students' average rating of the high-fidelity prototype's usability (9 of 10) was an 8.5% increase compared to the paper prototype.
Students consistently struggled with several scenarios. I observed trends in where students looked for information. More redundancy will be added on the webpages where students were erroneously looking so that there are multiple ways for users to accomplish their goals.
Design Iteration Example
The website’s design evolved and improved with each prototype iteration because of student feedback. Each phase of usability testing generated new ideas and refined current concepts. Each prototype was a closer approximation to a final product.
Old Design
Advising was the second most visited page on the website. Data confirmed that the old web design for this page was very text-heavy with few images.
Paper Prototype
Based on student feedback, all advising-related information was consolidated and simplified to one webpage.
During paper prototype usability testing, we found that the recurring "common questions" section was too text-heavy. Only 30% of the students who participated in usability testing read this text. The proposed solution was to separate questions into categories.
The icons at the top of the page were unclickable and didn't serve a real function. That section was removed in the next iteration. Students requested that the "academic resources" be moved to the top of the webpage.
High Fidelity Prototype 1
Observations and scenario data from high-fidelity prototype usability testing showed that students still were not reading text from the "common questions sections," despite breaking the questions up topically with headers. We explored alternative ways to display this information in the next iteration.
We also discovered that some headers and text needed to be rephrased to be more straight-forward.
High Fidelity Prototype 2
Feedback from usability testing was incorporated into this prototype iteration. The "common questions" section was made tabular so less text was visible at once.
Major Comparison
Students were often confused about the differences between the department's four majors. A webpage was developed that compares, in detail, all the department majors.
Major Page
Every student interviewed wished for a webpage that providing curated content specific to their major. This new feature will meet the needs of students in all stages of their challenging academic career (e.g., choosing a major, connecting their major to a career path).
Online Paperwork
Many academic resources that were previously only available in person are now available online (e.g., sample course plans, list of approved major electives, internship paperwork).
Website Demo
Conclusion
The findings suggest that students in the Department of Integrative Biology struggled to find the information they need for their major and career preparation. These students were overwhelmed by excessive information and they struggle to synthesize information. They want content directly relevant to their academics and career interests.
Students were really excited about new features that emerged from our research insights. For example, one new feature is a webpage that compares, in detail, all the department majors. A usability participant commented, "That's perfect. That's what I always wanted. It would save me hours." Students also liked that many academic resources that could only be accessed in person will also be available online. The impact is threefold: (1) access to critical major information will be more equitable and accessible to all students, (2) students will have more options for academic support to accommodate their needs and lifestyles, and (3) decrease the demanding workload of academic advisors.
Overall, student feedback was very positive. In fact, one student asserted, "It's what I hoped it would be." When students were asked how likely they would recommend this new website to a fellow student in their major (during usability testing), their average rating was a 9.5 out of 10, with 10 being the highest score possible.
Most surprising and complimentary was the noted comparison of this new design with other websites across the Michigan State University campus by students and colleagues. A student mentioned, "If I had this, school would be easier. It's way more user friendly than any other MSU website. It has everything you need from starting here, classes, to find careers. It would be great for other majors across campus." Meanwhile, an academic advisor (from another unit) who happened to see the prototype told me, "I've seen a lot of webpages in my nine years of advising at MSU. This one is by far the best I've seen."
Broader Implications
The implications of this project extended beyond what was initially expected. The data, findings, and design ideas generated from this project:
- Helped guide the department's strategic planning.
- Was used as evidence of the department's commitment to student success in Integrative Biology's [undergraduate] annual program report that has been reviewed by the College of Natural Science's leadership.
- The data fostered the development of a new freshman course that has been incorporated into the department's undergraduate curriculum. This new course connects students with peers and department faculty sooner in their academic careers.
We also discovered that Integrative Biology has been doing some things well:
- All the participants really liked the IBIO Student eNewletter.
- Students have found the IBIO Hands-On Opportunities Database to be useful. Enhancements were suggested to make this database even more useful and easier to use.
Limitations
Like any study, there were limitations. For example, you can only learn so much from interviews. What people say and what they do don't necessarily align. For example, some students said they used FAQs, but then they contradicted themselves later in the interview. If I could do the project over again, I would have supplemented the interviews with a diary study to better capture needs and technology usage.
Another limitation of the project was that students were only recruited using email. In the future, we should also recruit students by making announcements in MSU classrooms. It is possible that our results may have been biased towards students that read their email.
Future Work
In the future, I plan build the high-fidelity prototype in the department's content management system using HTML & CSS. Once a final product is launched, then lower priority design ideas can be explored.
Additionally, I would like to conduct a parallel project with the department's graduate students. I've reviewed the Google Analytics data for the graduate webpages, but I want to dig deeper. How the graduate students currently use the Integrative Biology website and how they would like to use it (i.e., if changes were made) may not align.