HORAYA

Research / UX & UI / Responsive Web Design for Japanese Fashion Company

BACKGROUND

The idea I had for designing a website for this business came a year ago and was my inspiration for pivoting to UX/UI design. The company, Horaya, was founded in 1959 by my grandfather, who together with my late grandmother, was responsible for introducing to Fukuoka, Japan, European high-fashion brands such as Valentino, Giorgio Armani, Celine, Sonia Rykiel, Escada, Les Copains, amongst many others. While the business officially closed in June 2023, there was a desire to have a website to commemorate the legacy of the company.

Roles assumed

UX Designer, UX Researcher, UX Writer, UI Designer, and Translator

Tools used

Figma, Photoshop, Tactiq

Timeframe

6 weeks: July - August 2023

Understanding the Needs

The original plan was to launch Horaya’s first e-commerce website, marking a major step for the family business after over 60 years of operation. With the fashion industry evolving, online retail gaining dominance, and the COVID-19 pandemic creating distancing restrictions, establishing an online presence had become crucial to staying competitive. However, shortly after I began planning, my grandmother, the heart of Horaya, passed away. As a result, the decision was made to close the store, and with it, the need for an e-commerce platform faded. Despite this, the desire to create a website endured—not for driving sales, but as a tribute to the legacy of Horaya and my grandmother’s lasting impact. I chose to continue designing a website as a personal tribute, ensuring that her vision and the store’s history would be preserved for future generations.

The Problem to Solve

How can I commemorate a business in a way that articulates its legacy and impact on European designer fashion in Fukuoka, Japan?

The Solution

Showcase the impact of Horaya in the form of a website.

By creating a virtual space to hold treasured memories, the legacy of Horaya can be looked upon for generations to come. Users will be able to explore archival photographs, footage, and documents, as well as connect with Horaya's affiliate company, ACCO.

Learn about the history of Horaya in short, digestible chapters.

Get to know Horaya's story within the backdrop of global fashion industry trends and the Japanese economy from its founding in 1959 to its closing in 2023.

See the famous designer brands that Horaya brought to Fukuoka, Japan.

Learn more about Horaya's affiliation with Celine, Valentino, and Versace, among others, through cards that hold store images as well as key facts and dates.

Open Prototype in Figma

My Design Process

RESEARCH

I conducted research that would prepare me to curate a company's history in a respectful and easily digestible manner.

There were 3 things that I had to consider:

1) The company has closed.

2) All of the content and company archives are in Japanese.

3) There is an affiliate company, ACCO, which would benefit from the online presence of the legacy of Horaya.

Research Questions

How do other companies present their company history?
What makes Horaya special?
How can I be selective and not exhaustive in what gets presented?
How can I accurately present the feel of this Japanese company in English?

Scrapbook of Horaya's 3rd Annual Fashion Show

Photographs of Horaya storefronts at ACROS Fukuoka

Taking notes on 1 of 60 "Life is Fashion" essays

1/2

Most of the research involved archival digging through albums and scrapbooks. Most of the data was in physical form and out of order. I scavenged for the most memorable images that clearly captured the history of Horaya and scanned them into a drive that I brought home to the States.

Additionally, I ran a competitive analysis to see what other fashion companies have done to showcase their company history and conducted contextual interviews with people adjacent to Horaya to get insight into which aspects of the business they would like presented. Another influential resource was my grandfather's 60-day column entitled, “Life is Fashion” in the Nishinihon Shinbun (Western Japan Newspaper) in 2017. I gleaned much of the company's history through reading and translating these 60 essays.

Defining the Purpose

My next task was to sort out the vast amount of information I gathered. From the onset, I knew that creating the information architecture for this website would be the most challenging aspect of this project. In order to do this, I had to clearly define what it was that I was creating.

Why have a website for a business that is closed?

The purpose of this website, I realized, was that this would be the beginning of a family digital library.

How could I best tell the story of my family and the business that was part of their lives for 64 years?

