This is a prototype with a UI interface designed for an augmented reality mobile app to view furniture in a user's home. They would use it as a tool to see if an item of furniture would fit into the space they intend to place the item before purchasing it.
Click on the image above to try the prototype
* If the the prototype appears too big for your browser window, reduce the window's width and then the app will fit responsively.
I created a demo augmented reality app myself previously which was created for displaying houses in a users space. I received feedback regarding its functionality and interface which inspired me to make a more user friendly UX design, even if the content was different. The feedback generally was:
The interface was cluttered.
Users couldn't find functions they were looking for.
They couldn't tell if certain functions existed or not.
*Click on the image above if you'd like to see a video of the app.
I collected some references on modern AR apps and noticed a few aspects which made them appear more user friendly:
Thin lined icons placed on the screen's edges which appeared to obstruct less of the camera view.
Buttons which are recognizable because they are used in other AR and smartphone apps, such as a large camera snapshot button.
Text under icons which defined their functionality.
Inspired from what I noticed from the references, I got some ideas and drew rough sketches so I could quickly share my ideas with others to see what they thought.
Instead of everything being displayed on the screen at the same time. I separated the content into sections such as menu panels.
UI icons were added which can switch unrequired elements on or off.
Notifications were added which direct the user during their journey.
The feedback was:
A developer mentioned that it needs a loading graphic for while certain 3D assets are loading.
A development manager also mentioned that a favourties icon should be on screen so a user could group the items they like (I added this input into the sketch).
The manager also mentioned that the white buttons may not be visible if the camera goes across anything white, so sometihing dark should be added behind the buttons for them to still be visible.
From the feedback on the sketch a proceeded to illustrate a wireframe to depict how each element connects and described the functionality in more detail. Further feedback was:
There should be a loading graphic for while 3D assets are loading.
There should be buttons to customize the colour of the object (This was added to the wire-frame).
I designed some mock-ups in Adobe XD from the wire-frame and feedback. The panels were inspired from modern web design such as a font that is easy to read, and where there's plenty of padding around UI elements for them to appear uncluttered and clearly visible. Panels don't completely cover the camera view though as to not break the user's experience.
Though the item name and price is on the main UI screen in the wire-frame, and the buy button appears to be different from the wire-frame version, I made changes in the mock-up because I noticed that the screen would look cluttered and be obstructing too much of the camera view. The item name price were rather added to the information panel and replaced the button descriptions in the wire-frame. This because a user would be more interested in product information than on buttons they should understand intuitively anyway.
The feedback was:
The loading graphic should be 3D and in the position where the item will appear so the user feels a result where they are tapping if the object hasn't been loaded yet (I then made illustrated a 3D version which is on the bottom right mock-up image).
The prototype is inspired from research on modern AR mobile app and website design, and from the feedback during the UX process. The prototype can be tested on users further for the design to be reiterated. So far people seem to use the prototype quite intuitively.