Korean American Story.orG

Web RESPONSIVE Redesign

KAS Photo Collage.png

OVERVIEW

KoreanAmericanStory.org is a non-profit media organization dedicated to creating an online space for Korean Americans to share stories in various formats including videos, podcasts, photos, and written essays. They also organize several live events each year.

In July 2019, I was hired via freelance contract to completely redesign their website for both desktop and mobile interfaces.


OBJECTIVES

After exploring the existing website, it was clear that much of the content needed to be reorganized in order to reflect current organizational and priorities and to create a more intuitive, user-friendly flow. The existing navigation menus offered a confusing mix of programs combined with subject categories, with no indication as to what type of media format any particular piece of content would fall under.

It was also evident that both the mobile and desktop sites could benefit from a more contemporary, visually attractive, and user-friendly design. 

In addition, the client wanted to more effectively communicate that they are a non-profit organization in order to encourage users to donate, as well as encourage users to join their e-mail list and connect via social media platforms.

 

RESULTS

To view the final wireframes and clickable prototypes, please visit the links below.

 
 

DESIGN PROCESS

 

Competitive Research

In order to get a better sense of other sites with similar objectives, I spent a few days exploring non-profit sites, podcast and storytelling sites, and general news/media sites. One of my main observations was that non-profit sites don’t have to rely on outside advertising, providing more flexibility in terms of layout and content offerings. I also observed that the most effective news and media sites tended to have fairly minimal color schemes and fewer graphics, relying primarily on text and layout to create visual interest while also serving to put the content front and center. I also observed that my client had a large archive of high-quality images that weren’t necessarily being used to greatest advantage on the current site, and could prove to be a valuable asset in the redesign.

 

ReORGANIZING the Site structure

The first priority was to redesign the flow of the site in order to create a more cohesive and streamlined structure. After exploring a few different options and discussing further with the client, I decided it made the most sense to reorganize the main navigation according to content type. All regular content would be divided in one of four navigation options: Video, Podcast, or Written, or Events. In addition, there would be an About section with general information, a Donate button, and an expanded search bar that would include sorting by media type and subject matter.  

Redeisgned Site Map.png
 

Design Phase

In creating the redesign my main priorities were:

  • Informational hierarchy

  • Site organization

  • Visual harmony

  • Clarity

  • Keeping the focus on the content 

 

color Theme & SITE IDENTITY

I wanted to keep the overall design fairly minimal in terms of color, but still wanted to provide a basic theme that would carry through the site in order to provide visual unity and site identity. One of KoreanAmericanStory.org’s most prominent current programs is the Legacy Project - a video program documenting the life stories of ordinary Korean-Americans. I noticed that each participant had been filmed and photographed in front of a beautiful dark indigo backdrop, which I decided to adopt as the overall theme color for the site. This color was incorporated into each page by way of separator lines, text color, and banner images.

Color Scheme Graphic.png

WIREFRAMES & PAGE DESIGN

EXISTING home PAGE - identifying the problems

KAS Existing Homepage - 2x.png
 

NEW home PAGE - SOLUTIONS

KAS Annotated Homepage - 2x.png
 

Existing Program pages - PROBLEMS

Not your average existing.png
 

NEW Program pages - SOLUTIONS

Not Your Average Annotated.png
 
  • Existing Article pages- PROBLEMS

Text pages existing.png
 

New article pages - SOLUTIONs

Revised written pages - annotated.png
 

FINAL RESULTS - DESKTOP AND MOBILE PROTOTYPES