Shifting the Focus: SAGE Canada Redesign

Zoë St-Aubin
RED Academy
Published in
5 min readDec 15, 2016

--

SAGE Canada is an organization offering a youth entrepreneurship program. This case study outlines my team’s approach to redesigning their website, helping them to find their identity and live up to their potential.

The Opportunity

This project was completed during my time in the immersive UX program at RED Academy, where we had the pleasure of working with SAGE Canada as our community partner. While the organization has a dedicated team and a growing community of students and mentors, their existing website was not helping them to reach their full potential.

When we first encountered SAGE’s website it lacked clarity. As a first-time visitor to the website it was hard to even tell what the entrepreneurship program entails, who is eligible, and how one can apply. As a team of four we took on the challenge of redesigning the SAGE website.

We jumped into this project with a simple conversation with the SAGE leadership team about their program. We discussed how they got to where they are with SAGE, their internal goals for the website, their perceived goals for the users of the website, and their goals going forward. Our conversation touched on a wide range of ideas and wants. We began researching to figure out what it was that they really needed.

A piece of a mind map we created during our research phase

Research

We conducted interviews with current and past students, which led us to identify some of the largest pain-points they’d encountered while using the website. Right off the bat it was clear that students didn’t feel the website explained what SAGE actually had to offer — a free program open to all high school students in Canada. Students told us that the website had been of little to no help to them when applying. They were not able to find deadlines, requirements or application tips without reaching out to SAGE via email — even finding a point of contact to do so was a challenge.

These students helped bring to light a major gap between SAGE and their audience, one that we needed to bridge. We identified the prospective student as our primary user and conducted a competitive analysis of organizations similar to SAGE. We looked at incubators including Velocity and L-Spark to see what they were doing well — we examined how information was presented and what their application processes looked like. We were buzzing with ideas on how we could improve SAGE’s online presence and excitedly began planning what needed to be done.

The SAGE homepage before our redesign

Planning

SAGE staff had mentioned in our initial meeting that it might be nice to have a networking portal for students and mentors, and even one day have an online store. However, our research had told us what they needed before any of that was a foundation to build on.

As a team, we audited the content on the current SAGE website. Drawing from user insights brought out by our research I worked on the site map, content strategy, and primary user flow for the new website.

The website we were designing needed to catch the attention of high school students and streamline their journey from interest, to understanding, to engagement. Interest in this case meant meaningful and inspiring messaging; understanding meant clear program information and timelines; engagement meant being able to easily apply through an in-site application form. Our strategy also included a platform for SAGE to blog about industry news, post entrepreneur spotlights, and share their events by pulling them in from EventBrite.

A site map and user flows I created during our planning stage

Design

Our design simply needed to provide students with inspiration to get started and a clear outline of how their goals could be obtained through SAGE. We needed to shift the focus from who SAGE is and what they stand for to what they actually do and how participating can have amazing outcomes for teens.

Working with wireframes and mid-fidelity designs done by a colleague, I developed the high-fidelity style that we then carried throughout the design — re-iterating as we continued to test at each stage.

We made text big and bold so that information is immediately accessible for potential students and with SAGE’s target audience in mind, we kept copy simple and direct. We created clear timelines and listed tangible skills from the program so that potential students would be able to see how SAGE could benefit them. Finally, we made the the application process easy — it is accessible through a call-to-action is in the header and footer across the whole site.

The homepage and program page designs for the new SAGE website

Prototype

We prototyped high-fidelity versions of our design for desktop and mobile. We completed anonymous user testing throughout the process, and the final results were outstanding, with one user wishing she “was still 18” so that she could partake in the SAGE program. Follow the links below to check out our final design!

Desktop prototype: https://invis.io/UX9E5U8BT

Mobile prototype: https://invis.io/6Y9E4UTZ7

Summary

The outcome of our redesign is an online environment that is educational, inspirational, and easy to navigate. Our solution also included expanding the SAGE brand beyond just the high school program. By placing a focus on the community aspect of SAGE and helping build awareness within the entrepreneurial community, SAGE can continue to grow their network and influence. The SAGE team was delighted with our design, and plan to build the new website in the near future.

--

--

Zoë St-Aubin
RED Academy

UX Design & Research | Currently @ Shopify | Lover of coffee, plants, and learning | linkedin.com/in/zoestaubin