When I joined Atomic recently, I was excited to learn I’d have the opportunity to be hands-on, making sample prototypes and sharing them with the Atomic community. Some will be ideal for everyday prototyping use-cases, others will be more for fun, to illustrate what Atomic is capable of, like the sample I’ll show you in this article.
This sample shows key steps in an online clothing purchase. You can browse through (really expensive!) shirts & pants before adding items to a shopping cart by clicking on them. You can select any items you like and the prototype does the math to calculate the amount to pay.
This shopping cart prototype demonstrates 2 powerful things:
- Components connected to a data-source, so the content can be easily updated
If you want to jump right in, open this sample and make a copy into your own account, then have a look at how it’s made.
The power of data + components
Historically a layout like the one in this prototype would be static; the garment images, labels and prices would all be specified during the design phase, and then baked into the final prototype. The first part of this sample I want to highlight is how it uses Atomic’s components and data sources capability, to build a modular, data-driven layout.
Each ‘clothing item’ is a copy of the same layout component. The component defines the style and layout of the item.
Next, the components are connected to a data source, in this case, a spreadsheet which holds all of the content, including pricing, product details and URLs to the source images.
The awesome part is that the designer (me) didn’t have to go in and manually add each photo, item name, price, and brand to each one of these components. Instead I simply connected the spreadsheet to Atomic, and the data from the spreadsheet such as the name of the clothing item, price, photo & brand are automatically imported into each component. It also meant that if I wanted to see what other items looked like, or I changed my mind on which ones to include, I could easily swap them out.
And get this: to add another item of clothing to the prototype, all I have to do is copy & paste a component.
The second part of this sample I want to highlight, is how the prototype responds dynamically to user-choices.
This type of realistic experience can be crucial to your user testing. Instead of distracting your testers with rigid instructions about where to click, and being unable to see how testers respond to things like the final price based on their preferred choices.
If you haven’t already, check out the live sample prototype. If you are interested in seeing how it’s made, from the preview page click the Copy & Edit button and copy it to your account. Got ideas for more samples you’d like to see? Hit us up over in our Facebook Group or on Twitter.
If you are completely new to Atomic, know that it’s free to use for as long as you need, so go ahead and register for your free Atomic account and get started with advanced prototyping.