Essobilingual is a Help Center serving French speaking new comers in Ontario, Canada.
The current website got low engagement rate. I was assigned by Ms. Dina Helen Essoka, the president of the Center to redesign the website.
During the process, I rebuilt the information structure, highlight Call to Action and refine user flows. I also helped the business to create a professional look and promote their branding.
My Role
Solo UX Researcher- UX/UI Designer for the whole process
Tools
Heuristic Analysis & Product Review
Comparative Analysis
Usability Test of Current Design
Problems
User Centered Design Canvas
New site map and wireframes
Low fidelity Wireframes
Usability Test
Iterations
Handover files to clients
Goals:
Target Users:
3 main groups of people who:
– Contact the Center & Get information
– Register as a volunteer
– Donate to support the center
Research Plan:
– Heuristic Analysis of the current website
– Comparative Analysis of good non-profits website designs
– Usability Test: Test main functions and users flows of the current website to identify problems
Product Review & Heuristic Analysis
I noted some heuristics violations of the current products such as:
Consistency and standards:
Match between the system and the real world
Aesthetic and minimalist design
An overall review of the product also identified the following problems of current design:
Accessibility
Branding issue
Design Inspiration
Competitive Analysis with World Wildlife funds, Habitats for Humanity, Oxfam Canada, helped me to understand to the strengths of good designs for non-profit organizations:
– Establish a good brand
– Showcase their activities
– Encourage Donation and Volunteer (Visible & Accessible CTA)
– Build community and target their clients
Usability Test for possible Usability Issues
To understand users behaviors and the current usability problems, I ran a moderated usability test with most basic tasks on the website.
The success rate to complete tasks:
Contact : 30%
Navigate for a specific information about the center: 15%
Volunteer: 10%
Donate: 15%
Problems
Problem 1 : Main Menu is hidden
This caused difficulty to users while navigating to different pages of the website
Problem 2 : Missing CTA to contact, donate or register to become a volunteer. Users needed to copy and paste a link to their own browser.
Problem 3 : Donation with too many steps
Users had to look for donation button to proceed
Problem 4: Navigation
The overlapped and similar pages in navigation menu also caused confusing to users.
Problem 5 : Mixed of languages English and French
Users confused that the content is not in their main language: “I don’t understand French”
Problem 6: Once click on menu, can not scroll down
Users could not scroll down once they clicked on the menu.
More Users Feedback..“Website needs improvement, needs to be intuitive, needs to have a map, needs order.”
“I searched but couldn’t find the section to donate”
“I could’t find it in 10 seconds. I would leave the website”
User Centered Design Canvas was used to combine users goals, pain points, motivation, problems, solutions and business goals together at one place to facilitate my design solutions.
To fix the navigation problem, I first rebuilt the site map.
I targeted the problems, sketched quickly different wireframes and did quick A/B test with 5 random users.
Usability Test with Low- Fidelity Prototype
To identify if my design fixed the issues in Define stage, I conducted a usability test with similar tasks: Contact Us, Become a Volunteer, Donate and navigation to specific pages.
The low-fidelity prototype in Adobe XD
A/B Test
90% in test A/B selected the Frequency to be put in “Donate form” separately rather than a drop down from the main menu.
How Landing Page and navigation have been improved
High Fidelity- Prototype & Visual Design
Preview of my hifi-prototype
Users’ Feedback
“Everything is clear, easy.” “It is definitely a much better version.”
I have learned to manage to work as sole UX UI designer on this project about non-profit sectors.
The most challenging tasks for me is contacting the potential users and understand their pain points while using the website.
I also learned some trade-off while simplifying the “Contact Us” section for a clean view and had to recover it later because users could not find it easily while scrolling down to the footer area.
Linkedin