Lauizm | Trueview AR User Dashboards Case Study

How can Trueview AR provide meaningful insights for the jewelry industry to make better data-informed decisions?

Initially, the user dashboard collects all of the different data points recorded by the in-store tablet app ( please see below 👇). The app allowed shoppers to imagine what those products would look like on their hands, neckline, wrist, or ears when they selected a ring, neckless, bracelet, or earring.

The initial engineering team created and developed the app. The original dashboards consisted of quantitative data tables. However, the experience was rather clunky, lacked a product designer touch, and developer-focused since they were the primary creators and didn’t put much thought into their audience.

Ning, Cortney, and I decided the business should create a new experience to solve the existing UX and UI pain points with our super fresh Trueview AR brand!

Our Goal

Our nimble squad team of three created a simple, wicked fast, customer-focused analytics platform on Reactjs – enabling jewelry companies to make insightful, data-informed business decisions.

Date: Oct. 2019 - Jan. 2022

Duration: UX Research: 2 months
Wireframes: 2 Weeks
UI Dashboards: 10 days
UI Account Settings: 24 days

Category: Web Design

Project Type: Visionary

Client: Apollo Robotics Technology

Live Version: Go to Sign In Page

Role: Design Director, including information architecture, principle designer, & co-product owner

Other Team Members

Ning Jiang, CTO
Cortney Conde, Executive Director

Action

I owned the end to end creative planning, execution, and development hand-off of the dashboard.Under my lead, I provided:

Project management + UX framework for my squad to use and effectively execute their tasks.
We did a competitive analysis to determine our product-market fit.
I coached Cortney in her persona writing to validate our audience.
I facilitated dashboard features using affinity mapping methodologies.
I wrote Epic’s and broke them into digestible user stories for the business and engineering to measure.
The CTO and I analyzed, reviewed, and selected a reactjs framework to build on.
I created user wire flows to validate the platform architecture.
I produced wireframes to validate our previous product decisions.
I leveraged Trueform AR brand guidelines I created and folded them into the product visual design language.
I delivered design and interaction documentation for business and engineering development.

My Process

Our initial internal conversations began in August 2019. The business was ready to continue the tablet development and was willing "to rebuild" the dashboard. I slowed their roll with this statement:

“Before designing and developing, I strongly urged minimum UX requirements such as developing personas, affinity mapping of features, and user wire flows to remain customer-focused.”
Scottie

The team wanted to build it right so they adopted it.

Competitive Analysis – (Expand to Read More)

Before starting, we needed to see what the market was using.

Stuller is the jewelry industry giant and integrated with Constacloud, A group of developers who are e-commerce enthusiasts and specialize in e-commerce platform integrations.
Pack4It, A reporting tool for the jewelry industry. The company delivers tailored commerce solutions.

From my research, the majority of dashboards didn't specialize in the jewelry industry. We proceeded to build the next jewelry centric user dashboards.

Creating Personas – (Expand to Read More)

Cortney’s professional jewelry experience aligned perfectly to produce our personas. I provided her a persona framework, and she took half a day to write.

Ning demanded a technical software engineer as one of the personas. At first, I thought it was selfish, and I argued that making personas’ is to remove oneself from the audience. However, Ning was correct about software developers being a legit customer who can afford these luxury products.

Cortney also added four b2b personas, taking the total to nine different user personas in just a couple of days. It would have taken Ning and I a lot longer to flesh out since we had limited experiences with the jewelry industry. They're displayed on our office walls for everyone to review, reflect, and consider during business discussions.

Due to time constraints and limited resources, the three of us skipped conducting real interviews to validate our personas.

In addition, I created a framework for my team with Asana boards and leverage product development articles for Cortney and Ning to use as a starter. I coached them both by building a flow with users in mind and clearly understanding Trueview AR’s Personality motivations and needs.

“What drives our personas? & What are they trying to accomplish?”
Scottie

To keep things brief, here are some of the jewelry designer personas –

A boutique jewelry designer focused on positive and memorable customer services. She goes to great lengths to help clients buy from her company.
An established jewelry designer took decades to develop his brand and wants to keep it flourishing. He realized he’s behind with technology and needs to catch up.

What are they trying to accomplish? Increase sales conversions for jewelry shoppers. Technology, such as Virtual try-on of non-inventory products, will get more customers into their sales funnel faster.

Affinity Mapping of Features – (Expand to Read More)

Squad was now focused on our audience, I busted out post-it notes and sharpies to user dashboard in 10 minutes. I posted them up on the board for discussion and captured this discussion and listed it out on our asana task list.

Next, we discussed each of the features genuinely and scrutinized it into groups to determine if it belongs in a must-have or nice to have groups and ranked in importance. As a reminder, I listed out our personas below to keep our customers in our discussions.

