SpaceNest AR:
Product Study
SpaceNest AR is an AR-enabled application that lets you explore our solar system and learn information about all planets.
This app was created as part of my on-going learning about Augmented Reality(AR) medium and it’s UX implications, as well as a side-project where I want to understand and create a full-fledged application in Unreal Engine.
This project was one of the first products that I developed solely on my own using new methodologies, while exploring new design and accessibility standards, and the newly integrated Google’s API into Game engine.
Personal Project
Google Android Platform
2020 - Present
Majority of the AR applications that are available on the market were created in Unity - which has a very active mobile development community.
In direct contrast, Unreal Engine(UE) has a limited mobile development community - and even fewer who are working solely on AR applications, even though UE is more technically superior than it’s competition and has a partial support of AR functionalities integrated in the engine.
By exploring the available apps in the Google’s Play Store and Apple’s App store, I was able to identify four distinct problems that I need to solve with this new project.
Almost all the AR applications available on the market are powered by Unity, which is comparatively slower than Unreal Engine.
The applications that I explored are not a true AR app, as they are mostly 3D objects overlaid over an open camera - which gives a false sense of Augmented Reality.
The UX of the Interfaces of these Apps was deeply misunderstood and badly implemented. This opened up avenues where it can be understood better and create better experiences.
Most of these Apps are either paid, or include micro-transactions - which is a major red flag from an education perspective.
How do we go about creating a platform which is a True AR app that offers better UX which is free for all and powered by Unreal Engine?
The new app must achieve these goals to be considered successful.
The new app should be created using Unreal Engine and try to harness it’s AR and Graphical capabilities.
The app must use core AR functionalities offered by Google’s ARCore to provide a true AR experience.
The App must function seamlessly and provide a better Augmented Reality UX and include the navigation and interaction pattern familiar with the AR paradigm without overloading the user.
Create a Free-to-use, educational app that incorporates real-life data and imagery to provide an authentic experience to the end-user.
Since the concept was focused around free-for-all education, I wanted to create an AR app which can be used by younger audiences, and older audiences as well. I went and conducted a few interviews with the targeted demographic to understand their AR experiences and experiences with Educational applications.
90% of the people I talked to, both young and older, have never actually used an AR application, but did view a few interesting conceptual videos on Social Media.
Due to pandemics, Younger audiences had their fair share of exposure to the educational apps - but without any incorporation of AR.Older audiences never used these applications, but know of the existence of these apps and services through regular advertisements.
Intuitive yet Simple Interface
The application interface and functionality should be created while keeping in mind that the app should offer a fairly similar experience to both children and older people.
Basic Interactions
Interaction patterns must be straightforward and highlighted through the use of identifiers and signifiers.
Easy to understand
The content must be created using easy to understand language.
Encourage movement
As a core principle of a true AR app, it should encourage movement and let people explore the content from all sides.
Based on the anchor points discovered above, I created certain design principles that I had to follow through the entire process.
But still, to get clarity on what exactly needs to be done, It was essential to get a high-level concept ready so that I can plan ahead and make amendments as necessary.
I used traditional design tools - Whiteboard and Paper, to create the list of touch-points to include in the application, and based on those touch-points I created the basic application flow, and created some high-level concepts of the interface to understand the interaction pattern.
By following the Design principles, and the Wireframes above, I created high-fidelity designs of the application, and through those I defined the scenarios and the interaction flows.
I used Adobe XD to create these flows - Since Adobe XD now supports 3D mockup, It was a fun challenge to explore and utilise those functionalities to create high-fidelity designs.
Since the Application is text-heavy, going by the content, Typography needs to reflect that and provide maximum legibility with least eye-straining.
I opted for Google Fonts as they are free and provide a large variety of fonts to explore
Headings - Bebas Neue
Content - Lato
Through the high-fidelity designs, I was able to get a finite list of visual assets that I need to create before starting with the development process.
I used Adobe Photoshop and Adobe XD to create icons and background images.
This visual assets includes:
Splashscreens
Icons and their changing states
Logos
Background Images
After completing the high-fidelity design and creating a rough implementation of the designs in the Unreal Engine,I took the first draft of the application to the people to get their initial thoughts and validate the designs and identify missing functionalities.
The Interface was pretty easy to grasp, with the identifiers being appropriately visible and call to actions evident.
The pattern was a little confusing at first, but easy to grasp after a brief learning curve.
People unanimously agreed that there are some basic interactions - swipe, pinch-to-zoom, explicit quit button and more, functionalities are missing from the interface.
Without them the app feels disconnected and incomplete.
I whole-heartedly agree with the feedback I gathered and it gave me a chance to learn and understand the UX of an AR more closely.Now, these lapses become task-points in my to-do list that I need to incorporate in the final release.
Feedback gathering is a crucial aspect of a good product development cycle and a non-skippable step in a design process.
I won’t go into the detail of the development process as it is fairly long, as I have already done that in my detailed explanation, which you can read by clicking here.
These are the list of industry-standard tools for the development process of the application.
For creating 3D Models of Planets and animations.
For backend scripting and writing core logic and UI
Augmented Reality (AR) functionality and support
After rigorous development for 4 months straight, while managing a full-time job and pandemic, I was able to finish and publish the first version of SpaceNest AR to Google Play Store.
I also, incorporated real-time data from NASA’s server and Smithsonian Content directly in the app to make the content more extensive and expandable, and was able to add all the missing functionalities that people highlighted in feedback phase, with a new cleaner and easier to understand interface.
Even though the functionality provided was pretty rudimentary as per the modern app standards, people could use the application with no roadblocks.
And through the second round of interviews, I managed to gather the following results:
People unanimously agreed that the interface design is clean, intuitive and fun to use on various devices and overall provides a better experience for an AR app.
Apps allow people to place any object they want to see in real scale and adjust the size of the object accordingly and interact with it in a true AR-sense.
People have an overall positive sentiment toward the app and frequently describe the flow of the application as straight-forward and very easy to understand.
The application was received with positive reviews and reactions from people who used the app, and currently sits at 5-star rating at Google Playstore. This project unearthed my hidden abilities to handle a product development cycle from a conceptual level to final releases and continued support.
As a UX Designer myself, who loves to experiment and learn new things, This project was an experience which helped me a lot in having a better UX understanding of Augmented Reality (AR), which I’ve compiled in this small article.
If you wish to read in extra-detail, click here to read SpaceNest Product Study on Medium.
Download SpaceNest AR on Google Playstore.
😊