Project

Tet in Seattle - Redesign a Website

This was a project that I did for my UX bootcamp. We were given the task to pick a company or organization and redesign their website. I picked an organization that I currently serve on board for. To make this project feel more “real”, I asked the Executive Director of the organization to become my client and go through a mock project.

Tet in Seattle is a non-profit organization that helps organize the annual Vietnamese Lunar New Year that takes place at the Seattle Center. Ever since their establishment, they haven’t really changed up their website. They want an updated website. Since they rely on donations and sponsorships for funds, they wanted to add a donation button. Additionally, they also wanted a contact us page.

My Role

UX Researcher

UX/UI Designer

 
 

Competitor Research

Research Goals

  • Understand the weak and strong points of a website

  • See common features and themes

Methodology

  • Competitive Analysis

Results

  • Most websites have very clear CTAs

  • All websites have consistent color scheme with the logo

  • Balance between text and pictures

 
 

User Research

Research Goals

  • Understand why a user visits a non-profit organization’s website

  • Uncover any pain points when scrolling through a website

  • Discover what users are specifically looking for when they’re on a website

  • What features users are expecting on the website

Methodology

  • User Interviews

    • I interviewed users who are currently volunteering for a non-profit organization and or if they are looking to join one

  • Persona

Results

  • All of the users said they visit a non-profit organization because they want to learn more about it and how they can support it

  • Most users expressed that if the website is too text heavy, this usually deters them away

  • Most users expressed that they are always expecting a donate, volunteer, contact, and about us

 

“I volunteer with an organization that aligns with my beliefs and values”

- Kevin Nguyen

 
 

Creating the framework

The current site map (on the left side) was very simple, but it was lacking some of the important interactions such as donate and contact us.

 

Current Site Map

Updated Site Map

 

Wireframes

With the site map in mind, I started sketching out some variations of the homepage in my notebook to get a general idea of what I would create for the wireframes. I went with the version of the right side.

 
 
 

Now that I got a rough layout of the homepage, I jumped into Figma and started creating the 4 most important screens: Homepage, About Us, Donate, and Join Our Team.

 
 
 

Time to redesigning the website

 
 
 

01/06

Homepage

The current homepage right now is very minimal, with only a brief introduction to the organization. The client and I thought it would be a good idea to combine all of the important information (About Us, Join Our Team and Donate) all on the page so that way, users are able to easily access it.

 
 
 

02/06

Join Our Team

The current page has little information regarding the different positions and users has to click on the link to get redirected to a Google Docs for more information. To minimize an extra step, we thought it would be a good idea to have that information living on the page.

 
 

03/06

Signing up to volunteer flow

We wanted to keep this process short and simple so users are only asked to go through a couple actions.

 
 
 

04/06

About Us

The current About Us page only has the brief summary of Tet in Seattle and it was lacking. So the client and I wanted to add more content

 
 
 

05/06

Contact Us

The current website doesn’t have a contact us page, so the client wanted this page to become a priority.

 
 

06/06

Donate

Since this isn’t an e-commerce website, we wanted to keep the donation process short and simple. All users to do do is fill out the donation amount, fill our their personal information, and credit card information and press “Donate”. The next page would be a confirmation page that lets the user know that Tet in Seattle has received their donation.

 

Testing and Next Steps

I did the prototype and usability testing directly through Figma. I sent the users the link to the prototypes and asked them to perform the given task through a screen sharing through zoom. After the testing, I asked them a series of questions

Prototype

For the prototype, I created 2 different flows - the first flow is for users to donate to the TIS and the second flow is for users to sign up to serve on board

Usability Testing

All of the participants were able to complete out the 2 different flows that I gave them. Because of this, I didn’t need to iterate my designs

Next Steps

Due to the time constraint, I had to limit what I can redesign and add to Tet in Seattle’s current website. Tet in Seattle does sell some merchandise such as tote bags, t-shirts, and stickers during their annual Lunar New Year festival, so the next step would be adding a cart and check out process on their website so users are able to purchase these merchandises