Sustainable Stanford Year-in-Review
I have had the privilege of working with Stanford University’s Office of Sustainability and Energy Management to develop a Year-in-Review website each year for four years. Each year we were challenged to find new ways of telling the story of the past year's sustainability efforts, presenting data that is often very technical and esoteric in a manner that is understandable and engaging for a wide audience.
I have had to take on progressively greater responsibilities each year as our relationship with the client has grown. In 2019, I undertook all project management, client communication, UX design, web design, art direction and design direction roles. Prior years of experience and trust from the client allowed me to lead our two-person team of designer and full-stack developer in producing a website that was ahead of schedule and well under budget.
The 2019 website can be viewed here:
Wireframes and UX Design
Creating wireframes as a decision-making tool was a necessity in helping ensure the accurate presentation of information, a cohesive story, a solid user experience, and that client expectations were being met.
Interactive design concepts were created and shared in Adobe XD to help the client take part in the design review process.
Storytelling Through Design Solutions
We utilized interactive data visualizations, custom illustrations, infographics, video footage from the University, and motion/animation throughout the site to help tell the story of Sustainable Stanford's Year-in-Review.
We used an implementation of the chart.js Javascript library to create fully interactive charts and graphs the help communicate the rich metrics and data that the university had collected throughout the years.
Custom illustrations and infographics were combined with SVG animation as a way to present highlights for each area of sustainability in an engaging manner.
Last year's website can be viewed here:
Previous websites that I lead both design and development on, can be found at the following links:
