Smartphone displaying an online shopping app with a colorful shoe and bags.

設計以行動裝置友善品牌文化推廣為主的電商網站,來滿足品牌裡形形色色且具有不同購物動機與消費習慣的廣大用戶。

讓品牌順利佈局從線下到線上的全渠道行銷,並藉由數位轉型來接觸到更多與以往不同的消費者。

前言

當品牌決定進行數位轉型,往往會開始面對各種挑戰,而數位轉型也不止步於做出一個網站而已。

在這個專案裡,主要目的在於替一個品牌進行數位轉型的設計策略提案,透過了解品牌的願景、主力產品與目標用戶來提出最適合的數位轉型方案並提出後續相關的電商網站設計。

在電商網站設計中,其目的在於設計出一個具有品牌風格的電商網站來行銷與販售商品。並藉由了解不同用戶的消費習慣來提出能滿足他們需求的UX/UI設計。讓這三種用戶-行動世代型消費者、理性務實型消費者、細水長流型消費者的購物痛點都能被解決,並幫助他們找到適合的服飾單品。

請往下滑動來閱讀更多細節,夏樂設計會詳細介紹該如何去規劃企業裡數位轉型的策略,並透過了解用戶需求來規劃與設計這樣的電商網站。

專案簡介 Brief

此專案的目的是要協助企業進行數位轉型,透過打造新的品牌形象和設計新的電商網站來達成數位轉型的初步里程碑。在規劃與設計新的電商網站時,特別著重於營造出品牌本身的高級時尚氛圍,希望能藉由氛圍感來吸引目標用戶來購買服飾單品。

此專案的主要用戶分成了三大類,對應到的類型分別是行動世代型消費者、理性務實型消費者、細水長流型消費者,而他們在購物時有著截然不同的思維和消費習慣。

首先,行動世代型消費者多半會包含稍微年輕一點的用戶群體,他們最主要的消費行為是要求快速且方便的購買,尤其是喜歡在手機上透過社群媒體看到不錯的新品宣傳,之後順手點連結連過去購物官網後,然後可能會被品牌理念吸引從而直接下單的那種消費習慣。

而理性務實型消費者則多半會包含中間廣大的用戶群體,這些用戶通常收入穩定且擁有較高的預算能去購買服飾單品。但他們往往比較務實,會習慣性的仔細查閱購物官網裡的各種細節和內容後,甚至多花一點時間去多確認幾次,直到品牌在他們心中佔有一定地位後,才會去下單與購買。

最後,細水長流型消費者比較長會出現在年長一點的用戶群體,他們平常可能比較少去主動接收新的時尚風格或新的服飾單品設計,但是他們往往也是忠誠度較高的群體。一但認定這個品牌之後,就會變成死忠消費者,可能接下來好幾年內都會不間斷的購買品牌出的服飾單品。

品牌形象設計

Brand Identity Design

A close-up of a brick wall with green ivy growing over it and a white pipe and sign attached to the wall.

嶼日製所是一個主打高品質的台灣服飾設計品牌,主要販售各種具有設計感服飾單品,讓消費者在日常生活中能將品味穿上身,並在展現自己的個性之餘還可以擁有舒適自在的每一天。在此專案中,品牌數位轉型的目的在於藉由新的電商網站來增加銷售渠道,以及透過能直接接觸消費者的部分來提升用戶體驗。

品牌的自我定位是以台灣服裝職人的精湛工藝為核心,並結合國際化的設計剪裁來推出兼具質感與設計感的各種服飾單品。主要著重在於服務給25–55歲的消費族群,並透過稍微中高價位的單價來推出符合消費者預期的單品。

在提出新的品牌形象設計之前,會需要透過用戶訪談來更進一步的瞭解,以便之後將新的品牌形象轉化成更完整且良好的用戶體驗。

用戶訪談 Interview

為了更加了解目標消費族群隱藏的痛點和需求,會建議採用質化分析來探索。本次的質化分析採用訪談(Interview)形式來探討不同用戶日常購買服飾單品時的心理動機、價值觀、決策歷程與痛點。

如果對於訪談(Interview)的大綱和內容有興趣,歡迎點擊下方的文件檔去看更多說明。

A brochure with vertically folded pages displaying text in Chinese characters and pink circular icons, placed next to a textured, beige ceramic vase on a dark surface against a gray background.

品牌情緒板 Mood Board

透過訪談後可以更精準的了解消費者對於品牌的期待和其他需求,而情緒板(Mood Board)的呈現則可以幫助整個團隊對於想要營造出的品牌印象有著更好地理解,可以幫助團隊之後在各種數位轉型的專案裡做出更客觀更適當的決策。

以下是此專案的情緒板(Mood Board),分別依序去呈現出品牌風格與其搭配的色彩與字體。

A light purple background with no discernible objects or scene.
Pink flower background with white Japanese characters and the text 'FORMOSA Atelier'

