Purdue OWL Website Redesign.
Internship.
Summer 2021.
Design Team.
Website Redesign.
One Minute Summary ⏰
Redesigned an educational website to enhance its user experience. This involved extensive user research that drove the creation of an entirely new UI Design system and interactive prototype that was A/B tested with 26 users.
The Team 👏🏼
UX Designers (7)
My Role 👩🏻💻
Lead UX Designer: Visual design of key pages, creation and matainence of project roadmap and milestones, client communication
Deliverables 🎁
-
Figma Prototype
-
UI Design System
-
Hi-fi Mockups (14)
-
User Acceptance Testing
-
User Research Report
Final Design Overview 💭
Establishing the need for my product and the final solution I designed to address it.
I. Redesigned Website (Screens+Prototype) 🎉
An interactable version of our designs that can be used for testing and intended functionality.
II. Redesigned Navigation
Condensed and reorganized page hierarchy to streamline user flows.
Before
Tab-based side navigation
Concern
Heavy page nesting creates low discoverability and difficulty navigating the site
After:
"Sticky" Top Navigation that clearly highlights intended audiences and important services.
III. Redesigned Pages
Updated page designs that are consistent and engaging.
Before
Pages divided into thirds with mixed media (links, pictures, videos, pdfs, etc.)
Concern
Dense, text-heavy, page layout is unengaging and makes skimming difficult.
After:
Modular design that organizes content in a concise and interactive way to drive action.
IV. Updated Design System
A standardized and immediately actionable visual design system that can be handed off to front-end development.
V. Page Templates
General page layouts that developers can use as a reference to re-structure other parts of the Purdue OWL.
Why
Provide examples of how to embed multimedia resources in a consistent way that also respects ad-sense to drive revenue.
My Design Process 👩🏻💻
Highlighting the research, prototyping, testing, and iteration behind the final designs.
Stakeholder Interviews 🎤
I led 8 of 25 stakeholder interviews in order to understand how site usage varied depending on identity as faculty, student, or tutor.
Site Map &
Google Analytics 📊
Site Map 🗺
Diagramed the website hierarchy of each page (900+ pages) and their internal/external connections in order to understand interconnectivity, importance, and redundancies.
Google Analytics 📊
Identify user flows within the site and potential risks indicated by bounce rate, avg. page session, etc.
Heuristic Analysis & Content Inventory 🕵🏻♀️
Heuristic Analysis 🧐
Evaluated pages based on Neilsen Norman heuristics to gauge the effectiveness of content layout and identify opportunity spaces.
Content Inventory 🕵🏻♀️
Compile suggestions including pages that need to be updated, consolidated, or removed.
A/B Testing Our New Site Navigation
Why 🤓
Consolidate and streamline user flows to increase user engagement and reduce bounce rates.
(see "Google Analytics")
Testing Results 📝
We prompted 26 participants to complete tasks using either old or new site navigation in order to compare user performance and identify areas for iteration.
Example Task: Locate information regarding the history of the Writing Lab
New Navigation
Old Navigation
Ideation & Prototyping 🎨
Create low-risk prototypes that can be iterated upon quickly. Gradually raise fidelity through testing.
Sketches ✍🏼
Identify overarching design themes and key features to include across the design system.
Wireframes 🖼
Use testing feedback to combine key features and structure page content.
High-Fidelity & Prototyping 🥳
Iterate based on stakeholder feedback and program functionality to conduct user acceptance testing.
Reflection 💕
Reflecting on what I learned from this experience and highlighting aspects of my personal journey as a designer.
For My First Internship, Experience Was My Teacher. 👩🏻🏫
As my first industry experience, this project was a beast. With only one year of formal UX education, I lead my team and there were many times I felt in over my head. There are skills you can't learn in the classroom. How do you handle rescopes? How do you collaborate with different skillsets and interests? How do you balance user wants vs client wants? What is actually feasible given your timeframe and skill level? These are answers I learned through experience.
Someone Has to Lead 🧭
As mentioned above, I was the lead UX Designer on this project managing both ground-level design work and managerial duties. However, this wasn't always the case. For the first 4 weeks of the project, we approached it with a "we're all friends we don't need a leader" mentality. However, this often lead to confusion about what needed to be done and why. Although I feared I was unqualified to lead, I knew we couldn't continue this way so I began leading our daily standup meetings and client communication, created a crude project roadmap and weekly agendas, and began delegating work based on my teammate's interests and skills. Although I made many mistakes, if I could go back I would've started leading from the beginning of the project. This experience taught me being a leader is not about "not being friends" but providing direction, support, and reasoning to your team. I loved being able to exercise these skills in the context of my designs.
Good Design Balances Fun And Reason 🤓
My favorite part about this project was being able to solve problems with visual design. My biggest goal was to better showcase the student services that the OWL provides. However, based on user and client feedback we found these services were often buried on the site and thus underutilized. This was the "reason" behind my designs. However, being able to solve this problem in a way that was fun for users (ex. introducing micro animations in our navigation) is the reason I am proud of this project in particular
Check Out My Other Projects💡
Kohl's Data Visualization
Figma Marketing Campaign
Expedia Sustainability UI