360 Experience & Gallery Design Roadmap

Designers - Asir, Harshit

B2C - Buyer Side - Global

Overview

https://docs.google.com/document/d/1KIYYXcwTm9--dW8WQIsFYlo5hcpZVXaKeGp5pYFF-qU/edit#heading=h.jnkugfe21vp2

Understanding User Behaviour

• Users want different points of view of the car to experience its physical form digitally and a 360 view is more helpful than stitching multiple images mentally to imagine the form.

​

• Users prefer to see the car through the images or 360 first before reading the details, as it helps them create a mental image first and later attach its details, specs and features to it.

​

• Users use zoom as a way to check the damage in detail, similar to taking a close look in the real-time experience.�
• Users' trust is improved when given the freedom to explore and find the damages themselves with little cues. �
• Users feel images could be limited and not detailed enough because of the nature of the rectangular format. While 360 is embraced because of its free interactive nature.

​

• The first interaction users perform on the details page is swipe right to check the gallery images, users are more accustomed to swiping interaction.

Pain Points

• Users find 360 views not to add much value in the details page as it shows only the exterior & interior views and no other details.

​

• 360 views and gallery view are the same & repetitive, no extra details there, so it is better to use the gallery as it adds some value

​

“360 view is good but there is nothing more than the 3d view, which I really enjoy seeing it”

​

• Users have to rely only on galley pictures to make a mental map of conditions as it has details of imperfections, features and specifications.

​

“It’s hard to find where the damages are in 360 views, we have to zoom in so much to find the flaws or find them in the gallery and compare later here”

Design Focus

• Bringing the digital experience closer to the physical experience�
• Bridge the gap with sensorial experiences through the mobile screen interface
• Visual form (depth perception)
• Auditory - Sound information
• Tactile - Haptics (sense of touch)
• Orientation - Spatial awareness�
• Easy adoption of the 360 interactive experience - indicators and tips�
• Explore in detail - Zoom vision, quick interaction etc.,�
• Freedom to explore the condition by users themselves - Adds more trust�
• Reduced textual information - only factual points & rely more on visual cues

Research

Links

Roadmap Doc Link

Important Research Links

• Buying Experience - User journey in physical space - Chennai Field Research
• Design research - Buying Experience in Field
• UT1 - 360 Experience Prototype - Insights
• Multiple Point Of Views - 360 Interiors

​

• Gallery Experience - Revamp
• Capture More Images @Studio - Running Doc
• Imperfections In Gallery
• Observation On Gallery Images

​

• Car Condition - Details Page Improvement
• Online Car Buying Experience

Other Links

• Refurb Flow
• Capturing more data points on refurb app
• Refurb process India - Research Plan
• Gallery Data to be captured - Metrics

Design Roadmap

Tasks/Priority List

Ideal Tasks/Priority List - New Capture

Ideal Tasks/Priority List - New Capture

Priority List - Existing Capture Data

Priority List - Existing Capture Data

360 Experience - mSite

Phase 1 - MVP

Link to Designs in figma

Link to Prototype

• Buying Experience - User journey in physical space - Chennai Field Research
• UT1 - 360 Experience Prototype - Insights
• UAT Feedback

User Needs

1. 360 viewer first details page

Users find the gallery image of exterior and 360 exterior views to be repetitive and find 360 views to be more helpful - reducing the cognitive load to process information. Users felt switching to 360 will provide the same information which was already given in the form of photos, so no incremental value.

​

1. Imperfections Hotspots

Users find it difficult to map the imperfection in the gallery to the car body - they do this to check if the imperfection is real and where exactly it can be found in the body of the car. Also, users focus on only imperfections at any moment, one by one, Showing all imperfections at once brings a feeling of a low-quality car.

Animated experience for hotspots.

https://www.spinny.com/buy-used-cars/bangalore/maruti-suzuki/ciaz/alpha-petrol-whitefield-2019/1051225/?referrer=/used-cars-in-bangalore/s/�

1. Features & specs�Users also wanted to check the features of the car and match it with the car body, mapping it to the body from the images to the 360 views is time-consuming and doesn’t provide a clear mental map�

Phase 1 - MVP Plan

1. Loader progress Bar
2. Car default at 45 degree angle
3. Switch to landscape/portrait modes
4. Drag to rotate & zoom indicators for the first time users or educating users
5. Hotspot Size dynamic scaling in viewer - Exterior/Interior
6. Zoom Functions, indicators
7. Double Tap to zoom in/out functionalities
8. Label size scaling in viewer
9. Label positioning above & under central line - Landscape mode
10. Image view - full hotspot
1. Hotspot Size dynamic scaling in viewer
2. Label size scaling in viewer
11. Car & image cards spins with respective movement (Spin)
12. Interior view zoom on image cards page
13. Zoom on image cards

