2022 Satie Chou Portfolio _ UI & UX design

Page 1

1 Poya Beauty & Daily Shop Service Design 寶雅美妝生活店服務設計 2 POYA Pay APP Optimization 寶雅支付 App 優化提案 3 Consumer Perception to Interface Design of Food and Farming Webpages 消費者對食農網頁介面設計之感受 4 Nonon Food & Agriculture App Design 農農食農 App 設計 p 2 p 12 p 18 p 26
寶雅美妝生活店服務設計 Poya Beauty & Daily Shop Service Design 寶雅美妝生活用品店,截至 2018 年 2 月共展店 180 間,賣場平均面積 400 坪,提供大坪數購物場所,目標客 群以 15-49 歲女性為主,以提供豐富的消費樂趣為目標,提供真誠貼心的服務。 Poya Beauty & Daily Shop has expanded 180 stores since Sep. 2018. Each of the area is 10 thousand sq. ft. on average. By offering such large shopping space, 15-49 years old female as target customer, Poya aims to make customer here have rich experiences of fun and services of sincere.
UX Research 調查研究 挖掘問題 DISCOVER1 實地請受測者進行購物行為,購物中以放聲思考、購物後以半結構式訪談法,了解顧 客在購物歷程中的感受。 Having the participants shopping in Poya stores. Using Think-aloud method during the shopping process, and half-structural interview after the shopping to understand how customers� feeling during the process. Field work 實地調訪 實地調訪紀錄,共�� 8 人 Shopping research at Poya. 8 participants in total.

Impulsive shoppingShopping with purpose

Time saving

Shopping for leisure

UX Research 調查研究 定義問題與顧客 DEFINE2 Metrix
(Career Moms)

Persona

customer

分析受測者的購物習慣,每月購物預算為縱軸,以「是否會購買規劃外的商品」為休閒程度,設為橫軸, 將客群分為四類。將四類顧客消費行為,與寶雅品牌理念、經營策略對應後,最終將「逛街紓壓享樂族」 設為主要的目標客群,「衝動購物學生族」設為次要目標客群。 To analyze the customers� shopping habit, we set shopping budget per month as the vertical parameter of the metrix, and leisure/target-oriental shopping as the horizontal parameter. The leisure/target-orient shopping behavior is defined as �Whether the
would buy something which was not on their shopping lists�. The metrix divides the participants into 4 genres. After comparing the customer behavior with Poya�s branding and operating strategy, we set the �shopping for leisure and hedonic� customers as the main TA, �impulsive buying students� as the secondary TA.
How Might We Defining Workshop UX Research 調查研究 定義問題與顧客 DEFINE2 How Might We How might we improve sense of novelty and satisfaction for urban female customer during the shopping process? 如何提升都會女性購物過程中的新鮮感與滿足感 ? 橘色便條紙為主要痛點 Orange stick-its are the critical pain points
情境提案 DEVELOPE3 3 大痛點歸納 Critical Pain Points 9 大服務情境提案 Service Scenario Proposals "Won't go this shop particularly to buy something."「不會特別想去該店買東西。」 "There's no interesting things to see."「沒有讓人眼睛一亮的商品。」 "Those testers are little dirty." "The removers seem to be not clean," "I bought the wrong color because the former customer put it in the wrong place." "I have to wait in line to use the removers." 「試用品感覺髒髒的。」 「卸妝用品亂七八糟,感覺不太衛生。」 「前一個人放錯試用品,害我買錯顏色。」 「使用卸妝用品要排隊。」
UX Research 調查研究 提案測試 DECLARE4 狩野分析 KANO Analysis 淨推薦指數 NPS
結論與建議 Conclusion 根據狩野分析和 NPS 分數,此次提案顧客大部分認為可以提升寶雅的品牌魅力。建議可以優先實行「試用品福袋販 賣機」、「裝好妝滿限定專區」,以及「生理期貼心小禮」,來提升品牌形象,達到貼心服務女性顧客的目標。 然而此次線上調查,對象年齡層為 20-24 歲學生族群居多,可能因此,針對促銷的提案大部分顧客認為很有趣,但 不會特別推薦,未來可再針對上班族女性進行調查,對了解寶雅女性顧客特性,以及增進寶雅服務品質將有所幫助。 According to Kano analysis and NPS score, we found that most of the customers thought the proposiitons would help raise the Poya brand more fascinating. That we suggest the "Randomized tester selling machine", "Cosmetics buffet", and "Period gifts" priority excecuted, to raise the impress of brand and provide the best service to female customers. However, the sample of online survey this time were 20-24 years old female mostly, which are most students thus make some of the promotion propositions recognized fun but not recommended. To uderstand more about the customers of Poya, more female worker included in the sample would be suggested. 「試用品福袋販賣機」、「裝好妝滿限定 專區」,以及「生理期貼心小禮」情境提案。

