Branding · University of Kansas · Jan 2023 to Apr 2024

KU Brand

Outcome

  • +30%Traffic across ku.edu after launch (a team result)
  • 100K+Daily visitors across ku.edu and its subdomains

A new brand site for KU Communicators and campus partners, live at brand.ku.edu.

Role
UX Design and Research, Frontend Development, Graphic Design
Timeline
Jan 2023 to Apr 2024
Methods
Interviews, focus groups, A/B tests of early concepts, information architecture, frontend build
Team
20+ designers, marketers and project managers
Tools
Figma, HTML, CSS, JavaScript

The story in short

KU refreshed its identity, and its brand site had to catch up. People struggled to find guidelines and assets on the old site. I talked with Kansans about what KU meant to them, then helped turn the new identity into a design system and a brand site for campus partners. It is live at brand.ku.edu, and traffic across ku.edu and its subdomains grew 30% after launch, to 100k+ daily visitors, with 50k+ primary users.

My contribution

My backgroundM.S. Information Science (HCI), UNC Chapel HillB.S. Computer Science

What I did

  • Interviews with Kansans, alumni, students, faculty and staff
  • Mapped and grouped the content so people could find guidelines easily
  • Designed and built the redesigned brand site pages (HTML, CSS, JavaScript)

The team and others

  • The rebrand itself was a campus-wide effort with hundreds of contributors; the core team had 20+ designers, marketers and project managers
  • Traffic across ku.edu grew 30% after launch. That is a team result, not mine alone

The setup

The problem

Goal

Build a brand site that reflects the new identity and makes guidelines and assets easy to find.

  • Issue 1

    An outdated site

    The old brand site did not match the new identity.

  • Issue 2

    Hard to find things

    KU Communicators had trouble finding clear guidelines and updated assets.

The solution

We reorganized the content and redesigned the pages. I mapped the content, proposed layouts, and worked with a developer to build the logos, type and color tokens into every page.

Overview

I worked on research, design and the redesigned pages, so KU Communicators and campus partners can find what they need.

My role

I worked as a product designer and frontend developer on a team of 20+ designers, marketers and project managers.

User interviews

I met with Kansans, alumni, students, faculty and staff. I asked open questions about identity, traditions and how they feel about KU, then looked for patterns.

Kansans walking together through the Flint Hills prairie
Photo from the KU Brand Center. It shows the Kansas people and places the interviews were about.

Trade-offs

Information architecture

I mapped the content people needed most and grouped the guidelines to make sense. I proposed layouts and turned brand rules into usable components.

Focus groups

I tested early brand elements and layouts with small focus groups, and watched people use the old site. I used what I saw to refine hierarchy, language and direction.

New identity

The refreshed brand became a digital system. It defined how logos, colors, typography and spacing showed up across the site.

  • Visual system updates

    We adjusted the type scale, tightened spacing and cleaned up the color tokens, mostly from testing and small fixes.

  • Making the brand easy to use

    I reorganized the site so people could find what they needed. I grouped the content naturally and cleaned up confusing or outdated sections.

The new platform

“Towering Toward the Blue” comes from a line in KU’s Alma Mater. It became the brand platform for how KU looks, sounds and feels. The logo, Jayhawk and crimson and blue stayed. We checked each design choice against it.

  • Look

    Bold and clear

    Strong type, a visible grid and wide space.

  • Sound

    Confident and warm

    Active voice. Skyward words like climb, soar and build.

  • Feel

    Proud of Kansas

    Real campus photos and the colors people already knew.

Low-fi to high-fi

I started with boxes and added detail one layer at a time. Each step answered one question before the next began. I kept the early steps grey on purpose, so we discussed structure before color.

The home page coming together, from boxes to the final design.

1 · Boxes only

I drew boxes and labels, with no color and no real text. This showed the order and size of each block: the hero, positioning, goal and four guideline cards.

Navigation Hero: slogan and one action Brand positioning Image Image Brand goal Guideline 1 Guideline 2 Guideline 3 Guideline 4 Footer
Step 1. Structure only.