​

*(Includes both portrait & landscape mode)

Designs

360 Experience - mSite

Phase 2

Link to Designs in figma

• Buying Experience - User journey in physical space - Chennai Field Research
• UT1 - 360 Experience Prototype - Insights
• UAT Feedback

User Needs

Segregation - Defects & features

1. Users want to explore the damages & features separately, they say damages are to be inspected separately as it's a decision-maker, and features are good to be explored alone without confusion. Segregation is the preferred choice by users to avoid traffic on the page, and okay to view them together provided a clear distinction between them & not a overwhelming list. Session sample Video of users
2. Users felt some cues damages/features (Icons with text are provided as per original design)

​

Pinning of hotspots on screen edges of interior view

1. Users had to spin & check all parts in the interior view to make sure they covered all the hotspots - Fear they might miss out on hotspot as there are no

Clear indicators.

​

User Needs

Zoom on exterior/interior - Image cards view

• Users zoom in on the exterior/interior viewer to check damages even while hotspots are on to take a closer look at the damages themselves without any help of images - replicating natural real-time behaviour of checking it closely on the surface.
• In image cards view - users spin the car in the viewer and tap on hotspots to quickly skip cards and move to a particular damage/feature - cards carousel has a constraint of going one after another.
• In portrait mode - users expect the image to be in the default state on tapping before they pinch & zoom.
• Users want to zoom in the car on image cards view to compare & make sure the damges displayed on the card & car is similar.

Designs

Designs

360 Experience - Web

Phase 1 - MVP

Link to Designs in figma

• Buying Experience - User journey in physical space - Chennai Field Research
• UT1 - 360 Experience Prototype - Insights
• UAT Feedback

Phase 1 - MVP Plan

1. Loader progress Bar
2. Car default at 45 degree angle
3. Drag to rotate & zoom indicators for the first time users or educating users
4. Hotspot Size dynamic scaling in viewer - Interior/Exterior
5. Zoom Functions, indicators
6. Double tap to zoom in/out functionalities
7. Label size scaling in viewer
8. Label positioning above & under central line - Landscape mode
9. Image view - full hotspot
1. Hotspot Size dynamic scaling in viewer
2. Label size scaling in viewer
10. Interior view zoom on image cards page
11. Zoom on image cards

Desktop Usage Data

Multi-Perspectives Of

Interior Views

Link to Design explorations in figma

• Buying Experience - User journey in physical space - Chennai Field Research
• Multiple Point Of Views - 360 Interiors
• (PDF) Real World Third-Person with Multiple Point-of-Views for Immersive Mixed Reality
• UT1 - 360 Experience Prototype - Insights

Problem Statement

Any used car purchase will involve a thorough checking of condition & comfort before making the final decision as it is a high-value investment, and these decisions are taken by an individual or influenced by a group (family & friends who share the car).

​

In different scenarios (Daily commute, limited use & long rides), the individuals of the group play different roles than being a driver (Aged parents, kids, caretaker, wife or husband). And this changing role requires the individuals to look at the car & its details from different points of view, also literally by positioning themselves in different spaces of the car (driver, front side & rear seats)

​

“Can I do a test ride with only my family here, I want them also to check if they like it or not”

​

“My wife & kids should also be able to fit in this car properly, so I wanted my entire family to get on a test ride with me”

​

“My wife cares about good leg & boot space”

​

“I’m buying this car for my aged parents & they should be able to sit comfortably”

​

The current 360 interior experience is not the same as how users will position themselves in space while testing the car in real-time. Also, the current central point of perspective does not provide all information as it has a lot of blind spots (rear side legroom, steering control details etc.,)

Hypothesis

Concept

Users expect to view the digital 360 interior experience as to how they would be seated in the car for the first time experience starts digitally ie., from a driver’s perspective(similar to the driving view), back seat family perspective & front side seat perspective to gain a better understanding of interiors & experiencing it mentally by stitching together as per their roles. stitching images mentally is a task

​

​

To design multiple POVs within 360 interior experience by clicking multiple 360 photos at different seat positions & perspectives (driver, side & back seat) and letting users switch between their choices, also it can be extended to exterior views, letting users freely move through while navigating views.

(PDF) Real World Third-Person with Multiple Point-of-Views for Immersive Mixed Reality

Competitor Use Cases

Action plan

https://www.carmax.com/car/20982471

