top of page
© jenny

Bicester Collection

WeChat Mini Programs for a collection of global shopping villages

Corporation Project: UX/UI, Retail, Fashion

Overview

The Bicester Collection provides digital service through mini programs on WeChat to improve Chinese customers' overall experience in shopping villages overseas. It integrates services such as information inquiry, online shopping, personal shopper etc. 

The campaign has already been online on WeChat since May 2023. 

https://mp.weixin.qq.com/s/k8m-b3f3PM1MbWcwR53ZPw

icon-header-image_2x_edited.png
wechat-miniprogram.png
fflogo.png
apple-iphone13promax-silver-portrait.png
mockuuups-macbook-pro-mockup-on-a-table-with-a-plant-in-the-background.jpeg
Challenge

To expand reach among Chinese customers, Bicester recognized the necessity of migrating their online website content to WeChat mini programs for enhanced accessibility.

This strategic move aims to effectively promote their shopping villages worldwide.

Customer Needs

Deliver Elegant Brand Identity

Series of Villages Align with each other

Attract and Retain Customers

Project Timeline

Duration: 4 months

Client: Bicester

Team: Designer*2 + Project Manager*1 + Engineer*n

Timeline-HiRes.png
Preliminary Research

Differences between a WEBSITE💻 and an APP📱

There is a noteworthy distinction between a website and a mobile application concerning USER EXPERIENCE, especially in the context of a shopping village. The unique characteristics and purposes of each platform necessitate a tailored approach, leading to a set of different highlighted functions.

ℹ️ provide information

WEBSITE
💻

vs

APP
📱

​🛒 boost shopping

📊 collect data

Functions to Highlight on mobile platform

Sign up & Register

The process involves creating a user account that allows individuals to access the app's features and services.

Discount & Coupon

Implementing this section in shopping village app can be an effective way to attract and retain customers

Retail Service

The process involves providing users with a platform to browse, purchase, and manage products or services.

Series Switch

Enabling users to switch between shopping villages is a common feature to cultivate customer loyalty to the brand.

Ideation

Information Architecture Redesign

 Original Website Structure

Website.png

WeChat Mini Program Structure

Summary

Flatter Architecture. 
More Interactive. 
More Focused on Customers. 

Prototyping

Hi-Fi User Interface 1.0

Hifi1.0.png

Feedback 1.0

Engineer

  • Select fonts the default font library

  • No images or icons with transparency

  • Lower the use of motions to reduce buffer time

Project Manager

  • Stick to the urgent timeline

  • Keep the interactions simple

  • Coordinate with front and back end engineers

Client from Bicester

  • Keep all the services in one page

  • Adjust wordings

  • Adjust primary colors of certain villages

  • Highlight partnership benefits and discounts

End User

  • The fonts are too big

  • Margins on some pages are different

Iteration

Hi-Fi User Interface 2.0

选择购物村.png
首屏弹窗.png
罗卡首屏.png

Village Switch Popup

Offer Popup

Home Page Frame Layout

The main page presents cards that navigates to different sections to offer a different path other than navigation bar.
 
Users can easily switch between shopping villages in the mini program through the village icon. 

首页.png

 Home 

Discounts & Offers

Get Directions

Boutiques

Opening Page
Slider

 Boutiques 

Brand Catalog

Users have access to complete list of boutiques available in the shopping village, enabling them to plan their visit in advance.

Searching and saving favorites are also available. 

品牌列表.png
搜索历史.png
搜索结果备份.png

Brand Page

The brand page presents basic informations on the specific store in the shopping village, including

  • history of the brand

  • email/address/opening time

  • contact

Each section has respective popup window to show detailed information. 


​Users can also add the store to their favorite folder to help them make plans. 

有whatsapp.png

Integrated Map

添加店员微信 copy.png
地图.png

Contact Information
Popup Window

添加店员微信.png
店员微信.png
品牌门店营业时间.png

Opening
Time

 Services 

Service Page

The service page showcases a comprehensive list of all the services available within the shopping village.

 

Each service icon serves as a navigation hotkey, directing users to the corresponding service page for detailed guidance and links to additional resources.

服务.png

Services

酒店详情.png
支付方式.png
附近酒店.png
美食.png
私人导购.png

 Offers 

Latest Discounts &
Partnership Benefits

Two major offers are divided in sections and can be switched by swiping horizontally. 

Detailed information can be accessed in secondary pages or expanded box by clicking. 

精选特惠2.png
合作福利3.png
合作福利3(1).png

Slider

 User 

Register/Log in

Users can register for Bicester shopping village with their WeChat account. 

Related Programs

User Information

Users can check their favorites and membership in this section. 

Member
Privileges

Level

Walkthrough 2.0

  • Compatibility for different screens

  • Paddings and margins

  • Color differences

  • Slider motions

  • Fond size and weight

UI Design

Final User Interface 3.0

 Home 

apple-iphone13promax-silver-portrait.png

 Boutique 

 Service 

 Offers 

 User 

Other village UI in the Bicester collection

Reflection

Learnings from Bicester Project

Through this project, I honed my skills in rapid design and iteration. To adapt to diverse platforms, I gained insights into UI development from a more professional and industrial perspective.

With the stringent timeline chasing behind, my capability of stress management and multitasking has been significantly strengthened. I

This project provided me with a comprehensive view of end-to-end project execution. This invaluable experience equips me to tackle real-life design challenges with confidence in the future.

bottom of page