Stanford Earth

Designing a digital ecosystem for Stanford School of Earth, Sciences & Technology

Stanford School of Earth & Sciences requested to have its business and digital identity aligned, bringing innovation & tradition to their multiple audiences, creating a consistent online experience.

The School became the forerunner of the university’s digital presence with a modern, functional, award-winning website designed to showcase its personality & curriculum, reach out to multiple audiences, and bring the School sense of community to the digital environment.

In this project, I collaborated with stakeholders, developers, and a project manager to restructure and redesign Stanford Earth’s institutional website for desktop and mobile. From requirements gathering to strategy, brand adaptation to the digital environment, information architecture, wireframing, visual design, and prototyping.

Engagement

0 %

Increase

NOMINEE

Webby Awards

Best Website in Science

time spent

0 %

Increase

LEADER OF THE PACK

Acquia Engage

higher education Award

Engagement

0 %

Graduate Increase

HONOREE

Webby Awards

Best Home & Welcome Page

Discovery

Understanding users through reports and interviews, gathering user engagement and data from the existing experience. 

To create an experience, I analyzed the current website, completed a content and structure audit. Understanding users through reports and interviews, gathering their engagement and data from the existing website to outline interactions and patterns that connect different types of audiences with their interests. 

By simplifying, differentiating, filtering and prioritizing information to align it with school offerings, Stanford Earth’s ideas are clear and accessible to facilitate users interaction with various topics.
Bringing the School’s everyday life to their website, the campus life was highlighted with elements that brings students and staff stories, events, careers, and field opportunities, inviting users to learn more about the school.

Information Architecture

Defining & Connecting
School Topics to User Needs

Regrouping, redefining and revising the content strategy at page level across the site. After restructuring the information architecture and content strategy, renaming existing features in a user-friendly way, we created better stories through content flow by creating individual components that created multiple page structures.

Personality

Design System

The visual design was established early in the design process, optimizing the overall process,  by providing rapid feedback, prototyping and keeping consistency throughout the project, which was delivered in 12 weeks.

Personality

Brand

Bringing existing assets under the same roof with a refreshed foundation, reflecting their core, trends, and technology objectives in a scalable and consistent application with a clean and structured look and feel, creating a consistent experience with prominent typography, bold images, and wise use of white space.

Follows accessibility best practices and provides a familiar environment with memorable functionality.

The design, implemented using Drupal technology, allows the client to fully customize elements and create new pages in the back end, having a flexible collection of templates for desktop and mobile true to Stanford brand.

Stanford Earth

Designing a Digital Ecosystem for Stanford School of Earth, Sciences & Technology

Stanford School of Earth & Sciences requested to have its business and digital identity aligned, bringing innovation & tradition to their multiple audiences, creating a consistent online experience.

Stanford Earth became the forerunner of the university’s digital presence. A modern, functional, award-winning website was designed showcasing its personality & curriculum, reaching out to multiple types of audiences, bringing its sense of community to the digital environment.

Engagement

0 %
Increase

2018 NOMINEE

Webby Awards

Best Website in Science

retention

0 %
Time Spent

2018 LEADER OF THE PACK

Acquia Engage

higher education Award

Engagement

0 %
Increase

2018 HONOREE

Webby Awards

Best Home & Welcome Page

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.

Challenges

The main challenge was to consolidate the existing, fragmented website into a new, unified digital identity and experience. 

Stanford Earth’s ideas were not presented clearly, the interface was dated and not intuitive, impacting the time spent on the website and having few returning users. 

Not mobile friendly, also on a responsive website. 

While all their business needs, the project would also have to give the School the flexibility to add and adapt its content, showcasing info with a consistent interface. 

Solution

To improve the experience, I analyzed the current website, created a content and structure audit, understanding users by analyzing reports and interviews, gathered user engagement, and data from the existing experience.

 

I also sketched different interaction and content patterns, connecting different types of audiences and interests. By simplifying distinguishing, filtering and prioritizing information, to align with school offerings, making Stanford Earth’s ideas clear and accessible

Sense of community, more engaging and closer to the audience.

1.Diversity

Showcase the diversity of topics studied in the School and experienced in its campus
By defining and connecting school topics and user needs,
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.
Create a sense of community

Before digging into any redesign developed a loose style guide, to capture SE’s personality across medium – digital, print and school campus, social media


UI Kit/Styleguide
Different types of content: video, imagery, relevant, eye catching, testimonials, student life, life at school, research

To improve the experience, I analyzed the current website, created a content and structure audit, understanding users by analyzing reports and interviews, gathered user engagement, and data from the existing experience

Iteration & Pattern library

The look and feel established early on the design process provided fast feedback and iteration, rapid prototyping and consistency on its application throughout the website

To establish a system that can be used in the future, across Stanford websites

Continuous feedback sessions, from dev and school

Bite size info/inviting users to learn more

Set of common components

The design was implemented using Drupal technology, allowing the client to fully customize components and create new pages in the back end. 

Create a flexible, lightweight, modern, decluttered set of element/components and templates that could be reused across Stanford’s websites

Flexible enough, providing options for different use cases

Simplify & Distinguish Information

 

IA: Centralized Navigation & Topics Regroup

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.

 

Defining site architecture and producing a visual sitemap based on the 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.

 

[img main nav/sitemap]

Clear Disposition of Choices & Reduce Graphic Elements

Prominent typography and color contrast were kept in mind for better legibility and accessibility results, bringing existing assets under the same roof, with a refreshed foundation, reflecting their core, trends and technology objectives in a scalable and consistent application.  

 

White Space

To bring the School’s everyday life and use of bold imagery and campus life were highlighted, along with students and staff stories, events, careers, and field opportunities. 

 

Opting for a clean, modern, structured look and feel, creating a consistent experience

Results, thoughts & such

Researching existing visual assets and issues, bringing the brand identity and its usage in stations and pamphlets to the app interface. (https://uxdesign.cc/)

Mariana
Toledo

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