SmithsonianTopImage

This past year, my team and I collaborated with the Smithsonian Institution’s Digitization Department to redesign their 3D Voyager platform. Our goal was to increase overall accessibility while maintaining the in depth and unique experience of the Voyager.

the team

Christine Pak
Lexi Fogel
Ben Decker
Arjan Guglani

timeline

September 2022
May 2023

tools

Figma
UserTesting.com

my role

Conducted / created user tests. Led large portion of the visual design & prototyping phase.

The Problem

In order to set our overarching goals for the project, my team and I met with our client to discuss the current issues they saw with the Voyager. After sharing their thoughts on what needed improvement, we constructed this problem statement to guide our ambition throughout the entire project:

Many users are not utilizing the Smithsonian Voyager application to its full potential. The platform does not efficiently support a self-directed learning experience due to the complexity of the interface and its tools. The application is created to promote learning, and the confusion that arises with using its features greatly diminishes the platform's goal.

Our Audience

In addition to conversations about their interface, we deliberately outlined the audience group we would focus on for the majority of our research and design phases. While our client was adamant about making their primary persona the ‘general public’, we as a team felt that this scope was too large for the project and committed to design for educators, students, and life-long learners. In order to serve the larger public, we also made sure to consider the platform’s accessibility for those hard of hearing or sight.

 

Students
Teacher
LifeLongLearner
3DModeler

After the initial stages of discussion with our client we began our Research and Exploration.

In order to better understand the Voyagers’ current shortcomings, my team and I outlined a research plan which included conducting a competitor analysis, heuristic evaluations, usability testings, interviews, and field studies. The combination of these practices would allow us to see how the tool is currently being perceived by users, as well as gain feedback on how we can implement changes.

Competitor Analysis

Through examining other platforms with similar goals and interfaces, we were able to get insight on how we could successfully implement new features and update current ones to make the Voyager more accessible.

Nasa
British

Our direct competitor is Nasa's Voyager. Through examining this platform, we gained insight on how reducing certain abilities to the user can potentially create a better learning environment. 

An indirect competitor, the British Museum's Museum of the World website gave us additional perspectives on other ways one can learn about historical figures and items in an immersive, interactive manner. 

Heuristic Evaluation

Each team member administered a heuristic evaluation individually. This allowed all of us to become familiar with the Voyager’s interface and begin conversations on the usability issues we saw ourselves.

ezgif.com-gif-maker

Usability Tests

We approached usability testing by crafting a list of tasks that utilize the full functionality of the Voyager 3D platform. We then advertised our Zoom administered tests across social media as well as 12 volunteers from Usertesting.com. We completed a total of 24 usability tests.

Screen-Shot-2023-09-04-at-3.21.16-PM

Interviews

We gathered over 10 educator and power user (participants familiar with 3D tools) interviews that helped provide the current attitudes towards the Voyager based on its ability to teach and overall usability of the 3D features.

interviews-1

Field Studies

My team and I went the extra mile to gather information on how museum goers interact with technology in the physical space. This allowed us to examine how individuals were actively using the interfaces provided in similar contexts as the Voyager.

field1
field3
field2

What we discovered through our Research Analysis...

Through these extensive explorations and research initiatives, we discussed the recurring themes and issues mentioned during this phase as a team. After hours of affinity mapping and meeting as a team, we listed the most concerning usability aspects and prioritized them on what should be changed during our design process.

Underutilization of the Tour Feature

The Tour feature is very promising, primarily for the education space, but certain usability and aesthetic issues prevent users from interacting for substantial periods of time. The main issue with the tab is that when you open it, it simply lists artifacts and their description; you have to know to click a card to begin the tour or the entire functionality will not be used.

Insufficient user guidance

This is the more generalized issue causing the underutilization of Tours. Tab menus and some modification options are not described, so many users learn them by trial and error. This means that some of the more complex features are not taken advantage of due to improper (or a lack of) documentation teaching users to use them.

Tool clutter

Even a study participant working within the 3D industry did not understand what certain material views might be used for. Thus having this feature adds system complexity with very little output value. In some menus, none of our study participants understood the reasons they would make certain changes to the model.               

Confusing symbolism

Many participants expressed confusion when we asked them to predict what each tab on the menu does. We determined that it is unclear that the globe indicates tours and that the chat bubble icon indicates annotations. These ambiguous icons should either be supplemented with captions or replaced with something more specific.

From these discoveries we set out to achieve these UX Requirements:

  1. Redesigned Tour Modules
  2. Enhanced Guided Experience 
  3. Reorganized Navigation 
  4. Verbose iconography with additional text

