Customizer Wireframes Mid-fidelity Design layout

Situation

A client wanted to build on their early success with a related product customization site and launch one for another owned brand. Initially, they assumed that the similarity would make it easy to duplicate both the structure and the results.

Problem

While many aspects of customizing and personalizing a product are related, the constraints of actually manufacturing that product make for a larger set of variables.

Humans are fantastically terrible at estimating things that require math.
See - this just looks complicated (and painful)

Even at a structural level, new dimensions crept in related to materials and model differences that risked overwhelming users with stats and figures.

How might we keep simple things simple, and not interrupt the flow of a potentially great experience?

Approach

At first, simple collaboration and wireframe diagrams helped us drive forward to a common solution.

Working with the client and the entire design team (including leadership, account, development and art direction) we paused in mid-development long enough to determine whether the final structure was right for the flow.

Our more elegant solution

Delivery

Assembling site-map style wires was a short-lived stop. Instead, moving into mid-fidelity comps with the desired layout helped communicate the functionality much more effectively.

Lots of wires destined for InVision

Make it clickable, but prepare people for why it’s still in black and white.

Results

Our development team was delighted when they saw that the rest of the group was finally seeing all the dimensions. We then focused our efforts on the real differentiators for the end user – helping clarify a hard-to-grasp concept in a simple way.

3rd party reviewers of the live app had this to say:

The site is slick and intuitive with a simple-to-use interface. Our custom-designed masterpiece was brilliantly rendered as we dreamt it up.
It is replete with not only what may be considered the most comprehensive insight on wood bat turns, models and types, but also lets you build a custom wood bat just like any MLB Pro player in its finest details.
I can’t give the layout of the builder a high enough score. It was fun, it was informative, it was easy, and every possible option is at your fingertips. It was perfect. Even if you aren’t thinking of buying one, at least MAKE ONE. You’ll regret it if you don’t.
Final responsive solution
  • Client: Wilson, Louisville Slugger
  • Skills: Wireframing, Responsive Layout, Visual Communication, Problem Solving, Design
  • Tools: Sketch, InVision
Created By
Brian Duchek
Appreciate

Made with Adobe Slate

Make your words and images move.

Get Slate

Report Abuse

If you feel that this video content violates the Adobe Terms of Use, you may report this content by filling out this quick form.

To report a Copyright Violation, please follow Section 17 in the Terms of Use.