Type
Web renewal
Role
UX researcher & Graphic Designer
Skills & Tools
UX research, Information Architecture, HTML/CSS, Data Analysis, Web design, Stakeholder communication, Google Analytics, Focus Group, Card Sorting, WordPress
Overview
While I was working for Engineering College Relations at Iowa State University as an intern during my undergraduate studies, I was given an opportunity to participate in redesigning the website for the Department of Electrical and Computer Engineering (ECE). With the University’s all-time high enrollment growth in the 2010s — and the College of Engineering being the largest with over 8,000 students — the ECE department recognized the need to improve the website for both current students and prospective students.
As I worked alongside the senior designer as an intern during the limited time, I participated in the early stage of the project — mostly conducting research to identify navigation and information architecture issues that were preventing students from finding program information and resources efficiently.
Overview
Challenge
Repetitive page categorization created too much overlapping content for students. It also led to unclear and ambiguous pathways for users, where users were unsure which pages to use for specific tasks.
Solution
Simplified the long list of menu options by grouping them into clear categories that reflect user mental models. Also improved the navigation by combining repetitive pages and omitting underused pages.
Impact
Getting rid of over 30% of content redundancy achieved 360% increase in user engagement time through research-driven new Information Architecture.
Discovery
Understanding the current website
To define what problems we needed to focus on, understanding the current website was important. I conducted the website audit by going through all pages under the top-tier menus on the ECE website. During this process, I was able to follow the user flow, identifying where each page led. This comprehensive audit revealed that the navigation was confusing. There were too many overlapping page options under 'Academics,' categorization for pages was only causing more confusion with repetitive internal links, and some links were broken.
Google analytics
After looking into the ECE website, I was given access to Google Analytics. I had never used Google Analytics before, but I was able to learn quickly that it shows user behavior patterns including page views, average time on page, bounce rates, etc. Studying user patterns on the website helped validate the navigation problems I had identified.
There were over 150 pages on the ECE website that Google Analytics had tracked. I visited all the pages to find where they were located, recreating the user journey. Through this process, I found out some pages were not accessible through direct sitemap navigation, which was proven by low page views — less than 10 users visited these pages in a year-long time window. By having access to the complete list of pages under the website, I was able to find that around 30% of pages were underutilized. Also, from the analysis, we were able to spot that 'Academics' and 'Future Students' were the two main menus where most visited pages were located.
sitemap analysis
Information Architecture for the current "Future Students"
Based on the problems we discovered from the website audit and Google Analytics reports, we decided to focus on two main menus — Academics and Future Students. The stakeholders wanted to improve the experiences students would have on their website — regardless of whether they were current or future students — and we had noticed the most visited pages suggested that students visit the website looking for resources, so focusing on these two main menus was valid. To create visuals that would help with better understanding of the problems, I mapped every page and tracked user pathways to understand the current information architecture. The sitemap clearly showed there were too many submenus and internal links without considering user flow.
Information Architecture for "Academics" used for stakeholders presentation
After creating the sitemap digitally, I moved it onto large paper to present it to stakeholders in a way they could understand better. This helped all stakeholders agree on why the website needed improvement and change.
user interviews
The senior designer had arranged a focus group to test how users respond to the current menu categorization and user flow. Five students were gathered to participate in card sorting, and stakeholders also attended to witness the test results. Cards with names of main menus (Academics and Future Students) and submenus were prepared. The detailed information distinguishing main menus and submenus wasn't provided to the participants. We asked the participants to reorganize the menus and subcategorize them. After they finished the card sorting activity, we asked questions and heard the reasoning behind their decisions.
One of the things that surprised me the most was that none of the participants had guessed "Academics" was the main menu. They categorized pages mostly into "Graduate" and "Undergraduate" categories.
How students naturally thought about organizing information was completely different from how the website was structured. Undoubtedly, this test revealed that the existing information architecture doesn't reflect user mental models.
Design solutions
Based on my research findings showing 30% page redundancy and poor navigation, we redesigned the information architecture, and I created a few prototype pages applying the new structure.
navigation restructuring
Renamed "Academics" to "Current Students" and reframed the sitemap hierarchy around user mental models discovered through card sorting. Instead of 12 vague menu items, three sub-menus were created as a clear two-tier structure: Undergraduate, Graduate, and Student Services.
As-is (Academics) and To-be (Current Students) comparison
content consolidation
Combined repetitive pages and remove underused content that was only confusing to reduce cognitive load of users. I also made some sketches showing how repetitive information could be grouped rather than spread across multiple text-heavy pages.
Problems recognized during usability testing
Implementation
Built interactive prototypes using HTML, CSS, and Bootstrap on WordPress, demonstrating the new navigation structure. The senior designer and engineer then built the MVP for A/B testing based on our research findings and the prototypes I designed.
next steps & reflections
Next steps
As I was graduating and finishing my internship at Engineering College Relations, I could no longer participate in the project. Also, given the number of menus and pages, the full implementation was conducted over long period of time. As the team continued redesigning the entire website, the new information architecture from our MVP remained as the solution. Today, they no longer have a menu for 'future students', but they have still kept the 'Undergraduate' and 'Graduate' menus as their structure.
Reflections
Personally this project means a lot to me. Even though I participated in this project about 6 years ago, this was the project that led me to the UX field. When I was taking HTML/CSS class, my boss gave me an opportunity to participate in this web project. Making prototypes in HTML/CSS was fun, and presenting the problems and solutions to stakeholders was rewarding. As I didn't know different UX methodologies back then, I didn’t get to evaluate A/B test results. If I could do this project again with the knowledge I have right now, I would follow the A/B test results, and do more user interviews as well. Additionally, while revisiting this project, I got to think about internal linking. The website back then had internal linking without strategy, which only confused users, and I focused on detangling internal links on each page. But now I know internal linking with well-planned strategy can help SEO and users engagement and navigation.