Case Study: VibrantCast - AR/VR artist Platform
Project
The task was to design and build the application from design conception to First Beta fully functional product.
Designs built in SKETCH, Figma
Low fidelity user interaction to capture business rules and flow
High fidelity layouts for final business approval
Business Leads reviewed for final approval
Output to Invision and used for User Testing and presentations to beta sponsor testers
DEV TEAM during sprints
All screens and layouts can be made available upon request, but for illustrative purposes, below are screenshots for one important feature of the site. Uploading Art to their portfolio.
The following screens are the 1) UX Flow Diagram for the dev team and 2) High Fidelity screens for the business team.
UX Flow Diagram
Final Screens — High Fidelity
Upload Art
- ( Google Storage bucket)
Allowing artists from either mobile or web to upload images to their portfolio. Behind the scenes the software classified each image based on it’s visual uniqueness
Reviewing Image
Simple interface to verify the correct image is uploaded and giving options to allow the artist to “append” layers of details for the MetaCanvas. Note: I assisted with the branding and defining the MetaCanvas concept. Contact me if you want to hear more .
General Information
Adding an art piece title, description, canvas size, and other additional META information in an easy to use interface
Narration Layer
UI to allow artist to add layers of interest with a document, audio or both. The output is seen in both 2D and 3D ( AR/VR) technology.
Dev Note: MindAR, AFRAME.io used within Angular application
Search and Classification Tags
Every piece of art can be assigned multiple tags for both search improvement and image classification.
Dev Note: Using google cloud API’s the images are also tagged by AI that identifies unique image attributes.
Dynamic VR Scene Builder
Once artist has uploaded their art into the application they are taken to an interface that allows them to move 3D objects with an elegant interface to place additional visual, video and audio layers.
Below shows how the AR/VR works. You can try it here: Live Code