Dylan Randall Design

Illustrating Dimensions

Abt Electronics

With a focus on Clarity, Consistency and Ease of Understanding

A Project about using visual language to make numbers and dimensions easier to consume and understand.

The Problem

Many of Abt.com’s customers are looking to replace an existing appliance. It is critical that they can find and understand the dimension of the new appliance to make sure it fits in their home.

What if we could design a way to make the needed dimensions easy to see and understand for all users?

Discovery

I was brought into this project after the solution and general direction had already been decided

I focused my design discovery on studying the design patterns used by competitors who have implemented similar strategies before beginning to ideate.

Ideation

My goals for Ideation were:

Create appliances that could be easily recognized, but not represent any brand too closely

Create a consistent look across each illustration that fit in well with Abt.com
Clearly present the measurements to be understood at a glance.
Render these as SVG to take advantage of scalability

I began by sketching and designing a set of generic appliances, set at an angle to easily show all 3 dimensions.

Some Challenges

Making the display programmatic

The abt.com appliance catalogue is too broad to manually update the dimensions for each model. I learned to modify the svg code to render text that could be overridden by our front-end developer so each product’s dimensions could be displayed from the database.

<path d="M0.77274 119.9C0.680783 119.977 0.669064 120.114 0.746564 120.206L2.00951 121.705C2.08701 121.797 2.22438 121.809 2.31634 121.731C2.4083 121.654 2.42002 121.516 2.34252 121.424L1.2199 120.092L2.55192 118.97C2.64388 118.892 2.6556 118.755 2.5781 118.663C2.5006 118.571 2.36323 118.559 2.27127 118.637L0.77274 119.9ZM58.8898 125.167C58.9818 125.089 58.9935 124.952 58.916 124.86L57.653 123.361C57.5755 123.269 57.4382 123.258 57.3462 123.335C57.2543 123.413 57.2425 123.55 57.32 123.642L58.4427 124.974L57.1106 126.097C57.0187 126.174 57.0069 126.311 57.0844 126.403C57.1619 126.495 57.2993 126.507 57.3913 126.43L58.8898 125.167ZM0.894558 120.283L58.731 125.217L58.768 124.783L0.931577 119.849L0.894558 120.283Z" fill="black"></path>
<text x="85" y="55" text-anchor="start"><tspan> 70.5 </tspan> in.</text>
<text x="85" y="125" text-anchor="start"><tspan> 36.25 </tspan> in.</text>
<text x="10" y="145" text-anchor="start"><tspan> 35.75 </tspan> in.</text>
</svg>

The Final Design

I used repeated design elements across appliance types whenever possible for a consistent aesthetic and to create an informal design language that could be easily used to expand the appliance illustration set.

Learnings

The original intention was to create illustrations for all of the major appliance categories carried on Abt.com.

After launching the initial phase, it was discovered that there were issues with inconsistent data in some of the product lines.
The project was paused indefinitely at this point
Learning point: This should have been addressed in the discovery phase of the project.
The completed portion of the project provides a quick and easy way for customers to see the dimensions of the appliance they are viewing.

Results

CUSTOMERS

300

IMPRESSIONS

2500

SALES

2500

STATISTIC

Back to projects