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 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.
Engagement
Increase
NOMINEE
Best Website in Science
time spent
Increase
LEADER OF THE PACK
higher education Award
Engagement
Graduate Increase
HONOREE
Best Home & Welcome Page
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.
Information Architecture
Defining & Connecting
School Topics to User Needs
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 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.
Engagement
2018 NOMINEE
Best Website in Science
retention
2018 LEADER OF THE PACK
higher education Award
Engagement
2018 HONOREE
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.
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/)