Information Architecture

The decision to design a History page based on story chapters rather than timelines was based on observations from my competitive analysis. I explored what other companies have done to showcase their company history, focusing on fashion houses and department stores that are family businesses, such as CHANEL, LOUIS VUITTON, and NORDSTROM, among others.

Timelines were the de facto for most company websites. I tried this method by organizing my notes in a linear, date-based format...

...but the story of Horaya was not coming through. Instead, I wanted users to be able to read the history as a chapter book story, one that seamlessly weaves Horaya with the backdrop of the global fashion industry trends and the Japanese economy. When building the sitemap for Horaya, I prioritized the History page in the navigation bar.

I decided to create a Brands page to highlight the famous designers associated with Horaya and demonstrate Horaya's position as a significant player in the fashion industry. Another key point was to draw interest to ACCO, the affiliate company. I made a call to action towards ACCO on the Home page.

DESIGN

With information architecture decided, screen designs flowed easily. I digitized my low-fidelity sketches into mid-fidelity wireframes for both desktop (primary) and mobile (secondary) versions of the website. Finally, I wrote the copy and edited the images to be added to the high-fidelity wireframes.

Brands screen in low-fidelity desktop version

Mid-fidelity wireframes for mobile version

History overview screen in high-fidelity desktop version

Key screens in high-fidelity mobile version

1/1

I maintained the classic branding of Horaya, utilizing lots of whitespace and choosing shades of black and white for the primary colors to represent the high-end fashion company: simple, chic, luxurious, timeless.

Originally, I planned to use typography that was available in both English and Japanese. However, choices were limited. I needed a font that would complement the Horaya logo. In the end, I selected the serif font Times New Roman.

TESTING

I used moderated usability testing on the desktop prototype to get feedback, primarily to see if users came away with a high-level understanding of the history of Horaya. The 7 participants were between the ages of 18 - 64.

These were the 3 task flows that participants tested out.

Revisions

While all users were clear on clicking HISTORY to explore the beginnings of Horaya, some wondered at the difference between that section and STORIES.

>> I replaced STORIES with MEMORIES, to be more inclusive of anecdotes and images.

Brand cards were not accessible and needed to be enlarged.

>> Making the brand cards appear in a pop-up allowed for the addition of a store image and clear navigation away from the card.

IMPACT

As there were no business goals, I measured the success of this website by following up with my testing participants to understand their impressions of the website and what kind of branding they perceive.

What participants said when asked, "In your words, what is the purpose of this website?"

"It's a tribute website...respectful to a family legacy."

"To archive Horaya because it closed down...and celebrate everything that it offered. Also to introduce ACCO, even though Horaya closed down, they [users] can go to ACCO instead."

"Informational website for information about Horaya company and anyone interested can be referred to the affiliate company ACCO."

WHAT'S NEXT

Horaya will continue to be a personal project. Here are the next steps I envision for this responsive website.

Design the remaining pages
- PEOPLE : Biographies of the founders of Horaya
- MEMORIES : Image gallery and personal anecdotes
Translate the entire website: Create Japanese version
Developer handoff

KEY LEARNINGS

When my grandmother passed away and the Horaya business closed earlier than anticipated, I felt an enormous sense of loss in motivation to continue with my UX design studies. I became especially resistant to pursuing this project because I felt my purpose for designing the website disappeared.

What helped me to overcome this resistance was to allow myself to let go of my own expectations as well as the initial visions that I had for this website.

The biggest example of this was pivoting toward designing the website in English. While the company and all of its archives are in Japanese, going through the act of translating everything into English helped me to better manage and organize the story that I wanted to tell.

Given my personal relationship with Horaya, I felt a great responsibility to represent the company in an authentic way. I realized that I could achieve this effect better in English - and though it's not in its native language, that was OK.

With the amount of information I had, it was challenging to distill and choose what to present. I had to trust that I had all the right pieces that I needed to tell the story.

Landing with the purpose of the product was key to its creation.