Epic Statements & User Stories
In the spirit of “doing it right” for the team and preventing verbal requirements coming only from stand ups or private conversations – I aligned each UX artifact following the Epic statement structure to provide a clear understanding of specifications.

“It's essential to have tasks accessible and captured clearly in Asana.”
Scottie

The squad provided the details to design the user flows and wireframes efficiently, reducing revisions and effort.

User Wire Flows – (Expand to Read More)

I love wire flows! I find them more helpful than making site maps. Here, I leveraged an XD wire flow template and began to customize it to make it fit for each user story.

Across 5 days – we iterated. It grew, grew, and grew until we documented every experience of the user dashboards.

Meanwhile, I was thinking critically about Trueview AR products. I leveraged Refactoring UI's spacing system to remove any trivial design decisions by the product and engineering teams and added it to Trueview AR Guidelines.

Ning and I compiled a list of 15 React JS UI libraries to consider. I obsessed with the interactions and framework while Ning focused on engineering feasibility and implementation. After two days, we settled upon Reactify, A Material Design + Bootstrap 4 ReactJs Redux Admin Template

Wireframes – (Expand to Read More)

Cortney, Ning, and I needed to validate our decisions based on our Reactify framework selection. Producing the 54 desktop wireframes gave a level of necessary fidelity to validate the user stories we agreed to. I created a total of 162 cross-platform screens.

Meanwhile, I was also managing the completion of Trueview AR Brand Guidelines. My initial strategy of delegating the tasks to a contract designer was beginning to head south, and I took over until I found new help.

View Desktop Wireframes

For two weeks, I hyper-focused on Adobe XD and worked at a feverish pace, explored the interactions, and had engineering sign off on feasibility to meet the October 31st deadline. The team was concerned that my heavy workload would setback the launch. However, I knew I could make up the lost time and not let the development schedule slip.

“I made my Halloween deadline while wearing my Siracha onesie.”
Scottie

Results

In November 2019, I hired a fiverr contract designer from Israel, and together we salvaged the Trueview AR Brand Guidelines and solidified it in five days.

“We learned from our other start-up attempts that it was of utmost importance to have customers use the dashboards sooner instead of taking the time to create it from scratch.”
Scottie

Armed with Adobe XD, I jumped into the user dashboard brand manager’s visual design with the UI framework selection behind us. It took a week to flesh out and present the user dashboard responsive pages for final approval. Usually, it’s best to have three versions. Due to time constraints, lack of design cycles, and respecting my CTO’s wishes of “not wasting time – just move fast!” I presented this final version you see here.

I designed and delivered the cross-platform screen set for Store Manager, Design Management, Order Management, and Marketplace in five business days. I had one day to answer any engineering concerns before heading out to enjoy the Thanksgiving holidays.

View Mobile UI View Tablet UI View Desktop UI

Feeling happy and rested, we did bug fixing when we got back. We also developed, designed, and built the account settings for the user dashboards. Finally, it was usable for our customers.

Below is a prototype I created in Adobe Premiere – showcasing the user dashboard featuring the dashboard, design management, store management, order management, and account settings. We used this footage at trade shows, both in-person and virtual conferences.

My Impression

Initially, this user dashboard was to collect Truevieiw AR tablet data points and record retail consumers' behavioral data. With this launch, standardized components allowed the engineering team to move faster.

Trueview AR's business had to pivot in 2020 due to COVID-19 shutting down most in-store visits to retail jewelry showrooms. We fully transitioned and began further development for a cross platform-agnostic, virtual try-on, AR web plug in 3.0

Here’s a short demo video prototype I made of Trueview AR's 3rd release in November 2020.

My Learning

The production build of the user dashboards runs and renders fast as I originally had it designed. The user dashboard is the third platform Ning and I have officially created together. Over time, we learn to balance our working styles, ability, and output for design and engineering feasibility. Once we have more customers and live data feeding into it, I would like to have another pass and provide fit and finish guidelines for the production build.

Conducting more interviews is needed to validate use cases and see if our user dashboards provide value back to the jewelry industry or is it just another bridge to nowhere. To my understanding – Trueview AR will allocate future budget and resources as more jewelry retailers sign up for our services.

I enjoyed sharing my professional playbook with the team. Trueview AR felt the launch of the user dashboards met the original goal of creating a simple, wicked fast platform on ReactJS. Time will tell if our efforts help the jewelry industry make smart data-informed business decisions and improve their company trajectories.

Having the right attitude, getting everyone on board, and feeling comfortable about the project's strategy and direction were just some of my highlights that everyone involved felt. Coaching, inspiring, and leading are characteristics I continue to nurture and develop as a design leader.