關於色彩調性(Color Palette)的部分會建議整體色彩基調會採用高雅的經典風格,而在色彩細節處會再加上一點比較突出的色彩與視覺點綴,讓嶼日製所能透過獨特的風格來和其他品牌做出差異化。

關於字體(Typography)的部分會建議主要字體採用極簡無襯線風格,來呈現出一種雋永且經典的風格。而次要字體建議採用有點個性的襯線字體風格,來呈現出一種具有藝術感的文化意象的風格。

Collage of floral patterns, watercolor landscapes, and abstract textures with text 'Signature Pieces' and Japanese characters on a light background.
Color palette titled Helvetica Neue Cormorant with color swatches labeled Purple, Grey, and Beige on a purple background.
Color palette titled Helvetica Neue Cormorant with color swatches labeled Purple, Grey, and Beige on a purple background.

量化分析 Research

為了更加了解目標消費族群隱藏的相關背景資料、購買動機、消費價值觀、線上購買經驗與痛點等資訊,會建議採用量化分析去發放問卷(Quantitative Questionnaire)來做更進一步的研究。

如果對於問卷的大綱和內容有興趣,歡迎點擊下方的文件檔去看更多說明。

A business card with Chinese characters and a circular design, placed on a dark surface alongside a wooden object and a decorative item.

人物誌 Persona

透過問卷的量化分析後可以更精準的定義出這三種主要用戶的需求,而人物誌(Persona)的呈現則可以幫助整個團隊了解核心使用者的想法、情緒和行為,可以幫助團隊討論並做出更客觀更適當的決策。

以下是此專案的人物誌(Persona),分別依照不同類型的用戶來呈現出不同的內容。

A profile of a smiling Asian woman with short hair, wearing a gray turtleneck, in a circular frame on a light green background. There is handwritten-style text in Chinese on the left, and detailed information about her including location, family, occupation, income, preferred payment methods, device usage, shopping behavior, and key values in Chinese on the right.
A profile of a young woman named Tina, 27 years old, with shoulder-length hair, smiling outdoors with a background of greenery. The image includes a quote in Chinese and demographic information about Tina, such as her occupation as a creative planner and her living situation. The design features soft pink and beige colors with additional text in Chinese about consumer behavior and the influence of Taiwanese arts.
A personal profile card with a photo of a middle-aged Asian man in a circular frame, his background and attire suggesting a professional setting. The card includes handwritten and printed Chinese text, lists of personal details such as location, family status, occupation, income, payment methods, and device usage, along with sections of detailed descriptions and a bar graph indicating device usage percentages, all set against a light blue and white background with a floral pattern at the bottom.

用戶體驗地圖

User Journey Map

藉由用戶體驗地圖(User Journey Map)的繪製,可以讓團隊對於核心使用者會如何與產品戶動,以及旅程中哪個階段的痛點有更進一步的瞭解。可以幫助團隊能更快聚焦核心使用者的真正需求,找到改善與創新的切入點,並讓專案方向成果能更貼近使用者的期待。 

以下是此專案的用戶體驗地圖(User Journey Map),分別在同一張圖上依照三種主要用戶來呈現出其對應的線上購物流程。

A detailed infographic outlining the stages of consumer decision-making, types of user profiles, and typical shopping journey processes, including visuals of diverse individuals and flowcharts.

設計成果 Wireframing

設計成果會藉由線框圖(Wireframe)來呈現出產品最終的樣貌,目標是藉由新的電商網站的設計提案來幫助品牌去順利的進行數位轉型,讓品牌的願景、故事、文化和影響力能自然而然的從原本的線下渠道擴展到線上渠道,藉由整合線下與線上的通路來去吸引更多的潛在消費者。

在線框圖(Wireframe)的設計中有針對專案裡不同核心使用者-行動世代型消費者、理性務實型消費者、細水長流型消費者去為他們解決各自在意的痛點,讓擁有著不同消費動機和行爲的不同核心使用者在線上購買服飾單品時,都可以擁有輕鬆且順利的購物流程。

Screenshot of a website in Chinese showcasing fashion items, including shoes, handbags, clothing, and accessories, with a purple and white color scheme.
A collection of UX/UI design mockups showcasing website and app interfaces in purple, lavender, and white color schemes with Chinese text and images of clothes, accessories, and fashion themes, arranged in a grid and circular icon palette.

設計規範 Guideline

在專案最後會去做了簡單易懂的UI設計規範,以便讓團隊未來需要延伸更多功能時,可以依此設計規範去做出同一風格的產品功能與介面設計。

A webpage design layout showcasing typography styles, color palette with various shades of purple and black, and font size specifications for headings and copy in a beige, white, and purple color scheme.

聯繫夏樂設計

如果您的品牌有遇到上述的相關挑戰,歡迎聯繫夏樂設計來討論合作方案!