2 · Grey wireframe

I added the real navigation, headings and copy. The slogan was the main text in the hero. Now we could check the hierarchy and the reading order.

KU Brand Guidelines Photography Downloads Search Hero photo Towering Toward the Blue Explore Brand positioning Brand platform image Brand goal Guidelines Brand Editorial Design Social
Step 2. Real content, still grey.

3 · Brand frame

I added the holding box and pinpoints from the graphic elements. They showed how the brand frame sits on the page.

KU Brand Guidelines Photography Downloads Search Hero photo Towering Toward the Blue Explore Brand positioning Brand platform image Brand goal Guidelines Brand Editorial Design Social Holding box with pinpoints
Step 3. The red box and blue dots mark the holding box and pinpoints.

4 · High fidelity

I added photos from the Brand Center, Kansas Blue and Crimson. Some layouts looked clean at this stage but felt hard to use, so I kept checking them against the grey versions.

KU Brand Guidelines Photography Downloads Search Towering Toward the Blue Explore Brand positioning Brand goal Guidelines Brand Editorial Design Social
Step 4. Photos and color.

The same steps on two more pages

I used the same steps for the guideline page and the downloads page.

KU Brand Guidelines Photography Downloads Search Design / Color palettes Design Unit identity Co-branding Typography Graphic elements University seal Color palettes Official marks Color palettes Primary Secondary Tints and shades (screen only) Accessible pairings Avoid these pairings
Guideline page. A side menu keeps people oriented. Swatches come first, then pairings to use and avoid.
KU Brand Guidelines Photography Downloads Search Downloads All Print Screen Commencement Graphic elements Download Download Download Download Download Download Download Download Need an official mark? Send a request. Request
Downloads page. Filters on top, one card per file, and a path to request an official mark.

Design system decisions

  • Keep the two core colors

    Kansas Blue (#0051ba) and Crimson (#e8000d) stayed, the colors people already knew.

  • Name every color

    Each color got a plain name, like Night, Lake and Sky, so everyone used the same words.

  • Never rely on color alone

    Every pairing passed a WCAG contrast check first. We listed the pairings to use and the ones to avoid.

  • Pick type by job

    Roc Grotesk and Moret for headlines. Gotham Narrow or Freight Text for body. KU’s rule set web body text at 12 to 16 px.

  • Use the grid and frames

    Square grid units for layouts, a thin Fire line for holding boxes, Lake dots for pinpoints.

  • Write in the brand voice

    Active voice, present or future tense, and “toward” instead of “towards”. We kept tower images rare.

Bringing it together

I worked with other designers and a developer to build the logos, typography, color tokens, spacing rules and accessibility updates into every page.

  • Typography

    I used one type scale for every page.

  • Color tokens

    We cleaned up and named the tokens.

  • Spacing rules

    We made the spacing tighter and more even.

Resolution and impact

Testing

Focus groups and A/B tests of early concepts showed what was not working yet. They raised concerns about tone, the order of importance, and how people would really use some concepts.

  • We changed the tone of the copy.
  • We changed the order of importance on the pages.
  • We simplified the layouts that confused people.

  • Real use

    Clean in Figma, hard to use

    Real people found some of these layouts confusing.

The new brand system

  • 30%Traffic growth across ku.edu after launch
  • 20+Designers, marketers and project managers on the team
  • 6Design rules written down once

The new identity now sits in one system of logos, colors, type and usage rules.

After the new brand site launched, traffic across all ku.edu domains and subdomains grew 30%, to 100k+ daily visitors, with 50k+ primary users.

You can see the live site at brand.ku.edu.

What didn’t work

  • Surveys lacked depth

    Many people rushed through them.

  • People liked the old brand

    Many preferred the old fonts, colors and logo: status quo bias and the mere exposure effect.

Takeaways

  1. Update visuals early

    It made the build smoother and more consistent.

  2. Test outside the design tool

    Layouts that look clean in Figma can feel hard to use for real people.

The Jayhawk statue on campus

More projects