https://blog.adobe.com/en/publish/2018/07/26/launching-an-immersive-car-buying-experience-at-carmax.html#gs.9wkfs3

1. Include images of three POVs - Add them to detail page view - Tanay - City wise
2. Include 360 Images of three POVs
3. Include select POVs points and see images
4. Include select POVs points and move to 360 Images of POVs

Designs

Engine Condition

Open Bonnet

Link to Design explorations in figma

• Buying Experience - User journey in physical space - Chennai Field Research
• UT1 - 360 Experience Prototype - Insights

User Needs

Engine Condition

​

1. Users want to take a closer look at the engine as to how they do it in real-time - A lean in top view with hoods open.
2. Starting engine & listening to its sound in different states - Start, accelerate & idle etc.,
3. Check engine exhaust smoke color & sound - Will have dark smoke if engine is faulty.
4. Check the oil level by pulling out the oil dipstick & verifying it through scale given.
5. Users want to check if the oil is spilling out when engine is on (or) right after a ride & engine is put off (within 5 minutes)
6. Check if the engine is rusty - Expects the bay to be rust free - A mark of non-flood affected vehicle.
7. Check the battery health by taking a closer look.
1. The year of make - to check how old the battery is - does it require replacement?
2. mfd code,
3. Battery cables health
4. Expects better quality picture.
1. ***Users expect the engine information to be trustworthy - A video of the working engine is preferred over the audio alone (Users doubt audio could be a stock one)*** - Session sample Video of users

�

Designs

Designs

Haptic & Auditory Experience - Engine Sounds

Link to Design explorations in figma

• Buying Experience - User journey in physical space - Chennai Field Research
• UT1 - 360 Experience Prototype - Insights
• https://www.researchgate.net/publication/317184674_Automobile_engine_condition_monitoring_using_sound_emission

User Observation

Sensorial experience

Engine condition is evaluated by feeling its vibration on certain hotspots on the car - holding the steering wheel tight, on the hood & the door, also with the corresponding noise it makes. The discrete & distorted vibration denotes bad engine condition..

​

Concept

Using haptic convertors for audio to translate it to vibrations which users feel.

Data visualization of engine sound (audio-visual form) that reveals the engine health through a graph.

​

Precedents

Haptic Meditation through vibrations - App Store

Lull.Haptic Meditation

Thrum.Haptic Meditation

Design precedents

Open only doors view

Check interior

Link to Design explorations in figma

• Buying Experience - User journey in physical space - Chennai Field Research
• UT1 - 360 Experience Prototype - Insights

Open Door view, Why does user need one?

• Users expect the details of headroom & legroom while checking the interior space, it is considered one of the major aspects of interior space.
• Users find open doors view is helpful in checking interiors while looking from outside - Legroom & headroom dimensions are better visible from this view

Available Boot Space

Open Boot

Link to Design explorations in figma

• Buying Experience - User journey in physical space - Chennai Field Research
• UT1 - 360 Experience Prototype - Insights

User Needs

• Users want to take a closer look at the boot space to check the available storage area & expect a view from a slightly upper angle.
• Users expect a well-lit view of boot space - the dark sheet covers & low light condition are making it difficult to check the boot space (Having boot lights ON or extra lighting will be of help)- User Session Sample Video
• They spin the boot view 45 degrees left & right to check the space in 3d - it gives a sense of depth.
• Users find it difficult to comprehend the volume of boot space as there is no way to check it comparatively, the dimensions in millimetres & litres scale is not helping enough.
• Customers also check for the stepney tyres and all the necessary toolkits availability on the boot space like, jockey, spanners etc., (Considered very important - emergency items)

Designs

Designs

Given the Bag size in litres & how many bags can be fit inside

​

Can fit ten 20L rucksacks

Tyres Health

Exterior Condition Check

Link to Design explorations in figma

• Buying Experience - User journey in physical space - Chennai Field Research
• UT1 - 360 Experience Prototype - Insights
• Car Condition - Details Page Improvement
• Online Car Buying Experience

User Needs

Users go around the car and check the tyre condition by rubbing its surface and check by comparing the percentage of tyres condition

• Users were checking tyres' health condition(damages) as part of the exterior inspection more than minor damages - considered as high-value items.
• The condition details in details page is hard for users to consume by mapping mentally.
• Customers also check for the stepney tyres health as per details page and check if all the necessary tools are also available on the boot space like, jockey, spanners and other tools

Users check for

• Health percentage
• Button health
• Brand of each tyre
• Last replaced date
• All the tyres with same brands is preferred more because of smooth riding experience & easy replacement of all at once
• Different brands are still accepted given the brand names clearly
• The list should also include spare tyre brand name.

