Redesigning ASA's navigation bar to improve information architecture.
UX Research
UI Design
ASA Website Redesign
Asian Student Achievement is a nonprofit 501(c)(3) organization whose mission is to help Asian and Asian-American students move through the pipeline to leadership positions. Initially launched in 2016, ASA's website never fully considered user experience during the design phase.
Having gone through a recent rebranding, the ASA Design Team sought to improve on several things including making the site clean, informative, and easy to navigate.
Team + Roles
Jamie Cha – Team Lead, Researcher
Tyler Turner – Web Designer, Researcher
Sarah Mun – Researcher, Writer
Tools
WordPress
Figma
Project Duration
6 months (ongoing project)
Goals
1
Increase website traffic utilizing feedback from user testing.
2
Simplify website pathways.
3
Implement UX design principles to the existing website, ensuring a smooth experience.
Site Analysis
The initial goal of the website was to be informative and interactive. However, this resulted in a crowded interface that creates more confusion for users.
We highlighted the following issues to tackle in the redesign:
Crowded navigation bar
Improper social media links
Repetitive icons/elements
Sitemap
This sitemap outlines the website's existing navigation. We noted repetitive elements/links in red, links with multiple access points in yellow, and links with only one access point in white. This affirmed our findings from the site analysis.
Competitive Analysis
Save the Waves
Save the Waves is an international nonprofit dedicated to protecting surf ecosystems by collaborating with grassroots organizations and managing projects to encourage coastal stewardship.
What they do well:
"Donate" button is highlighted in a different color from the rest of the navigation bar to make it stand out.
Clear and concise headers on the navigation bar.
Pencils of Promise
Pencils of Promise is a nonprofit that works to provide access to quality education by creating schools, programs, and global communities around the world.
What they do well:
Clear and concise navigation bar
User Testing
We asked 9 users to walk through ASA's website and complete specified tasks. This helped us understand our users' mental model of site navigation and look for areas of improvement to ensure clearer pathways.
From our testing, we highlighted 3 key insights:
These findings reaffirmed our beliefs that ASA's website suffers from navigational issues, especially relating to contact information and social media links.
Personas
Ideation
Sketching
Based on user feedback, we believed that redesigning the site's navbar and footer would help reduce clutter and align closer to our users' mental model of the site. We chose to move ASA's social media links and contact information to the footer to clear space in the navbar.
Wireframe
From our initial sketch, we created a low-fidelity wireframe which models what the new navigation bar would look like with our desired changes.
Final Interface Design
In the final design, we prioritized cleaning up the navbar by moving socials to the footer. This created a cleaner interface and matched our users' mental model of finding contact information on the ASA site. We also took this opportunity to ensure that all icons were properly linked.
Redesigned Sitemap
This sitemap reflects the changes to the site's information architecture. Moving all social media links to the footer helped reduce clutter and repetition in the navbar. We also took this opportunity to add new links under our "Blog" page.
Reflection
From this project, we got to practice more UX techniques and experiment with tools such as sketching, wireframing, and design softwares.
As we continue this project, we look forward implementing the following changes:
Cleaning up various pages to increase clarity on the site.
Creating formal styles to standardize colors and fonts on the site.
Making the website accessible in multiple languages.
Design Updates
Recaptcha + Scroll Button
After reviewing ASA's site analytics and email account, we found that ASA faced an issue with receiving spam emails. To prevent this, we implemented a Recaptcha system to the entire site. This will help monitor human activity from automated activity on the site and help ASA employees manage messages.
Since ASA presents a lot of information on its pages, we also added a scroll button on each page of the ASA site to help users easily get back tot he top of the page. The button will help create a more efficient browsing experience by reducing the amount of effort users have to exert in order t ver tot eh top of each page.
Button Color Change
The design team noticed that there were inconsistencies in color throughout the page. One way we tackled this issue was by changing all button colors from green to blue. We made this choice based on ASA's current logo and believed that this would help create more cohesion throughout the site.
