Purdue University
Purdue Wikipedia
Page Redesign
Academic Project
Purdue Wikipedia Page Redesign
Information Architecture; Navigation; Wireframes; Hi-fi & Low-fi Prototype
Project Overview
Information produced by human beings is expanding at a rapid pace. Navigating vast bodies of information is a challenge. With billions of information pages and data sources across the World Wide Web, a key objective of designers and developers is to make sense of, visualize and communicate information in a coherent and usable way.
This academic project transforms the dense, text-heavy Wikipedia entry for Purdue University into a modern, user-centric, and visually engaging website prototype. I built a content strategy, Information Architecture, wireframe, and prototype, all of which inform and express my interface & interaction design.
Project Scope
UI Design
Media Production
Wireframing
Prototyping
Tools
Figma
FigJam
Timeline
3 Days
Design Space
Problem Statement
Wikipedia is a powerful source of information, but its single-page, text-dense format is not optimized for user engagement or intuitive navigation. The "Purdue University" Wikipedia page, with over 2,500 words and dozens of sections, presents a significant usability challenge for prospective students, parents, or researchers trying to find specific information quickly.
Design Question
How can this vast body of information be restructured into a coherent, navigable, and visually appealing website that aligns with the Purdue brand identity?
Information Architecture & Navigation
The foundation of this project was restructuring the content to make it discoverable.
Guiding Questions
How will a user navigate between different levels of information?
Are the proposed category labels clear, concise, and unambiguous to a new user?
Goals
Analyze the complete scope of content on the original Wikipedia page.
Identify the primary pain points, areas of confusion, and illogical groupings in the existing structure.
Develop a new Information Architecture (IA) that prioritizes user needs and simplifies content discovery.
Content Audit
I began by creating a node-link tree diagram of the original Wikipedia page's structure. This visual map immediately exposed several key issues:
Information Overload: The top-level navigation was cluttered with too many distinct sections.
Illogical Grouping: Subsections were often placed under inappropriate parent categories.
Unclear Naming: Section titles like "Campuses" were ambiguous and could be easily misinterpreted.
Redesigned Information Architecture
Based on the audit, I developed a new, streamlined IA. My main goals were to simplify and clarify.
Reduced High-Level Sections: I consolidated numerous topics into five broad, intuitive categories: About, Academics, Admissions, Research, and Life at Purdue.
Reorganized Content: Sections like "Athletics" were logically moved under "Life at Purdue."
Clarified Naming: "Campuses" was renamed to the more action-oriented "Explore Purdue" to better reflect its content.
Navigation System
To support the new IA, I defined a new navigation system to ensure users could find their way from anywhere on the site.
Global Structural Navigation: A persistent top navigation bar featuring the five main sections.
Local Structural Navigation: Secondary bar within each main section for drilling down into specific content.
Global Utility: A prominent search bar for direct queries.
Associative Links: Contextual links embedded in the text to connect related topics and guide users to external official sites.
Wireframing
With a structure in place, I moved to Figma to create low-fidelity wireframes for the homepage, "Explore Purdue," and "Life at Purdue" pages. I designed for both desktop and mobile viewports.
My wireframing was guided by these principles:
Consistency: Maintain a familiar layout and structure across all pages.
Clarity: Use clear visual hierarchy to guide the user's eye through the content.
Findability: Ensure navigation elements are prominent and easy to use.
Goals
Translate the IA into a concrete visual layout for key pages
Establish a clear visual hierarchy for content
Wireframe Overview
Below is an overview of the final wireframes:
Hi-Fidelity Prototyping
This phase translated wireframes through visual design, media production, and content.
Goals
Build an interactive prototype that simulates the final product
Produce and integrate high-quality, authentic media
Apply UI design principles to enhance readability, aesthetic appeal, and overall usability
Style Guide
I created a style guide based on Purdue's branding to ensure visual consistency. This included defining colors, typography for headings and body text, and component styles.
Media Collection
I conducted a photoshoot across Purdue's West Lafayette campus. This allowed me to capture authentic, high-quality images that represent the university's environment and architecture, adding a layer of authenticity to the design.
Desktop Pages
*Click on each screen to view*
Mobile Pages
*Scroll on each screen to view*
Key Takeaways
Information Architecture
A thoughtful information architecture is an extremely important factor in making large amounts of content usable. The initial audit and redesign exposed how the IA control so many aspects of the structure of a website. It revealed how much planning is needed prior to working to visual design.
Original Media
This project exclusively used original media. Taking my own photography gave me so much more control in my designs. It both elevated the design and added character to the site. When I was translating wireframes into high-fidelity, It was exciting and rewarding using my own media.
Next Steps
Conduct Usability Testing:
The current design is based on research and established usability heuristics, but its true effectiveness can only be validated with real users.
Build Out Remaining Pages:
The current prototype focuses on three key page types. The next step would be to apply the established design system and IA to create high-fidelity mockups for the remaining sections.