Mari Steffen
UI/UX Designer

Role & Responsibilities

UI/UX Designer: information architecture, responsive design, wireframing, creating graphics for developer handoff, maintaining site in content management system


Web development: Ahn Nguyen
Systems Administrator: James McMillan

Tools Used:

Sketch, Photoshop, GitHub, HTML, CSS


Website shipped in 2012 and retired in 2018

Responsive Web Design: University of California

Website Design

As the Web & Visual Designer at the University of California Humanities Research Institute (UCHRI), I led the web building team in the UI design process by creating user flows, wireframing, and prototyping for dozens of content-rich websites, including our main site pictured here.

I completely redesigned the information architecture and introduced icon menus and heavier use of images to replace the previous text-based site.

I was responsible for a rebranding campaign and designed a sans-serif logo and bright color scheme to reflect UCHRI's modern view of the university.

Responsive Mobile View

The content blocks resize and stack for easier viewing on a smartphone. The menu condenses into a hamburger for ease in readability and navigation. The images in the two carousels automatically advance at alternating times.

Web Design: Lessons Learned

This responsive web design was one of three ideas that I pitched to my team. Looking back, the rounded borders for the carousels with rotating images were a bit challenging to implement when my team first built the site using a hand coded Wordpress template in 2011, but I think that it would be easier to do in 2021 with CSS. Updating image menus for events and research projects also became a big endeavor to maintain each year, especially since we were requesting images from different people across the UC system, but it made the site more visually appealing and showcased the variety of initiatives that are supported by UCHRI. The image menus are one of the features that were adapted when the site was redesigned in 2018.

I learned so much when working on this site, from considering how to keep an annual funding calendar updated with continually changing deadlines; what to prioritize when organizing events into subcategories; and how to think about custom submenus within a webpage that are differentiated from standard page templates.

Designing to Catalyze Change

Designing for a public university often brought me to unexpected places. I traveled to refugee camps in Beirut to document research on resistance and conflict in the Middle East, and then created a magazine based on the researchers' observations.

I also designed publicity for dozens of events around research and education, attracting global attendees to events across the country and around the world.

These experiences have shaped my values in designing for accessibility and inclusivity, and in thinking about how digital products can create solutions that enable positive action.

Interactive Map Directory with Search & Filter

I was tasked with designing a map-based directory for critical theory programs. The users were graduate students, researchers, and faculty across the world.

Problem Statement

Users need a way to search for programs in Critical Theory and filter the results by country and program type.


UX Designer


University of California, Berkeley

I designed the UCHRI logo and title screen design, which were then animated by our video production intern.

Success Metrics

The improved usability of UCHRI's website resulted in successfully funding an annual average of 24 research fellowships, 10 research groups, and dozens of events across the UC system.

I organized and grew UCHRI's email subscriber list by 133% and spearheaded UCHRI's social media presence on Twitter and Facebook.

My work in sourcing vendors for print needs and digital tools, saving on sales tax as a non-profit entity, and using negotiated shipping rates resulted in a savings of approximately $1,500 annually.

annual fellowships
research groups
subscriber growth
annual savings