GUI Geek . Guru

Sally M Anderson – Dallas, TX – Senior User Experience Designer

, ,

High Fidelity Wireframe: Charm Builder

Desktop version of the Charm Builder with 5 sample charms and the selector interface.


Designed for:
Fossil


Platform:
Salesforce


Tools Used:
Adobe Photoshop, UXPin, Scene7

Charm Builder was a project from earlier in my career with Fossil. They wanted to create an experience where a user could create their own charm bracelet or necklace and then buy everything displayed.

Rather than use Scene7’s functions, I proposed using a flexbox layout on the front-end and then playing around with CSS to “layer” the proper PNG files on top.

Inspiration image for the Charm Builder
Mobile: Showing how the user would select their charm bracelet or necklace base before selecting charms
Alignment and spacing of 1 charm
Alignment and spacing of 2 charms
Alignment and spacing of 8 charms
Charm Builder -- Desktop Max State
A dialog box that would have appeared when a charm could be engraved
Charm Builder on Mobile, demonstrating other chain selections
Charm Builder on Mobile, demonstrating selecting a charm to view more details
Charm Builder on Mobile
Charm Builder on Mobile
Charm Builder on tablet, focusing on a charm with no other options
Charm Builder on tablet, focusing on a charm

It would have allowed the user to begin with a blank canvas, choose their necklace, bracelet, or other base. Then begin adding up to 8 charms.

Charm Builder -- Mobile Max State
Charm Builder — Mobile Max State

Unfortunately, due to technical limitations and how the original code was built, this project was ultimately tabled.

Live Wireframes

, , ,