Header

Dolly e-commerce experience

Overview

A company is planning to develop a unified online storefront where their 3 products and related services will be featured, accessible and branded. The long term vision is to have a fully redesigned site, including new global navigational elements and pages, and a unified shopping experience where all 3 branding coexist harmoniously.

The project includes the UX path to create the best possible approach for the challenge, which consists on giving the user the needed information to get into a conversion while maintaining each brand aesthetic unique inside a new brand site experience.

Background

The company name is not shown in the story because of private terms and conditions, but the brief comes from one of the largest company worldwide. So the UX approach, usability, consistency, brand importance and a huge team perspective are involved in an end-to-end process.

The information presented comes from the first iteration developed while being part of MediaMonks as UX Designer.

Our Challenge: An experiential best in class e-commerce that captures what’s possible with technology designed to bring people closer together’.

UX Approach

3 key insights to drive the experience:

  1. Our audience is wide and varied
  2. Commitment to the future of Social Technology
  3. Product-first
Company Store Brand Wrapper

Information Architecture: To come up with a final sketch of how the site navigation should look like, we decided to focus on a key Question:

What does our unified e-comm site need to communicate?

  1. Discover the Company’s Hardware story
  2. Explore an specific Brand’s story
  3. Dive into Product Detail story
  4. Reassured of shopping control and support
Information Architecture

User Journey: Let’s explore where this hierarchy works across the purchase journey.

User Journey

It is vital to drive different levels of the story while keeping and engaging shopping experience. (Access to the main Call to action ‘Buy now’ and ‘Learn more’ available at every step).

Home Page:

  • Introduce how the Hardware extends the ability for people to connect with others.
  • Drive users to explore the full range of the store products, while highlighting featured news/offers.
  • Call to action: Buy now or Learn more

Brand Page:

  • Introduce how a Brand’s family of products extends the ability for people to connect with others.
  • Shop products at a brand level and discover specific or deeper features for each one.
  • Call to action: Buy now or Learn more

Product Detailed Page:

  • Extends the ability for people to connect with others by experiencing the product.
  • Get a real feel for the products with their specific details.
  • Call to action: Buy now or Learn more
Sitemap

Navigation

Navigation is the anchor point through the shopping experience, so it has to allow users to jump between product and brand categories while providing movement to detailed pages.

The exploration included 3 possible approaches:

  1. Mega Browse: Navigating from Brand to product pages quickly
  2. Focused: Focus on the Brand
  3. Inverse: Highlight content and put every page visible for the user

The Global footer for the project is as important as the main navigation, since it allows keeping useful shopping links and information present for users in need of help.

  1. Single mega footer: Organizes all sub-links from brands
  2. Stacked brand footer: Bring-in brand specific footer for each page

Content mapping

  1. Product lead #1: Let the homepage to guide users directly to the Product Detailed Page and its demo experience. Users can: Add to cart, Learn more and Explore a Brand.
  2. Product lead #2: Let the homepage to guide users directly to the Product Detailed Page and its demo experience. Users can: Add to cart, Learn more and Explore a Brand.
  3. Lifestyle lead: Let the users to discover experiences using photography and video. Users can: Add to cart and Learn more.

Competitor analysis

To get the best out of the analysis we are focusing on the following key points:

  • Navigation (AI): How well does the navigation support the user’s journey and the website’s storytelling
  • Shopping experiences: How well the site supports users across the consideration and purchase journey
  • Storytelling: Review of the narratives across all the site, including the visual narrative
  • Content trust: How effectively does the content build brand trust and authority
  • Aesthetics and functionality: Review of the UI and interactive elements and how well did they perform during the user journey

Some interviews had placed with stakeholders to finished the discovery phase, in order to star the design process with a clear direction of where we want to arrive based on the exhaustive research.