7-ELEVEN
simple fit+ app

UX/UI

首圖.png

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 企業相關資訊與疫情下具潛力的領域進行分析,以探索在後疫情時代的新機會點。

Image by Josh Chiodo

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.

7-ELEVEN 積極結合旗下產業,打造便利的一日生活圈,成為民眾生活中不可或缺的社區中心。

在仍需配戴口罩的後疫情時代,人們對於展現自我風格的渴望強烈,因此頭髮造型成為大眾關注的焦點。

launched a new hairstyling service, based on 7-11's core value of being a  community life center.

延續7-ELEVEN想成為「社區生活中心」的核心概念,推出全新的髮廊生活服務。

self-expression brings positive feelings.

a more complete circle of daily life

the biggest convenience store in Taiwan

展現自我帶來的正面感受

更完整的一日生活圈

門市數量的優勢

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?

請問您消費的髮廊是屬於哪種類型?

do you go to the same hair salon all the time?

請問您目前有固定前往的髮廊嗎? 

how do you receive the new info from the hair salon?

請問您通常是如何探索/接收新的髮廊資訊?

what makes you choose a hair salon?

影響您選擇髮廊的主要因素是什麼? 

what kind of hair services do you usually do in a hair salon?

請問您通常在髮廊會做什麼樣的美髮服務?

do you have any impressive salon experience in the past?

請問您過去上髮廊有什麼印象深刻的經驗嗎? 

have you ever gone online to book your hair appointment?

請問您通常會提前預約美髮行程嗎? 透過​什麼管道呢?

affinity map

discover the structure and relationship in the problem.

將用戶訪談得到的資料使用親合圖整理脈絡,找出共通點。

UXY 實作練習 - Copy of 親和圖 (Affi nity Mapping) 練習_ Irene.jpg
based on the user interview, the key insight was

​根據訪談,我得到的突破洞見是

if you have great technology,
it can help you attract more customers.
if you have great communication,
you will win a loyal and long-term relationship.

好的技術一次顧客光顧的機會;

好的溝通一段忠實而長遠的關係。

​“

常常想改變髮型,但實在不知道自己的五官臉型適合什麼,只好一直維持一樣的。

​”

​“

有些設計師態度太過強硬、有些設計師沒有給任何建議完全依照需求剪、有些好像沒有理解我想要的風格是什麼。

​”

​“

當設計師給予髮型上的建議,而我需要在當下盡快決定要不要嘗試,這讓我感到有點壓力。

​”

pain point

get more

customized advice

獲得更多

個人化建議

a great

communication experience

創造良好的

溝通體驗

Increase the buffer

time for discussions

增加討論的

​緩衝時間

personas

i created personas to effectively grasp users’ perspectives on hair salon 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。因為她渴望自己被理解與重視,而想起過去那些不好的溝通經驗,總讓她感到焦慮。

​”

persona-01.jpg

user journey map

user Journey Map to effectively grasp users’ experience on music streaming apps.

經過描繪用戶旅程,更有效掌握使用者過程體驗。

UXY 實作練習 - 顧客流程地圖 (Journey Map)|Irene.jpg
UXY 實作練習 - 顧客流程地圖 (Journey Map)|Irene.jpg

how might we

i chose "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 獲得三個可以轉化成原型的想法

UXY 實作練習 - 顧客流程地圖 (Journey Map)|Irene.jpg
S__21610498.jpg

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.

繪製使用者流程地圖,幫助我判斷從註冊開始到體驗結束的整個流程,片段所需條件與畫面

Frame 1.png

task 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.png

initial wireframe

i created medium-fidelity wireframe after gathering ideas from sketches.

開始著手繪製了框線稿

wire frame.png

main future

a new way of

the booking process

與設計師全新的溝通模式

the personal report

which knows you better

更理解你的個人報告

discover

the new hairstyle

​探索更多​個人風格

訊息.png
臉部特徵.png
相似風格.png

have a small talk before booking to help you find a better designer.

先討論,再預約,找到更適合自己溝通頻率的設計師。

designers can know you better by the personal report which includes your facial features, hair, and style.

包含五官/髮性/喜好風格的個人報告,幫助設計師更具體的瞭解。

