top of page

NAAAP Boston - Emphasizing Clarity, Consistency, & Community

The Challenge

NAAAP (National Association of Asian American Professionals) is a national non-profit organization that supports the Asian American community with professional development, networking, and social engagement/volunteering. With about 22 branches in different U.S. cities, I was lucky enough to partner with the local Boston branch in redesigning their website. 

 

The organization had begun updating their online presence two years ago by starting the transition to the website builder - Wix. While the site certainly had a lot going for it, there was room for improvement. 
 

Original NAAAP Boston Hero Image

Goals

To kick things off, I held my first meeting with the client to set expectations and solidify goals. The contacts I worked directly with on this project were Nina and Samantha from the Marketing Team, Thuc, Tiffany, and Hua from the IT Team, as well as Caroline (the VP of Operations & Excellence). The below items are what we agreed upon from our discussion:​

Ensure users easily understand what NAAAP is and does from reviewing the website

Focus on Aesthetics: clean/nice/modern look and simple to navigate

Promote NAAAP Boston's desired brand: The premier organization for leadership, professional development, and inclusivity

Consistency across website, text, colors, spacing, patterns, etc. 

Constraints

I also wanted to get a sense of limitations and risks for the project. We identified the below:

Each brach has their own website with the Logo being non-negotiable

The primary color is crimson red with black and white being neutrals. The secondary color may be unique to each branch

NAAAP Boston is exclusively volunteer - run. This makes scheduling meetings more challenging and communication slower as all NAAAP contacts have to manage work-life balance

​NAAAP Boston was still transitioning from Silkstart to WIX which resulted in ambiguity regarding how users would interact with some aspects of the site (events signups for example)​

Since WIX is the website platform of choice for the client, certain design choices would be contrained by the elements and patterns WIX had available

Research

With solid footing and goals established, I was ready to start working with real users to get their perspective on the current iteration of the website. For this, I wanted to interview both NAAAP members as well as people that have little to no experience with NAAAP to get a fuller picture of all users' experiences. I created user interview guides, and after approval from my NAAAP Boston contacts, shceudled individual meetings with 12 people (6 current members and 6 people unfamiliar with the organization. 

Making Sense of the Data

With 12 interviewees, there were a lof of observations to consider. I began grouping them into two affinity maps - one for the members and one for the non-members to uncover insights. 

Some of the most important findings are below:

92%

of interviewees stated they liked pictures of real members and real events.

50%

of non-members expressed confusion on who was even eligible to join NAAAP Boston and what restrictions there were, if any.

50%

of interviewed members reported confusion and difficulty on initially joining NAAAP Boston.

75%

of all interviewees expressed dislike of the font and button inconsistencies throughout the website. 

66%

of non-members expressed significant confusion on purchasing a membership, particularly on the differences between the membership types and what each offered. 

83%

of non-members expressed difficulty in locating information on the website during the interviews. 

All in all, what we're seeing with the data is that users are unsure of what NAAAP Boston is about, they struggle to find the specific information they'd like to locate, the image of the organization is messy and unprofessional, and it is difficult to join the organization from interacting with the website alone. 

Humanizing these Numbers

With several important insights above, I wanted to provide a persona of an average user to my client contacts to ground the project further and ensure all parties keep in mind the type of person we are designing for. The below persona represents many of the pain points discovered during user interviews:

Competitor Analysis

My last task in research was to complete an analysis of similar organizations. Because NAAAP has 21 other branches in the U.S., I decided getting inspiration from these websites would both give close examples of how to handle very similar information, and  invite more consistent design across the multiple branches within NAAAP. The below two examples are the home page for both desktop and mobile for two other NAAAP branches. I found the cityscape and landmark to illicit more of a professional feel to the websites. I particularly thought NAAAP New York's website looked serious and sophisticated because of the darker color scheme. I drew inspiration from these design choices and later presented them to the client as options. 

Sitemap

From my interviews with non-members, it was clear the information architecture was too complex and unclear to those new to the site. I noticed there were several pages for similar topics such as NAAAP PRIDE and scholarships. I focused on consolidating these pages from the secondary navigation to make it look cleaner and simpler. I also relocated the Job Opportunities tab and the "Statement on Asian American Violence" page into the Resources tab. 0 out of the 6 current NAAAP members interviewed reported the Job Opportunities tab as a typical reason to visit the website which supported the decision to remove it from the primary navigation, and include it as another resource. 

