Asahi Imports is a Japanese grocery store located in central Austin, Texas. It has a passionate following, over fifty years’ history, and strong business growth. But its website is showing its age, and not hitting its full potential.

Asahi Imports是位于德克薩斯州奧斯汀市中心的日本雜貨店。 它擁有五十多年的熱情追隨者，并擁有強勁的業務增長。 但是它的網站顯示了它的年齡，并沒有充分發揮其潛力。

I saw an opportunity to push myself, two months after committing to my career change into product design.

在致力于將職業轉變為產品設計兩個月后，我看到了一個推動自己的機會。

So over a 5-day sprint, I assumed the role of UX designer, and challenged myself to redesigning Asahi Imports’ website, refreshing its online brand in the process.

因此，經過5天的沖刺 ，我擔任了UX設計師的角色，并挑戰自己重新設計Asahi Imports的網站 ，并在此過程中刷新其在線品牌。

挑戰 (The Challenge)

When you land at Asahi Imports’ website, you have to figure out how to proceed — there’s no flow or suggested progression. It also looks inactive; and appears to run on an older Wordpress theme.

當您進入Asahi Imports網站時，必須弄清楚如何進行-沒有流程或建議的進度。 它看起來也不活躍； 并且似乎在較舊的Wordpress主題上運行。

I saw three challenges:

我看到了三個挑戰：

1. To create a new online style based on established company branding
   根據已建立的公司品牌創建新的在線樣式
2. To establish a clear identity for the website
   為網站建立明確的身份
3. To redesign Asahi Imports’ website for modern expectations
   重新設計Asahi Imports網站以實現現代期望

Here’s how I did that.

這是我的做法。

