演示|一個交互設(shè)計師從接收需求到產(chǎn)出的過程

12 評論 17168 瀏覽 250 收藏 10 分鐘

從接收需求到產(chǎn)出?這過程中到底經(jīng)歷了什么?不妨來閱讀本文作者的文字,一起來了解了解吧~

項目背景

公司在二月初新上線了一個微商訂貨系統(tǒng),由于是V1.0版本,而且還是試運營階段,所以當(dāng)時產(chǎn)品經(jīng)理的精力都放在了搭建V1.0版上面,直到運營總監(jiān)驗收的時候,又提出了一個新的需求,經(jīng)過產(chǎn)品經(jīng)理與運營總監(jiān)的溝通之后,我接到了一個V1.01的需求文檔,內(nèi)容如下:

【需求概述】

商品,增加商品類型,分為普通、贈品兩種。贈品可下單購買,也可根據(jù)訂單金額及對應(yīng)代理級別配贈率贈送。可按照代理級別,設(shè)置對應(yīng)級別的配贈率。當(dāng)代理下單購買普通類型或贈品類型商品,配贈條件滿足時,在支付訂單前提供選擇贈品操作,代理可選擇配贈金額范圍內(nèi)的任意贈品,也可不選擇;選擇贈品,并支付成功后,對應(yīng)訂單增加配贈商品信息。

注:配贈金額=訂單面價金額×對應(yīng)等級配贈率。

交互設(shè)計師收到需求后,進(jìn)行了深入解讀,并通過跟產(chǎn)品經(jīng)理經(jīng)過口頭的溝通后,做了一個業(yè)務(wù)需求的分析,如下:

  • 業(yè)務(wù)需求:增加商品滿額配贈功能,根據(jù)代理等自行選擇滿足條件的配贈商品
  • 業(yè)務(wù)目標(biāo):代理能直接線上快捷直觀的選擇滿足條件的配贈商品,節(jié)省倉管人員二次下單核對時間
  • 業(yè)務(wù)目的:提升業(yè)績,利用贈品,刺激代理提升單筆訂單金額
  • 衡量指標(biāo):單筆訂單金額提升率
  • 用戶行為:選擇滿足條件的配贈商品

拿到業(yè)務(wù)需求,我們需要做一個使用場景的分析,為什么呢?是為了梳理流程、判斷邏輯啊,看一下自己的預(yù)想有沒有漏洞或不合理的地方。

目標(biāo)用戶:某護(hù)膚品牌微商代理

年齡:18-40占絕大多數(shù)

性別:女性占98%

職業(yè):微商

設(shè)備:iphone及以上

場景描述:某天,代理a在清點倉庫庫存的時候,發(fā)現(xiàn)最近熱銷的某品牌商品庫存都不多了,想著,到時候缺貨會影響自己的銷售及客戶的滿意度,暗想著,要再進(jìn)些貨才行,于是她對庫存不足的商品進(jìn)行了一下盤點,盤點完畢后,她拿出手機(jī),將需要訂貨的商品一一加入購物車,加入完畢后,她核對了一下商品的金額,正準(zhǔn)備點“支付“按鈕進(jìn)行付款,忽然看到付款按鈕上方有一條提示,說”還差500元就可獲得免費贈品“,她心一動,反正要買,只要加500塊錢,就能免費獲得贈品,有何不可?于是她當(dāng)即便在某一商品下面增加了數(shù)量,滿額后,提示文字就變成了”可獲得免費贈品“,確認(rèn)金額后,她立即點了支付按鈕,來到確認(rèn)訂單的頁面,快速瀏覽了一下自己的收獲地址及信息,便趕緊看獲得什么樣的贈品,果然,在支付的上方又看到了配贈說明的提示,提示我”選擇贈品“(這里說明一下,之所以將提示語都放在同一位置,是為了讓前面界面的視覺路徑在同一水平點上,使頁面結(jié)構(gòu)更整潔),點擊進(jìn)入”選擇贈品“界面,參照頁面給出的贈品金額提示,選擇了想要的贈品,由于選擇的贈品太多,從上下拉到下瀏覽起來效率太低,于是她又點擊了按鈕”已選贈品“進(jìn)行復(fù)核了一遍,確定完畢后,回到確認(rèn)下單的頁面,便滿意的點擊了”支付“按鈕,發(fā)現(xiàn)金額與未選贈品前的金額一致,便放心的提交了訂單,訂單支付完畢后,引導(dǎo)代理來到了訂單列表頁面,上面還特意標(biāo)明了”含贈品“字樣提示,a點擊進(jìn)去再次看了一下所購的商品及贈品,準(zhǔn)確無誤會,抱著愉悅的心情關(guān)閉了應(yīng)用與手機(jī)。