While I did think the information architecture could be further simpliffied from my first draft below, my client did advise they woudl like to keep all current content. With that being said, the only page I removed entirely was the "Subscribe to our Newsletter" page. The option to subscribe was present on the current iteration of the Home Page, and would be in my proposal to include in the footer so it's available to users on every page. 

After presenting Sitemap V1 to the client, we collaborated to consolidate further and remove some unnecessary pages. For the largest changes, the "Leadership & Volunteer Team" was combined with the "Meet the Team" page to eliminate redundancy and the individual pages under the Resources tab were eliminated, with remaining resources to be listed on the Resources page itself. The result is a much cleaner, simpler navigation that limits repitition. 

Getting the Aesthetics Right

So now that we have the scaffolding of our new site design, it was time to make sure we were converying the brand image NAAAP Boston wanted. I reviewed their current color schemes and typography on the site, and just as 75% of interviewees reported, there were multiple type faces without uniform sizing, and many different button styles too. This detracted from a homogenous experience, and wouldn't represent the professional tone NAAAP Boston wanted to convey. 

The most commonly used font on the site was Helvetica, but being widely overused, I recommended a few other font pairings that would give a cleaner, more modern look that the client had requested. During one of our meetings, I presented the font pairings for the client to review and they ultimately selected the below. 

During that same meeting, we tackled the color palette. NAAAP National has a brand guide that includes Logos and recommended colors, so the required primary color was crimson red with black and white neutrals. The brand guide states branches may have a secondary color, but the client favored a more simplistic design, and wanted to focus more on red, greys, blacks, and white. 

​

We reviewed many of the examples I gathered from other NAAAP branches, and a darker theme similar to that of New York resonated with the client; again displaying a more serious, business-like, sophisticated connotation. We agreed to try dark themes, and I began wireframing mockups in WIX using the "WIX" color palette shown below: 

First Test Run

During that same meeting, we tackled the colors palette. NAAAP National has a brand guide that includes Logos and recommended colors, so the required primary color was crimson red with black and white neutrals. The brand guide states branches may have a secondary color, but the client favored a more simplistic design, and wanted to focus more on red, greys, blacks, and white. 

​

We reviewed many of the examples I gathered from other NAAAP branches, and a darker theme similar to that of New York resonated with the client; again displaying a more serious, business-like, sophisticated connotation. We agreed to try dark themes, and I began wireframing mockups in WIX using the "WIX" color palette shown below: 

Re-designed Home Page
Original Client Home Page

I proposed a dark theme with a view of Boston from across the Charles River as the hero image to give a more serious, professional feel to the website.

I added NAAP Boston's 501(c) statement to the footer as it is commonplace for non-profit organizations to disclose this status. I also added a section to subscribe to the newsletter as well as tertiary buttons linking to the donation and membership pages for easier navigation to conversion pages.

I added a short paragraph on top of the hero image that provides the full name of the organization and what it is so users immediately understand this with little to no effort.

I included a section on member testimonials to the landing page as about 67% of non-member interviewees stated testimonials added legitimacy to the website and was more likely to lead to member conversions. 

I standardized the button design using Crimson read as the default primary button and white with a crimson red border and text for the default state for the secondary button.

Re-designed Donate Page
Original Client Donate Page

As the client was still undecided on a dark or light theme, I created the dontate page with white as the background neutral to provide a different example. 

Since 92% of interviewees stated they liked seeing pictures of real members and events on the website, I included an image from a recent NAAAP Boston event to humanize the organization and demonstrate the good they would do with a potential donation. Again, I thought the testimonials would also work on this page to encourage donors to support NAAAP Boston by hearing the impact it has on real life members

Re-designed Membership Screen

The client expressed their interst in the period on the titles, so I decided to present this as a theme throughout the interface with a period after "Donate" at the top of the page

I focused on changing the tone on this page from a rather playful version on the original site to a humbler, gracious, non-profit attitude to match the values of professionalism, inclusion, and community that the client was targeting.

Original Client Membership Screen

I took inspiration from tech companies like Apple and Microsoft to present the pricing tiers in a clean, modern pattern.

As sign up and the differences between membership tiers was a big pain point for 66% of users during initial interviews, I added descriptions below each option recommending the type of user that might purchase each one. 

From users' confusion during initial interviews, I felt the descriptions for each option needed to be clearer. NAAAP Boston is still fine tuning what is included with each membership tier, so that content is to be updated at a later time. 

As all members receive four shared benefits, I included those below all three options to reduce clutter and make the page more visually engaging. 

I specified the duration of each membership so users would be certain what time commitment they would be signing up for. 

