During 2018 I did a year long internship with a local SaaS startup, Atomic. Their product was an advanced prototyping design tool, which saw hundreds of thousands of users before the company's pivot after I left. The team was relatively small, so I was able to work on some pretty impactful stuff, including educational content for the platform, marketing collateral in the form of customer success stories, and engaging the community with sample projects and hot-tips on their Facebook group.
Prototyping
UX Design
Web Development
Copywriting
Background
Below was a blog post & video demo I made for the Atomic community which was shared on their blog, Twitter & Facebook page to show off the powerful features Atomic had to offer. It was my job to come up with examples like these that really pushed the limits of the software and show people how far they could go with Atomic.
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.
Making a dynamic shopping cart prototype using components, data and JavaScript.
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
Reviewers select any garments they like and (using JavaScript) the cart reflects the real, dynamic pricing
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.
Adding new items to the prototype
And get this: to add another item of clothing to the prototype, all I have to do is copy & paste a component.
The power of simple JavaScript
The second part of this sample I want to highlight, is how the prototype responds dynamically to user-choices.
This prototype doesn’t care which garment a user selects. Every garment is available, and clicking any of them will cause the cart on the right to update. This is achieved by fetching the garment’s value (from the data source connected to the prototype) and passing it to some simple JavaScript. The script handles the logic and even calculates the total payable process. Even the discount code feature really works.
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.
Whether you’re using Atomic’s pre-built logic controllers, or writing Javascript directly in Atomic, it’s really quite simple to add logic like this to your prototypes, to make them more dynamic and realistic.
I used Augmented Reality to prototype form quicker than building real life models, for instance times that I couldn't be in the workshop. I used Fusion 360 to model my designs, and Substance Painter to texture them. Finally, I exported them as a .USDZ file and can share to people to be visualised in their own spaces, in life size. AR mode only works on iPhones and iPad.
Below was a blog post & video demo I made for the Atomic community which was shared on their blog, Twitter & Facebook page to show off the powerful features Atomic had to offer. It was my job to come up with examples like these that really pushed the limits of the software and show people how far they could go with Atomic.
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.
Making a dynamic shopping cart prototype using components, data and JavaScript.
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
Reviewers select any garments they like and (using JavaScript) the cart reflects the real, dynamic pricing
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.
Adding new items to the prototype
And get this: to add another item of clothing to the prototype, all I have to do is copy & paste a component.
The power of simple JavaScript
The second part of this sample I want to highlight, is how the prototype responds dynamically to user-choices.
This prototype doesn’t care which garment a user selects. Every garment is available, and clicking any of them will cause the cart on the right to update. This is achieved by fetching the garment’s value (from the data source connected to the prototype) and passing it to some simple JavaScript. The script handles the logic and even calculates the total payable process. Even the discount code feature really works.
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.
Whether you’re using Atomic’s pre-built logic controllers, or writing Javascript directly in Atomic, it’s really quite simple to add logic like this to your prototypes, to make them more dynamic and realistic.
See in AR
