personalisation

Bespoke Handbag Service

Bespoke Handbag Service

A responsive, in-browser handbag builder, allowing users to design and purchase customised products online, to complement and enhance the in-store experience.

Bally MTO Cover

The Challenge

In a crowded market of high-end accessories, a bespoke handbag is an investment which provides the wearer with complete control over the fabric, shape and finish, and allows them to create a personalised, unique piece. This investment involves time as well as money, often including several visits to store. To fit in with customers’ busy lifestyles, Bally wanted to provide a way for them to understand the process and experiment with building their own bag, from any location, at any time, on any device.

Bally asked our team to create an experience through which users would be able to customise their popular Sommet handbag by selecting fabric and finish options, and adding a monogram. The experience should also reflect the luxury personalised service available in store.

How might we communicate Bally’s bespoke offering to users and encourage them to purchase customised products?

How might we provide the physical store bespoke experience as a digital product?

How might we enhance the store experience with a digital product?

Onboarding

A luxury, bespoke handbag is a large commitment, due to the investment in time and money. The customer needs to clearly understand the process, options and quality of the product to make a decision.

We designed a scalable portal to the service, including a landing page to serve as the starting point for multiple product customisation journeys, to prepare for future launches. Each path allowed users to explore shape, fabric and hardware options, and learn about the craftsmanship behind the product.

Bally Bespoke Handbag Service
Landing screens to introduce and explain the process

Options and journey

Working closely with Bally’s eCommerce team, we created several iterations of the wireframes to refine the journey and ensure that all options available were fully supported by the back-end ordering system and the production process at the atelier. Users start by choosing their preferred bag size, and are then able to select from multiple leather types and colours for each section of the bag, which would be instantly reflected in the main image. The user could then add finishing touches by selecting from gold or silver hardware, and an optional monogram.  

Bally Made to Order wireframes
Iterations on the mobile journey. A horizontal scrolling swatch bar allowed the composite bag to be visible on the same screen as the options, and adding tabs enabled the user to move more easily between editable options in that section.

Asset creation and optimisation

Asset creation and optimisation

One of the main challenges was to ensure the bags were represented correctly whilst also maintaining page load times. We experimented with using colour and texture overlays rather than photographs to build the bag, but the results weren’t realistic enough to enable the user to make an informed decision. We then photographed each leather type and masked the images to the bag’s pattern, which provided a much more aesthetically appealing result. To mitigate the additional weight of the images, we ran these through several compression tools until we found the perfect balance of size and image quality.

How the bag pieces come together

Onward journey

Once the user has completed their design, there were four progression paths they could take. If satisfied with their selections and ready to purchase, the user could add the product to their shopping bag and continue through the checkout flow, where made-to-order products were contained in their own section to separate them from those which could be fulfilled sooner. Users could also add to their wishlist and share, or saved to come back to later. If the user wanted to see the fabrics in person, they could choose to email a store representative, who would be sent their details along with a composite image of their selections. Finally, a user who just wanted to share the image could do so on social media.

Bally Made to Order Share
Sharing the experience

Validation and outcome

The project was originally planned to launch with handbags as the customisable product, with shoes and accessories to follow. Between completion and go-live, business priorities changed and the focus was moved to the men’s in-store bespoke shoe service. The tool was adapted for this product and released on in-store iPads, which allow sales assistants to more easily guide customers through the bespoke item ordering process.

Made to order final screens
Final design

Project Information

Client
Bally

Agency
Labelux

Date
2016

My Role

Competitor analysis
User journeys
Low-fidelity wireframes and prototypes
High-fidelity designs
Internal usability testing
Regular stakeholder presentations
Providing direction to other designers

Design Tools

UXPin, Photoshop, Illustrator, InDesign

Credits

Design & Research
Suzy Grundy

production
James Fickling, Hungry Tiger

Engineering
Dan Seymour, Andy Fairlie, Labelux development team

Product & Delivery
Kim Jacob, Carol Maxwell, Bally team

More Projects

Global eCommerce CheckoutOmnichannel Retail

Consumer Beauty Web PlatformWhite Label Solution

Virtual Makeup StudioAugmented Reality

iconfinder_Icon-3_3064816
iconfinder_Icon-8_3064836
iconfinder_Icon-6_3064817
iconfinder_Icon-2_3064815

© ZARA DREI 2019