案例研究设计与方法-罗伯_旭进口重新设计-用户体验案例研究
案例研究設(shè)計(jì)與方法-羅伯
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是位于德克薩斯州奧斯汀市中心的日本雜貨店。 它擁有五十多年的熱情追隨者，并擁有強(qiáng)勁的業(yè)務(wù)增長。 但是它的網(wǎng)站顯示了它的年齡，并沒有充分發(fā)揮其潛力。
I saw an opportunity to push myself, two months after committing to my career change into product design.
在致力于將職業(yè)轉(zhuǎn)變?yōu)楫a(chǎn)品設(shè)計(jì)兩個(gè)月后，我看到了一個(gè)推動自己的機(jī)會。
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.
因此，經(jīng)過5天的沖刺 ，我擔(dān)任了UX設(shè)計(jì)師的角色，并挑戰(zhàn)自己重新設(shè)計(jì)Asahi Imports的網(wǎng)站 ，并在此過程中刷新其在線品牌。
挑戰(zhàn) (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.
當(dāng)您進(jìn)入Asahi Imports網(wǎng)站時(shí)，必須弄清楚如何進(jìn)行-沒有流程或建議的進(jìn)度。 它看起來也不活躍； 并且似乎在較舊的Wordpress主題上運(yùn)行。
I saw three challenges:
我看到了三個(gè)挑戰(zhàn)：
Here’s how I did that.
這是我的做法。
＃1：品牌重塑 (#1: Rebranding)
The primary reference assets (notice the blue in the storefront)主要參考資產(chǎn)(請注意店面中的藍(lán)色)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.
是什么讓這個(gè)挑戰(zhàn)的樂趣是誰我是重塑品牌：一個(gè)老店，其在日本的傳統(tǒng)感到自豪。 我擁護(hù)舊版，只對版式和色彩進(jìn)行了些微調(diào)整。
Typography library版式庫版式 (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.)
無襯線字體是該品牌的先例，在屏幕上往往更易于閱讀。 我選擇了拉托作為主力，這是一個(gè)重量很輕的帥氣型。 對于標(biāo)題類型，我選擇了Alegreya Sans作為專業(yè)但又古怪的類型。 (請參閱：關(guān)于Alegreya Sans進(jìn)一步評論的思考 。)
Final color swatch最終色板顏色 (Color)
At first, I pulled straight from the logo. White, black, and red — traditional Japanese colors.
起初，我直接從徽標(biāo)中撤出。 白色，黑色和紅色-傳統(tǒng)的日本色彩。
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.
但是在我看來，他們的調(diào)色板上缺少一種顏色，這對用戶體驗(yàn)至關(guān)重要。 缺少的顏色是藍(lán)色。 這很關(guān)鍵，因?yàn)楫?dāng)客戶訪問Asahi Imports時(shí)，這是他們看到的第一種顏色 。 這是他們店面上方的標(biāo)志。
Then I got an idea.
然后我有了一個(gè)主意。
Top photo / Redesigned site header熱門照片 /重新設(shè)計(jì)的網(wǎng)站標(biāo)題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的特殊窗簾裝飾入口。 這是一種已有數(shù)百年歷史的習(xí)俗，通常伴隨著名字，名稱，口號或口號。
And while Asahi Imports doesn’t hang a noren above its door, that blue sign on the strip mall reminded me of a noren.
雖然朝日進(jìn)口公司(Asahi Imports)不在門上懸掛了門簾，但脫衣舞場上的那個(gè)藍(lán)色標(biāo)志使我想起了門簾。
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.
它必須是網(wǎng)站標(biāo)題！ 我能在腦海中看到它：寧靜的標(biāo)題歡迎訪客，而當(dāng)訪客向下滾動“進(jìn)入”時(shí)，取而代之的是實(shí)用的固定導(dǎo)航欄。
The site’s aesthetic was set. Now it needed a purpose.
該網(wǎng)站的美學(xué)已經(jīng)設(shè)定。 現(xiàn)在它需要一個(gè)目的。
＃2：網(wǎng)站身份 (#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.
朝日進(jìn)口公司的網(wǎng)站缺乏主要目標(biāo)。 剛開始，我覺得將網(wǎng)站集中在產(chǎn)品目錄的中心(將用戶吸引到路邊的取貨服務(wù))是必經(jīng)之路。 但是令我驚訝的是，用戶對此過程感到滿意，這迫使我做出了關(guān)鍵性的決定。
研究成果 (Research & Findings)
- My time limit required a quick turnaround on user research, so surveys and interviews were not an option. 我的時(shí)間限制要求快速解決用戶研究問題，因此無法進(jìn)行調(diào)查和訪談。
- Pouring over the 26 most recent customer reviews on Facebook and Yelp, the online ordering experience was praised across the board. 在Facebook和Yelp上瀏覽了26條最新的客戶評論后，在線訂購體驗(yàn)受到了廣泛好評。
- 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. 我的假設(shè)是錯(cuò)誤的-用戶對路邊的取貨訂購過程感到滿意。 我相信“如果還沒有解決，就不要解決它”，所以我集思廣益，尋找新的目標(biāo)。
連接點(diǎn) (Connecting the dots)
- I knew that Asahi Imports’ website needed to compliment the company’s social media, not compete with it. 我知道Asahi Imports的網(wǎng)站需要補(bǔ)充公司的社交媒體，而不是與其競爭。
- 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. 這是比較和對比：社交媒體供稿對于快速復(fù)制非常有用，但對于詳細(xì)內(nèi)容卻不理想。 用戶出于調(diào)查的原因可能會“點(diǎn)擊”個(gè)人資料到公司網(wǎng)站。
- That lead me to the goal: Extended information. 這使我達(dá)到了目標(biāo)：擴(kuò)展信息。
＃3：設(shè)計(jì)網(wǎng)站 (#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網(wǎng)站的桌面版本啟發(fā)了整個(gè)項(xiàng)目，但為了節(jié)省時(shí)間，我選擇了移動優(yōu)先設(shè)計(jì) 。
- Mobile browser traffic only increases every year, and will likely continue to do so 移動瀏覽器的流量每年只會增加，而且可能還會繼續(xù)增加
- A mobile-first approach gets the “most difficult” version out of the way 移動優(yōu)先的方法可以消除“最困難”的版本
- I wanted to challenge my design methodology, as mobile designs are a current pain point 我想挑戰(zhàn)我的設(shè)計(jì)方法，因?yàn)橐苿釉O(shè)計(jì)是當(dāng)前的痛點(diǎn)
線框邏輯 (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.)
主頁：主頁以英雄為中心，宣傳最熱門的新社交媒體帖子或最新的內(nèi)部博客帖子。 在英雄的下方，Onigiri Corner會脫口而出，以吸引讀者進(jìn)行檢查。 (此線框是最耗時(shí)的，因?yàn)樗鼮榫W(wǎng)站定下了基調(diào)，并且在我對此感到滿意之前需要反復(fù)重申。)
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.
博客：博客供稿頂部是位于其自己容器中的精選故事，這為推廣新文章或經(jīng)典文章提供了靈活性。 下面是最新的提要； 并且我調(diào)整了格式以保持讀者的注意力，同時(shí)保留了可掃描的提要。
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。 菜單將在該頁面中占主導(dǎo)地位，顯然會告知讀者完整菜單以及有限/季節(jié)性的可用性。
結(jié)果： (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.
我希望按鈕能突出紅色。 但是頂部導(dǎo)航欄中的填充按鈕顯得過于突出。 解決方案是一個(gè)概述的按鈕，該按鈕并沒有占據(jù)主導(dǎo)地位，但引起了人們的注意。
- While I was overall happy with microcopy, I dropped the ball with the Onigiri Corner (see below). 當(dāng)我總體上對顯微鏡感到滿意時(shí)，我用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不夠激進(jìn)，不足以真正保證將其包括在內(nèi)-我本來可以修改Lato內(nèi)部的不同權(quán)重。
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.
移動優(yōu)先設(shè)計(jì)：實(shí)際上我做了雙重工作，因?yàn)槲易畛醯木€框仍然是在很小的手機(jī)屏幕上的臺式機(jī)原理。 我不得不在移動視口的局限下有意識地選擇自己的戰(zhàn)斗方式。
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.
縮影：事后看來，我希望將剛切好的 飯團(tuán)編織到身上。 甚至像“ Onigiri意思是'飯團(tuán)'之類的快速線，我們在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.
文檔：老實(shí)說，這是整個(gè)過程中最難的部分。 雖然實(shí)際的設(shè)計(jì)沖刺只有5天，但我花了一個(gè)多星期的時(shí)間整理自己的工作筆記(更不用說導(dǎo)出和格式化圖像的麻煩了)。 撰寫此案例研究是一個(gè)成長的旅程。
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.
總而言之 ，我完成了重新設(shè)計(jì)和自己的所有目標(biāo)。 我絕對被推翻了自己的舒適區(qū)，甚至有時(shí)甚至超過了機(jī)智。 但是我克服了挫敗感和分析性的癱瘓，可以坦白地說，完成這個(gè)項(xiàng)目后，我是一名更加強(qiáng)大的設(shè)計(jì)師。
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)，我是一名壽司廚師轉(zhuǎn)變?yōu)樵O(shè)計(jì)師。 要連接嗎？ 您可以在 Instagram 和 LinkedIn 上找到我 。
翻譯自: https://uxdesign.cc/case-study-asahi-imports-redesign-542b9a900d90
案例研究設(shè)計(jì)與方法-羅伯
總結(jié)
以上是生活随笔為你收集整理的案例研究设计与方法-罗伯_旭进口重新设计-用户体验案例研究的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 知乎万赞：熬夜整理出的软件测试面试题大全
- 下一篇： Session超时设置