Pay APP Optimization

UI Design 介面設計 寶雅支付 App 優化提案 POYA

How Might

What Who

Define Problem Solution Persona 3 大痛點歸納 Critical Pain Points Where When 1. 不在店內購物時 2. 在寶雅店內購物時 想購物時 When want to go shopping. When I'm not in the shop. When I'm in Poya. While the trends of App shopping and browsing are growing, Poya could offer more interesting information and service to raise the sense of novelty of the brand. 使用 App 購物、逛街趨勢上升,可以�由 App 提 供更多有趣的資訊和服務,提升寶雅品牌新奇感。 手機 App 逛街紓壓的女性族群 Female who go shopping for leisure. Phone application Why Add shopping service to pay app. Add beauty critic function. Build social community. Add Illustration to make pages more pleasant to see. Redesign the layout to make the user feel comfortable. 1. 支付 App 結合商品購物功能 2. 運用插畫增加畫面趣味性 3. 美妝評論功能建立線上社群 4. 介面資訊整理及美化 How
"Won't go this shop particularly to buy something."「不會特別想去該店買東西。」 "There's no interesting things to see."「沒有讓人眼睛一亮的商品。」 "Those testers are little dirty." "The removers seem to be not clean," "I bought the wrong color because the former customer put it in the wrong place." "I have to wait in line to use the removers." 「試用品感覺髒髒的。」 「卸妝用品亂七八糟,感覺不太衛生。」 「前一個人放錯試用品,害我買錯顏色。」 「使用卸妝用品要排隊。」
We 如何提升都會女性購物過程中的新鮮感與滿足感 ? How might we improve sense of novelty and satisfaction for urban female customer during the shopping process?
14 Wireframe
15
16 Function 1 : e-payment Function 2 : stock confirmation Prototype
17 Function 3 : browsing cosmetics disscussion and leave critics
18 台科商設碩士生 周倢宇 InstructorDesigner 柯志祥 副教授 UX Scholar Research 學術研究 Consumer Perception to Interface Design of Food and Farming Webpages 消費者對食農網頁介面設計之感受 Research Purposes 1) 網站氣氛線索是否能使消費者產生流暢體驗 驗證流暢體驗是否為中介變數,能夠影響消費 者購買意圖及滿意度 2) 比較不同的食農購物網站設計因素差異 並了解設計因素如何影響網站氣氛線索 3) 比較不同的食農購物網站的網站氣氛線索差異 並了解增進消費者購買意圖及滿意度的因素, 以提出設計建議

本研究目的於前期針對現有食農網站進行探索,以質性研

究方法找出可能影響消費者行為的重要設計因素。而後針

對設計因素進行實驗與問卷調查,以量化研究方法初步驗

證設計因素和氣氛線索,是否能對消費者行為產生影響。

進一步收斂關鍵的設計因素後,依據實驗結果,參考現有 食農網站,設計以色彩對比度為操作變數的三個實驗網頁。

