Visual Vocal Web Portal

Interaction Architect: Visual Vocal

• ROLE: Created UI information architecture, mockups, internal testing, and conducted customer research

• CHALLENGE: most architects were unfamiliar with how to structure a tour through a VR story in a way that was easily understood by remote clients

• SOLUTION: Text instead of icons, graphic elements for visual hierarchy, meaningful feedback, options that focused on the content

• TOOLS: Adobe XD

• IMPACT: Web portal shipped and was used by major international architecture firms

Visual Vocal is a communication tool that allows distributed teams to collaborate on projects using shared virtual reality experiences. Visual Vocal ties together data, media, and first-hand impressions to help teams ask each other difficult questions, gather feedback, and ultimately make informed strategy decisions that improve subsequent communications.

The Visual Vocal software consists of a smartphone application and online authoring portal. Project leaders are granted the ability to create and share Vv’s, or collections of 360° images that tell a particular design story. Project leaders can annotate and organize their collections of images to tell a story or pose questions for end-users to answer. 

I did the bulk of the initial design of the web portal that architects then used to author these "design stories." 

I designed the interactions and layout on the web portal authoring tool to help architects who were unfamiliar with the intricacies of creating and presenting rich 360 imagery to clients who had no experience with VR

• Architects start with detailed CAD data from apps such as Revit or Autodesk

• They then create high resolution photo-realistic renderings using tools such as VRay

• These 360 panoramas are then imported into the web authoring portal, arranged, and annotated to form a story

• Clients can then browse immersive stories via a phone, where they are presented with design variations and can weigh in on important decisions

I helped create an overall layout for the authoring process in the web portal where architects could see their rendered scenes in high-resolution while still having access to rich metadata and editing operations

Most of the users of this system were unfamiliar with how to best present 360 rendered images. Because of this the UI had to devote extra elements to explanations and connotations of the relationships between different variations of the architect's design.

I had subtly encourage architects to add descriptive metadata so that clients who joined VR meetings asynchronously would have enough information to make informed decisions.

In order to ensure that clients opened a scene, looking at most important view, I designed an easy method for architects to place hotspots.

One challenge was how to let the architects create the correct rotation alignment. I determined that I had to show both the source and target images at the same time so that the author could compare the relationship. Since the app could support multiple hotspots, I also included a quick way of switching between different targets.

Enterprise grade web applications are complex and I helped create a balance between power and usability. This required me to undertake a complex workflow analysis with the goal of pinpointing friction points and redundancies. 

Content Organization, Hub and Spoke: There is a primary scene that gives an overview of the entire project. Within this primary scene are teleporters to "satellite" scenes that represent sub-locations within the overall project. Each satellite scene, in turn, has a teleporter back to the primary overview scene

Content Organization, Graph: Every scene is linked to every other scene via a collection of teleporters. If there are four scenes, each scene would have three teleporters within it, linking every other scene.

I explored ways to extend the Visual Vocal web portal so that it will scale to more complex content while also attaining accessibility on mobile platforms. 

I helped figure out how to provide meaningful views of complex data to a non-technical audience requires adapting existing techniques such as view sorting and grouping, while keeping abreast of the needs of a particular vertical. 

I created the initial layouts, hierarchy, and interaction designs for the Visual Vocal web portal. This web app enables professional architects to securely upload, organize, annotate, and publish immersive 360 imagery. 

As we rolled out the Visual Vocal beta, I collected user feedback and developed a comprehensive set of help articles and FAQs. 

Visual Vocal was trialed and used by several internationally recognized architecture, construction, and facilities management firms. In addition several patents were generated.