CloseMenu+

Digital Product Configurator

Product Configurator Overview

A product configurator is a computer program that helps the user specify a product by allowing to choose from all available options. This allows customers to configure a product the way they want.

By using the configurator a complex product can be formalized into a simple to understand system that allows the user to specify the item of their choice, specifying options like color, size, position or accessories.

The configurator usually exists for two reasons: to inspire customers to explore a product, or to help them configure an existing product to match their needs. View live prototype

Website

Goal

Design responsive interface for product configurator.
Created 3 different user interfaces for product configurator with the option of buying the product in the end. The user will be able to choose from different main categories and then choose between different sub configurations of the product. The product and the available accessories/features plus some information about them are visible on the page.

Research

Market
Information is gathered from the Internet, scientific journals, and from existing apps. In order to make a deep analysis of configurators, I installed apps that are available online- mainly product based e-commerce websites and applications that are provided by the automotive companies(Ferrari, Ford etc.). The purpose was to investigate the abilities of the configurator to the end user.

Existing Websites/ Applications
Did a study on the Information Architecture, content and interfaces of some of the most popular results upon a search for customised product configurator.

User Journey

Information Architecture
  • Initial Sketches

    Hand- Drawn Wireframes

    In human–computer interaction, paper prototyping is a widely used method in the user-centered design process. It helps come with a design that meets the user's expectations and needs. The method was used to understand the primary tasks of the user at any given point of the screen. This led to the formation of the information architecture- defining the primary, secondary and tertiary tasks of the user and their progressive disclosure.

    This is a set of hand drawn sketches I made to illustrate what I had in my mind.

  • Low Fidelity Mockups

    Sketch Mockups

    Product 01- Amazon Echo Dot
    Features
  • Product customise section with options to change the color, view full screen, toggle between 3d and real picture and view the product from all the angle using 360 degree viewer.
  • Product Description, price and available configuration.
  • Delivery details- enter pin code to choose your location.
  • Select the quantity.
  • Add product to cart and Buy option.
  • Shopping cart page.
  • Add delivery address, Show already added/ used addresses.
  • Payment page- Place order.
  • Add payment details- credit/ debit card details, or select from the already added card. Option to save the card for future purpose.
  • Product 02- Apple Watch Series 4
    Features
  • Homepage/ intro screen with a short description about the product.
  • Main category. Select one model from here.
  • Highlights/ overview of the selected model.
  • Available looks.
  • Select strap material.
  • Bands details page.
  • Select band colour, case size, product information, tech specs, ratings & reviews, add to cart.
  • Accessories for the select product.

  • Product 03- Mercedes Benz E Class
    Features
  • The customer should be able to adjust colours, wheels, exterior details, interior details and accessories on small and large screens.
  • Customise your car and explore it from all the angle using 360 degree viewer.
  •  

    PREVIOUS CASE STUDY NEXT CASE STUDY