UI/UX
7-ELEVEN
simple fit+ app
app concept
7-ELEVEN roll out the new hairstyling service for users who want to express their self-identity and build the app that matches the user's needs.
為渴望展現自我風格的用戶們，推出全新的7-ELEVEN美髮服務，並打造符合用戶需求的應用程式。
background
since 2018, 7-ELEVEN has launched a complex store that includes different types of makeup, fitness, coffee, reading, etc., and continues to be the leader of the convenience store chain in Taiwan. However, it was surpassed by FamilyMart which was ranked initially second because of the COVID-19 pandemic‘s impact. That interested me and I began to explore opportunities in the post-pandemic.
7-ELEVEN從2018年開始推出包含了美妝、健身、咖啡、閱讀等不同型態的複合店型，持續穩坐台灣連鎖超商龍頭。但面對疫情的衝擊，在2020年被原本位居第二的全家超商超越，這也引起我的興趣，開始探索在後疫情時代下的機會點。
duration
8 weeks
tool
Figma / Maze / Miro
year
2022
main role
industry research / user interview / prototype / usability testing
the challenge
create a new service that combines business strengths and the opportunity in the pandemic to provide a more convenient life for local users.
the outcome
build a hair salon app that matches the user's needs.
結合企業優勢與疫情下的機會點，為在地的用戶提供更多元的一日生活圈服務。
打造符合用戶需求的髮廊應用程式。
design process
1
research
2
define
3
4
ideation
test
5
design
industry research
collect enterprise-related information and potential industry under the epidemic to explore new opportunities in the post-pandemic.
搜集 7-ELEVEN 企業相關資訊與疫情下具潛力的領域進行分析，以探索在後疫情時代的新機會點。
7-ELEVEN has been a leading convenience store chain in Taiwan for 42 years and keeps building a community center model. However, it was surpassed by FamilyMart which was ranked initially second, because of two things in 2020. First of all, 7-ELEVEN Group’s investment in the Philippines was unable to open stores due to the impact of the epidemic, and its profits declined. In addition, in the battle of digital transformation, FamilyMart let everyone fall behind and took the lead, and the membership app was the first to reach over 10,000 users milestone, the stock price also surpassed 7-ELEVEN in one fell swoop on August 21, 2020.
during the COVID-19 pandemic, 7-ELEVEN members still contributed a considerable amount of revenue even though the market consumption is sluggish. How to find a way that is different from FamilMart has become the key issue for the future of development.
since the rise of personal awareness and social media platforms have become popular, people's demand for appearance has also increased. The body, hairstyle, and clothing accessories have become the main medium for expressing their own self-identity.
during the COVID-19 pandemic, wearing face masks has become our daily routine, many people are more willing to spend money on their hair styling because masks cover most faces instead. There is a saying that "Hair is the second face of every person", which also shows that the hair industry has great potential for the future.
7-ELEVEN 統一超商當了 42年的台灣連鎖超商龍頭，持續打造社區生活中心的模式。然而在2020年因為2件事，被原本位居第二的連鎖超商全家超越。首先，上半年 7-11 集團在菲律賓的投資，因為疫情影響無法開店，獲利衰退；另外，在數位轉型之戰中，全家讓大家跌破眼鏡，率先掌握先機，會員App率先達到破千萬用戶的里程碑，股價也在2020年8月21日一舉超越7-11。
而疫情之下，即使市場消費低迷，7-11的會員仍貢獻了相當多的營收。如何走出有別於全家的路，成為了未來發展的關鍵。
隨著個人意識抬頭、社群平台的普及，現代人對外型的關注與需求也隨之增加，我們肉眼可見的身體、髮型、服裝配件，都成為發出訊息與創造身份的主要媒介。
而在疫情的影響下，外出配戴口罩成了日常，口罩遮住了大部分的臉孔。許多人轉而更願意花錢在頭髮造型上，更有「頭髮是你的第二張臉」的說法，這也指出美髮產業將掀起一波巨大的商機。
based on the industry research, the key insight was
key insight
People have a strong desire to express their style in the post-pandemic era, so hair styling has been the focus of public attention.
7-ELEVEN actively combines its industries to create a convenient living circle and try to build a community center in people's lives.
在仍需配戴口罩的後疫情時代，人們對於展現自我風格的渴望強烈，因此頭髮造型成為大眾關注的焦點。
Launched a new hair salon life service, building on 7-ELEVEN's mission of being a community life center.
延續7-ELEVEN想成為「社區生活中心」的核心概念，
推出全新的髮廊生活服務。
self-expression brings positive feeling.
展現自我
帶來的正面感受
人們渴望展現自我意識與風格，從個體差異中獲得愉悅感、從群體中得到認同獲得安心感。
A more complete circle of daily life
更完整的
一日生活圈
結合飲食、健康、運動的simple fit概念店的7-ELEVEN，期待創造更完整的一日生活圈。
the biggest convenience store in Taiwan
門市數量
的優勢
截至2021年上半年 7-ELEVEN 門市數量達6,210家，佔全台超商之冠，滿足民眾日常生活需求。
competitive
Observe the products on the market and find out the unmet needs of users.
觀察市場上的相關產品，找出用戶未滿足的需求
direct competitor
streghts
weakness
amazon salon
amazon salon
amazon salon
amazon salon
direct competitor
amazon salon
streghts
amazon salon
weakness
amazon salon
amazon salon
amazon salon
amazon salon
amazon salon
amazon salon
user questionnaire survey
& interview
in order to get a more realistic understanding of the user's associations, I asked 30 friends to conduct interviews. The main group who have visited a hair salon are between the ages of 18 and 35.
為了更真實了解使用者的想法，我邀請30位朋友進行問卷調查，並與其中5位進行用戶訪談，主要族群為曾經上過髮廊消費的18~35歲族群。
How often do you go to the hair salon?
請問您平均多久上一次髮廊?
What type of hair salon do you visit?
請問您消費的髮廊是屬於哪種類型?
How much time do you spend on average each day with your style?
請問您目前有固定前往的髮廊嗎?
How much time do you spend on average each day with your style?
請問您通常是如何探索/接收新的髮廊資訊?
How much time do you spend on average each day with your style?
影響您選擇髮廊的主要因素是什麼? 為什麼?
How much time do you spend on average each day with your style?
請問您通常在髮廊會做什麼樣的美髮服務?
How much time do you spend on average each day with your style?
請問您過去上髮廊有什麼印象深刻的經驗嗎? 為什麼?
How much time do you spend on average each day with your style?
請問您通常會提前預約美髮行程嗎? 透過什麼管道呢?
affinity map
discover the structure and relationship in the problem.
將用戶訪談得到的資料使用親合圖整理脈絡，找出共通點。
%20%E7%B7%B4%E7%BF%92_%20Irene.jpg)
amazon salon
Based on the user interview, the key insight was
根據訪談，我得到的突破點洞見是
Based on the user interview, the key insight was. insight was insight was
好的技術，得到一次顧客光顧的機會；好的溝通，得到一段忠實而長遠的關係。
Based on the user interview, the key insight was. Based on the user interview, the key insight was
“
常常想改變髮型，但實在不知道自己的五官臉型適合什麼，只好一直維持一樣的。
”
“
Based on the user interview, the key insight was. Based on the user interview, the key insight was
有些設計師態度太過強硬、有些設計師沒有給任何建議完全依照需求剪、有些好像沒有理解我想要的風格是什麼。
”
“
Based on the user interview, the key insight was. Based on the user interview, the key insight was
當設計師給予髮型上的建議，而我需要在當下盡快決定要不要嘗試，這讓我感到有點壓力。
”
pain point
creat good
experice
獲得更多
個人化建議
creat good
experice
創造良好的
溝通體驗
creat good
experice
增加討論的
緩衝時間
personas
I created personas and empathy map to effectively grasp users’ perspectives on music streaming apps.
製作了人物誌與同理心地圖 幫助聚焦目標族群更深入了解目標族群的想法，搭配同理心地圖掌握使用者音樂流程上的體驗。
Hazel needed an app that would help her communicate with her hairstylist. Since she wants to be understood and valued, thinking of those bad communication experiences in the past always makes her feel anxious.
“
Hazel 需要一個能幫助她與髮型師之間溝通的預約整合app。因為她渴望自己被理解與重視，而想起過去那些不好的溝通經驗，總讓她感到焦慮。
”
user journey map
User Journey Map to effectively grasp users’ experience on music streaming apps.
經過描繪用戶旅程，更有效掌握使用者過程體驗。
%EF%BD%9CIrene.jpg)
how might we
I used "how might we" to realize what kind of challenge I want to do.
我選擇使用 how might we 來釐清想做的挑戰是什麼。
“
How Might We add a personalization function to reduce user's anxiety and uncertainty?
HMW 增加個人化設定功能，降低使用者心中的不安與不確定感？
”
design sprint method
I used Crazy8 to get one or a few ideas that can be transformed into prototypes
綜合以上，進行brain stornming -手繪Crazy 8 獲得三個可以轉化成原型的想法
user flow
I draw the overall process for users from the beginning of registration to the end of the experience, so as to judge the required conditions.
繪製使用者流程地圖，幫助我判斷從註冊開始到體驗結束的整個流程，片段所需條件與畫面
task flow
I draw the overall process for users from the beginning of registration to the end of experience, so as to judge the required conditions.
繪製使用者從註冊開始到體驗結束的整體流程，來標示核心內容與畫面。
initial wireframe
I created medium-fidelity wireframe after gathering ideas from sketches.
開始著手繪製了框線稿
main future
new communication
與設計師
全新的溝通模式
I created medium fidelity wireframe after gathering ideas from sketches and prepared for testing.
先討論，再預約，找到更適合自己溝通頻率的設計師。
new communication
更理解你的
個人報告
I created medium fidelity wireframe after gathering ideas from sketches and prepared for testing.
包含五官/髮性/喜好風格的個人報告，幫助設計師更具體的瞭解。
new communication
探索更多
個人風格
I created medium fidelity wireframe after gathering ideas from sketches and prepared for testing.
發現更多與自己特徵相似的人，正在嘗試的不同風格。
high-fidelity prototype
Start working on high-fidelity detailing.
著手進行高保真互動原型
I created medium fidelity wireframe after gathering ideas from sketches and prepared for testing.
整體色調以柔和氛圍為主，以Simple Fit 系列原有的藍綠色為主色，加入7-ELEVEN 品牌色橘色增添活力。
Personal Report
個人報告
I created medium fidelity wireframe after gathering ideas from sketches and prepared for testing.
使用者可以選擇開啟相機或手動設定，來紀錄個人五官特徵。
I created medium fidelity wireframe after gathering ideas from sketches and prepared for testing.
除了幫助溝通，臉部特徵功能也能幫助在疫情下需要配戴口罩，無法考量到臉型的美髮過程。
I created medium fidelity wireframe after gathering ideas from sketches and prepared for testing.
透過圖片直覺的左右滑動，幫助設計師瞭解使用者偏好的髮型風格。
Personal Report
探索新的個人風格
I created medium fidelity wireframe after gathering ideas from sketches and prepared for testing.
針對用戶偏好，推送符合的風格內容。
I created medium fidelity wireframe after gathering ideas from sketches and prepared for testing.
透過篩選器，用戶可以更快速的搜尋到符合自身需求的設計師或風格。
I created medium fidelity wireframe after gathering ideas from sketches and prepared for testing.
透過推送擁有相同特徵的人所嘗試的風格，引導用戶探索更多新的造型，建立社群中的歸屬感。
Personal Report
全新的溝通模式
I created medium fidelity wireframe after gathering ideas from sketches and prepared for testing.
先討論，後預約。用戶可以選擇兌換open point 以傳送個人報告，與設計師進行初步討論後再預約。幫助用戶找到適合自己溝通頻率的設計師、給予用戶下決定的緩衝時間。
I created medium fidelity wireframe after gathering ideas from sketches and prepared for testing.
I created medium fidelity wireframe after gathering ideas from sketches and prepared for testing.
傳送個人報告後自動跳轉聊天室，引導用戶與設計師開始對話。
預約功能設計在聊天室中，方便用戶直接預約。
usability testing
Task assigned 任務目標
From registering a new member to finding a song you are interested in, using the follow-up mode with children to complete the task.
I conducted usability testing with a wireframe to find out if people are able to complete the given tasks without any issues and find out where there was room for improvement.
進行易用性測試，幫助我了解使用者是否能夠順利的完成給定的任務，中間遇到的困難點，並找出改進的空間。
從註冊新會員到設定個人報告，探索設計師並成功預約以完成任務
WhatＩdiscovered during the testing was:
83%
Describe the item and include any relevant details. Click to edit the text.
認為「先討論再預約」的新溝通模式，對於他們很有幫助。
83%
Describe the item and include any relevant details. Click to edit the text.
認為介面資訊清楚且直覺，能夠有自信的操作App。
33%
Describe the item and include any relevant details. Click to edit the text.
提出個人報告中的喜好標籤，僅使用文字敘述較難聯想到實際風格。
what i learned & challeges
>> Find the target group 探索新觀點與訪談技巧
When looking for the target group, I found that there are too few samples of friends who meet the needs, so I started to use various methods to contact the moderators who have written recommendation articles on the Internet, or go to the PO articles of major clubs to solicit people who have used children's music apps. , also discussed with my mentor Yvon, using different aspects to cut in, and finally completed the user interview and questionnaire.
訪談與整理心智圖是我很感興趣的階段。學習如何在不同個性的受訪者中掌握訪問節奏、盡可能避免問到非開放或暗示性的問題、讓受訪者感到安心而能夠暢所欲言。整理訪談內容、依序排列、觀察與思考，最後輸出一個新的觀點，像這樣能夠挖掘出意想不到的結果的階段，讓我感覺充滿熱情。
>> Find the target group 探索新觀點與訪談技巧
When looking for the target group, I found that there are too few samples of friends who meet the needs, so I started to use various methods to contact the moderators who have written recommendation articles on the Internet, or go to the PO articles of major clubs to solicit people who have used children's music apps. , also discussed with my mentor Yvon, using different aspects to cut in, and finally completed the user interview and questionnaire.
因為這是個未來設計，沒有現成的產品可以參照，對於UX的初學者來說是一個很大的挑戰。但同時這也使我擁有更多空間與自由，根據洞察觀點來放進更多想像力，開發新的功能。
>> Find the target group 原型製作
When looking for the target group, I found that there are too few samples of friends who meet the needs, so I started to use various methods to contact the moderators who have written recommendation articles on the Internet, or go to the PO articles of major clubs to solicit people who have used children's music apps. , also discussed with my mentor Yvon, using different aspects to cut in, and finally completed the user interview and questionnaire.
這也是我首次嘗試figma，我參考了很多不同領域的產品來構思，學習如何讓介面資訊層級清楚、嘗試設計與目標群眾相符的視覺風格。在這個階段，我花了最多時間去揣摩使用者的感受，是否會感到無聊而放棄，或是成功帶來好的回饋而願意繼續點擊前進，盡可能的讓畫面流暢。