Augmented Reality App
January 2021
Project Overview |
Developed Skills |
||
|
|
|
|
Objective
This project was part of a 24-hour hack-a-thon competition for Best Buy, for which we decided to develop an augmented reality app to display products in your home. I developed the user interface and integrated the UI with the back-end.
My Role in Development
I participated with 4 of my close friends to produce a business solution for Best Buy based on several prompts. The prompt we chose was to allow customers to demo products virtually. Some requirements of the app include:
- Must allow customers to demo products virtually anywhere in their home
- The models must be properly scaled to real-life size for an accurate representation
- The UI must be intuitive for new users
- The UI must include pictures of products, their price, and specifications
We then split our team into multiple sub-teams to work on each part synchronously. My main duties for the project were:
- Code the UI in C# and implement the UI in Unity game engine for an android device
- Source and import 3D models to be used for demoing
- Work with the back-end team to combine the two parts together
- Test the app thoroughly to verify all elements function properly
- Assist in creating a formal presentation
Now that my role has been outlined, the app's functionality will be discussed.
Left: splash screen, right: default app screen
Splash and Default Screen
The splash screen displays for 3 seconds before smoothly moving up off the user's screen to reveal the default screen, ready for user interaction.
The default screen shows from the user's perspective, with a blue circle indicating where a product can be placed.
The eraser button removes existing models in the space if there are any issues. The button in the bottom right corner, when pressed, smoothly slides a scrolling menu from below where the customer can choose any product to demo.
Choosing a Product to Place
Once the product menu is opened, the user taps the item they would like to place, then the menu will close to show the default screen.
The user will then tap the anywhere on the screen to place the selected product on the position of the blue circle.
Left: products menu, right: after laptop icon is tapped
Left: after laptop is placed, right: user "interacting" with the vitual laptop
Placing the Product
Once the laptop is placed, it will maintain its position when the user moves the camera around the room. The object will track from over 10m away.
In the image on the right, a user (me) is standing pretending to interact with the virtual laptop to demonstrate the scale of the model.
I designed the UI components with ease of combination in mind, as the UI and back-end would need to be combined later. I linked the button functionality to placing the models and modified the scale of objects where necessary.
Final Remarks
Our team put way too much time into the actual functionality of our app and not enough effort into our presentation and unfortunately for us, it was a business focused hack-a-thon.
Though I learned a lot participating in this hack-a-thon, it would have been better to assign a member to purely work on preparing the presentation so it would hold up to our app.