Work Collection

Bicester Mini App Development

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 been online on WeChat since May 2023. 

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

Platfoms

Challenge

To expand reach among Chinese customers, Bicester recognized the necessity of migrating their online website content to WeChat mini app for enhanced accessibility.​This strategic move aims to effectively promote their shopping villages worldwide.

Customer Needs

Deliver Elegant Brand Identity

Attract and Retain Customers

Keep series of village apps align with each other

Align Series of Village Apps

Project Timeline

Duration: 4 months

Client: Bicester

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

Preliminary Research

Difference between Website 💻 and Mobile📱

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.

Website

Information Delivery
Sales Promotion
Data Collection

Website 💻

Mobile📱

Functions to highlight on mobile platform

Function to highlight on mobile platform

Sign up & Register

Create a new user account that allows individuals to access the app's features and services from mobile device

Retail Service

Provide users with a platform to browse and purchase to achieve smooth shopping experience

Discount & Coupon

Emphasize promotion and special offers in a less intrusive way to retain and attract new customers

Series Switch

Enable users to switch between shopping villages to cultivate customer viscosity to the brand

Ideation

Information Architecture Redesign

Summary

Flatter Information Architecture

More Interactive Functions

More Focused on Customers

Ideation

Information Architecture Redesign

Summary

Flatter Information Architecture

More Interactive Functions

More Focused on Customers

Prototyping

Hi-Fi User Interface 1.0

Feedback 1.0

Engineer

Engineer

Engineer

  • Default font library

  • No transparency

  • Less motions

  • Default font library

  • No transparency

  • Less motions

Project Manager

Project Manager

Project Manager

  • Urgent timeline

  • Simple interaction

  • Interdisciplinary coordination

  • Urgent timeline

  • Simple interaction

  • Interdisciplinary coordination

Client

Client

Client

  • Neat service layout

  • Adjust wordings

  • Highlight partnership benefits and discounts

  • Neat service layout

  • Adjust wordings

  • Highlight partnership benefits and discounts

End User

End User

End User

  • Font size

  • Margins and paddings

  • Font size

  • Margins and paddings

Prototyping

Hi-Fi User Interface 2.0

Iteration and Usability

Walkthrough and Sandbox Test

Takeaway

  • Compatibility for different screens

  • Paddings and margins

  • Color differences

  • Slider motions

  • Fond size and weight

UI Design

Final User Interface 3.0

Visual Identity

Other Village Mini App UI of Bicester Collection

The same visual identity is applied to the development of other village mini applications to ensure the unified style of the whole collection and smooth user experience.

Reflection

What I have learned from this 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.

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.

Jenny Wang

Product Designer