通過場景的描述及結(jié)合V1.0版本的購物流程,對我輸出了一個詳情的需求說明,文檔包含具體哪些界面會有所改變,涉及到哪個界面,及新增哪此頁面,如下:

1、商品列表及商品詳情,贈品類型的商品須顯示對應(yīng)圖標(biāo);

2、贈品類型商品同普通商品一樣可正常下單購買;

3、購物車,根據(jù)代理當(dāng)前所選商品的總面價金額及當(dāng)前代理對應(yīng)配贈率,如果配贈金額不為0,則顯示相應(yīng)配贈金額及提示信息(若當(dāng)前配贈金額暫不足以購買系統(tǒng)當(dāng)前上架的任意贈品,則顯示提示信息:“還差××就可獲得免費贈品”;若當(dāng)前配贈金額可購買系統(tǒng)當(dāng)前所有上架贈品中的任一贈品時,則顯示提示信息“可獲得免費贈品”);如果配贈金額為0,則不顯示相應(yīng)配贈金額及提示信息。

4、確認(rèn)訂單界面,若當(dāng)前配贈金額可購買系統(tǒng)當(dāng)前所有上架贈品中的任一贈品時,則提供選擇贈品操作項。未選擇贈品時,操作項顯示配贈金額、及“選擇贈品”文案。已選擇贈品時,若配贈金額-已選擇贈品的總面價>0,操作項顯示“已選擇××元贈品,還可選擇××元”;若配贈金額-已選擇贈品的總面價=0,操作項顯示“已選擇贈品”。點擊操作項進(jìn)入選擇贈品列表。

若當(dāng)前配贈金額暫不足以購買系統(tǒng)當(dāng)前上架的任意贈品,則不提供選擇贈品操作項;

5、選擇贈品列表,列表顯示當(dāng)前配贈金額可購買的所有已上架的且?guī)齑娌粸?的贈品類型商品,用戶可點擊選擇,也可取消選擇,當(dāng)前選擇的贈品總面價金額=配贈金額時,不可再繼續(xù)選擇更多(若再點擊選擇贈品,則提示“不能再選擇更多了”);提供顯示選擇提示信息“還可選擇××元贈品”(××為配贈金額-已選配贈商品總面價)、“查看已選贈品”操作、“確認(rèn)”操作。

點擊“查看已選贈品操作”,可彈出浮框列表顯示當(dāng)前已選擇的贈品信息。浮框提供關(guān)閉按鈕,可點擊關(guān)閉浮框;

點擊“確認(rèn)”操作,確認(rèn)當(dāng)前已選擇的贈品信息,返回確認(rèn)訂單界面。

6、個人中心,增加顯示當(dāng)前代理的配贈率信息。

7、訂單列表,若對應(yīng)訂單含有配贈商品信息(注:如果只是正常下單購買的贈品類型的商品,則同普通商品訂單。此處指的是確認(rèn)訂單時根據(jù)配贈金額范圍免費選擇的配贈商品),則顯示“含免費贈品”標(biāo)簽;

8、訂單詳情,若對應(yīng)訂單還有配贈商品信息(同7),則列表顯示用戶選擇的免費獲贈的商品信息(注:正常下單購買的贈品類型商品,顯示在同普通商品位置。這里只顯示確認(rèn)訂單時選擇的免費配贈商品),并顯示總的免費配贈金額信息。

