SOI Foundation

Empowering youth to address global issues

Empowering youth to address global issues
Client

SOI Foundation

DURATION

3 months (all phases)

Role

Design Lead, User Interface, User Experience, Interaction Design

CREDITS

Pound & Grain - Agency

Kateland Clarke - Design Director

Jessica Luch - Art Director

Chloe Jung - Junior Designer

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:

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.
Key wireframes to help the client visualize the proposed information architecture.

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
Foundational elements from the UI Kit to streamline handover to the development team, and enable collaboration with other designers to meet the aggressive deadlines required for the first phase of the project.

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.
The site was designed by creating content blocks that enabled rapid building of the pages and created a unique, on-brand experience that can scale with the clients needs.
Key screens from mobile, showing how the content blocks seamlessly adapt for a simplified mobile experience.
All of the content blocks were designed to work seamlessly on mobile, with a user experience optimized for small screens.

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.

Up Next