Indiana Tech digital marketing materials featuring website design with campus images and information about university offerings.

Indiana Tech Navigation Redesign

The first part of our redesign effort focused on identifying users, addressing their friction when navigating through our site and improving their experience.

The scope of the website redesign encompassed over 1,500 pages and 30+ micro-sites within the broader Indiana Tech website ecosystem.

Role

UX / UI Designer

Team

1 Designer, 1 Developer

Kickoff

One of the first major tasks was identifying the goals for the redesign. We thoroughly examined user data, feedback, and website analytics.

🎯 Goals

  1. Establish user driven (and specific) navigation patterns

  2. Evaluate existing content then organize based on user needs and expectations and partner with stakeholders to update contentDevelop a content management strategy and assign DRI’s from departments to own their content

Market + product landscape

What are other universities doing and offering? How do their sites compare to Indiana Tech’s website?

We explored regional private and public universities, private technical institutes and aspirational websites.

Trends:

  • lack of responsive design across competitors

  • specific routes / entry points for specific audiences (info for...)

  • emphasis on statistics

  • bloated (mega) navigation patterns

  • conservative use of color with an emphasis on neutrals

Digital mockup showing university websites with responsive designs on desktop and mobile devices, featuring Arizona State University and Purdue University.
  • Screenshot of Indiana Tech website highlighting admissions, aid, and events. Features images of students, news updates, and information on programs such as First-Year, Transfer, and International Students. Includes sections on traditional undergraduate, adult, online education, and law school programs. Offers navigation for academics, university life, and athletics.
  • Purdue University website screenshot featuring admissions and student resources, including academic calendar, tuition details, and campus map.
  • Screenshot of the Indiana University Purdue University Fort Wayne (IPFW) website homepage featuring sections for admissions, academics, campus life, and more. Includes links for future students, news, and events, and showcases images of students and campus activities.
  • Rose-Hulman Institute of Technology website screenshot showcasing admissions, academic information, students working on projects, and highlighting faculty and alumni. Includes navigation options and highlights about early planning, campus visits, and applying.
  • Ball State University website homepage featuring images of students learning and climbing, along with facts about alumni, academic colleges, and scholarships.

Competitive analysis: features

After we looked through the various websites for inspirations we began to categorize and compare various features to uncover trends and identify opportunities.

Opportunities:

  • Video / engaging media

  • Discoverability for specific audiences

  • Adding “quick links” or improve ease of access to important information

  • Leaning into responsive design

  • Storytelling and testimonials

Comparison table of features for five universities for 2015/2016, including Indiana Tech, Arizona State University, Indiana Wesleyan University, Indiana Purdue Fort Wayne, and University of Saint Francis. Features listed are Personalization, Student Accounts Access, News, Events, Storytelling, Testimonials, Course Search, Dynamic Layout, Video, Delivery Methods, Student Identification, Chat, Campus Visit, Rankings, and Statistics.

Identifying user groups

In our competitive research, we discovered that our competitors identified and utilized “entry ways” for specific user groups.

In order to accomplish a similar approach to organizing our navigation patterns and “entry ways” we needed to identify our user groups and their needs.

The information we gain from user research will help us to improve ease of access to specific information important to those users.

Four columns with yellow backgrounds listing Students, Parents, Staff, and Faculty. The Students section details prospective, returning, and current students in Traditional Day School, College of Professional Studies, and PHD programs. Parents section includes prospective and current students in Traditional Day School. Staff and Faculty columns are blank.
Comparison of prospective TDS and CPS student tasks, featuring research, exploration, and application steps on Indiana Tech website.

Organizing tasks based from competitor research and small scale card sorting activities.

User research + testing

We began by testing the current website with potential students, we found through moderated testing, users had a neutral experience when searching and locating specific programs and applications on our website.

Potential students also had no way to easily compare programs and navigation proved to be difficult for them resulting in the user giving up locating follow up actions.

Especially frustrating when they could not locate the specific application they needed.

A journey map showing steps labeled Search, Find, Compare, Contact, and Apply, with a line graph indicating user satisfaction levels from Happy to Unhappy to Neutral. Below each step, there are experiences and expectations described, such as searching for business topics, navigating a college website, and applying to a program.

Example of an early journey map capturing potential touch points by (10) potential traditional students. Participants were sourced from usertesting.com.

Heatmap analysis of Indiana Tech's admissions and academics webpage, showing user interaction in blue and red patterns.

We ran heat mapping to gain a better understanding of how our users interacted with areas of our site. By far users often were visiting our Academics site to learn more about our programs before making the step towards applying. We didn’t have clear next steps to guide users towards applying from our program pages.

Navigation + dashboard early conceptual wireframes

In order to strike a balance when supporting prospective and current students, we leaned into Academics being one of primary paths towards applying for new students and crafted content on the homepage for prospective traditional and international students.

The “dashboard” navigation supports current students, faculty and staff providing ease of access to specific areas of the site and resources.

Flowchart diagram displaying various sections and categories, including Student Life, Alumni, and About Tech, with subcategories like Orientation, Residence Life, Benefits, and Events.
Indiana Tech website menu with links to resources, quick links, and support services, along with navigation options like academics, admission, campus, student life, alumni, and athletics.

We had explored a few directions while concepting, however this direction was the one that resonated in design. Each “tab” would contain resources, quick links and entry points for specific audiences.

Indiana Tech website menu with resources, quick links, and support options

Similar to how we had improved the ease of access for traditional prospective students, we leaned into a similar approach for quick links and resources for faculty and staff.

Indiana Tech homepage with heatmap overlay

Early validation and results: Heat map analytics to track activity on the new navigation concept. Our early tests validated that specific user (audience) entry points reduced friction in users finding that they needed. We also moved Academics first in the navigation with ease of access to programs.

Design principles ✨

Simple

Avoid overloading users with a large number of links, pathways and call to actions in navigation patterns.

A large amount of information and links for a number of audiences presents a risk of overwhelming users.

Visible + helpful

Primary navigation should be available at all times. Navigation patterns should feel like an invisible hand that guides the user.

Consistent

Navigation types must follow a consistent patterns throughout the site and each type serves a specific purpose within that site.


Accessible

In order to ensure a consistent experience and accessibility on mobile devices, we must be considerate of the minimum touch target size of 48px.


High fidelity designs 🎨

Final high fidelity design concepts of primary navigation.

Final high fidelity design concepts of primary navigation on mobile.

Final high fidelity design concepts for the dashboard. Student and Faculty/Staff dashboards with curated resources, quick links, support and tools.

🎉 Results

  • Homepage bounce rate improved going from 80% to 45% over the course of the following 4 months after the new navigation designs were implemented. Means users spent more time on the site before leaving (measured via Hotjar).

  • Our audiences self-identifying via entry points in navigation patterns and strategy reinforced marketing strategies by utilizing targeted analytics efforts.

  • Positive internal feedback from students, faculty and staff. The dashboard was by far the most impactful improvement.

Multiple positive testimonials about Indiana Tech’s website, highlighting ease of use and navigation, with the URL academics.indianatech.edu featured.

We gathered feedback internal via surveys from various department / site owners and current students. Additionally we organized moderated user testing via usertesting.com.

Next project →

← Previous project