tbvsc-square.png

TBVSC Website Redesign

Hero.png

Redesigning Europe’s

largest tourist

destination.

We were approached by The Bicester Village Shopping Collection to create an Atomic design system and help redesign their Collection site and their eleven village sites across Europe and China.

 

Definition Phase

The first two weeks of the project, I helped run workshops involving the team and clients for idea generation for site & service features.

During this phase I also started to audit the current site content, future editorial schedules and apply business priorities to start to form the Sitemap that would be used for the Collection and Village sites.

 
A photo from the workshop to create ideas based on the four key pillars of the business.

A photo from the workshop to create ideas based on the four key pillars of the business.

Card sorting exercise to start to form the Sitemap for Villages.

Card sorting exercise to start to form the Sitemap for Villages.

 

Sitemap

One of my deliverables for the Definition Phase was to create the Sitemap that would be used to show the link between the Collection site & each of the Villages and the content / structure of each of these sites.

 
Sitemap deliverable for TBVSC.

Sitemap deliverable for TBVSC.

 

Wireframes

As we started to design the page templates based on the Sitemap and the priority list set in the definition phase, I started to Sketch and Wireframe potential layouts for these templates and also highlighting unique molecules and organisms for the design system.

Wireframes were created in Desktop and Mobile variants with a focus on Mobile first.

 
A set of wireframes created for the Shop Landing section for Desktop.

A set of wireframes created for the Shop Landing section for Desktop.

 

Motion Studies & Prototypes

Whilst working closely with design, I spent a lot of time prototyping certain interactions and journeys for tech based on key journeys or at an organism level.

 

Journey showing navigation on Mobile

Motion study showing the Brand Ticker for TBVSC

 

Atomic Design System

My other main role during the design phase was to create and maintain the Atomic Design System using Adobe DSM. We would have weekly with Adobe as this was also being used by the agency to research the product for future projects.

I set up a separate Sketch file we could organise and update with the Atoms, Molecules and Organisms then these would be pushed to DSM.

 
Screenshot of DSM.