SOI Foundation

Empowering youth to address global issues

Client

SOI Foundation

Services

Background

Students On Ice approached Pound & Grain to rebrand their foundation that empowers youth to become advocates for a more sustainable future, through hands on education, expeditions and other initiiatives. Along with the rebrand, they were looking for us to create a new web experience to help them grow their online presence and increase exposure to the variety of programs they offered. Due to some tight timings on the client end, we chose to complete this project in a phased approach, with a 2 week sprint for design and development for each phase based on page priority. I led the website design portion of this project, while working closely with my colleagues as they finalized the branding to ensure a unified vision.

The key challenges the client wanted to address with this redesign were:

  • Content discovery - The existing site had a large collection of multimedia content, but they were finding that many users were having a hard time finding it.

  • Sub-brand differentiation - As the foundation grew, they recognized the need to create unique names for various programs and industry offerings, with this redesign they wanted to make them visually stand out from one another as well.

  • Increase immersion with multimedia - Use of micro-interactions, multimedia and unique interactive experiences to increase immersion for key areas within the site.

Wireframes

The wireframing stage allowed us to further build out solutions to the challenges that surfaced in the discovery stage, while defining a series of reusable content blocks to be built in Wordpress. To help the client visualize the proposed information architecture and content needs, as well as identify all of the content blocks up front, we completed the wireframing process before transitioning to the phased release plan outlined above.

Key wireframes created for the SOI Foundation website, to help the client visualize the proposed content structure.

Design

Once we finalized the wireframes and the functional needs for the site, we started to incorporate the branding that was happening in tandem to the web design process to really bring some personality to the site. This included defining a type scale, foundational UI elements into a shared library. This library allowed the development team to begin high level development work, while I was able to bring other designers onto the project quickly.

Key elements from the UI Kit, including buttons, links, form elements, an accessible colour palette and type system

Once that was complete, we started working through phases of component and page layout designs while completed pages were immediately picked up by the development team.

Desktop design elements including, mega menu, interactive timeline, featured news and blog cards.Key screens from mobile, showing how the content blocks seamlessly adapt for a simplified mobile experience.

Outcome

Through a series of phased releases, our team delivered a robust library of components within a custom wordpress theme that would enable the client to scale their website with rich multimedia content and delightful interactions seamlessly. The redesigned experience was  well-received by the clients user base, especially the improved navigation and site structure.