WATCH IT

ECOMMERCE • DESIGN • UI

A traditional brick and mortar that has been a leading destination for watch enthusiasts since 1999. The goal of this concept is to improve the online customer experience with strong design and photography. 

watch_it_top_header

( Fig. 1 )   Modavo Hero Banner   

Problem & Solution

While their ecommerce website has a vast offering of watches for men, women and kids it is challenging to navigate. The website lacks a visually appealing homepage that showcases the various brands and styles available. 

The solution was to design bold and striking homepage graphics, improve the navigation and create a consistent look for the product pages. 

watch_it_reviseideation_sketch

( Fig. 2 )   Visual brainstorming

Site Navigation

A lot of thought and experimentation went into determining the navigation. There were questions concerning how to break down the site navigation based on brands, style range, gender and product categories. 

update_watch_it_small_sitemap

( Fig. 3 )   Site Map  

navigation_filter_fig_revised

( Fig. 4 )   Navigation Exploration - Filter

watch_type_fig

( Fig. 5 )  Navigation Explorations - Watch Type 

navigation_brand_figma

( Fig. 6 )   Navigation Explorations - Brand   

Mobile Experience

There is no question that more than half of site visits are coming through mobile. The goal was to create a consistent and seamless customer experience on a phone as well as on desktop.

mobile_wireframe_sketches

( Fig. 7 )   Mobile Wireframes   

mobile_homepage_fig

( Fig. 8 )   Mobile Homepage

mobile_brand_fig

( Fig. 9 )   Mobile Watch Brand

mobile_sunglasses_fig

( Fig. 10 )   Mobile Sunglasses

mobile_product_fig

( Fig. 11 )   Mobile Product

Homepage Design

The main areas of focus for improving the desktop experience are the homepage hero banner, promoting recognizable brands and emphasizing an ongoing email sign-up offer.

watch_it__presentation_homepage_full

( Fig. 12 )   Destop Homepage   

Product Pages

One thing that has been lacking is consistency with regards to the individual brand pages. The goal was to create a uniformed look that can be used for all the available brands.

brand_product_revise_wireframe

( Fig. 13 )   Brand Header Sketch   

citizen_resize_presentation

( Fig. 14)    Citizen Watch Product Page

Product Details Page

A major focus for the product pages was strong photography. Want the product through imagery to shine. The hierarchy draws attention to the 2 year warranty, free shipping and the monthly payment option. Also wanted to include the customer service number on each product page so customers don’t have to look for it if they have any immediate questions.

swatch_product_page

( Fig. 15)    Swatch Desktop Product Page

Conclusion

By reimagining the digital experience we can improve the buying process, allow room for brand design and showcase the range of product offerings. Strong design and photography creates a good first impression for first time visitors. Creating a design system allows for a consistent experience on each page, regardless of brand or section. Every decision was tailored to craft a seamless online buying experience. 

THANK YOU FOR SCROLLING