Stanford Summer Session

I had the exciting opportunity to lead the visual design effort for a new Stanford Summer Session website. The client wanted a fresh online space that highlighted the student experience beyond the classroom.

Client:

Stanford Summer Session

Partners:

Kat Verani, Design, Stanford Web Services
Cynthia Mijares, Project Management, Stanford Web Services
Mike Decker, Development, Stanford University Communications

Status:

In development

My role:

Kat Verani and I partnered early on to shape the project’s direction. As the primary visual designer, I also took the lead in designing components that catered to business goals and user needs.

Project kick-off

My colleagues and I kicked off with working sessions to gather insights from the client and define business goals. Simultaneously, Kat and I conducted a competitive analysis of other university summer session websites, identifying new, engaging elements and areas where we could differentiate.

Content mapping 🗺️

Next, we conducted an audit the existing site, which led us to a series of content mapping workshops with the client. In these sessions, we created user personas, mapped user journeys, aligned existing content with user needs, and identified content gaps.

We discovered opportunities to integrate testimonials, comparison charts, and stats on specific pages. The activity also enabled us to develop a clear hierarchy and navigation system to guide users through the site.

We often used Mural to facilitate our working sessions, including our content mapping workshops.

Iterate, iterate, iterate

With a solid foundation in place, I crafted mood boards to explore various design directions. Feedback sessions with the client and my colleagues allowed me to refine ideas into a design direction.

A rich design system…

While developing the design system, I kept the lines of communication open with our client and the Stanford Web Services team, sharing progress and gathering feedback early and often. Initial response from the client emphasized a need for both bold, stylized components and more minimal, timeless variants. This requirement necessitated a versatile design system and additional technical design work for each component, which I spearheaded. Feedback from the developers was also essential during this phase to navigate technical challenges and understand the heavier lifts involved.

… on a tight timeline ⏰

The biggest challenge we faced was the tight timeline. The client had ambitious goals, and we were committed to maintaining quality. To navigate this, I initiated honest conversations throughout the design phase. I emphasized that while we were exploring exciting ideas, there would come a time to prioritize. I clarified that we couldn’t achieve everything within the available time and budget, but I wanted to avoid imposing restrictions too early in the process.

As we approached the end of the design phase, I led discussions to help the client prioritize components, using our content map to identify which elements could have the most impact.

Technical implementation

To maintain quality, I focused on documenting design decisions clearly for the development team, which was crucial given the numerous component variants. Weekly meetings helped us tackle any technical challenges, and my thorough documentation of responsive design ensured the website would shine across all devices.

I utilized a combination of Figma and Google Docs to capture our design decisions.

Outcomes and lessons learned

Now that the project is in development, I’m thrilled to report positive feedback from the client regarding our design system and content structure. This experience taught me the immense value of open communication. By fostering frequent discussions with the client and my colleagues, I feel I ultimately built trust in addition to improving their site.