top of page

3D Visual Commerce


ATLATL Software

Design Consulting, Whiteboarding, Concept Design, Storyboarding, Wireframing, Visual Design, Narrative

Situation: The sales team needed a visual aid for showcasing their vaporware concept to clients.


Task: Partner with marketing and engineering to create a software design and storyboard template.


Action: I built a product prototype in Google Slides they could modify for selling to any variety of clients with their own products. The document included UI for front-end visualization modifications, plus an analytics dashboard and back end administration capabilities.


Results: The client was so impressed they also used my design solutions as specifications to develop their software, and I was invited back to solve deeper UX/UI challenges in their admin portal.


1) The company’s user arrives at the home screen. 

2) The user scrolls down and selects *Models*.

3) A new screen is displayed that includes an augmented reality icon and a hamburger menu. The user swipes through the types of models before making their selection.


4) The user is taken to a model details screen where a light product rendering is displayed — while the full rendering is being loaded. 

5) Once loaded, the product image rotates slowly, and the user scrolls down to view more. 

6) The user selects the C attribute *Color* within the first category and notices the most popular color (light green theme) has already been applied.


7) The user scrolls up to view the product, rotates it, and wants to see other categories of configuration, so they select the hamburger icon. 

8) A menu overlay slides in from right to left and the user selects attribute category 02. 

9) The menu slides away from left to right and the user sees the chosen attribute category 02.


10) The user selects the B attribute *Air Intake* within the second category. The user notices the air intake part currently being displayed is already selected. 

11) The user grabs the motorcycle image and rotates it around again to make sure they like how it looks and then selects *Details*. 

12) An overlay slides in from right to left and the user examines the details before closing.


13) Once the overlay slides back, the user grabs the motorcycle image, zooms in to get a closer look at the instrument cluster, and clicks the speedometer hotspot.

14) The user likes the speedometer color selection, clicks off the hotspot, grabs the motorcycle image and rotates it around again to make sure they like how it looks.

15) The user selects *Augmented Reality* and a code is displayed for capturing.


17) The user clicks off the code and closes the B attribute option.

18) The user decides to purchase, scrolls down to review the configured price and selects *Add To Cart*.


Sample screens from desktop lightbox of 3D Visual Commerce Experience, BrandFocus

bottom of page