Mormax - Configurator | Wireframe v1


Welcome to the configurator. These wireframes are a pre-scope effort to create an "app" within the Mormax website that will

1) Make it easier for people to get a quote

2) Make it easier/visual for people to find Spec Sheets, installation guides

3) Make it easier for existing/potential clients to explore color options and configurations for their needs (hotels to start)


This tool would all be a single-page app. Unlike Metro's actual configurator, there will be no "page loading" and it would all function in a single page.

Please note: we are not at all sold on specific layout of things, more ideas will be explored if we proceed to execute on this project, and within the "Design Phase" (same process as our websites). Most "ingredients" are present.

Future + Expansion: This tool would be focussed on metro for its first incarnation, but the end game would to turn this into a "Room Configurator", where potential clients, and existing clients, could create an entire room using this tool. (e.g 1 Safe, 1 Hair Dryer, 2 Lamps, 1x 5T module, etc) Where the user would specify how many rooms (hotel rooms etc) and build up their room configuration.


WIREFRAMES

 

  • Configurator Partial Build

    The user starts by selecting their configuration. +/- will work great on phones, and the modules on the left would collapse on phones so it feels like an app.

    The 3 boxes below are essentially "Tabs". These tabs will likely be redesigned, this is purely to serve as a wire-frame of options.

  • Configurator Trim Select

    The user will then select their Trim type.

  • Configurator Color Select ABS

    Once the Trim is selected, the user will then select the Color they desire.

    Please note, if you select an ABS color, the Trim Finish & Color tab will be available. If Unicolor is selected, it will not be available (shown later)

  • Configurator Color Select Unicolor

    On this one, the user selected a UNICOLOR, and you'll see above that Trim Finish & Color is "Grayed out" (disabled).

    This wire-frame also shows the finish displayed being updated in real-time for the user (Satin/Nickel).

  • Configurator Complete Build

    Once the user has set the options for configuration (bezel/color), the options to Request A Quote, Download Spec Sheet and Download Installation Guide will be presented to the user.

    Please note that the product SKU will be automatically calculated, so the tool will present the user with the right spec sheet that he/she had configured.

    Also Note: Request a Quote will display a big full screen form that pops up. Or something similar. We did not design this, and will design this if the project proceeds forward!

  • Configurator Max Case Bezel

    This wire-frame simply shows what it would look like if someone clicked + to max configuration size. Notice the gray boxes within the SKU.

  • Configurator Max Case Trim Plate

    This options shows a full configuration (please note the Quote button is missing on this one, but would be there as it is on a previous mockup)