- HTML5
- Business
URBIN ATTIC is an HTML5 interactive that visually illustrates the transformation of a cluttered living space to promote the company's storage services.
DESCRIPTION
Urbin Attic is a storage company offering door-to-door pick-up & delivery service to consumers. People short on space can store their extra stuff in the company's secure and climate controlled storage facility.
This front page HTML5 interactive provides a fun way to communicate with customers about the company's convenient storage service.
HTML5 DESIGN NOTES
The objective was to present the visitor with an exaggerated example of a cluttered apartment room stuffed with furniture, sporting goods, electronic equipment, mementos and other furnishings.
Below the graphics is a horizontal slider bar. Each point on the slider bar is a threshold controlling which items are visible or hidden. The slider bar handle can be moved right or left by dragging or clicking on a point. The handle will snap to the nearest point when released while dragging.
When the handle is dragged to the farthest point on the right and the room is clear of items, a mouse hiding behind the sofa quickly scampers off-screen. This extra detail gives the interactive more personality and is designed to increase visitor retention.
TECHNICAL NOTES
The biggest challenge was to ensure the smooth and seamless transition of each item's visibility or location state. Each item's state is checked whenever the slider bar handle is dragged above or below a point. In some cases this means gradually increasing or decreasing the item's opacity until it's fully visible or transparent. In other cases this means starting the item along a predetermined path until reaching its destination.
The mouse action is tied to the sofa's visibility state. When the sofa is completely transparent, the mouse begins to scamper in the direction he's currently facing. If the sofa becomes visible again before the mouse is off-screen, he reverses direction and returns to his starting location behind the sofa. When running the mouse will always choose the shortest direction to his target destination.
CREDIT
Graphic art by Andrea Rouleau