BRINGING CLARITY AND CONFIDENCE TO UW’S INNOVATION HUB
TEO Website Overhaul
Background
—The Technology Entrepreneurship Office (TEO) helps UW–Madison students, researchers, and faculty turn bold ideas into real-world startups.
Role
UX Design · Content Strategy · WordPress Development · Copywriting
Scope
6 Months · Client-Side Redesign
TEAM
1 UX Designer (Me), 1 Creative manager
Figma
Photoshop
Illustrator
WordPress
Overview
Client Brief
"Evaluate the TEO website and uncover why engagement is low, Make our mission and offerings clearer to visitors."
The TEO website's structure and messaging lacked clarity, users often felt unsure about where to go or what to engage with. As a result:
We redesigned the site to help users quickly understand TEO and engage with its offerings.
Impact
These changes led to measurable improvements in user engagement, clarity, and confidence across the site.
%
Decrease in Bounce Rates
%
Increase in Program Signups
2.5
x
Average time on site
7 in
10
Participant Felt More Confident Using the Site
TEO’s site lacked clarity—users didn’t know what it did or how to get started. We overhauled it with clear messaging, better navigation, and clear CTAs.
The result: lower bounce rates, higher engagement, and more signups.
Research Process
UX audit
Before testing with users, I did a full audit of the TEO website to understand where the structure and messaging fell short. Here are the top three issues I flagged:
I observed 5 participants—2 student entrepreneurs, 1 grad researcher, and 2 faculty members—navigate the original TEO website with open-ended prompts like:
Here’s what they struggled with:
Affinity Mapping
After the usability walkthroughs, I had a long list of raw notes, quotes, and scattered observations. To make sense of it all—and figure out what to actually solve—I created an affinity map. Grouping user feedback helped me spot patterns, align pain points with design problems, and pull out themes that shaped the redesign.
From the affinity mapping, four key themes stood out. These weren’t just isolated quotes—they reflected consistent breakdowns in clarity, guidance, and flow across the site.
Personas
To ground design decisions in real needs, I created two primary personas based on common behaviors and frustrations observed in testing. These aren’t fictional—they reflect the roles, mindsets, and goals of the users I interviewed.
Jorney map
This user journey map follows Nia, a first-time student entrepreneur, as she navigates the original TEO website. Based on real usability walkthroughs, it highlights key breakdowns—like vague headlines, confusing CTAs, and a lack of entry points. Each step captures her actions, thoughts, and emotional drop-off, showing how poor site structure led her from curiosity to confusion, frustration, and eventually exit.
Conducted a full UX audit, 5 user walkthroughs, and affinity mapping to uncover major breakdowns in clarity, navigation, and messaging. Built personas and journey maps to reveal gaps in role-specific guidance—surfacing patterns that shaped the redesign priorities.
Defining the Problem
Implementation
Copywriting
I wrote the copy first to understand the content's size, themes, and tone—so the layout could reflect what we were actually saying. It helped me choose the right visuals—each design decision flowed from meaning, not placeholders.
Information Architecture
To create a smoother user journey, I restructured the site’s navigation to better reflect how real users explore and engage with TEO.
Wireframes & A/B Testing
I created two versions of the homepage wireframe in Figma to test how different layouts impacted user attention, content comprehension, and engagement. Instead of wireframing every page, I focused on 5 high-impact sections — including the hero, CTA blocks, and video module — where layout decisions most influence first impressions and user flow.
Wordpress Implementation
The final build used UW–Madison’s WordPress framework, so I worked within its constraints to create a site that still felt clear and user-centered. Here's how:
Tweaked theme settings to improve mobile responsiveness (especially stacked cards and CTAs)
Used semantic HTML (<section>, <nav>, etc.) to enhance screen reader flow
Manually added alt-text, ARIA labels, and WCAG 2.2 tags for better accessibility
The result? A frontend that looked like our Illustrator and Figma files — but worked like a fast, standards-compliant UW site.
After finalizing the high-fidelity designs, I conducted a second round of usability testing with 4 new users to identify any lingering clarity issues and refine the content and layout before the website went live. This round focused on how well users could scan key sections, understand TEO’s purpose, and feel confident taking action.
I rewrote key copy for clarity and action, prototyped and tested multiple layouts, then built the final design using UW’s WordPress theme. The result? A responsive, user-guided site where visitors immediately understand TEO’s role and take action faster.
Final Design