A new design ecosystem for a renowned, cutting-edge university school of sciences and technology.

staanford_logo
Overview

The Stanford School of Earth, Energy & Environmental Sciences (Stanford Earth) develops the knowledge, talent, and leadership to understand the changing Earth, to assist in solving the resource and environmental challenges in the world.

The School requested to have its online identity and website redefined after changing its name, being more than a decade operating under the leading Stanford brand, and bring innovation and tradition offered to their multiple audiences to a responsive website.

To showcase the breadth and depth of excellence and innovation that happens at Stanford and in the School of Earth Campus, we wanted to bring awareness of all the research, career possibilities, and diversity of topics studied to prospects and students, and more.

As the Lead product designer, my role was to translate the School’s environment into the digital world by redesigning the website, tailoring it for its various types of audiences with a bold interface that showcases the innovation and field exploration present in the School’s curriculum.
Skills
Quantitative & Qualitative Research, User Research, Personas.
 
Competitive Analysis, Personas, Strategic Planning.
 
User Flow, Information Architecture, Prioritization, Sketches.
 

Content Strategy, Information Architecture, User Flow Mapping, Wireframe & Prototyping. 

Style Guide, Interface Design, Responsive Design, Pattern Library.
 
01
Discovery & Research

Reviewing requests, understanding the scenario and laying the foundation.

What are the School and students real needs? What are the expectations? How to prioritize?

During the kickoff meeting with stakeholders, it became clear that the School is far from being one of many traditional degree programs, Stanford Earth had the potential to highlight this feature in a way to involve and captivate users, and not just the ones who are already part of it. A list of the main goal’s priorities was created, and that was the starting point of this project.

Visiting the Stanford Earth school and Facilities
The second step was to review the Stanford Earth’s website and list the different types of content they were showcasing. From there I started to get deeper into understanding the different user needs and the paths they would take to get to the information they needed.
I took notes of the various inconsistencies and areas of improvement in the architecture of the website, typography, and visual design, then I worked with the engineering team to have access to their analytics and validate some of my hypothesis on why and where users were failing to find what they needed.
Understanding the laid scenario and paths users could take to get information, I worked with the engineering team on annotating written and visual types of content in each page and its overall navigation, finding inconsistencies, loops and dead ends, to compare with their analytics and validate some hypothesis on why users were not engaging with the website.

Along with the project manager, a report was created, highlighting the main issues the website presented, and respective assumptions on what we could improve in order to gain track on the website.

Stanford Earth 2016 Homepage
Talking to

We interviewed faculty staff, undergraduates and graduate students and annotated of their thoughts thorough the entire process. Most expressed the same feedback.

metrics

Again we looked at the analytics and data to have a better understanding of user engagement with different features and pages, and what kind of information students were more interested in, and where we were losing our audience.

1 %
Homepage Exits
1 sec
Avg. Time Spent
0 %
Direct Engagement
1 %
New Users
02
Analysis & Ideation

Expanding the concept,

translating ideas into action items.
Exploring

Patterns & Behaviors

After listing the website possible improvements, researching users, and reviewing the project’s goals, the similarities were prioritized and reorganized in different categories. By defining and connecting relevant School Topics and user needs, Stanford Earth’s project had a unique approach to be relatable to all types of audiences: its sense of community.

Plan of

Action

03
User Experience

Strategic Information Architecture

Streamlining content that carries Stanford's boldness, how simple,
powerful, and accessible  the School topics are to every type of user.

The website needed intensive information re-architecture and content strategy, including the target audience, Using personas and user stories, we featured examination, regrouped, redefined; and revised page-level content strategy across the site. After re-engineering their entire sitemap and renaming existing features for user-friendliness, we crafted better stories through content flow by creating individual components that served to create multiple and page structures.

Content Management &

Information Architecture

Defining site architecture and producing a visual sitemap based on user's individual needs, and how each topic relates to the entire ecosystem, creating an enriched, custom web experience, and expanding the user's knowledge across the platform.

Low Fidelity

Prototypes

To create a sense of storytelling, the different types of content from the previous website were reviewed, reorganized and combined them in different groups, and the dense copy and repetitious content, shorten.

The wireframes were first created in blocks of content, facilitating its replication in different areas across the website. 

04
Visual Design

Aesthetic & Storytelling

Creating a visual identity that honors, represents and is true to Stanford & Earth's school's values.

Stanford Earth's

Personality

The disconnection between Stanford Earth and Stanford School brand was clear. 

In order surface its personality and create a consistent experience for a solidified brand, we cleaned up the inconsistencies, increase typography sizes and color contrast for better legibility and accessibility, bringing their existing assets under the same roof, with a refreshed foundation, reflecting their core, trends and technology objectives in a scalable and consistent applications. 

For the application of the elements in the pages, components were created, showcasing information in an elegant, yet, informative way, along with images and videos.personal

brand Refresh Spectrum
Corporate
Artistic
Organic
Accessible
Forward Thinking
Complex
Specific
Moodboard

Inspirational Images

Style Guide

Color Palette & Typography

Iconic Stanford cardinal red color and symbol content rich brand experience and needed clear hierarchy and strategic streamlining, and the visual and verbal identities warranted a fresh face for a bold and best-in-class, at the top of its game.

leading color, the inspiration for the secondary palette by taking a closer look at the __ product, best fit their needs while complementing the primary palette. by creating a new product in a language that could be spoken to all offerings simultaneously

icons_interaction

The typography have been carefully selected to compliment the Stanford identity system and offer a wide range of weights to provide flexibility and allow for digital use without degradation.

Adaptability

Grid System & Components

Iconic Stanford cardinal red color and symbol content rich brand experience and needed clear hierarchy and strategic streamlining, and the visual and verbal identities warranted a fresh face for a bold and best-in-class, at the top of its game.

Final Product

Homepage

Stanford Earth has a modern and functional new website that is the easy to navigate, update and maintain. With a versatile and intuitive interface, the website was optimized for accessibility and responsive situations. The content can be consumed on virtually any screen size or resolution.

Results

Community & Experience

The website brings  technological advancement and thought leadership of the school, while honors the School commitment with the students, their everyday lives and accomplishments. m

The familiarity and approachability play on the awareness of the Stanford Earth Community. More human, it openly expresses member’s knowledge, influences and creates aspirations, while telling the member’s stories.

Results

The new digital presence positions the school to be seen as a source of cutting-edge thought leadership & supports their goal of increasing undergraduate course enrollment.

Stanford Earth’ new website that is feature and content rich, easy to navigate, and easy to update and maintain. They are now able to easily create and modify pages within a framework that ensures that the site always renders to the end user perfectly across all devices. 

At Stanford Earth, traffic to the undergraduate Experience page is up by 170 percent, and traffic to the Graduate Programs Page is up by 420 percent since the redesign launched.

Additionally, time on page for the Undergraduate Experience page has more than doubled, a sign that visitors are more interested in what the new page
has to offer.

+ 50 %
undergraduate
+ 1 %
Graduate
+ 1 %
Time Spent

Acquia Engage Awards 2018

Leader of the Pack

Higher Education

Webby Awards 2018 Honoree

Best Home & Welcome Page

Webby Awards 2018 Nominee

 Best Website in Science

The collaboration process with Stanford Earth Team is what I valued the most.

Their willingness of being hands on on delivering a great product together, as a team, exchanging our best skills made was a great recipe for success.

Mariana
Toledo

Maybe just drop a line to grab a coffee & talk business! 🤷🏻‍♀️