其實,通過上面這個需求說明,相信已經(jīng)闡述的非常清楚了,但是能這樣發(fā)給UI設(shè)計師嗎?不能,為什么呢?因為,在做的過程中,UI設(shè)計師大多數(shù)不會考慮個中的邏輯,而且給一長串又長又臭的文字給他們,相必都會厭煩,從而導(dǎo)致一些邏輯上對不上或造成用戶體驗方面的其它漏洞,下面給大家看一下,交互設(shè)計師輸出的原型及交互說明吧!

流程設(shè)計

交互說明

小結(jié)

一個完整的需求從接收到輸出就完成了,在這里,任何一個需求(不管大小),都需要通過精密的分析及推導(dǎo)而來,切不可直接拿到需求就出原型,我們的文檔不僅要滿足用戶需求,滿足用戶體驗,還要能夠有理有據(jù)的說服專業(yè)人士,說服需求的提出者。

 

本文由 @虞小姐?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 想請教前輩一個問題,流程上用戶點擊【結(jié)算】后會進(jìn)入到「訂單確認(rèn)頁」,在這頁底部有贈品選擇的入口,那么如果用戶沒有進(jìn)這個入口,配置贈品是不是就跳過了,這個贈品是不是就不配置了?如果在他點擊【結(jié)算】后判斷用戶是否有可配置的贈品,如果有,直接進(jìn)入到「配贈商品頁」讓用戶選擇配贈商品,如果沒有直接去「支付」頁。這樣的話可以嗎?

    來自廣東 回復(fù)
  2. 請問一下交互稿中的箭頭和圓是怎么來的?求回復(fù)

    回復(fù)
    1. Ctrl+3 切換到連接 畫一下 修改下箭頭樣式 即可。

      來自上海 回復(fù)
  3. 額,用戶應(yīng)該可以提前知曉贈品吧,萬一你們送她根牙簽?zāi)?/p>

    回復(fù)
    1. 這個贈品是用戶直接根據(jù)代理等級所分配的配贈率自己選擇贈品的呢,后臺都會給計算出會獲得多少錢的贈品,然后自選贈品(會有贈品的一個列表)

      來自廣東 回復(fù)
  4. 感謝分享。
    1. 購買失敗后流程中斷了, 那我從那里可以重新買剛才選擇好的物品呢?
    2. 圖片中訂單列表出的交互說明里 應(yīng)該是含有而非還有。
    3. 我讓白雪公主魔法套誤導(dǎo)了 ⊙﹏⊙‖∣
    哈哈 ~

    來自上海 回復(fù)
  5. 我想問一下你會做動效演示嗎?還是說直接給到開發(fā)的是上面的交互說明。我一直在工作中有這個困惑,做動效吧,可能開發(fā)有的沒有點擊到,直接給交互說明,又沒有效果呈現(xiàn)。

    來自江蘇 回復(fù)
    1. 常用動效也就那幾種,沒必要做,如果有特殊動效要求可以做出來,但是得跟緊開發(fā)實現(xiàn)效果,避免返工。

      回復(fù)
  6. 那個 交互圖 是用什么做的啊?

    來自廣東 回復(fù)
    1. Axure

      回復(fù)
  7. 可以哦!整體分析,思維邏輯都很不錯哦 ,不過有個小建議:流程圖中,如果支付未能成功的話,一般 不會以購物失敗告終,應(yīng)該要有云因提示和重新支付的邏輯鏈。也有可能是我不了解你們的業(yè)務(wù)流程,就是有點疑惑

    來自四川 回復(fù)
    1. 是的,跟產(chǎn)品業(yè)的業(yè)務(wù)流程有關(guān),考慮到用戶群是微商人群,一般都是在有網(wǎng)絡(luò)的地方進(jìn)行操作,支付的金額也是預(yù)先沖在個人等級帳號內(nèi)的,支付失敗的這種異常狀態(tài)會出現(xiàn)的頻率較低,所以,簡化的這部分流程,感覺太雞肋

      來自廣東 回復(fù)