IUPUI OIA Wellness Check
Website wellness check recommendations report
The IU Creative and Web Team has assessed the Office of International Affairs (OIA) website, looking at the current pages and content, if items are accessible, and determining the best way to structure the information to improve the performance of the site for users. After completing a content audit, technical inventory, accessibility scan, broken link check, and information architecture assessment, we are happy to offer this report, which includes data about our findings.
We developed the following recommendations to make the OIA site more engaging and helpful to visitors.
New content and site structure
General information architecture (IA) recommendations
The content on the existing website can be reorganized and revised to create friendlier experience for site users. The site map is structured in a way that the top red box represents the main index page of the Office of International Affairs website. The gray boxes across the top represent the main navigation items across the top navigation of the website. The boxes below each main navigation item represent the pages within each of those sections once the folders are clicked open to reveal the sub-menus for each main section. The bullet points indicate pages nested within each of the sub-menu items.
General consideration across the website:
- The drop-down navigation menus are very long, consider condensing these by using your space in the top right of the site in the header (next to the Atlas button) and footer, as well as considering where users with specific goals are going in the site and using the content to link people to sub-pages from the content instead of the navigation.
- There is competing visual interest on many of the pages, including the homepage with a rotating banner image. Once in the new IU Framework, consider using interactive panels or feature chunks to link users to the main pages you want them to visit from the homepage instead of the links from the side panel. The side panel takes up space that could be used to expand the main banner image.
- Reducing the number of pages that have content which is elsewhere on the site or can be linked to in already existing sources on the web can help with longer pages.
- Consider chunking content into smaller groupings that are easier to digest and more friendly on mobile. FAQs and pages with long lists of spotlights take up pages in the navigation and make it harder for users to find information as they accumulate content. Consider incorporating the information in FAQs into the content on the appropriate pages and using profile spotlights to support content on other pages instead of listing them altogether.
Recommendations for changes in the site structure
- Consider moving Contact out of About and combining it with other contact-type pages, such as Connect with Us in Admissions, into a “Connect with Us” section in the main navigation that is easier for users to find. This new section can focus on talking with ambassadors, meeting students in their cities, visiting, and contacting OIA.
- We suggest moving all news items out of About to a “News” section linked from the header. This page can also link to welcome newsletters and how to join the newsletter email. Move the staff directory to the header as well next to the Atlas button to make it more visible and consider using filters to all this to be one page.
- There are several navigation labels with the word global, making it more difficult to differentiate these items and what kind of content they are offering. Consider changing Explore Global IUPUI to “On-campus Opportunities” or “Engage on Campus” and moving this out of About and into Global Learning.
- Since the About section is freed up of many of its subpages in this new structure, consider also moving it to the header and adding History content into this page. Donate is already linked in the footer, so you should not have to link it from the header as well, but it could be a possibility if you want to increase its visibility.
- Nest funding related pages into their appropriate sections to free up space in the sub-menus of the website. For example:
- Global Jaguars Travel Grant can be nested under Study Abroad
- Funding for Student Organizations can be nested under Student Organizations
- Under Admissions, consider combining Awards from About into Academics in a new section called “Academics & Awards” to showcase the excellence of academics at IUPUI to potential students. The information in About IUPUI could instead be labeled “Our Campus” to show potential students what it is like to be a student even before visiting in person.
- Under After Admission, consider calling “IUPUI @ Technology” just “Accounts & Technology” to allow users to find out how to set up their first computing account. Also consider calling Travel Arrangements “Travel to Indianapolis” to make it clearer the location of the campus right from the navigation label.
- Consider trimming the number of sub-pages in the Visas and Employment section. Many of the sections have overlapping pages whose content could be condensed into one page, such as the SEVIS related pages and Completing Your Program and the I-20 page. It will also make it easier for users to find this information if the ordering is the same as much as possible in the sub-menus of each of these sections, just as you have done in the How to Apply section.
- We suggest adding a new “Community Connections” section to Events & Programs for information on families hosting students (Global Jags Connect) and community training and workshops.
- Global Learning can be organized into “Study Abroad,” “On-campus Opportunities” (what used to be Explore Global IUPUI), and “In the Classroom” to simplify and help direct users to the most-used areas of this section. Many of the pages that were in the sub-menu of Global Learning can fall under the new “In the Classroom” section including those on curriculum, faculty profiles, diplomacy lab, virtual exchanges, global voice and fellows.
- By moving content that this curated to internal audiences to the footer or to an internal drive or application, this will unclutter your navigation to allow your main audience to find what they need quicker. For example, consider moving the following to the footer or to an intranet:
- Sustainable Development Goals
- Strategic Planning
- Data & Research Requests
- Department Hiring & Hosting
- Department Admissions Resources
- International Partnerships
- International Education Grants & Awards
- Resources for Curriculum Internationalizations
- Internal forms such as Global Voice Requests
Here is what the new structure looks like: IUPUI International Sitemap
Content recommendations
The existing structure of the OIA homepage does not serve the primary or secondary audiences as well as it could. Our recommendations include:
-
- Remove the image carousel, as those do not provide full accessibility.
- Provide more in-depth information and context regarding the unit's goals and vision. Use a confident yet conversational voice.
- Restructure the page to highlight and direct users to the most used pages with welcoming, clear, concise information—utilize secondary headers and images to do so
- Turn the right-hand rail items (how to apply, talk to a student, and study abroad), into more descriptive calls to action with clearly designed buttons.
- Condense the news and events items into feeds that take up less space and are located further down the page.
There were also some recurring items we observed throughout the site which can be updated to improve the user experience and provide information in a clearer way:
- Write headlines and text that embody the IU brand voice and tone and adhere to IU editorial style. Some specific common items we found include:
- Make headlines conversational as though you are speaking directly to your main audience (students) and avoid using questions for headlines
- Use sentence case for all headline and headers (only capitalize first word)
- Make sure each page starts with an H2 headline to give the user a welcoming overview. Use subsequent headers to set the hierarchy of a page, as noted on the Web Style Guide:
- Heading levels help rank your content by importance. The h1 level has the highest rank, and the h6 level has the lowest rank. Two headings with the same level have equal rank.
- Nest headings properly, without skipping a level. For example, an h1 is always followed by an h1 or h2, an h2 is followed by an h2 or h3, and so on.
- Look for opportunities to take information that was previously available through a linked PDF and instead place the information directly on a web page. Or, alternatively, link to other IUPUI pages/units when they can best explain or supply information regarding a particular topic. Some examples of PDFs that should be made into web pages might include:
- Alert boxes are used so often it it is easy to skip over them. Try to limit to no more than one per page and look for opportunities to turn them into normal text paragraphs with clear calls to action (buttons).
- Make button calls to action (CTAs) and hyperlink text descriptive (hyperlink words that describe where a user is going instead of simply saying "here").
- If a page or section is not intended for your main audience (students) then clearly establish in the headline and/or introductory paragraph who the content is for.
For more detailed feedback on specific pages, see the International Content Audit spreadsheet.
Making the site accessible
Always remember that your content must meet or exceed the accessibility standards set forth by the Web Content Accessibility Guidelines (WCAG) 2.1 AA.
Our recommendations
- The current site has multiple barriers for Assistive Technology (AT) users, including the following:
- Links: Links only use color to show that they are links; there are no other visual indicators that they are links. This is a limitation of the CMS version; a website upgrade would correct this issue.
- Broken Skip to Search link: The Skip to Search link is broken on every page of the site. Recommend fixing this link.
- Header levels: There are skipped header levels throughout the site. Pages do not follow the correct header level structure and makes pages difficult to navigate using AT. Recommend reviewing pages and correcting the header levels.
- Color contrast issues: There are many containers and inline elements throughout the site that do not meet the minimum color contrast ratio requirements for WCAG 2.1 AA, which is 4.5:1. One inline element is the pullquote, which is used around 30 times on the site. The white quotation mark against the gray background does not have a strong color contrast ratio. A website upgrade would correct the pullquote issue. Removing the containers would correct the other color contrast issues.
- PDFs: There are 80 PDFs on the site, one of which is accessible. PDFs are not accessible in general and are not mobile-friendly. We recommend that you convert your PDFs into easier-to-manage html format (web pages).
- Ambiguous link text: There are multiple cases of link text that does not describe where the link goes. Examples of ambiguous link text are: “click here”, “learn more”, “here”, “learn more here”, and “read more”. People using assistive technologies such as screen readers will not know where these links go based on the link text. Recommend adding more descriptive link text.
- Alternate text (alt text): Most images are missing alt text. Alt text is necessary for users who cannot see an image on a page. Add alt text to all images.
- Slideshows/Carousels: These items do not seem to work with assistive technology and may even be broken. Removing carousels is recommended. A website upgrade would remove issues with slideshows.
- Videos: Videos are embedded and do not have synchronous closed captions and transcripts. These are required for a compliant site.
- MachForm: MachForms have multiple styles applied throughout the site. The most accessible and up-to-date theme is the “IU Framework with Rivet” theme. This theme should be applied to all forms.
