Hi, I'm Caleb Edison.

I am an interdisciplinary 2D and 3D designer who crafts immersive virtual experiences.


Almost There


Project Background

Please note this case study is very recent, and still undergoing some peer review so parts may change or be updated, and if you're reading this I'd love to hear what you think after reading it! :)

For Google’s UX Certification I was tasked with creating an app that allows users to take a virtual tour of a wedding venue. After researching and getting in the headspace of people who might use such an app, the idea quickly evolved. The app could be not only a platform or open market for wedding venue locations to allowing patrons to take a virtual tour and see their spaces, but it could also let users customize and set up the area virtually to preview the space with decorations and furnishings.


User Interviews

I talked to several people during an initial series interviews to gauge interest and find out about their experiences with existing interfaces. I drew on common conventions “How do you feel about picture-based tours, like realtor listings? Or video tours, like the Travel Channel? Finally a 360 image tour like Google Street View?”. All participants seemed in agreement that a 360 panoramic solution would be a familiar and usable interface, a language they already understood right off the bat. A few suggested a guided sort of tour or some sort of voiceover or leading elements but all wanted to be able to switch to self guided instantly.

Most importantly more than half expressed that they’d like a way to see a preview of different setups, seating arrangements, and decorative elements. This was entirely outside of the scope! This was something I hadn’t even considered! This was... a real good idea that could add an entire additional layer of usefulness to the concept, and became a key feature.

What if an app could cut out at least one trip driving to a location, perhaps multiple trips with friends and family, to have a stranger guide you around potentially with a sales pitch? Or what about being able to check out a distant destination wedding locations on your couch?

Technical Research

So with the idea coming into focus, I did some research on what was already out there and what was technically possible. Matterport is an interesting approach and appears to be the “gold standard” of 3d tours. But our decoration and customization feature didn’t seem possible there.

Once I realized that "open source web based 360 panoramic image viewer" was the magic incantation to type into Google, I found that this wheel had already been invented as I hoped. I reviewed a handful of these results, Pannellum was nice and a close second, but ultimately Marzipano would win as the best way to make a fully-functional prototype beyond Figma. Marzipano is open source and an active/not dead project, and had 2 different potential ways to achieve the technical feat of having multiple customizable decorative elements by either swapping out transparent layers of images dynamically or even rendering 3d objects.


The User Journey

Two distinct personas were devised to help bring two different use cases to the forefront. A primary user planning a wedding and wanting to select customizations, and a secondary user group (friends or family) that would want to see the customized venue and give feedback. You can meet Jemma and Troy in the slide deck if you’d like, and read more there.

Image of Figma Wireframes

Compiling and understanding these user personas, journey maps, and user flow diagrams uncovered more insights. Wedding ceremonies are steeped in rich culture and history. What if someone wanted a Hindu homa, a German log cutting ceremony, or any one of thousands of different configurations that the venue had not thought of but would be able to provide or allow? Being able to select "other" or "custom" or upload a picture for visualization made sense.

Our foundational interviewees had stated they would like to see the price of everything up front, but wouldn’t primary users want the option to have it not show the pricing within their shared URL? Uncle Troy is always offering to help pay for things anyways, and we could already hear aunt Wanda gasping aloud at how much we were going to pay... nobody had time for that sort of drama, so some sort of privacy settings would be a necessity.

Flowchart of the interface and user experience paths


Low-Fidelity Prototype

Next I started visualizing and sketching out rough ideas of what the interface and iconography could look like.

Image of Rough Sketches of the interface

Those sketches grew into wireframes, and a barebones workable prototype emerged. A good portion of the app would be modal windows so I drafted wireframes for those as well.

Image of Figma Wireframes

2 test 360° HDRI panoramas within Figma were lined up end to end so that they could be dragged around, and would eventually loop back to the beginning, to make up the mock 3D effect.

Image of low-fidelity Prototype


Usability Testing

