Hawaii United Okinawan Association

Helping Hawaiian citizens get in touch with their roots

Project Overview

Problem:

The Okinawan residents in Hawaii informed us that the amount of visitors for their website has been stagnant and that the conversion rate of newsletters and donations had been dropping. They also say that alot of the website is broken due to being a website designed in the early 2000s and had been filled with bloated pages in their navigation.

Solution:

Redesign their website's Information Architecture to provide a better navigation experience, streamline their newsletter sign up process, and design proper cards to provide proper information about events. We also looked bringing the website to mobile as well, working on breakpoints for each of the pages.

Impact:

A 53% increase in user site visits and a 50% increase in conversion rate for sign ups.

My Role:

Information Architecture, UX Design, Prototyping

DEFINE

Project Details

(HUOA) is a non-profit organization serving to promote, perpetuate, and preserve the Okinawan culture here in Hawaii. Their website hosts newsletters, events around the island, clubs, and more information about preserving their culture.

My team (of 2 designers and 5 developers) worked with their business stakeholders and drove the decision making process on enhancing the site visitors experience. This meant lookinag at their Information Architecture and design assets for development handoff. Our goals were:

HMW improve on the conversion on new user memberships?

HMW provide a better mobile experience?

HMW provide a more accessible experience for all visitors?

Continue iterating and improving existing pages and features. Validate existing UX changes with data and best practices.

Ensure metrics show significant positive change between original site and redesigned site.

UX CHALLENGES

Rebuilding from the ground up.

When I first joined the team, I was placed in the middle of this project, primarily taking the place of their previous designer who had headed all of the user research. This took a while going through alot of the documentation to understand the clear goal behind this redesign but meant that alot of the heavy lifting (data wise) was completed.

We had a general idea of what needed to be changed based on the interviews but it was my job to sift through the vague fog and come up with a proper plan in redesigning the flow of the website.

IDEATE: EXPERIENCE 1

Navigation through the main page

I collaborated with the business to pair down the pages, some of which had broken links, or pages that were no longer in use. Now, users were greeted with the main navigation in the header of the website, with 6 main pages and a responsive browser that dictated desktop, tablet and mobile. I had the main navigation collapse into a hamburger menu, with the page navigation underneath for easy access.

IDEATE: EXPERIENCE 2

Breakpoints for Navigation menus

To streamline the process and expedite development time for our developers, I adopted a more comprehensive approach instead of having predefined breakpoints for each device. From desktop to tablet view (1440p - 1000p), my focus was on shortening the length of the navigation and title. For the transition from tablet to mobile view, we implemented a mobile-focused navigation, such as a hamburger dropdown menu.

IDEATE: EXPERIENCE 3

Finding Events and Signing up for Newsletters

In the original design, the site had a newsletter sign-up form and a blurb about "Purple Blast." However, the text and forms weren't aligned, making it easy for people to miss the signup button.

Events: HUOA offers numerous events, and they have a dedicated TV, radio, and online video presence for their club members. However, finding information about upcoming events was challenging as only certain events were listed.

Newsletter: Initially, users had to go to a separate page to interact with the Purple Blast newsletter and sign-up form. Additionally, there was no confirmation message to inform users that they had successfully subscribed.

USABILITY TESTING

How effective were the collective of small changes?

After conducting my usability tests, the insights were twofold:

• The good news: the core value of the website, as well its content, and discovery were easy to navigate for our users

• The not-so-good news: the UI of the website was very stark and became and issue, causing our users to leave the website much quicker than before.

View Website

OUTCOMES

Where do we go from here?

Working under the guidance and mentorship of my first "teacher", this was a very proud moment in my UX learning journey, and the fact that I got to partner with her on this project, was truly one of the greatest gives given to me.

This project taught me how to properly collaborate with a product team, learning to be more organized with how I documented my findings and to be meticulous with the design hand off, all while iterating on my design solutions with a senior designer.

The next steps for this project once it gets into the hands of more users is the continually experiment with how we provide best practices in terms of the gift giving functionality.

Considering this was one of my first formal roles, it taught me that collaboration takes courage and voicing your own opinion while also being open to discussion takes a step out of your comfort zone.

Want to reach out?

Pop me an email at andyk517@gmail.com
I’d love to hear from you!

📍 Currently based: San Francisco and chronically on the internet

Key Screens