Enhanced Website for Effortless Donation &Volunteering
KEEP SAN ANTONIO BEAUTIFUL
THE PROBLEM
The Keep SA Beautiful website aims to provide valuable information to users regarding protecting the San Antonio environment. The organization's programs encourage environmentally responsible behavior and enable users to donate or volunteer. However, we have observed that the website is not effectively conveying its message due to broken links, confusing navigation menus, and poor page layouts. This has resulted in users experiencing confusion and frustration while navigating the website.
Timeline
3 weeks
Team size
4
GOALS
-
Revise the information architecture to develop an engaging user experience
-
Develop a consistent navigation system
-
Redesign the user interface
MY ROLE
Research, Define, Ideate, Wireframe, Prototype, Test & Design
-
Research Plan
-
Heuristic & Accessibility Evaluation
-
Ideation
-
Mid-fidelity Wireframes
-
Prototyping & Testing
-
Visual Design for High-fidelity
RESEARCH
Proto-Persona, Heuristic Evaluation, Accessibility Evaluation, Usability Tests
We started our research by developing a proto-persona named Danny Flores. It helped us understand the goals and motivations of socially responsible users who want to contribute to their community through the Keep San Antonio Beautiful website. Our goal was to
-
Identify any potential challenges these users might encounter while browsing the website
-
Gain a comprehensive understanding of users' issues with heuristic and accessibility analyses, followed up with usability tests
Proto-Persona
Heuristic & Accessibility Evaluation
We evaluated the website across appearance, content, navigation, efficiency, and functionality, rating each on a scale of 1 to 3.
Result:
-
Overall, improvements needed in content, navigation, efficiency, and functionality
Usability Testing
5 participants | aged between 30-35 yrs via Zoom
We conducted usability testing to analyze user navigation from the home page to efficiently access donation and volunteer information.
Tasks:
-
Donate to the organization
-
Look for volunteer opportunities
-
Follow on social media
Key Insights
Results:
-
Misleading dual primary navigation: Header navigation and a side hamburger menu conflicted
-
Broken links in the hamburger menu: Users encountered difficulty navigating due to non-functional links
-
Unprofessional appearance: Text-heavy pages and awkward white spaces made users hesitant to engage with the website
DEFINING THE PROBLEM
Jacob Nielsen's 10 usability Heuristics-Redline and Annotate, Empathy Map
Through research, we found issues with the usability and accessibility of the Keep San Antonio Beautiful website. Using Jakob Nielsen's 10 usability heuristics, we identified major design flaws, enabling us to create effective design solutions.
Jakob Nielsen’s 10 Usability Heuristics
- Redline and Annotate
Empathy Map
Redlining and annotating issues helped us create an empathy map for environmentally conscious residents of San Antonio.It allowed us to understand their needs when seeking online volunteer and donation information. This understanding helped us to generate ideas for solutions that could seamlessly meet the users' needs.
IDEATING SOLUTION
I like, I wish, What-if
We used the "I like, I wish, what-if" method to collect user ideas for our website. After brainstorming and voting, we prioritized ideas on a feature matrix based on priority and feasibility, and worked on those that scored high on both criteria.
2x2 Feature Prioritization Matrix
DESIGN
Card Sorting, Site Map, Wireframes
We started off from card sorting, considering following three factors to revise the Information Architecture.
Card Sorting
01
In usability testing, we found that the main navigation lacked a secondary menu, hindering users' ability to navigate
02
We decided to use hamburger menu for future scalability and employed card sorting technique, utilizing menu labels primary and secondary.
03
.png)
In usability testing, we found the main navigation tabs, "Programs" and "Get Involved," caused confusion as both implied volunteer activities. Hence, we redesigned our information architecture as follows:
-
"Programs" renamed to "Volunteer"
-
"Get Involved" changed to "Support Us"
The card sorting manifests in following manner:
Site Map
Redesigned information architecture with improved navigation based on meticulous card sorting.
Low-Fidelity Wireframe
When creating low-fidelity homepage designs for mobile and desktop, we incorporated redesigned Information Architecture and additionally wireframed:
-
Hero page with a pop-up for donations and volunteering
-
Mission statement for transparency and trust-building
-
Upcoming events section for volunteer engagement
-
Calendar for structured event viewing
-
Our impacts section for compelling narratives
-
Social media handles for community cultivation
Desktop Low-Fidelity Wireframe
.png)
.png)
Mobile Low-Fidelity Wireframe
PROTOTYPING & TESTING
Usability Testing & Iterations
We conducted a second phase of usability testing with the same tasks to assess the redesigned wireframe and evaluate the user experience.
Key insights
"Upcoming Events" section title is still misleading- can we volunteer at those too?
"Social media icons are not still visible"
"The text on the Hero Image is not readable"
Results:
-
Finding volunteering opportunities in the redesigned wireframe increased by 40 percent
-
Users seemed uncertain whether "Upcoming Events" referred to volunteering Events
-
To improve clarity, we changed "Upcoming Events" to "Volunteer Events"
​
RESPONSIVE HI-FIDELITY PROTOTYPE
Mood Board. Style Guide, Mobile & Desktop Prototype
We developed our UI design system, through mood board and style guide. We created a responsive Hi-Fi homepage for both desktop and mobile, crafted carefully, so that it aligned with our UI goals.
Mood Board & Style Guide
Before & After
Original Homepage
Redesigned Homepage
.png)
FINAL THOUGHTS
We listened to our users and were able to craft a user-friendly and engaging homepage. Users found the new homepage design easy to use and said it inspired them to donate and volunteer.
Learning:
-
Usability testing is the primary method for ensuring user- friendly design
-
Multiple iterations help refine define solutions
​
FUTURE OPPORTUNITIES
-
Increase the font size of “Our Mission” Statement
-
Make other pages to make it more interactive
-
Reinvent the logo to match the overall theme of the style guide