Website Builder for 3D interactive content

Roles & Responsibilities

Introduction

In the current era of the internet, most websites follow the same structure and flow. This flow entails a landing page to explain all available offerings and exploratory sub-pages available on the header. Whilst this structure makes for easy maintenance in today's competitive market in order to stand out during a product launch or showcasing a personal portfolio, creating an experience is crucial.

Problem

We've seen over the past decade changes to the way information is portrayed on the web. We've gone from the text, to photographs to videos and are now approaching the utilization of 3D and other immersive mediums on the web. Coding websites with simple structures have been made easy with the help of no-code drag and drop tools such as Wix, Webflow, and Squarespace however, there is a need to build an editor that is able to help users harness the power of interactive 3D easily. We decided to address this need by creating a no-code editor which allows the user to create a plug-and-play version of an interactive website.

Process

01.
Research

User will be defined after interviewing potential customers and existing interactive websites will be studied to find a pattern to design an editor

02.
Specification

We will define the features granularly so that it is easy to design the flow of the drag and drop immersive experience editor

03.
User Flow

Working on user flow and journey to give the user an easy to use editor to reach the goal of building an immersive website

04.
High Fidelity

Designing an aesthetically pleasing easy to use editor

De-risking strategies i.e. Feedback & Testing is part of all the steps in the process. Specification & User flow stage were happening synchronously as the team was running on tight deadlines.

Index

Research

Customer interviews

Ideal Customer Persona

Market Research Analysis

Information Architecture

Finding WebGL Based Websites

Templatizing

In the chart below, you will observe Page style, Navigation Style & Transition Style is the common property in all the pages which will be cohesive for an experience.

Page Style: A page will have primary, secondary & tertiary color, font & logo which will be consistent for the whole experience.

Navigation/Scroll Style: A page will have a component to navigate this can either be horizontal or vertical which will be consistent for the whole experience.

Transition Style: Whenever a user goes to a new page it will have change to another page with some sort of animation.

Before diving into creating an editor we wanted to confirm if we can design a full experience with consistent palettes. We designed two themes with different types of components.

Users & Audience

After conducting multiple interviews, three main user types were identified/ ascertained

Focus on the user and all else will follow.

User launching a new product

User looking to stand out in the market

User looking to build portfolios

Specifications

Defining Constraints

Basic User Flow

Principles of building an editor

Defining Toolbar Features

Constraints

To reduce the user's cognitive load it was decided user will not be allowed to design anything from scratch. After interviewing potential customers, we realized while people were impressed with WebGL based websites but most of the people had no clue these experiences were even possible so for the first phase of the project it was decided blank page will not exist as it was significantly dependent on user's creative process. And designing something from scratch is a significant effort when users don't even know what the possibilities are.

Design depends largely on constraints. … Here is one of the few effective keys to the design problem—the ability of the designer to recognize as many of the constraints as possible—her willingness and enthusiasm for working within these constraints….

Basic User Flow

Chooses a Theme

Chooses a Page

Edits the Page

Adds a new page

Edit & Share

Every time users interact with a product, they:

1. 🙈 Filter the information
2. 🔮 Seek the meaning of it
3. ⏰ Act within a given time
4. 💾 Store bits of the interaction in their memories

Principles of building an editor

While cooking we have ingredients like Spices, Condiments, Sauces, Vegetable, Cooking Oil to cook on the Pan, after food is cooked it is served.

Here, Ingredients are the tools to cook the food, Pan is the workspace to put all the ingredients together and the act of serving food is the act of sharing.

Any Editor/maker/builder in this world in real life or on your computer will have a toolbar, workspace and a way to share.

Our editor will also have a Toolbar, Workspace and a way to share.

Workspace will have the page the user selected to edit and toolbar will be used to manipulate the page and overall experience.

Toolbar

Taking all the information from the initial research i.e. identifying pages & its components we understood what was required to build an experience.

Common Properties for a page user will be editing

1. Choosing Theme for the experience (Aesthetics)
2. Choosing type of page/adding page (3D, 360°, photo etc.)
3. Choosing Style (Color, Font, Logo)
4. Choosing Navigation/Pagination
5. Choosing Transition between pages

Page Specific Properties user will edit

1. 3D Object
2. 360° Image
3. Photo
4. Video
5. Text (Heading, Subheading)
6. 360° Slideshow
7. 3D Storyteller
8. CTA Button

Vertical Menu or Horizontal Menu?

Every menu has it advantages we tried different menus in front of our test subjects to understand what will work best for us.

Observations

1. Vertical navigation is faster and more efficient for users to scan.

2. Vertical navigation also facilitates a vertical scanning direction that is natural for people.

3. Horizontal navigation forces a horizontal scanning direction that people often use when they’re reading.

4. Horizontal Navigation: The leftmost item carry more visual weight than the other items because of its placement in the primary optical area

5. Vertical Navigation: All items carry equal weight.

Conclusion: Both types of Navigation have their advantages and disadvantages but for a toolbar with not more than 6 functions, Vertical Toolbar made the most sense.

User Flows

Wireframes

Information Architecture

High Fidelity

Aesthetically pleasing experiences empower usability and increase the user’s willingness to learn and adapt. Aesthetically pleasing products have the following benefits:

1. They set a positive context for every subsequent interaction.
2. Users are more likely to forgive faults down the line if the initial experience was overwhelmingly positive.
3. “Love at first sight” will encourage positive socialization of the product.

Design Decisions

I am covering only few decisions here. Are you curious to know the full flow of the Editor?

Schedule Call

Progressive Disclosure

It consists of showing only a few features initially, and then slowly adding options as users become better.

It's very powerful because it keeps simplicity for new users and brings power to advanced users.

Cognitive load

Cognitive load is the total amount of mental effort that is required to complete a task. You can think of it as the processing power needed by the user to interact with a product. If the information that needs to be processed exceeds the user’s ability to handle it, the cognitive load is too high.

Outcomes & Results

Lots of effort went into designing this product but we were never able to take it live as we realized it was a major undertaking for our development team and we didn't have enough resources for developers to solely concentrate on this project.

Instead, we decided to build an editor to enable 3D & Augmented Reality on the browser (Want to know more? Click this)

Learning: Should have involved tech team during research phase to understand how big of an undertaking this sort of editor was.

Team

As a lead User Experience designer, I was in charge of User Researching, designing the User Flow, and Information Architecture.

I worked with two very talented designers who were there to analyze each and every design decision.

This was a very robust project UI was taken up by all the designers. We had a Design System in place to keep the design language cohesive

Next Case Study

Augmented Reality, 3D Technology, Ecommerce, No Code

Enabling Augmented reality on an eCommerce Store

A no code editor for e-commerce stores to easily make an Augmented Reality experience and quickly embed it on their website.

Read Case Study

Click