＃1：品牌重塑 (#1: Rebranding)

What made this challenge fun was who I was rebranding: An old shop, proud of its Japanese heritage. I embraced the old, making only minor tweaks to typography and color.

是什么讓這個挑戰的樂趣是誰我是重塑品牌：一個老店，其在日本的傳統感到自豪。 我擁護舊版，只對版式和色彩進行了些微調整。

版式 (Typography)

Sans serif was the brand precedent, tends to be easier to read on screens. I chose Lato as the workhorse, being a handsome type with many weights. And for the header type, I picked Alegreya Sans as a professional-yet-quirky type. (See: Reflections for further Alegreya Sans commentary.)

無襯線字體是該品牌的先例，在屏幕上往往更易于閱讀。 我選擇了拉托作為主力，這是一個重量很輕的帥氣型。 對于標題類型，我選擇了Alegreya Sans作為專業但又古怪的類型。 (請參閱：關于Alegreya Sans進一步評論的思考 。)

顏色 (Color)

At first, I pulled straight from the logo. White, black, and red — traditional Japanese colors.

起初，我直接從徽標中撤出。 白色，黑色和紅色-傳統的日本色彩。

But it occurred to me they were missing a color from their palette, one critical to the user experience. The missing color was blue; and it was critical because when a customer visits Asahi Imports, it was the very first color they saw. It was the sign above their storefront.

但是在我看來，他們的調色板上缺少一種顏色，這對用戶體驗至關重要。 缺少的顏色是藍色。 這很關鍵，因為當客戶訪問Asahi Imports時，這是他們看到的第一種顏色 。 這是他們店面上方的標志。

Then I got an idea.

然后我有了一個主意。

In Japan, merchants and shopkeepers adorn their entrances with special curtains called noren. It’s a practice hundreds of years old, usually accompanied with a name, sigil, or slogan.

在日本，商人和店主用稱為noren的特殊窗簾裝飾入口。 這是一種已有數百年歷史的習俗，通常伴隨著名字，名稱，口號或口號。

And while Asahi Imports doesn’t hang a noren above its door, that blue sign on the strip mall reminded me of a noren.

雖然朝日進口公司(Asahi Imports)不在門上懸掛了門簾，但脫衣舞場上的那個藍色標志使我想起了門簾。

It had to be the site header! I could see it in my head: The serene header welcoming the visitor, replaced by a practical, fixed navigation bar as the visitor “entered” by scrolling down.

它必須是網站標題！ 我能在腦海中看到它：寧靜的標題歡迎訪客，而當訪客向下滾動“進入”時，取而代之的是實用的固定導航欄。

The site’s aesthetic was set. Now it needed a purpose.

該網站的美學已經設定。 現在它需要一個目的。

＃2：網站身份 (#2: Site Identity)

Asahi Imports’ website lacked a central goal. At first, I felt centering the site around a product catalogue — funneling users to the curbside pickup service — was the way to go. But to my surprise, users were happy with the process as it was, forcing me to make a pivot.

朝日進口公司的網站缺乏主要目標。 剛開始，我覺得將網站集中在產品目錄的中心(將用戶吸引到路邊的取貨服務)是必經之路。 但是令我驚訝的是，用戶對此過程感到滿意，這迫使我做出了關鍵性的決定。

研究成果 (Research & Findings)

• My time limit required a quick turnaround on user research, so surveys and interviews were not an option.
  我的時間限制要求快速解決用戶研究問題，因此無法進行調查和訪談。
• Pouring over the 26 most recent customer reviews on Facebook and Yelp, the online ordering experience was praised across the board.
  在Facebook和Yelp上瀏覽了26條最新的客戶評論后，在線訂購體驗受到了廣泛好評。
• My hypothesis was wrong — users were happy with the curbside pickup ordering process. I believe “if it ain’t broke, don’t fix it,” so I brainstormed to find a new goal.
  我的假設是錯誤的-用戶對路邊的取貨訂購過程感到滿意。 我相信“如果還沒有解決，就不要解決它”，所以我集思廣益，尋找新的目標。

連接點 (Connecting the dots)

• I knew that Asahi Imports’ website needed to compliment the company’s social media, not compete with it.
  我知道Asahi Imports的網站需要補充公司的社交媒體，而不是與其競爭。
• It was compare and contrast: Social media feeds are great for quick copy, but poor for detailed content. And a user “clicking through” the profile to the company website is likely doing so for investigative reasons.
  這是比較和對比：社交媒體供稿對于快速復制非常有用，但對于詳細內容卻不理想。 用戶出于調查的原因可能會“點擊”個人資料到公司網站。
• That lead me to the goal: Extended information.
  這使我達到了目標：擴展信息。

＃3：設計網站 (#3: Designing the website)

Though it was the desktop version of Asahi Imports’ site that inspired this entire project, in the interest of time I chose a mobile-first design.

盡管是Asahi Imports網站的桌面版本啟發了整個項目，但為了節省時間，我選擇了移動優先設計 。

• Mobile browser traffic only increases every year, and will likely continue to do so
  移動瀏覽器的流量每年只會增加，而且可能還會繼續增加
• A mobile-first approach gets the “most difficult” version out of the way
  移動優先的方法可以消除“最困難”的版本
• I wanted to challenge my design methodology, as mobile designs are a current pain point
  我想挑戰我的設計方法，因為移動設計是當前的痛點

線框邏輯 (Wireframe Logic)

• Home Page: The home page centered around the hero, promoting either the hottest new social media post, or the latest internal blog post. Beneath the hero, the Onigiri Corner would get a blurb to get the readers to check it out. (This wireframe was the most time-consuming, since it set the tone for the site, and it took some reiteration before I was happy with it.)

  主頁：主頁以英雄為中心，宣傳最熱門的新社交媒體帖子或最新的內部博客帖子。 在英雄的下方，Onigiri Corner會脫口而出，以吸引讀者進行檢查。 (此線框是最耗時的，因為它為網站定下了基調，并且在我對此感到滿意之前需要反復重申。)

• Blog: Atop the blog feed was the featured story, in its own container — this afforded flexibility in promoting a new or classic post. Below it was the latest feed; and I offset the format to keep the readers’ eyes engaged, yet retain a scannable feed.

  博客：博客供稿頂部是位于其自己容器中的精選故事，這為推廣新文章或經典文章提供了靈活性。 下面是最新的提要； 并且我調整了格式以保持讀者的注意力，同時保留了可掃描的提要。

• Onigiri Corner: This page introduced the reader to the Onigiri Corner, the company’s commissary kitchen. A menu would dominate this page, clearly informing the reader of the full menu, along with limited/seasonal availability.

  Onigiri Corner：此頁面向讀者介紹了該公司的小廚房Onigiri Corner。 菜單將在該頁面中占主導地位，顯然會告知讀者完整菜單以及有限/季節性的可用性。

結果： (The Result:)

• The main evolution from the wireframes was finding a home for the call-to-action, the curbside pickup form.
  線框的主要演變是找到號召性用語，即路邊拾音器形式。

• I wanted buttons to be red to stand out; but a filled button in the top navigation bar stood out too much. The solution was an outlined button, which didn’t dominate the bar yet drew attention.

  我希望按鈕能突出紅色。 但是頂部導航欄中的填充按鈕顯得過于突出。 解決方案是一個概述的按鈕，該按鈕并沒有占據主導地位，但引起了人們的注意。

• While I was overall happy with microcopy, I dropped the ball with the Onigiri Corner (see below).
  當我總體上對顯微鏡感到滿意時，我用Onigiri Corner(見下文)投下了球。

感言 (Reflections)

• Typography: Looking back, I probably could have gotten by with only Lato. Alegreya Sans isn’t radical enough to really warrant the inclusion — I could have just tinkered with the different weights inside Lato.

  版式：回想一下，我可能只和拉托在一起就可以了。 Alegreya Sans不夠激進，不足以真正保證將其包括在內-我本來可以修改Lato內部的不同權重。

• Mobile-First Design: I actually performed double-work, because my initial wireframes were still desktop principle on a tiny phone screen. I had to consciously pick my battles with the limitations of the mobile viewport.

  移動優先設計：實際上我做了雙重工作，因為我最初的線框仍然是在很小的手機屏幕上的臺式機原理。 我不得不在移動視口的局限下有意識地選擇自己的戰斗方式。

• Microcopy: In hindsight, I wish I had woven in just what onigiri is into the body copy. Even a quick line like “Onigiri means ‘rice ball,’ and we make a good one here at Asahi Import’s Onigiri Corner!” The line height is also unreadable — I must have been crunching here.

  縮影：事后看來，我希望將剛切好的 飯團編織到身上。 甚至像“ Onigiri意思是'飯團'之類的快速線，我們在Asahi Import的Onigiri Corner都做得很好！” 行高也不可讀-我一定是在這里工作。

• Documentation: This was the hardest part of the entire process, honestly. While the actual design sprint was only 5 days, I spent well over a week whittling down my work notes (not to mention export and format woes with images). Writing this case study was a journey in growth all to itself.

  文檔：老實說，這是整個過程中最難的部分。 雖然實際的設計沖刺只有5天，但我花了一個多星期的時間整理自己的工作筆記(更不用說導出和格式化圖像的麻煩了)。 撰寫此案例研究是一個成長的旅程。

In summary, I accomplished all my goals for the redesign and for myself. I was absolutely pushed past my comfort zone, even past wit’s end at times. But I fought through the frustration and analysis paralysis, and can honestly say I am a far stronger designer after completing this project.

總而言之 ，我完成了重新設計和自己的所有目標。 我絕對被推翻了自己的舒適區，甚至有時甚至超過了機智。 但是我克服了挫敗感和分析性的癱瘓，可以坦白地說，完成這個項目后，我是一名更加強大的設計師。

My name is Clifton Long, and I’m a sushi chef-turned-designer. Want to connect? You can find me on Instagram and LinkedIn.

我的名字叫克利夫頓·朗(Clifton Long)，我是一名壽司廚師轉變為設計師。 要連接嗎？ 您可以在 Instagram 和 LinkedIn 上找到我 。