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. 
Mobile wireframes
We took some universities' mobile responsive website as a reference, for schools also had lots of information to show on the website. The websites of UBC and SFU inspired us to design the drop-down menu.

UI DESIGN INSPIRATION

Sage foundation provided some samples for the website re-design. There were four school websites and two NPOs with green as the theme color, which indicated their ideal website created the feeling of energetic, young, visual appealing with the theme color green.

USABILITY TESTING

Objective:
  1. To gain insights from our users
  2. To see if we met user’s expectations
  3. To check if the design matched business decision to real-world use
  4. To check if the user could perform the tasks we proposed
  5. To collect user reactions and feedback
Tasks given:
  • Understand what SAGE Foundation is. (for donors and newcomers)
  • Complete the donate process. (for donors)
  • Complete the nomination form. (for newcomers)

REVISION

Explanation:
We conducted three user testings. All tasks were completed successfully. Yet, we gained some feedback in terms of the content.
Changes we conducted:
  1. Users found the name of "Explore SAGE" was unclear, so we changed it into "About SAGE."
  2. We discussed with users about the donation price on the donation page. The prices used to range from $20 to $500; then, we changed into a more realistic range from $10 to $100.
  3. Some texts were too small to read, so we changed the size.
  4. One user suggested "Sponsorship" should be under "Programs&Serves" instead of under "Get involved." Yet, we didn't change it for time concern and decided to follow SAGE foundation's decision to keep it as the original. 
  5. In the mobile responsive website, users would like to see the whole visual introduction once they clicked the drop-down menu, instead of the sub-categories. We took the advice and changed it, since it could also reduce the clicks before users got the information they wanted. 

FINAL DESIGN

LEARNING & AFTERTHOUGHT

Persona: The persona should always address user pain points and motivations based on the findings from the research. At first, I created personas based too much on my assumption, neglecting crucial user frustration and motivation, so the personas in the case study were the revised ones.
​Content strategy: I found most NPOs' websites strongly connect themselves with social media and create their community by a catchy hashtag on the website. Besides, I could see they "speak" to users with those action calling content. Since we didn't have enough time to create extra content, but the material could help to boost the engagement rate.
Team communication: We had six people worked on the same adobe xd file. Therefore, the maser components were messed up while everyone designed or revised the wireframes in their ways. Consequently, it'd be better to have one person create the master components with everyone's agreement, to avoid extra workload and the mess-up of any element. Besides, it'd be great for the whole team to keep notifying each other of any changes in the wireframes.