HPC Fire 3D AR App
A 3D Augmented Reality App for Firepits & Accessories
A 3D Augmented Reality App for Firepits & Accessories
HPC Fire is a US-based company that sells a variety of hearth items, such as fire pits, fire bowls, burners, and accompanying accessories.
To bring their customers an unforgettable experience, HPC Fire sought to build an Augmented Reality mobile app for both iOS and Android using the Unity platform. This app would allow them to show off their Firepits and accessories in 3D and AR to their potential buyers, as well as their authorized service representatives.
Research
Product Design
Visual Design
Interaction Design
Liaison with Developers
Figma
Adobe Illustrator
Affinity Designer
I delved deep into HPCFIRE website and its competitors websites, picking out the characteristics that would best suit our app requirements. I then gathered the data and used it to create personas, wireframes, and prototypes, while continually collaborating with the developers to develop a successful app.
I collaborated with Unity backend and UI engineers to understand their goals and challenges and adjust my plan accordingly. The friendly collaboration and understanding of each other's concerns helped us to learn and eventually create a better user experience.
Wireframe
Given the mix of 2D, 3D, and AR components of this application, we, the designers and developers, had to address a variety of difficulties that are not typically encountered with traditional apps. Here are a few of the challenges we encountered and the solutions we found.
Given the amount of 3D models involved, the size of the app would be naturally larger than the average app. As a designer, I made sure the UI was as small as could be while still keeping the aesthetics. I abstained from using heavy or resource-intensive UI items and instead opted for SVG images (which are far crisper and smaller in size) for logo, icons, etc. I compressed the images while preserving excellent quality. I also kept the app animations to a minimum, yet ensuring the app remained intuitive and accessible to the user.
Our aim was to make the app as seamless and frictionless as possible. For us that meant, transitioning the user from 2D to 3D and to AR without any hiccups or jarring effects.
We used 2D cards to list all the products instead of actual 3D models. This saved the developer a lot of I/O (loading and unloading 3D models) and looked aesthetically pleasing.
2D Product Cards
When the user clicked a particular card, while the 3D model loaded in background, we used loading bar with percentage to keep user informed and engaged.
3D Models & AR View
With mobile, space is at a premium and we had to make optimal use of the available space for all the UI elements.
The product took the center place (as it should be) – middle of screen.
We opted for tabs at the bottom for configuring, extras, and details since people usually anticipate finding data at the bottom of the view and, most significantly, we made sure nothing blocks the 3D model. We also incorporated tabs inside each bottom tab to get the most out of the space.
In conclusion, through careful research, productive dialogue between me and coders and well-planned design, this AR app is both visually attractive and gives users a totally immersive experience.
