Background

I worked on this project as a part of Avenues Consulting Group, a USC-based consultancy focused on delivering consulting and project-based solutions to pre-professional industries such as medicine, law, real estate, and technology.

How did I add value?

As my team's UX/UI designer, I led the creative and iterative processes for our client project and did most of the prototyping for our deliverables.

The Problem

The Asian American National Committee (AANC) is a federally-recognized nonprofit dedicated to serving, uplifting, and advocating for Asian American, Pacific Islander, and Native American populations. The client tasked my team with redesigning their website in order to reduce any existing user friction points and increase engagement. Besides a few design system requests and new page additions, we were generally given free reign to make whatever improvements we saw were necessary.

Research

Design Audit

Since our client’s needs were relatively general, I first began by conducting a design audit on AANC’s existing website in order to get a better grasp on what major areas needed improvement.

Several main issues that I noticed immediately were the lack of intuitive website architecture and continuous lengthy, redundant blocks of text across most pages. Combined, these two problems made it very difficult for website visitors to locate, discern, or understand the information they were originally looking for. Important links such as to become a member or donate were buried within walls of text while AANC’s services – arguably the most vital information for users – were hidden away under the “More” tab in the navigation bar.

Additionally, I also found out during a meeting with our client that the website was housed on Mopro, a drag-and-drop style website builder. A bit of experimentation with Mopro revealed its technical limitations and lack of creative freedom, especially in regards to alignment, spacing, and responsive design.

Goals

Afterwards, I shared my notes with the rest of my team and our client. Following these observations, we then set several objectives for our website redesign, namely:

In other words, our guiding question was:

How can we reduce existing user friction points on AANC's website to increase engagement?

Process

First, I reorganized the information architecture of the website.

After, playing around with different possibilities, I chose to section the various national offices and services into distinct categories for easier navigation. Doing so helped us visualize potential user flows and move forward in the design process with more clarity.

View in FigJam ↗

Next, we implemented our ideas into sketches.

My fellow designer Margaret and I then sketched out different variations of each website screen in order to visualize the information architecture we had previously created.

Among all of our dropdown menu options, we ended up going with the horizontal-nested menu as it allowed us to display the most information out of all of our options while still being legible.

From there, low-fidelity prototyping.

After deciding on our favorite designs from our sketches, we proceeded to low-fidelity wireframes in order to better visualize some of the key design features, such as the dropdown menu.

Visual Design

Then, we developed the design system.

The client asked that we adhere to the same colors in the logo, which consisted largely of blues and reds. For this reason, the primary color of our AANC redesign is blue, which exudes a sense of calmness and signifies trust and reliability. The red serves as an accent color which in tandem with the blues, calls attention to the colors' American political significance.

Since AANC serves many individuals who are not native English speakers, ensuring that the text was legible at all sizes and thus accessible was of utmost importance. For this reason, we stuck to just one sans-serif typeface – Public Sans – for all text.

Solution

After checking in with our client, we moved to higher-fidelity and created our final MVP.

Updated Landing Page
‍Our main objective for the landing page was to make it more digestible, so we rearranged the layout to become more dynamic and made the descriptions more concise. This way, users could quickly learn about AANC as an organization while quickly skimming the page.

One major change I implemented was the hero section layout. There originally was not enough contrast between the text and the background image, which made the text much harder to read and generally less accessible. I reoriented the layout and made the background a soft white-blue gradient to make the heading text more legible.

Relocated National Office Pages
We reorganized the About Us section and moved the National Offices under the dropdown. Additionally, we separated the office pages into distinct categories so that visitors could easily find the page they needed.

Newly Organized Services
We also added a services tab to the navigation bar so that visitors could easily learn about all the services that AANC offers. Similar to the national offices, the services were also separated into distinct categories for quicker navigation.

News and Membership Pages
‍Lastly are the updated membership and news pages, conveniently grouped for visitors that want to learn about how they can get more involved with AANC.

Future Iterations

Our original goal for the dropdown menu was for each successive column to appear only as the arrow buttons were clicked but due to the lack of time, we were unable to fully prototype this functionality. However, since the general structure of the dropdown was there, we delivered the designs to the client nonetheless and are now currently working on the front-end and back-end development of the website.

Some future iterations and additions that we would like to make as the website is being developed are as follows:

Success Metrics

Additionally, some key performance indicators (KPIs) that could be used to measure the efficacy of our redesigns once the website is fully developed are:

Takeaways

1. Strike a balance and find that sweet spot

This project was my first exercise in agile methodology – as expected, I would oftentimes feel conflicted about whether I was skipping important steps or on the flip side, getting held up on small, irrelevant tasks. Ultimately, I learned to ground myself by focusing on the question: “What are the exact needs that I need to fulfill before I proceed to the next stage?” Continually asking myself this question throughout the design process was super helpful and is a method I fully intend on employing in future projects of mine!

2. Cross-communication is crucial

Our team was a hybrid of project-builders (PMs, developers, designers) and consultants, of whom were undergoing a training curriculum while the client projects were started. Ensuring that the consultants, once introduced in, were up-to-date on the project goals was crucial in progressing forward efficiently. Especially as the team’s UX/UI designer, communicating my process and needs was necessary in order for the PMs and developers to do their job well.