Product Intro
Vortex is a mobile application created by Teleportal, a startup company exploring the new domain of spatial computing. The product is a 3D filmmaking app that is targeted for development on mobile and tablet devices. It’s main users are non-technical filmmakers, students, or regular content creators who want to quickly produce new narratives. This product is in an alpha stage and they have only implemented and tested basic camera and model control features. I was assigned with designing the basic file management experience.
Type: Mobile Application
Role(s): UX Designer
Duration: 2020 - 2021
Tools: Figma
Role(s): UX Designer
Duration: 2020 - 2021
Tools: Figma
Problems
Since the application was still defining its vision and brand image, I had to use placeholder terms, define my own scope, and needed to adhere to a strict color palette and design style. Also, as a unique product, I was unable to share proprietary artwork to any participants. Most of the constraints created limited context for participants to full engage in deep a way and to help build up a conceptual understanding of spatial interfaces.
Goals
My primary goal was to design the basic features for the file management experience while respecting color palette constraints. Through testing the file management experience, I wanted to help participants develop a better conceptual idea of what the product was trying to enable within the domain of artistic content creation.
Research
Competitive Analysis
To get a better idea of what basic file management features needed to be included, I tested and reviewed several popular and relatively easy to use 3D and 2D content generation and editing tools. All of the apps had a common set of operations, such as: Open, Rename, Copy/Duplicate, and Delete. Some had more advanced features like group or sequence as top level options. Only half of the apps had a feature to playback footage via a thumbnail or a video modal. All of the apps had an option to export footage, but only 2 of the apps had an option to share on a social or media platform.
Interviews
I was able to conduct interviews with 5 designated participants from the product team. This came with some challenges since they were already exposed to some of the product concepts and occasionally responded to fit the product needs and less as a user.
Each of the participants were asked questions about how they would interact with their files, what they need to do, what they expected, and what word they would use to define a file. An interesting observation was that there every participant had a different definition and name for different data types - this resulted in scope reduction for advanced workflow capabilities and file interactions. The findings and revelations empowered the developers to define the MVP of the overall product which allowed them to redesign and agree on a new data model.
Design
The product team provided me with a set of approved brand and product colors and a design guide. One of the design requirements was to create a product that only supported a dark theme. Another design requirement was to use only placeholder fonts and icons since marketing was in the process of creating unique and proprietary visual elements. I sketched and presented designs as often as I could to keep the focus with the team and participants on patterns and layout that supported functionality. Once the low-fi’s and wireframes were approved, I then worked on more of the visual detail.
Wireframes
Whimsical was used to create wireframes to test against the developers, product team, and participants. Using wireframes opened up more conversations about why we need different types of data to manage and introduced a need for newer file types to be named and included. The visual support enabled the participants to engage in other thought exercises from understanding file hierarchies and how they would share and view their work on different platforms.
Testing
Testing Method
Towards the end of each design sprint, I tested the latest Figma prototypes against the product team and a small group of pre-approved participants. Each of the participants were provided with the same user testing scenarios and A/B comparisons where all user actions, comments, and reactions were then recorded for analysis. An exit interview was also conducted to capture additional thoughts on design and behavior.
Testing Results
After a few iterations, based on feedback, users were able to clearly find and understand the meaning of the buttons and icons and users found the wording in the advanced file options to be consistent. A majority of users still made comments about adjusting color hues and values for the main brand color. All users commented that the current set of file management features covered their foundational needs and presented a glimpse into more advanced features for managing and sharing work.
The limited color palette and design template created some issues with accessibility during user tests. Conducting A/B tests helped me find a design that was respectful of the brand colors, was accessible, and felt modern to a majority of users.
Many users made comments and suggestions about the placeholder terminology used to describe a clip, a sequence, and a shared workspace. This feedback was expected and will be continually refined and validated as more users start to present different use cases for describing their end-to-end task needs.
Conclusions
Throughout the testing feedback and exit interviews, users felt that the current scope of features and interactions in the “File Management” screen was sufficient enough to review their work, edit their files, share their work, and create new work. The strict color palette was initially challenging to incorporate into the dark theme background, but I was able to keep the design respectful of the product team’s vision while keeping the elements accessible by updating the layout.
As the product vision starts to crystalize, I want to continue iterating on advanced film management features and update the prototype with more comprehensive end-to-end tests.
This experience has given me more exposure to ideating with little to no context, but still being able to gather all of the required feedback and data to provide designs and prototypes within a Lean operational model.
