Case Study

UI/UX Design for Volumetric Video Sofware

OVERVIEW

8i is a volumetric video technology company on a mission to enable people to experience human content and each other in the most realistic way through
holograms. 8i’s proprietary technology transforms video from an array of cameras into a photoreal hologram of a human with real volume and depth, that
can be viewed from any angle, on any device for augmented, virtual or mixed reality. 8i provide developers and creators with tools to integrate these
holograms and enable a broad range of immersive experiences and apps with real people.

INFO

Client: 8i

Role: UX/UI Designer

Year: 2020 - Present

GOAL

The goal for the project was to give 8i’s client tools an overhaul, refresh, provide a superior user experience,
improve user flow and expanding 8i’s stage visualisations and training materials.

High-level goals were to:

  • Improve user control and freedom;
  • Improve flexibility and efficiency of use;
  • Create consistency and standards;
  • Fix error prevention;
  • Provide a minimalist aesthetic to the design for the product;
  • Develop the visual identity for the product;
  • Develop a brand aesthetic almost from scratch;
  • Designed a fully coding-ready responsive app;
  • Update and improve training materials;

Understand & Audit

Goal: Review product to learn more about business goals, user needs, and technical limitations.

A rule of thumb of UX design is getting to know your client and the product. In this case my focus was on the product, so it’s no surprise that I kicked things
off with a Heuristic Evaluation

But what is a Heuristic Evaluation?

Heuristic evaluation is a key part of designing a great product that users can easily engage with and find value in their interaction. It is a thorough
assessment of a product’s user interface, and its purpose is to detect usability issues that may occur when users interact with a product, and identify
ways to resolve them. All issues that are uncovered during the audit phase are documented.

Key focus areas

  • Visibility of System Status (users should know the system status at all times and get feedback on interactions with it);
  • Match between system and the real world (the system should resemble the experiences that users already had);
  • User control and freedom (users should be able to reverse their action if done by mistake);
  • Consistency and standard (similar system elements should look similar);
  • Error prevention (minimize the likelihood of making mistakes);
  • Recognition rather than recall (users should be able to interact with the system without prior information or context;
  • Flexibility and efficiency of use (both new and experienced users should be able to efficiently use the system);
  • An aesthetic and minimalist design (declutter as much as possible, less is more);
  • Help users recognize, diagnose, and recover from errors (make error messages understandable, and suggest ways to fix an error);
  • Help and documentation (if a user has a hard time interacting with your app, make sure there’s help that’s easily accessible);


Link to Mural Boards

UX/UI Research

Goal: Dive deep into the mind of our users to eliminate uncertainty and guesswork.

User Story / Jobs-to-be-done

A user story is a brief – yet specific - scenario stating what the user wants to accomplish by using the product. It describes the most basic goal of a user,
such as signing up for a new account, finding the checkout, contacting support, etc

Because they are short and specific, it takes a number of user stories in order to align the design with users’ goals. Nevertheless, they are an effective way
to organize and prioritize design tasks.

Implementing user stories during our design process helps me accomplish three things:

* User stories ensure design is user-focused;
* User stories clarify design process to avoid feature creeps;
* User stories coordinate various stages of the design process;

I share our user stories through a collaborative method where the client and various stakeholders can add any stories they feel are missing.

I also utilize job stories to help me define user tasks in product design. In short, a job story focuses on the ‘jobs that need to be done’ with an emphasis on
context, causality, and motivation, as opposed to assumptions and personas.


Example of jobs-to-be-done

UX Strategy

Goal: Draft a UX strategy by combining research data.

At this stage of my UX design process I combine the data collected from the previous phases and define a clear UX strategy.

A UX strategy is the plan for the digital product. It should articulate the brand, offer guiding principles, and support the long-term vision of the business.

It is different from a customer experience strategy which focuses on different aspects of the brand, such as customer service, sales processes, brand consistency,
pricing, and product delivery.

The UX strategy has one main purpose – solve specific problems. For this reason I take extra care to ensure that the business vision, user needs, and technical
capabilities are aligned.

UX Design

Goal: Define a design concept to align interaction patterns, user paths, and interfaces.

At this stage of my design process I use a variety of methodologies to define a concept that will shape the entire design elements: interactions, the relationship
between elements, tone of voice and copy, transitions, animations, etc. Basically, everything that is necessary to align product vision to reality.

Here is how I do it:

* Information Architecture;
* User Flow;
* Low-fi Wireframes;
* Hi-fi Wireframes;
* Interactive Prototyp;e
* User Testing Report;


Link to Mural Boards

Visual and UI Design

Goal: Develop and standardize the graphical interface of the product.

At this stage of omy design process I begin to develop the graphical interface of the product. Here I apply everything Ihave learned from users and stakeholders,
and proceed with exploring ways to design interfaces that are consistent and scalable.

All decisions regarding the visual design of the user interface are documented in a UI style guide. A UI style guide standardizes the grid system, layout, colour
palette, typography, iconography, logos, and imagery.

Here are all the stages I cover in the visual and UI design phase:

* Visual Design Mockups;
* UI Animation;
* Design System & UI Library;
* Design Specification for Developers;


Link to prototype

Link to theme switcher

QA & Analysis

Goal: Find out if the product is producing the desired result.

Once the product is launched it’s time to measure the results. Are users interacting with the product as
intended and is the product producing the desired result? This is what I seek to find out at this stage.

To find this out, I provide clients with a correction document for developers and a usage analytics report:

* UI Polishing & Correction Document For Developers
* Usage Analytics Reports

Next Project

SKADI UX