ARitize360 is a B2B app that allows eCommerce entrepreneurs to use their mobile devices to record products and transform their products into 3D and Augmented Reality assets at scale with no training. The assets are used by e-commerce vendors to engage customers by enabling them to view and interact with products by giving them a full 360 degree experience, or to view products in their space via AR.
OVERVIEW
PROJECT DEADLINE
March 2020 - April 2020
4 weeks
PRODUCT
3D Asset Capture App
Content Management Site
Responsive Marketing Landing Page
Responsive Price Guide page
App Store Content
ROLE
Research & Strategy
IA & Wireframing
Prototyping
Design Assets
Visual Identity & Branding
Accessibility Improvements
UI Design
Testing
Marketing Material
The innovation team at Nextech had developed a technology capable of capturing specific types of objects through a mobile device to produce a 3D asset that could be viewed in augmented reality. It was up to me to design an app that would allow people to capture items easily and intuitively, while being limited to several complex technical constraints.
DELIVERABLES & CONSIDERATIONS
1. High fidelity design of the consumer facing 3D product capture app
2. Mobile and desktop marketing landing pages
3. Subscription/Pricing page
4. App store content
5. Content management site
6. Email notification designs and copy
7. Accessibility Improvements
THE CHALLENGE
FIRST STEPS
3 DAY DESIGN CHALLENGE
The first step began when I was tasked with a 3 day design challenge as part of the hiring process at NextechAR. I was asked to design lo-fi wireframes for an app that would allow people to capture items in 3D and save them to a library. I quickly conducted market research and looked at apps like Display Land, Scann3D, Apple and Samsung's Bixby for inspiration.
Display Land
Apple
Bixby
Scann3d
Once I wrapped up the competitive market research, I began to think about potential use cases and who would be using this app. Knowing that NextechAR had an eCommerce website with 3D and AR models on it, I created a persona based on someone who I felt would be the most interested in an application like this. An ecommerce entrepreneur.
I started analyzing the apps from the research and I focused on the core features. Instructions, guidance and user feedback were some of the key components for this to be successful. I began sketching out and ideating the user flow and some basic wireframes to visualize how the architecture and capturing a product could be designed.
CONCEPT SKETCHES
Once the architecture, and creation flow were solidified, I began designing higher fidelity wireframes. When the hifi wireframes were complete, I built out a clickable prototype and started user testing with a few people I knew in that general demographic. There didn't seem to be any problems with the flow or visual design so I submitted it to the hiring manager and luckily I was contacted not only for an interview, but with great feedback from the CEO.
DESIGN CHALLENGE PROTOTYPE
ARITIZE 360
Upon being hired, I was tasked with designing the ARitize360 app. The app had already been launched and lived in the app store but certainly needed a UX/UI overhaul. I was the first and only UX/UI designer on the Nextech team, and I was excited to take on this challenge. Below are some screens of the app as it existed before I began this project.
PRE-EXISTING APP DESIGN
_google-pixel4xl-clea.png){kind=tracking}
WHERE TO BEGIN?
The deadline I had been given to create this app was 3 weeks. I started by gathering as much information from the stakeholders as possible in regards to who the target demographic was. I connected with developers to understand what the technical constraints were, and I also looked to the marketing team for any branding or assets that may have existed. There was a logo and I used the font that was being used on the Nextech website to try stay on brand. Creating this in 3 weeks was challenging, but once I gathered all the information I moved forward quickly and with an improved focus.
Now that I had a focus on the target demographic, and the business need,s I began looking for UI inspiration. I needed to create an app that entrepreneurs would find visually appealing, looked innovative, and that functioned intuitively.
UI INSPIRATION
UI EXPLORATIONS
ONBOARDING
I used the research and design I applied to the 3 day design challenge and proceeded to design the rest of the app in High Fidelity. There was no style guide or design system to work from so I was essentially designing the visual identity and branding as well. To try to keep consistent with our products, I used the font that was used on the Nextech website. I took advantage of the graphic designer on the marketing team to assist with the visual assets.
The technical constraints very much pertained to how a product needed to be captured. The technology couldn't capture anything shiny, there could be no background noise, the pace in which the product needed to make rotations needed to be communicated, along with the length of time, and product set up. It was an overwhelming amount of information to communicate while trying to keeping the app simple. Below is the design to help train people to set up and capture their products.
CAPTURING
The next flow I designed was the product capture flow. This is when a person would set their product up and begin the capturing process. In the original design I wanted to include directional user feedback, to communicate if they were moving too fast, too slow, if they needed to move closer or move back, but those recommendations were not technically feasible. Below are some of the feedback and capture screens.
TRANSFORMATION
The business model for ARitize360 dictated a lot of the design for the transformation flow. Basically, when someone finishes recording their product, they would upload the recording to our servers for rendering. They would get a notification on their phone when the render completes and then be directed to go back to the content management website to view and purchase the asset. It wasn't technically feasible to show the 3D asset in the app unfortunately, which is why they were directed to the website.
What I focused on achieving in this flow was to show which captures need to be uploaded, which ones have already been uploaded, and to clearly express to the user what to expect and what steps to take next.
The remaining sections in the app that I designed were, How it works, Capture Techniques and Contact. These were all important features to ensure our clients would get the help they needed if they weren't getting the best capture results. Capturing products with this technology can work very well, as long as the capture techniques were followed correctly. Some of the technical hardships of the app included, not being able to capture shiny or reflective objects, items that were symmetrical, if the recording time was too short or too long, or if the angles the camera was aimed at during the recording were not covering the entire product. Because of these technical restraints, we refocused towards capturing shoes and shoe retailers specifically.
SEE ARITIZE360 IN ACTION
CONTENT MANAGEMENT SITE
Once someone uploads their model capture it gets sent to our servers for processing. Once it's processed it can be accessed from the content management site. Our management site has a few different functions; it hosts Nextech's AR experiences which is used by staff, and it also hosts model renderings for ARitize360. The customer facing portion of this site was what I needed to design next. The requirements here were to create a place where people could create an account, log in, view a content list of their models, see newly rendered model uploads in 3D, a pricing list and a checkout for purchasing.
THANK YOU
Thanks for taking the time to read about my journey and process for the design, and implementation of ARitize360.