And then from here began our Design Journey...

User Flow Mapping

After prioritizing our requirements, we began our design phase with an extensive user flow study. We mapped out the current flow of the Voyager and discussed what made sense and what didn’t. We utilized the feedback from our research to ideate ways to rearrange the flow to create the most seamless experience possible. It was difficult to approach the flow of this project since there are multiple points users could start from. However, we wanted to make sure each experience flowed from one to the next and was engaging enough to bring every user to utilize every tool and feature.

user-flow-new-2.0

Design Progression and Iterations

As with any design process, we started off with paper sketching. After bouncing back and forth our ideas on layout, my partner Ben Decker and I played around with how we could effectively use space and balance to create a clear direction for users as well as keep the overall interface visually appealing. Here is the full timeline of our design iterations. 

january

iteration1

The Sketching Phase. Me and the other designers of the team continously sketched throughout the month of January. Much were very short sprints of ideas that mainly served to begin ideation and conversations surrounding our design issues. 

february

iteration2

The Wireframing Phase. As a team, we took the physical sketches that resonated with us the most and translated them digitally into wireframes. Much of this phase involved going back and forth from hand sketching to digital. 

february

iteration3

Medium Fidelity. We reached concrete agreements on concepts for our changes, and started to really play with layout through these new ideas. Of course, there was much going back and editing the concepts that just did not work technically for the design. 

march

iteration4

Here, we pretty much established the location and layout of all of our features. This is where we began to think heavily about aesthetics and user interface design. What kind of icons indicate the tabs most clearly? How big should our type and buttons be? What colors work best for this design? 

march

iteration5

Here, we're getting closer. But we're also seeing some things that are not working. Some of our user interface is established, but new discoveries and inspirations on how we can improve the user experience are sparked. Design is never a straight line. 

april

iteration6

The new ideas sparked in the previous phase are implemented. The user interface is heavily developed. For most of the time, we are focused on the interactive flow. This phase is very detail oriented and we have made sure to polish, check, and edit every part of the design.

When we came to conclusion on how we wanted our user interface to look like, we established a Component Library:

Screen-Shot-2023-08-29-at-5.05.03-PM

Here are some examples of our key design decisions in alignment to our UX Requirements:

Redesigned Tour Module

From our last iteration, we helped users connect the information being presented to the object by adding numbers to each Tour step and floating bubbles with correlating numbers to the object. We also increased the touch targets of our back and forth button, making control easy to understand. We produced an interface that makes the Tour content pop front and center and one that is easy to control and use.

Enhanced Guided Experience

In direct response from our iterative user testing, we added verbal descriptions to any features that required specific actions. While some tools and features of the Voyager are made to be 'intuitive', it was clear through our research that most were not. Instead of adding a large how-to or information section onto the platform, we decided to guide users throughout the tools and features that they encounter through brief captions. 

Reorganized Navigation

We made the tool more descriptive with thorough text labels, easy to understand manipulator options, and a pinned menu system on the bottom-left corner. This breadcrumb menu makes it difficult for the user to get lost within the interface, and gives them the power to find their way back to any previous pages. Additionally, we included a reset button at the top right with redo and undo options. 

Verbose iconography with tooltips

We completely redesigned all the buttons and replaced iconography with ones that users resonated with more. We also increased the touchpoint sizes of our buttons since the original area was too small to be accessed. In addition to clearer icons, we added a hover state where the name of each feature is explicitly labeled. This way, the user will always be aware of what they will be clicking into before accessing a new feature. Through this, we were able to keep the iconography as minimal yet as clear to the user as possible. 

Post Design Testing Results

As we looked through the data from our tests, we wanted to see differences in perceived ease of use and time of completion across articles, tours, annotations, and tools. We sought to compare the data from our baseline tests to a prototyped round of tests through a simple numerical analysis. A lot of users commented about the efficiency of the new tool. Some common words heard during the tests were “simple”, “easy”, and “intuitive” which was a great difference from our first round of research. 

Screen-Shot-2023-08-30-at-11.09.33-AM

Final Thoughts & Conclusion

In conclusion, my team and I are delighted with how far we have come to solve this problem. Our client, the Smithsonian, also expressed that they will slowly be implementing our changes. However, there are still many of our suggestions that we hope to see improved in the future, such as audio narrations for the visually impaired. Despite these hopes, I believe my team made great initial strides in redesigning an important platform to be more accessible for all to learn from. I would like to thank the Digitization Department at the Smithsonian Institution, specifically Jamie Cope, and my amazing teammates Arjan Guglani, Lexi Fogel, and Ben Decker.

View