top of page
The SAGE Foundation homepage.png

BUILDING A USER-FRIENDLY AND VISUAL APPEALING RESPONSIVE WEBSITE.

The SAGE Foundation wanted to increase SAGE Foundation’s SEO(Search Engine Optimization) and reach more audiences from youth to elderly. But the current website had a high bounce rate and low engagement rate, which users found it hard to navigation. We aimed to re-design it into a more user-friendly and visual appealing responsive website.
I was part of this exciting project to perfect the user experience for the SAGE Foundation website.
#UX research #UX design #UI design #Responsive website
The challenge: Increase SEO(Search Engine Optimization) and reach more audiences from youth to elderly.
Our goal for the project was to increase SEO and reach more audiences. Since the current website was not easy to navigate and visual appealing, we would reconstruct the navigation and information architecture for both desktop and mobile responsive website.
Our high level goals were to:
  1. Build a smooth navigation within the website.
  2. Build a more visual appealing interface.

The SAGE Foundation introduction
The SAGE Foundation is a non-profit organization that hopes to build a community that creates a healthy dialogue with youth and new immigrants, supporting their integration and sense of belonging in Canada. SAGE hopes to give back to the youth in the form of university sponsorships and will be accepting donations for the work they do. 

Team members
UX — Amanda Kurek, Annie Wang, Jill Chao Sheng Li
UI — Achal Kshirsagar, Leslie Wen, Ken Picón

 

Project duration
5 weeks

 

My role
As part of the UX team, I was responsible for UX research and UX design. I conducted user surveys, consolidating target persona, enacting user flows, sketching user journey map, designing the desktop wireframes (for “News&events”, “Get involved” and “Donation”) and hosted usability testing.

USER RESEARCH

KICKOFF

IDENTIFY THE PROBLEM
Piggyback off Google Analytics, we found users quitted The SAGE Foundation’s website with short visit duration. Thus, we went on interviewing people and collected surveys on how they thought of the website. On a side note, specifically the target users were new comers to Canada and those who were willing to support new comers. But since anyone could be potential supporters, we didn’t filter people’s background.
Key findings
1. Users found it difficult to understand the services from the SAGE Foundation.
2. The visual design of the website didn’t appear legit to users.

STRUCTURE THE EXPERIENCE

Donors need a legit-look website to donate without safety concerns, and newcomers need an easy navigation to find the support they're looking for.

STEPPING INTO USERS’ SHOES
With user pain points in mind, we consolidated our target users and walked them through user flows and journeys to further comprehend the user experience.

PERSONAS, USER FLOWS AND JOURNEY MAPS
Based on the research results, the donors(Julia Morris) and the newcomers(HyunJun Kim) were two main personas to SAGE Foundation website. The legit-look of a website could comfort the safety concerns from donors; and an easy navigation could help new comers find a way out in a content-heavy-and-full-of-English website.
INFORMATION ARCHITECTURE
We revised the information architecture to make more sense on the website journey.
  1. We moved Sage Awards from "About Sage" to under "Programs &Services", because when users wanted to know more about the opportunities SAGE provided, they could check the records from Sage Awards under the same category.
  2. It used to be Explore Sage instead of "About sage," we changed the name while conducting user testing.
  3. We listed down Sage Awards of each year under "Gallery" instead of showing them separately as it was on the current website.
  4. We added "sign up" and "confirmation" to all the opportunities(donation, sponsorship, job training...etc.) SAGE provided for clear guidance.
Key findings
  1. Follow the KISS rule to make things simple. Users needed to understand SAGE foundation as quickly as possible.
  2. Provide further confirmation after donation and sign-ups. In case users get lost, we took care of post-service experience. 
  3. The content mattered when the website had lots of information. Yet, we didn’t have enough time to work on content this time, so we focused on providing clear navigation.

DESIGN STAGE

Mid-fidelity wireframes
Objective: 
To conduct solutions by designing the new wireframes. 
Explanation:
  1. We made the "call to action" button significant(according to the Von Restorff effect). That is, we re-designed the "Donate" button, and placed the button at the footer so it would show at each page.
  2. We added the "sign up" and "join" button for each program and service that SAGE Foundation provided. We also added the confirmation page for those who submitted any forms. 
  3. We added little extra content to make the website more interactive, to create a conversation with users. For example, we wrote, "Your gift today helps youth in Canada for a better tomorrow" on the donation page.