Designs

Gallery Design

Revamp

Link to Design explorations in figma

• Gallery Experience - Revamp
• Capture More Images @Studio - Running Doc
• Buying Experience - User journey in physical space - Chennai Field Research
• UT1 - 360 Experience Prototype - Insights

Context

The first interaction on the details page starts at the gallery. The Gallery/Images acts as the initial point of checking car condition as the user demands photos or visual proof of the car & basic information around it.

​

Why do users prefer a gallery of images to explore?

​

• Gallery offers less learning curve & the swipe interaction makes it easier for quick access to visual proofs.
• Images /photos are perceived to be more realistic as they had to be taken by the human on the other end - adds trust & human touch
• Easy to make the first level of filtrations without getting into details

​

How do they use it?

​

The gallery is used on two levels

1. Users tend to spend initial time checking the car on the details page itself which offers convenience & doesn’t take into details
2. Full gallery view to check each detail as users spend more time on a single image & make a very informed decision

User Needs

• Users expect to see what is wrong with the car above in the journey - imperfections should be listed first to take a quick decision
• Users think 360 view and Gallery images are smaller in size when viewed on portrait mode & had to constantly pinch and zoom every image on the screen to have a detailed view, this becomes tedious considering the number of images to check for each car.
• Users go through a long list of information on page & images in the gallery

(41 images in total plus imperfections illustrations)

• Long single carousal makes it tedious & time-consuming to reach from one end to the other end & makes it difficult to locate any specific information or Image as they look for it to make critical decisions.

“I don’t like the idea of swiping so much on that one page “

​

• Users expect more visual cues in gallery
• Mismatch in the condition of the car mentioned textually to the images
• Terminology challenges while reading the features & specs, expect images to match with the textual content for quick recognition.
• Difficult to recall or relate with certain features, had to google separately which delays the whole process - spends about 15-20 minutes minimum.

​

“Information is majorly in a textual format I want to see relevant visuals as well”

https://app.usertesting.com/h/8ysYjN89v6px8cCKnpto?shared_via=link

Observed Behaviours

• The first interaction users perform on the details page is swipe right to check the gallery images, users are more accustomed to swiping interaction.
• Users use zoom as a way to check the damage in detail, similar to taking a close look in the real-time experience.
• Users prefer to see the car through the images or 360 first before reading the details, as it helps them create a mental image of the car first and later attach its details, specs and features to it.
• Users rub the surface of the 360 viewer(screen) to understand the depth of dent & bumper fixture issues.

User Expectations of Visuals in Gallery

Capture more images @Studio (Running Doc)

​

• Gear - Users wanted to look closer at the gear - its wear and tear to interpret the usage quality
• ABS and Airbags - Safety availability/access of the car
• Tyre rims - the condition
• Boot storage space - Dimensions, capacity in litres, mats, cleanliness & condition
• Infotainment / Entertainment systems/Touch panel - Working/condition, specs details.
• Speakers - the brand of speaker, sound quality & dB details.
• Center console glove box - no. of bottle holders and dimensions of the glove compartment

Solution Directions(WIP)

Precedent Study

https://www.figma.com/file/ubHwAWjxB1qorVlqyZepvb/360-Experience---Mobile?node-id=863%3A6496

​

• Users are having a learning curve for the first time - Making use of common interactions observed form frequently used apps - Instagram, WhatsApp, Google & apple photo galleries
• Simplify information & what they see offline should be the same they see online

​

​

Design Explorations

https://www.figma.com/file/ubHwAWjxB1qorVlqyZepvb/360-Experience---Mobile?node-id=863%3A6496

Imperfections Data - Australia

https://docs.google.com/spreadsheets/d/1dD-ZWn7WY-_vLqFMRGBbo21XyGA8bOD0FEsQJ9HClGg/edit#gid=482993079

Design Explorations

Design Explorations

AC Condition &

Pickup

Link to Design explorations in figma

• Buying Experience - User journey in physical space - Chennai Field Research
• UT1 - 360 Experience Prototype - Insights

Comfort pointers,

Legroom, headroom, Seat.

Link to Design explorations in figma

• Buying Experience - User journey in physical space - Chennai Field Research
• UT1 - 360 Experience Prototype - Insights

Lights & Wipers

Link to Design explorations in figma

• Buying Experience - User journey in physical space - Chennai Field Research
• UT1 - 360 Experience Prototype - Insights

Entertainment System

Link to Design explorations in figma

• Buying Experience - User journey in physical space - Chennai Field Research
• UT1 - 360 Experience Prototype - Insights