最後階段,再次以實驗蒐集問卷資料,驗證不同色彩對比

度的網頁,是否改變了氣氛線索,並對消費者產生影響。

根據本研究實驗結果,流暢體驗作為部分中介變數,對消 費者購買意圖和消費者滿意度具有影響力,但還受到其他 因素的影響。以食農網頁介面而言,色彩對比度能 夠影響 消費者行為,並且對消費者滿意度的影響,大於消費者購 買意圖。本研究提出未來食農網頁的設計建議有:

1) 產品照片色彩應以中低對比度至中對比度較適宜,並輔 以小面積色彩強烈的文字或圖示。

2) 食農網頁整體色調以明亮、清淡較為適宜,以符合清新、 舒適、自然的印象較佳。

3) 中高色彩對比度可能讓消費者對產品品質產生疑慮,或

The purposes of this study were to firstly explore existing food and farming websites through qualitative research methods to find out important design factors that had possible impacts on consumer behaviours. Subsequent quantitative research methods including experiments and questionnaire surveys were used to verify whether design factors and atmospheric cues could have impacts on consumer behaviours. After further convergence on key design factors by experimental results, three experimental webpages with manipulated variables of color contrast were designed on the basis of existing food and farming websites. Finally, experimental and questionnaire data were collected to verify whether webpages with different color contrasts could change atmospheric cues and influence consumers.

According to experimental results of this study, flow experience as a partial mediator had an impact on purchase intention and consumer satisfaction, which were also affected by other factors. Color contrast of food and farming webpages interface could have an impact on consumer behaviours. The impact on consumer satisfaction was higher than on purchase intention. This study proposed future design suggestions for food and farming webpages were as follows.

1) The color of product pictures in medium low to medium contrast would be more appropriate with small-sized and strong color texts or icons.

2) Bright and light tints and shades were more appropriate for food and farming webpages that gave the impression of freshness, comfort, and nature.

3) Medium high color contrast could cause consumers to cast doubt on product quality, or distracted them while using the website with the result of bad experience.

4) The background of food and farming webpages should be in achromatic or neutral colors, bright, without distracting the reading of text.

5) It was suggested that the whitespace of food and farming webpages should be at least 30% of layout, while design consideration should enable users feel comfortable in browsing.

使用網站上較分心而導致體驗不佳。 4) 食農網頁背景色彩應以無色或中性色,並且明亮,不干 擾文字閱讀為主。 5) 建議食農網頁留白量至少應佔 30% 的版面,設計時應 以瀏覽舒適為考量。

Research Models & Hypotheses

Process & Method
Literature Review S-O-R model Research Overview

H1. 資訊豐富度能夠正向影響消費者流暢體驗

H2. 資訊內容效能能夠正向影響消費者流暢體驗

H3. 網站娛樂性能夠正向影響消費者流暢體驗

H4. 消費者流暢體驗能夠正向影響消費者購買意圖

Experiments

Experiment Design & Sampling

H5. 消費者流暢體驗能夠正向影響消費者滿意度

H6. 流暢體驗為三個氣氛線索因素與消費者購買意圖的中介變數

H7. 流暢體驗為三個氣氛線索因素與消費者滿意度的中介變數

H8. 介面設計因素能夠正向影響消費者流暢體驗

Models & Hypotheses

KJ method tests