Hi-Fi's

A significant disucssion point I had with the client was how their online presence faired on mobile devices. From my preliminary conversations with them and the initial designer of the WIX site, I understood that the desktop view was heavily prioritized in the site design, with the mobile experience seen as an afterthought. 

​

I definitely saw room for improvement here, and sought analytics WIX provides for every site on their platform. There were a handful of useful stats, but the most important being the share of mobile users versus desktop users:

From data provided by WIX Analytics, in the first 10 months of 2023, twice as many users visited the NAAAP Boston site using a desktop device as opposed to a mobile one. However, the increase in mobile device visitors was about 40% from the same timespan in 2022. 

From this information, the client and I understood desktop traffic was more common on the site, but mobile traffic was increasing rapidly, making the mobile view all the more important to improve. 

Original Client Mobile Home Screen
Re-designed Mobile Home Screen
Re-designed Mobile Membership Screen

The mobile screens feature reduced text sizes for both Headings and body text to more neatly fit on a mobile screen. 

To maintain as consistent an interface as possible, where the desktop views had horizontally aligned repeaters, I decided to vertically stack the repeating patterns on top of one another for the mobile screens. 

Re-designed Mobile
Resources Page
Re-designed Desktop Home Screen

After speaking with the client about the first iteration on the Home Page, we discussed that adding different colored background sections would be more visually appealing to the user. 

​

I also modernized the display of the Sponsors, and provided a section for two more chances for the client to encourage the user to convertt by either donating or signing up to be a member. 

Re-designed Desktop Membership Screen

My discussion with the client led me to opt for sharper edges for the repeaters and buttons to more closely match the aesthetic of the other elements throughout the interface. 

We also agreed to simplify the presentation of shared benefits for all membership types to ensure clarity for end users.

Re-designed Desktop Donate Screen

I again opted for sharper edges for elements on this page for consistentcy purposes. 

I provided the donation form directly on the page, so users had even less to navigate when submitting a donation. The client provided the amounts and frequencies to suggest to users. 

Re-designed Desktop Resources Screen

To simplify the site's navigation, I removed separate tabs under the Resources primary navigation tab and listed multiple items directly on the page itself. I added Logos for specific organizations for visual appeal and ensured all clickable elements were properly spaced for breathing room and appeared clickable to ens users.

Final Testing

At this stage, we were ready to present to new users unfamiliar with the organization to see if our designs better aligned with the client's goals. Building the copy of the site in WIX, I used the preview feaure of the site builder to serve as the prototype. Users would get as close to a real experience using the site/designs as possible without my actually publishing the changes to the live site.

​

For this round of testing, I interviewed four users to give feedback on the Resources Tab, Home Page, Membership sign up, and Donate Page. The key results are below: 

100%

of users preferred a simpler design for the landing/home page.

100%

of users expressed that the re-designed membership page looks clear and modern. 

50%

of users stated the membership options should be presented from least expensive to most expensive.

75%

of users expressed annoyance at the paragraphs of content at the beginning of the resources screen - this inhibits their ability to get to the information quickly.

100%

of users were confused by the "Advocacy" title on the Resouces tab. Due to the background coloring, they thought the title pertained to a different section. This resulted in high cognitive load to figure out what section Advocacy belonged to. 

25%

of users recommended a confirmation screen onthe dontaion page before the user fully commits to the donation - the current desktop view makes it difficult to see all the information in one glance. 

Final Screen Designs

Key Takeaways for Future Considerations

Inclusivity - 3/6 non-member interviewees showed uncertainty for what group(s) NAAAP Boston supported and what the eligibility requirements for joining were

Joining Organization - 3/6 interviewed members expressed confusion on how to join organization initially and described informal methods for doing so

Text to Visuals Ratio - 11/12 interviewees called for reduced text section and more visuals - especially of current NAAAP members and activities

​Clutter - The interface should be kept up-to date with old information removed promptly so users always get accurate, relevant information. This also reduces thedifficulty in navigating the site by having less tabs/information to look through to find what users need. 

Project Handoff to Client

Due to several factors internally at NAAAP Boston, including several IT changes on their end, the client was ultimately unable to proceed with a full site redesign immediately following this project's completion. For deliverables to the client; I provided all screen designs with font specifications, text sizes, color palettes, UI components, etc, the full research data with key points summarized, as well as a helpful guide for best practices moving forward. To date, NAAAP Boston has begun the process of updating their website on WIX based on our design exercise together. the live site can be accessed here.

bottom of page