Brakes & suspension

Link to Design explorations in figma

• Buying Experience - User journey in physical space - Chennai Field Research
• UT1 - 360 Experience Prototype - Insights

Exploratory

Concepts

Interactive (360)

Details Page

Link to Design explorations in figma

• Buying Experience - User journey in physical space - Chennai Field Research
• UT1 - 360 Experience Prototype - Insights

Problem Statement

Solution Direction

Users wants to take a well informed decision before booking or buying a used car online as the cost of making a wrong impulsive decision is huge. Thus users are extra careful and anxious about making their choices. They analyze the car condition on details page by comparing the provided condition info to the visual proofs (Images in gallery or 360 free form experience) and create an abstract mental map of its condition by remembering & processing its details.

​

This mental abstraction of car condition takes a huge amount of cognitive load & time for users to process information, as users repeat the same for a huge list of cars to compare & shortlist, it makes them feel fatigued in their decision making journey, which delays the whole buying process for users, leading to less BI & BC.

​

We need to design a solution that reduces the overall cognitive load of users in consuming information, abstraction & fatigue in making an informed decision and improve the BI to BC conversion rates.

• Design car condition details page with information that is interactive, dynamic and visually aided with original car proofs at every point of the flow.
• Communicate information more personalized with context more than just data & numbers - meets user expectations & fears.
• Visually appealing with smooth micro interactions.
• Avoid repetitive content & make meaningful informations.

Precedent Study

https://www.apple.com/in/iphone-se/

https://www.apple.com/in/airpods-pro/

​

The number one challenge for e-commerce is the aversion to buying something we don’t have under our eyes. Interactive product presentation is the best way to create a phygital discovery experience and increase sales. The 3D aspect especially is a way to add interactivity 🎮 Usual web navigation is about clicking, scrolling, moving your mouse and typing, but it is usually a one-way communication. As users and visitors, we are passive on our discovery experience 😅 and our actions do not affect the design.

​

https://www.tesla.com/models

https://www.mercedes-benz.com/en/vehicles/passenger-cars/mercedes-maybach/

https://www.lamborghini.com/en-en/models/concept/asterion

​

Contextual Information &

Linguistic Challenges

Link to Design explorations in figma

• Buying Experience - User journey in physical space - Chennai Field Research
• UT1 - 360 Experience Prototype - Insights

Voice assisted exploration

Carlee ;)

Link to Design explorations in figma

• Buying Experience - User journey in physical space - Chennai Field Research
• UT1 - 360 Experience Prototype - Insights

Problem Statement - Hypothesis

Solution Direction

As users develop an interest in buying a particular car their curiosity to understand its present condition in details increases, so users start exploring car condition through the text (condition information) & visuals(Images or 360) that provided to support the case. As this is a non-linear & organic process, questions & doubts arise regarding condition in between online digital exploration and users have to scroll through a page or follow a pattern of actions to arrive at the answers which is time consuming & requires manual efforts everytime. This distracts the focus & delays the decision making process.

​

While in real-time meeting with dealers or sales assistants (who is well aware of the condition) during test ride, the answers are immediately made available to the users by the or through self check-up. This helps users go through all the doubts quickly & focus clearly on the needs & decisions.

​

​

• ​

Depth Perception

Link to Design explorations in figma

• Buying Experience - User journey in physical space - Chennai Field Research
• UT1 - 360 Experience Prototype - Insights

Sound Perception

Link to Design explorations in figma

• Buying Experience - User journey in physical space - Chennai Field Research
• UT1 - 360 Experience Prototype - Insights

Assisted digital test-ride

Online Discovery

Link to Design explorations in figma

• Buying Experience - User journey in physical space - Chennai Field Research
• UT1 - 360 Experience Prototype - Insights

Anaglyph 3d

Link to Design explorations in figma

• Buying Experience - User journey in physical space - Chennai Field Research
• UT1 - 360 Experience Prototype - Insights

Carzso

India’s first virtual pre-owned car showroom

https://www.carzso.com/

Design Ideas Dump

Ideas

Image augmentations with reference points - Human scale, luggage capacity

​

Lean in-views with discoverable controls for engine bay

​

Operable dashboard view - convey condition of controls, electricals, lights, horn, info on KMs, rev-health etc

​

Detail page as an Interactive mini-game

​

• Find imperfections, features, key details of the car
• Gamified rewards for information
• Use them to unlock perks like free test drive, discount on booking etc

​

Video Content�

• Can the detail page be a youtube short/instagram reel of about 40-50 seconds?
• Cadbury AI video pilot
• Better navigation and scale understanding.