Tools: Figma, Drupal, Userlytics, HTML/CSS, Siteimprove
Role: UX/UI Designer
Responsibilities: User Testing, UI Adaptation, Accessibility Compliance, Content Strategy, Front-End Styling, Stakeholder Collaboration
👤 About
CU Denver is a public urban research university serving a diverse population of students with varying educational goals. The website plays a critical role in helping prospective online students explore academic programs, understand the cost of attendance, and get a sense of the online student experience.
🎯 Objective
Our goal was to redesign the CU Denver website to align with updated branding and externally sourced UI design. We wanted to also focus on creating a user-first experience that made it easier for prospective students to explore programs, understand tuition, and navigate the online student journey while ensuring accessibility and clarity.
📛The Problem
The original site had minimal navigation, outdated imagery, mismatched icon usage and was text-heavy and lacked visual consistency. The new prototypes offered cleaner layouts but were not designed around the actual content and did not account for some of the Drupal CMS limitations.
🔬 Usability Testing
We conducted task-based testing with 10 users via Userlytics. I collaborated with two team members to develop the tasks and questions. Participants were asked to find essential content and evaluate the site’s structure and trustworthiness.
Key insights included:
- Users liked the clean design but felt overwhelmed by too much text
- Distorted stock imagery and overused icons reduced credibility
- Tuition info was difficult to interpret
- Students wanted more insight into the student experience and how to get involved
These findings directly informed content adjustments and design refinements on key pages, especially for programs, cost, and student life.
🧱 A Strong Foundation from the Design Partner
We partnered with an external agency that provided a clean, modern design system aligned with CU Denver’s updated brand. Their work brought clarity and simplicity to the visual direction and helped solve key issues identified in user testing, such as confusing navigation, dense content, and unclear visual hierarchy. My role focused on adapting those designs for real content needs while keeping them flexible, accessible, and easy to implement within the university’s CMS.
📋The Approach
This project required balancing idealized visual designs with content, accessibility, and CMS limitations. To do this, we focused on two core areas:
🖼️ Visual Clarity and Accessibility
- Focused on adapting the externally sourced UI design system to work with CU Denver’s real content and CMS constraints.
- Selected components that improved readability and avoided long text blocks
- Reorganized content to reduce visual fatigue and improve scannability
- Sourced and resized imagery to match design specs
- Ensured all images had appropriate alt text
🧩 Structure and Implementation
- Built flexible layouts that served both users and internal editors
- Worked within limited layout options (50/50, 66/33, 33/66)
- Created layout guidelines to maintain consistency in future builds
- Collaborated with developers to revise or extend components as needed
✅ Final Outcome
- Fully implemented high-fidelity templates across top-level and program pages
- Student experience content expanded and reorganized
- 98% accessibility pass score upon launch
- Highly positive feedback from stakeholders—most feedback post-launch was content-related, not layout-related
🪞 Reflection
Key Takeaways:
- Design prototypes are clean and intentional, but implementation has to work with real-world challenges like legacy content, decentralized authors, and layout limitations. This project pushed me to solve tricky content and structure problems and turn polished mockups into something functional, scalable, and accessible.
Why I’m Proud:
- I was part of an incredible team that included content auditors, analytics specialists, and a project lead who coordinated timelines and technical implementation. As the lead in-house designer, I created the to-level pages and had major influence on the structure of program pages across the site. I worked through content mismatches, layout limitations, and stakeholder needs to create an adaptable system that supports both users and internal editors. This project strengthened my skills in adaptive UI, accessibility, and collaborative problem-solving.