personalisation

Bespoke Handbag Service

Bespoke Handbag Service

A responsive, app-free handbag builder, allowing users to design and purchase customised products online, to complement and enhance Bally's 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, without the friction of having to download and install an app.

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 frictionless 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

This is an interesting project to evaluate, as business priorities meant that the goals, format and end user changed between completion and go-live. Our original user was the customer, browsing and shopping on their own devices in order to learn more about and shop customised products. 

This project was also a great learning experience in how seemingly separate areas of the business rely on each other in order to meet their individual objectives, as well as business goals. When approaching a new project, I am reminded of the importance of both creating a narrative to clarify purpose, goals and expectations, and bringing in stakeholders from across the business to contribute to product ideation and highlight any potential risks. It was also a great exercise in collaboration between design, product and tech, taking a pragmatic approach to the change of direction and still being able to deliver a usable product with time and resource constraints.

mto-design
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

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

© ZARA DREI 2020