22
Pilot test
Stimuli: 3 existing webpages Stimuli: 3 made-up webpages color-contrast as independent variable explore the critical variable of webpages Pre-test Post-test
24 Analysis Model Analysis
25 Conclusion 中色彩對比度網頁使用經驗滿意度最高 「我對這個網站的使用者經驗感到滿意」 中色彩對比度網頁平均得分最高,中高色彩對比度網頁得分最低。 多數消費者對中高對比度網頁感受較不舒適 「看到照片比較濃烈一點,整體來說比前面兩個不舒適」 「無法忍受那個配色,和資訊不一致」 對感受較舒適且得分最高的中對比度網頁,沒有提出正面評價 「色彩對比度太大的怪怪的會很干擾,對比度太低不好不壞」 消費者難以直接指出何謂「感覺舒適的色彩對比度」 「影響想要使用的意願,喔如果他攻擊性很強我就會不想用。」 消費者喜歡色彩對比度舒適的網頁,色彩對比度也對使用經驗滿意度有所影響, 但消費者難以直接指出何謂「感覺舒適的色彩對比度」。 適宜的色彩對比度, 對消費者的滿意度是較為隱性的因素 此處更仰賴設計師的專業決策,也是食農電商在建置網站時應該注意的因素。

&

UI Design 介面設計 Nonon Food
Agriculture App Design 農農食農 App 設計

Persona - Customer

Define Problem

Persona - Food Seller

Online Value Proposition Workshop Interview Define Problem Atendee Food Seller1 Food Seller2 Designer 目前和顧客的互動方式? 對目前的服務方式有沒有什麼建議? 現在的顧客都是什麼樣的人?職業?家庭關係?認同? 對目前的空間有沒有什麼建議? 「氣氛吸引、熟客代訂、朋友分享、推薦,氛圍比較沒有那麼 都市化,比較有人情味,比較有機。 客人要衝去接小孩,觀察媽媽們的生活習慣,時間壓力、需求, 讓他可以順利的拿到東西,預購取貨的問題,不完全是在買賣, 自然而然的關心他們,順著他們的需要來說。」 「老��可�� 3C 使用上沒那麼行。 也許可以針對這個計畫在店門口放個文宣 ( 周行程出品物 ) 或提 早在群組內預告,門口的空間就是你們的最佳看板。可以多拉一 些對你們感興趣的路人到群組內,長輩多費心引導、說明、教學。 像我今天遇到社區的爺爺,就分享給他一顆桃子,想說也是認識 你們的機緣。」 「 (Line 群組 ) 共 400 多人,代表家庭,年輕家庭,60-70 歲, 50-60 歲,小孩國中、國小、學齡前,年紀太大的不 是客群,三代同堂比較少,但可能是住附近,蠻樂於分享產 品,介紹給同事和朋友,代訂,在團體裡有一定的影響力。 年長老齡化照顧問題,不同城市的小孩會幫媽媽們訂購,女 兒代表幫忙訂,爸爸媽媽透過實體店,或是電話購買,變成 一種家庭互動方式。」 「觀察到一個有趣的現象,每個踏入這個店裡的人都有種被 歡迎和信任的放鬆態度,也許你們覺得只是職業反應。 但大家進到這個空間都變得活生生的。」

pan-demic of Covid-19, the needs of buying vege-box

raising.

to be a win-win stratagy both to the small-hold farmer and consumer, and App will proved a smooth process

services

community to consumer.

Solution Where When 不在店內購物時 需要補充購買食物時 When need some food supply. Provide convenient process online, and human service offline. Provide information about food. Provide a more convenient online channel. When I'm not in the shop. During
is
Online
seems
and
疫情期間訂購蔬菜箱的需求增加,線上服務對小 農而言是機會,對消費者而言是方便的管道, App 則可以建立順利完成服務,以及交流的平台。 手機 App 需要照顧家庭的女性族群 Female who are the main person take care of family. Phone application Why 1 提供更方便使用的線上交流管道 2. 提供關於食物來源的資訊 3. 線上提供方便的流程,線下提供 有人情味的服務方式 How What Who 如何向消費者販售一種可以共生的生活提案 ? How might we sell a co-living lifestyle to customer ? How Might We Case study
Function 1 : Subscribe farmers Prototype
Function 2 : Recieve food news by notice Function 3 : subscribe food-box
Function 4 : Find nearest selling spot
Function 5 : Analyse my own food fluctuation

Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.