Daniel Abbott UX Portfolio
bear-1.jpg

Luxury Jewellery Brand UX and UI Design

Bear Brooksbank is a London based fine jewellery brand. I created wireframes in Sketch and shared my Marvel prototype with 10 users for feedback. Their responses informed iterations. The Marvel prototype was also integral to the project when describing the structure of the site to the developer who referred to it throughout.

User Research
Information Architecture
Prototyping
User Testing
UI Design
Digital Art Direction

 

Business Objective

Revitalise old stock and group in meaningful collections. Hero the latest collection to tie in with launch.

Business problems

Confusing and incoherent navigation is turning users away.

Mobile users are not catered for.

Brand needs to be refined and launched to wider audience in conjunction with new collection and press.

User problems

Finding high quality, unique, beskpoke and exclusively designed fine jewellery, made in London.

Looking to buy expensive bespoke jewellery for someone but not knowing where to start.

Requiring reassurance that the quality products available are presented as part of a high end, minimal design.

View prototype
View live Bear Brooksbank site
 

Previous website (2012)

Previous website (2012)

The client had outgrown their website. A new fine jewellery collection called for a design that could accommodate beautiful fashion photography and a simple, refined IA.

Initial desktop sketches

Initial desktop sketches

Before working with any software I committed ideas to paper, iterating on rough sketches to explore the problem.

Initial mobile sketches

Initial mobile sketches

I knew the platform would handle responsive templates well, but it was important to sketch elements and think about interactions.

Collection listing concept with dropown design

Collection listing concept with dropown design

This simple grid of signpost thumbnails for collections was replaced with full screen images for impact and then reverted back to a simple grid following user feedback.

Live collections page

Live collections page

The simple collections page is now the most frequently visited page and offers clear signposting.

Product detail page

Product detail page

The user reads from left to right. Image first (using the arrows to scroll through views of the product), then copy. The hierarchy of elements enhance digestion of information. During development we introduced thumbnails for alternative views to increase engagement.

Concept for homepage with search expanded

Concept for homepage with search expanded

Showing an image thumbnail for search results was intended to help the user find what they are looking for but this became confusing when there were multiple views available for the products.

Live site

Live site

View the site at bearbrooksbank.com
The site is updated frequently based on user feedback, Google Analytics and observations made from Hotjar recordings.

Homepage desktop view

Homepage desktop view

Homepage mobile view

Homepage mobile view