給自己的 Design Challenge 小筆記

給 Entry Level UX Designer 的設計挑戰是什麼樣子的?

Grace, Mu-Hui Yu
11 min readMar 7, 2019
閱讀時間:10 分鐘(文長慎入)。

前言

這篇文章產生的原因是我前陣子接到一個 Design Challenge,所以找了大量的文章與經驗談加以整理,想說就順便把目前的作業內容記錄下來,寫成文章,方便自己以後參考。

那麼我們就開始吧 👇

Time Spent: 10 days

Roles Assumed: User research, IxD, and a bit of Visuals

Tool used: Sketch, Marvel App, Principle

目錄

  • 簡介 Design Challenge 流程以及各步驟 Tips(感謝參考資料)
  • 我的 Design Challenge 流程與時辰

The Process

這個段落我會先走過一次整個 Design Challenge 跟注意事項,並把我參考的 case study 放在最下面。

所以什麼是 Design Challenge?

通常是 Product/UI/UX/Interaction Designer 面試時接到的作業,期限從數天到數週不等來完成一個 design project。

一、接到任務

接到問題的時候,先透過 Deadline 跟 Format 確定面試官對於這份作業的期待,如果有不清楚的地方一定要問。

像我的狀況是,1/24 收到作業內容,但是中間卡了一個農曆新年(而且還很長),所以整個作業的長度被拉到三週(what?!),交付形式也寫得很隨性,說只要 wireframe 但是又能自由發揮(?)

基本上作業長度在一至兩週內我覺得是比較合適的,三週我就......

https://i.gifer.com/7QBj.gif

後來重新跟面試官確認作業目的後,才又重新修改我本來的 schedule。

二、定義報告策略

確定了面試官的要求與期待,那麼重新回來思考。先假設三週有一週是給我過年耍廢用的(別懷疑),那麼一份兩週完成的設計挑戰,面試者是個比 entry level 還不如的實習生,那麼請問面試官的目的是什麼,想看的內容是什麼?

榮恩:我真的不知道呀!!! (Photo Credited by giphy)

我們先來猜想為什麼面試官要給我這樣的 Design Challenge 👇

  • 想掌握我的能力&會的工具/方法
  • 想了解我的思考過程&工作流程
  • 想確認我的書面表達與呈現能力

我記得在前一次面試時,面試官對我的評價是思路有邏輯、表達清楚明白、個性十分明快,但實務經驗不足,在設計 Evaluation 上仍有很多需要注意的地方,整體來說是個有潛力的人。

因此在這次的作業裡,我想要呈現的策略大概會是 👇

  • 強化縝密思考與清楚表達的印象(完整清楚表達思路與工作流程)
  • 設計上加強 Evaluation 的強度(從多角度的 Usability Testing)
  • 書面上更完整解說並佐以圖片呈現設計資訊
  • 主打自己是個有潛力的求職者
這段是依據這篇超強的文章:從理工科系走向設計諮詢(四):接到設計挑戰時該怎麼辦?還有這篇:How to evaluate a designer with a design exercise(英)

三、工作時程規劃

考慮完畢策略與期待,再思考一下我這三週實際可以用的時間,扣除過年一週回家,我大概還有約 10 天左右的時間可以處理這份作業。

此外因為這份作業內容是要在現有 App 中設計出一個完整的 feature,同時還需要考慮到 App 其他現有功能,因此 scope 會稍微大一些。

綜合以上,我對工作天的時程安排如下 👇

  • Day 1-3:Desk & User Research、問題完整定義
  • Day 4-6:User Flow & Info. Arch. & Wireframe Flow, Usability Testing
  • Day 7-9:Prototyping 與無限期循環的 Usability Testing
  • Day 10:資料整理(寫 report)
我的時程安排 (icon credited: flaticon.com)

我相信對於一個 UX designer 來說,視覺設計跟動畫效果勢必不是主要的評分點,主要還是看流程與最後線稿的呈現,當然有 hi-fi 的 prototyping 也會是一個加分點啦。總之我決定把重點放在問題定義研究與可用性測試上。

這些是我有參考的範例 👇

Designing for mobile e-Commerce - a UX design challenge from Yelp(英)Tires monitoring — a User Experience design challenge(英)Google Interaction Design Challenge: b/Baker(英)Google Design Exercise: Solving the shelter problem(英)Kugadi Design Challenge(英)

再來是我有參考的教學文章 👇

從理工科系走向設計諮詢(四):接到設計挑戰時該怎麼辦?Solving difficult design challenges? How to design complex products which you’re not familiar with?(英)Working Through Design Challenges in Product Design Job Interviews(英)据说这是最全面的设计挑战指南(簡中)交互设计师修炼指南!(簡中)一个完整的交互设计流程是怎样的?(簡中)

接下來就是整個 Design 流程。

