Wexel Art

Custom Wallscape Builder UX and UI

Wexel Art designs frameless, changeable, floating picture frames. A contemporary way to showcase your family photos, kids art, and other custom displays.

Develop a tailored drag-and-drop builder that enables users to design their own custom art wallscape. The tool should accommodate a wide range of variables, including various frame sizes and hardware options, while guiding customers seamlessly through each step of the customization process.

OVERVIEW

ROLES

Custom Wallscape UX + UI
Wireframes
High-Fidelity Mockups
QA + Testing

Project completed while in the role of Lead UX/UI Designer at NINE15

 OBJECTIVE/CHALLENGES

Design a seamless user experience for a highly customizable set of products.

Identify Client Needs

The first step of the project to discuss the customer’s needs with the client. What would make their decision to purchase a wallscape easier? How can we make something clear and interactive enough, so that the customer can picture this item on their own wall at home?

We not only went over the small details included in the step-by-step process, but also all the small micro interactions that would give essential feedback to the customer and help them through the process.

  1. Create a seamless step-by-step user interface

  2. Allow the customer to picture the exact item on their own wall

  3. Make the drag and drop feature easy and intuitive

  4. Provide all the correct pricing information at final review, as well as adding a downloadable template for further validation

Goals

Custom Wallscape Builder Design

After creating wireframes, the design and look was added to create a high-fidelity mockup and presented to the client. Below showcases the step-by-step process and what specific choices were made to make the builder a success.

Step 1

  • Customers enter the width and height of their own wall at home

  • They can also add paint color to picture it as close as possible

  • Steps are seen at the top so the user is informed where they are at in the process

Step 2

  • Customers are guided through some basic questions regarding what frames they’d like to put on their wall and hardware type

  • Sample image is shown to confirm what they’ve selected is what they expected

  • Start Over button is seen and always accessible in case the customer needs to fix something

Step 3

  • Customers can select the exact frames they’d like to use for the drag and drop

  • They can also leave this blank - all frames will be accessible

  • If the customer needs help with measuring, there is an option to enter in the dimensions and frames will automatically be chosen that fit

  • Measurements for both Art and Frame are listed, to not confuse the customer

Step 4

  • Customers have the option to use single frames or Pre-made Wallscapes

  • If frames were chosen on step prior, they show up first

  • Drap and drop interactive wall, with options to rotate frame and delete

  • Subtotal clearly seen

  • If customer tries to add a size larger than the area, an alert pops up that indicates the reason for the error

Step 5

  • Customers have the option to download what they’ve created

  • Summary of their choices are clearly listed out and subtotal shown with clear ATC button

It was a successful design and build. By vigorous testing and optimization of the user experience, customers were able to make informed purchases. The client was extremely happy with the results.

RENEGADE →
←BACK