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:
Build a smooth navigation within the website.
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.
UX — Amanda Kurek, Annie Wang, Jill Chao Sheng Li
UI — Achal Kshirsagar, Leslie Wen, Ken Picón
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.
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.
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.
We revised the information architecture to make more sense on the website journey.
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.
It used to be Explore Sage instead of "About sage," we changed the name while conducting user testing.
We listed down Sage Awards of each year under "Gallery" instead of showing them separately as it was on the current website.
We added "sign up" and "confirmation" to all the opportunities(donation, sponsorship, job training...etc.) SAGE provided for clear guidance.
- Follow the KISS rule to make things simple. Users needed to understand SAGE foundation as quickly as possible.
Provide further confirmation after donation and sign-ups. In case users get lost, we took care of post-service experience.
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.
To conduct solutions by designing the new wireframes.
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.
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.
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.
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.
To gain insights from our users
To see if we met user’s expectations
To check if the design matched business decision to real-world use
To check if the user could perform the tasks we proposed
To collect user reactions and feedback
Understand what SAGE Foundation is. (for donors and newcomers)
Complete the donate process. (for donors)
Complete the nomination form. (for newcomers)
We conducted three user testings. All tasks were completed successfully. Yet, we gained some feedback in terms of the content.
Changes we conducted:
Users found the name of "Explore SAGE" was unclear, so we changed it into "About SAGE."
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.
Some texts were too small to read, so we changed the size.
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.
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.