discover different styles from people who have similar features to you.

發現更多與自己特徵相似的人,正在嘗試的不同風格。

mid-banner.png

high-fidelity prototype

start working on high-fidelity detailing.

著手進行高保真互動原型

catogory.png

the overall tone is soft blue and green color based on the Simple Fit collection, and I used the original orange color of 7-ELEVEN to be the highlight color that brings some positive energy.

整體色調以柔和氛圍為主,以Simple Fit 系列原有的藍綠色為主色,加入7-ELEVEN 品牌色橘色增添活力。

個人報告.png

the personal Report

個人報告

people can choose to turn on the camera or set it manually to record personal facial features.

使用者可以選擇開啟相機或手動設定,來紀錄個人五官特徵。

discover the new style

探索新的個人風格

with content personalization, users have a better experience because they see what is relevant to them more quickly and can easily explore more hairstyles on it.

針對用戶偏好,推送符合的風格內容。

探索風格.png

a new way of the booking process

全新的預約模式

users can use OPEN POINT to send their reports to designers, then having small talk before booking can give them more time to think and help them find someone whose mind is more in sync with them.

用戶可以選擇兌換open point 以傳送個人報告,與設計師進行初步討論後再預約。幫助用戶找到適合自己溝通頻率的設計師、給予用戶下決定的緩衝時間。

預約.png

design system 

colors

colors.png

typography

font

heading 1

Frame 257.png

Regular
48px

heading 2

Bold

32px

heading 3

Bold

24px

heading 4

Bold

18px

heading 5

Bold

14px

Frame 252.png
Frame 253.png
Frame 254.png
Frame 255.png
Frame 256.png

components

info

Frame 259.png

menu

Frame 262.png

sliders

Frame 261.png

buttons

Frame 260.png

usability testing

task assigned 任務目標

from registering a new member to setting the personal report, then booking a designer you are interested in 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.

進行易用性測試,幫助我了解使用者是否能夠順利的完成給定的任務,中間遇到的困難點,並找出改進的空間。

83%

think having small talk before booking can reduce their anxiety and be very helpful to them.

認為「先討論再預約」的新溝通模式,對於他們很有幫助。

83%

think that the interface is clear and intuitive, they can use this app with confidence.

認為介面資訊清楚且直覺,能夠有自信的操作App。

33%

said that is hard to imagine the hairstyle with preference labels.

提出個人報告中的喜好標籤,僅使用文字敘述較難聯想到實際風格。

what i learned & challeges

>> explore new perspective and interview skills 探索新觀點與訪談技巧

learned how to interview people who have different personalities, set a clear goal, and avoid asking suggestive questions to make them feel reassured to get a more valuable answer. the process of organizing the interviews and finding new insights makes me feel motivated and passionate. 

訪談與整理心智圖是我很感興趣的階段。學習如何在不同個性的受訪者中掌握訪問節奏、盡可能避免問到非開放或暗示性的問題、讓受訪者感到安心而能夠暢所欲言。整理訪談內容、依序排列、觀察與思考,最後輸出一個新的觀點,像這樣能夠挖掘出意想不到的結果的階段,讓我感覺充滿熱情。

>> the challenge of future design 未來設計的挑戰

since this project is a future design, making zero to one product is the biggest challenge for me as a beginner in UX, but it also gives me more space to explore new insights, and expand my imagination.

因為這是個未來設計,沒有現成的產品可以參照,對於UX的初學者來說是一個很大的挑戰。但同時這也使我擁有更多空間與自由,根據洞察觀點來放進更多想像力,開發新的功能。

>> prototyping 原型製作

i have referenced products in different fields to conceive, learned how to make interface design clear, and try different types of visual that matches the target audience. At this stage, I spent the most time figuring out the user’s feelings, whether they would feel bored and give up, or if they successfully got good feedback and were willing to move on to the next page, making the screen as smooth as possible.

我參考了很多不同領域的產品來構思,學習如何讓介面資訊層級清楚、嘗試設計與目標群眾相符的視覺風格。在這個階段,我花了最多時間去揣摩使用者的感受,是否會感到無聊而放棄,或是成功帶來好的回饋而願意繼續點擊前進,盡可能的讓畫面流暢。