Swatch
Group project

My role
Interaction design
Prototyping
Interface design
Tools I used
FramerJS
Axure
Sketch

Introduction

As a group of six, we designed a desktop and mobile website to engage fashionistas by inspiring them with combinations of fashion and Swatch watch images allowing them to explore fashion and watch based on location and style. This creates a seamless experience from digital to physical with emphasis on exploration, storytelling and self expression.

The website on the video is created with Axure.

Swatch's Business Problem

We identified Swatch’s business problems through research, and the analyzation of the Swatch Group annual financial reports.

  1. Decrease in brand recognition.
  2. Swatch is expensive for customers who don’t appreciate and understand the quality of Swatch.
  3. Lack of engagement due to increasing competition.
  4. Weak sales in North America compared to other continents.

Framing

We defined our challenges by questioning these fundamental questions:

  • What makes people curious?
  • How can a watch appeal to customers by knowing what they want?
  • How can analogue watches create dialogue?

Constraints

  1. No expansion of physical store.
  2. Focus on the North American market.
  3. Must allow personal interaction.
  4. Create seamless digital and physical experience.

Target Audience

Adding onto Swatch’s existing customers segment, our primary target customers are the 20s to 30s street fashionistas who express their identity through fashion, and are provocative about fashion trends and activities.

Why Street Fashion People?

Fashionistas

Opening

Creating a stronger connection between Swatch and street fashion people by building the relationship through relevant interest and empower them to express themselves.

Books read for the project.

Swatch books

Whiteboard sessions.

Swatch whiteboard

Sketches for dial interaction.

Swatch notes

Sketches for UI.

Swatch notes

Created dial interaction where users can choose certain city and style. This dial interaction was initially inspired by the shape of watch. I created this dial interaction using Framer.js.

Before working on the visual design of the UI, I created mobile website prototype with Framer.js.

Final UI of Swatch mobile website.

Swatch Entire UI