UX DESIGN // STUDENT PROJECT

Improving Usability & Brand-Alignment

C L I E N T

Student Project

R O L E

UI Designer

T O O L S

Figma // Lucidchart // Google Drive

B2 Center for Media, Arts & Performance (B2) is a performance and technology research venue at the University of Colorado Boulder. It provides access to the most advanced performance technologies in the region; yet its website has numerous usability issues and does a poor job representing the brand.

As UI Designer, I incorporated prior UX research to identify goals & priorities, developed a project aesthetic that incorporated existing style requirements, created a site map, made low- & high-fidelity wireframes, designed the final screens, sought & incorporated feedback, developed a prototype, created a style guide, and prepared files for developer handoff.

Explore the Prototype

The Problem

UX research conducted prior to the initiation of the website redesign revealed a strong need to improve the usability of B2’s website. As the primary source of information for the community, the website needed better architecture and new functionality in order to effectively support B2’s mission. Internal stakeholders also expressed a desire for the website to better represent the organization’s unique identity

The Process

Empathize & Define

Existing UX research revealed B2’s users are frustrated and confused by the current site. They want B2’s site to serve as a resource for information and learning, to function as a connector and facilitator. Yet, users struggle to find information relevant to them and their needs.

Inclusion of UX Insights

Usability Assessment

I conducted a usability assessment and quickly identified numerous issues with the site’s UX and UI. Most notably, the site’s navigation menu is not accessible on a mobile device, rendering the majority of the site’s content invisible to mobile users. Additional issues included poorly designed IA, inconsistent page layouts, unconventional naming conventions, lack of clear audience, and others.

I identified B2’s top goals and honed in on the most important personas to be served by the site. I wrote user stories for those primary personas, and then prioritized the stories in order to focus on only three. I identified the feature requirements needed for those user stories, and I built a site map to guide the next steps in the design.

Definition & Prioritization

Ideate & Prototype

Early Wireframes

I drafted low-fidelity paper sketches to quickly iterate on early ideas for the UI. With an idea of the user flows in mind, I built upon the paper sketches and began drafting grey-scale mid-fidelity wireframes using Figma.

Establishing Visual Consistency

Before adding visual elements, I created a fluid grid system for the project to ensure the final design would be responsive and work across multiple breakpoints. I also established a consistent visual hierarchy and system of reliable spacing for the design to ensure the content on the pages could be easily consumed and understood. Lastly, I researched and selected the ideal UI patterns to be used throughout to ensure predictability, dependability, and accessibility in the foundational UI, and I created components in Figma to ensure an easier build of the site.

Preparation for Handoff

I pulled together design guidelines for the site into a comprehensive Style Guide to support implementation and the generation of new screens. I also designed screens for tablet and desktop breakpoints for the two most important screens, according to user goals, and I created presentation mockups of the screens across all breakpoints using Figma plugins.

Style Guide & Final Mockups

Organization of Files

I exported the desktop, tablet and mobile-designed breakpoints, as well as all necessary images, icons, logos and other visual assets. I ensured images were optimized and all files were consistently named and well-organized. These were compressed into a zip file and made ready to be shared.

Next Steps

If this was a client project, as a next step, I would conduct usability testing with target users to identify any issues with the design and incorporate the changes. I would reevaluate and run processes with the development team to confirm everything functions properly.

Advice for My Future Self

  • Be sure to create and adhere to a consistent and predictable naming convention and file structure for your Figma design. You’ll thank yourself as the design grows in size and scope.

  • Figma makes it incredibly, joyfully, delightfully easy to make changes to a design and populate the improvements throughout the file while maintaining pixel-perfect consistency. Use them!

  • Periodically, experiment with something unexpected, something that deviates from the direction of the design, to bring a fresh perspective and invite new possibilities.