不過因為內容需要保密,所以以下就簡單帶過流程跟工作內容 👇

The Problem

在現有 App 中設計出某一個完整的指定 feature。

在使用者研究之前,我先做了

  • Design Spec 的內容分析
  • App 現有的功能整理
  • Industrial Reviews(不知道中文怎麼翻 XD)
  • 競品分析 (Competitor analysis)
  • 設計限制 (Limitations)
  • 設計假設 (Assumptions)

使用者訪談

根據 Assumptions 選出訪談對象,列出問題,我共找了 10 個訪談者。

對於這個訪談我並沒有做 Persona,因為不適用現在的 project。關於 persona 的設計以下有一些文章可以參考:User Personas(英)How to define User Personas for your business?(英)When It Comes To Personas, The Real Value Is In The Scenarios(英)How (and Why) to Use User Personas Every Day(英)
近期也有一些重新檢討 persona 的文章:
Kill Your Personas(英)Do you build your Persona just by interviews? that may be a trouble!(英)Here’s why you should stop using Personas(英)Personas need a purpose: why you shouldn’t try to make personas that cover the whole company(英)

訪談結果完畢,整理出比較大方向的 Questions 跟 Answer,並綜合幾個訪談者繪製 User Journey Map,找到潛在 Touch Points。

A user journey map template. Image: NNGroup
User Journey Map 參考文章:第一次畫使用者旅程圖 User Journey Map 就上手初學者的 User Experience MapA Beginner’s Guide To User Journey Mapping(英)

整理 User Story 跟 Jobs To Be Done

根據訪談結果,列出 User Story,挑選後轉換成 Jobs To Be Done。

Image credits to Intercom
參考文章:Jobs To Be Done Framework(英)Jobs To Be Done theory helps you to create better products(英)What is Jobs to be Done (JTBD)?(英)

我個人覺得 JTBD 的做法還挺好的,可以讓我更聚焦在使用者的動機上,避免被使用者自己提出的解決辦法給侷限住。

當然這塊整理需求的地方,也是各家都有自己的作法,所以大家不一定要用這套方法也可以,只要能好好釐清內容就好了。

確定最終需求,開始設計 User Flow

這是我個人的習慣,我通常會在研究後,重新整理需求,並且設立目標。然後發想該有的功能,再拿著這些目標一條條檢查功能是否需要。

發想大概是照著以下的流程 👇

  • Brainstorm & Select Features
  • Create Information Architecture
  • Create User Flow
跟 User Flow 有關的參考文章:The biggest WTF in design right now(英)User flow is the new wireframe(英)跟 Information Architecture 有關的參考文章:Use Sketch to combine Wireframes and Information Architecture together(英)

Lo-fi & hi-fi Prototyping & Testing

我有做 Sketching、wireframing、mockups、prototyping,中間也都一直在做 testing,對象有 engineer、UX designer、潛在使用者等。

Testing 有 User testing 跟 Usability Testing,這個部分是用 Marvel App 跟 Principle 做 Prototyping 給使用者測試。

Mockups 資源:36 Free iPhone Mockups for 2019 [Sketch]Usability Testing 參考文章:可用性測試(Usability Testing)小撇步How to find users for your usability testHow to perform Usability testing?

寫最終報告

這大概是最麻煩的事了(惱)

https://media.giphy.com/media/LAFShX32UwUj6/giphy.gif

除了本來就要交的設計線稿,另外還要附上設計思路的資料。

因為我的資料很雜,擔心面試官會看得很不順眼,所以我後來決定將思路整理成三份文檔。

  • Executive Summary
    精簡的一頁報告,包含問題、設計流程,以及最終結果。
  • Design Slides
    含封面共 20 頁,我預設面試官只會看這份檔案。檔案包含整套設計流程,與幾個 Scenario 的展示,以及最終的 Take away。
  • Full Report/Document
    完整的設計檔案整理,包含所有訪談內容、每一個研究的整理報告、prototyping 的原始檔案、參考資料等都在裡面。
參考文章:How to write a user testing report that people will actually read(英)A UX review template anyone can use(英)

最後,就開心送出作業了。

以上都是一個應徵 Junior UX Designer 所做的預備,都是個人經驗,僅供參考,期盼大家都能完成自己的 Design Challenge!

我是 Mu,是一個 CS 出身的 UX designer。

喜歡足球、橘子、游泳,跟日本戰國。
生無大志,但求身長 155,正在努力跳繩中。
想帶著設計,走遍世界上每一個角落。

E-mailLinkedIn 都可以找到我,期待與你的相遇:)

— 覺得最近早晚溫差很大不知道怎麼穿衣服的女子 🍊

--

--

Grace, Mu-Hui Yu

I’m just a UX Designer & Researcher & iOS Engineer & BBT-holic.