Now armed with a semi-functional prototype I ran a moderated study where users were tasked with completing a few interactions, then featuring some questions relating to experiences and opinion of the product. More than one user struggled with understanding the concept due to the low fidelity. One remarked "I don't understand why it's in black and white?" and another "I can't picture actually being able to fit that many chairs there, so I didn't think that was the right spot." I learned that the more "off the beaten path" the interface goes, the more fully fleshed out the prototype needs to be for a valid test. Given the opportunity I would have taken my own 360 photos or make a much more 'dense' prototype with many more closely connected images.

This study did yield some helpful ideas - additional new screens were added to give users a central page of commonly asked questions, and provide multiple ways to reach out for additional information or requests that weren’t covered there or in the info modals. Ultimately this could be connected to an AI assistant that could help field the first line of questions.


Logo and Style Guide

I settled on a deep purple and a complementary gradient as a color scheme to keep the interface and brand in general bright, active, and inspiring. I'd also been testing out fonts and settled on a pair that meshed right. A name was pinned down, and typographic logo drawn up.

Brand Style Guide, including logo,colors, fonts and typefaces, and iconography.


High-Fidelity Prototype

Below is a full map of the prototype itself. However, you can also check out the Interactive Prototype and take a look yourself. Keep in mind that due to technical limitations this is still just enough to get the idea across, a workable prototype with real hotswapping of decorative elements would need to be done in Marzipano or something similar.


Additional Usability Testing

Next, twenty humans participated remotely in a second unmoderated study with the revised high-fidelity prototype. This study took place via a really helpful integration called Maze, which plugged directly into Figma so that the testing process could be fully automated. This really changed the playing field, and I can't state enough how impressed I was with Maze.

Another noteworthy part of the testing was to determine engagement and actual usability for this case study itself. To clarify, we just broke the third wall and I am indeed talking directly to you. The paragraph is temporary and a social experiment of sorts, to help answer the question of how many people genuinely read all the way through the study as it is compared to how many skim and miss or jump right over it entirely. By touching the word temporary anywhere within this paragraph, you can let me know that you were genuinely engaged enough to read to this part. There were a total of three instances of the word temporary now, so plenty of places to click as the definition of that test was concluded. And with each click or touch I would have a metric to really see how people would use and interact with the product. In short, there are a myriad of ways to build out a test, and plenty of insights to be found directly from user research.

So at the end of the day while this round of testing ultimately didn’t yield too much new helpful data, one user did note that having specific icons for things like restrooms could make sense. The test did show significantly better results as far as usability - 75% of users completed all the requested tasks within the target timeframes(under a minute total to find the gazebo and then click on any setup hotspot), while 10% seemed engrossed in systemtically exploring all of the functions of the app.


Lessons Learned

The response to the initial idea was overwhelmingly positive. I was suprised how much people want streamlined experiences like this, and are eager to try them out. This project also showed me how helpful initial user research can be, the customization and decoration feature that multiple users alluded to quickly proved to be the most novel and useful feature. I also was impressed with how once the fidelity of the prototype was built out enough people could easily see and intuit not only the universal language of icons, but how to “look around” by touching and dragging and jump right into interacting with a panoramic image. A 'pinch to zoom' feature would just be common sense now, for example.

Next Steps

In order to stay within the project scope I focused on weddings, but expanding the app to any rentable event space would be worth pursuiting. Building a full-featured prototype is a huge next logical step, as is narrowing down the best ways to monitize the app. Partnering with venues would be a good way to start this, and while initially it could be a free service or add supported, having venues actually pay a small fee to list could be considered.

One business owner interviewed made a great point, stating that they put a good deal of time and effort into scheduling and meeting with clients who don’t end up becoming customers, that they would gladly pay to list their location if it meant that the “easy questions” could be automatically answered for them and they would get more qualified leads.

Brand Style Guide, including logo,colors, fonts and typefaces, and iconography.