Visualising online purchases in your home is difficult – especially when the item is made to order. Inspire by Crucial Trading combines 3D design, web technology with Augmented Reality – allowing you to create a beautiful bespoke rug in 3D and then place it onto any floor.
Read more about Inspire by Crucial Trading by reading our in-depth case study: Inspire by Crucial Trading
When we first conceptualised Inspire the Augmented Reality app was still in its experimental stage. Because of this it wasn’t practical for us to develop for both iOS and Android at the same time. We needed to develop a working product on 1 platform first, prove the concept and then potentially roll it out to other platforms. We had a difficult decision on our hands. What platform should we pick?
We decided to start with iOS ARKit this is because we felt it had the widest device support and installed user base at the time over Android ARCore. Since we launched the app this has changed quite a lot and the number of ARCore enabled devices is growing daily.
We also looked at the feature set of ARKit which was more developed than ARCore in these key areas:
We also looked at the feature set of ARKit which was more developed than ARCore in these key areas:
Looking to the future we are excited to develop the app for Android and ARCore. Having the app on both platforms will open it up to a wider user base which is only a good thing. This will provide us with valuable data which we can use to improve the app moving forward.
During development, after many rounds of testing and prototypes it became clear to us how important lighting conditions were for both functionality and app performance. Firstly AR uses something called Plane Detection to find flat surfaces – this relies on computer vision to look for features of a flat surface such as uniform colours or a lack of contours. In a poorly lit environment this doesn’t work very well and the darker the environment the harder it is to find a flat surface. This is the case for lots of AR apps but it’s not always explained very well in the app or even at all. This can cause unnecessary confusion for users of the app who might just assume that the app is broken. When we develop AR apps in the future we plan to have a feature which detects the ambient light and then alerts the user that they might have issues using the app, with some guidance on how to improve the environment.
Lighting is not only important for detecting flat surfaces but also for how realistic the objects your placing look. The object needs to cast realistic shadows, which in our case was a rug. Due to the fact a rug is not that tall or large it was difficult at first to create a shadow which appeared realistic. It’s much easier with an object that has a more obvious shape and casts a large shadow.
We also had to look at how the materials the rug was made up of reacted to light. Everyday items react to light in so many different ways that once you start to notice it, it’s impossible not to. Due to the way each material reacts to light and the subtle differences between them we had to make lots of different maps that were unique to each material which at times was a long and arduous process.
A common conversation we have at KIJO is about how native applications work. Because the app is installed on an actual device sometimes there is a misconception about where the data is stored and what is required to power them. Apps most of the time will require a backend just like a website does. The backend manages things from login, authentication, API, data storage and processing of data.
The Inspire AR app needed a backend just like any other. The website itself used WordPress as its content management system and as its eCommerce software via WooCommerce. Each material is essentially a product in their shop catalog and both the 3D builder and the AR app uses the same product catalog. The decision was taken to utilise the WordPress REST API to create some brand new endpoints. The 3D rug builder is built using React.JS and the AR app using Swift. A REST API would mean that both these applications could consume the same API and work with the same information.
To begin with with we created a brand new WordPress plugin that would contain all the code for the new API. We always follow WordPress guidelines as closely as possible to ensure a smooth developer experience – the codex is brilliant and one of the reasons we love WordPress.
Next we needed to look at how to handle login and authentication within the app. For websites this is handled using browser cookies however with an API this works differently. We decided to use a combination of oAuth and JWT Tokens for authentication. These are industry standard tools and have excellent support – it’s not something you would notice when using an app but most modern apps will use one of these 2.
Once the authentication was handled we started building our new endpoints. An endpoint is basically a URL that does a specific function. We created endpoints to do everything from login, register, forgot password, retrieving product data, creating orders and finally checkout. It was extremely satisfying once we had all these working to see how the website, 3d builder and native application could all work together seamlessly and speak the same language.
Finally we looked at how we could make things run as fast as possible. We decided we would cache responses from the API so that it could load immediately rather than querying for the data each time. Utilising the WordPress Transient API we save all the API responses which can be retrieved quickly rather than doing expensive queries everytime the API is used. We set the cache to refresh itself every 24 hours or when something significant is changed.
“It’s said that the most valuable commodity in the world is a problem. If you can solve that problem then your solution will very lucrative. Design isn’t just how something looks, design is how we solve problems.”
Jordan Thompson
The journey a user takes is a fundamentally important but an often overlooked part of a project. When building Inspire we looked at the user journey across the website and 3d builder. A common mistake we often see is that the user journey does not align with the goals of the product or even worse that the goal is not clearly defined in the first place. At the start of the project we set out some clear KPIs which we needed to achieve and these were based on the business goals of the client. We then set about defining a clear strategy for achieving these and this meant aligning the user journey with these goals. Users should be able to quickly and easily carry out the tasks they expect and you need them to.
Not always but quite often the shortest path is often the best. While it may sound obvious you will be surprised how often it’s not implemented. We started off by looking at how many clicks it would take to order some product samples. The old user journey had no direct path to the materials, you would have to go through 3 screens and 5 clicks before getting to the point of being able to order some samples. We reduced this through a new menu structure which provided direct access to the materials from the header of any page.
Navigation is normally the first place to look when trying to optimise a user journey however there are 2 other critical areas which shouldn’t be overlooked. The first area is visual hierarchy – essentially the order of how things are laid out on a webpage or within an app. We ask ourselves these questions when trying to decide the best hierarchy:
Hierarchy is important as a users attention span is very short, especially if they have a specific goal in mind. Make it as easy as possible for a user to do what they need to do and guide them to the correct locations. The second area to look at is the content itself – both written and visual. The same questions above apply here as well. Your users expect visual and written content to be a certain way depending on your brand, industry or service. It’s vitally important that you take a holistic approach to navigation, visual hierarchy and content if you want your product to be successful.
It’s said that the most valuable commodity in the world is a problem. If you can solve that problem then your solution will very lucrative. Design isn’t just how something looks, design is how we solve problems. Effective design can have a direct and tangible result on metrics such as orders and revenue. These are metrics that every business, no matter the industry can appreciate. While good design enables, bad design can also stifle.
During our work on Inspire we seen first hand how effective design can positively affect key business metrics. We rebuilt the Inspire 3D rug builder from the ground up to be faster, easier to use and with orders in mind. As a result of this work we managed to achieve an increase orders of 988%! A remarkable achievement but all the success is owed to effective design – both visual and technical. The old design wasn’t effective and it was stifling orders. The investment in a new design has a provided a very real return on investment for the client.
This theme continues throughout our journey with Inspire. Our focus on the user journey made it easier to order samples – this resulted in a 9.3% increase in the amount of samples ordered and samples directly correlates with customers making purchases.
In summary the KIJO team had a really insightful journey while building Inspire. It’s always positive to see how the combination of data, research, planning and a results focused mindset can fuse together to create something exceptional. Inspire was quite an expansive project that touched many areas and presented lots of challenges along the way. Solving problems is the lifeblood of KIJO and it’s what we enjoy doing on a daily basis.
Looking forward to the future we already have our sights set on how we can innovate and improve the next version of Inspire through our continued dedication to designing both websites and apps.
