.png){kind=small}
Galixy Web App
The Project
The Galixy web app is a platform for managing post production assets and metadata, and automates the visual effects pull request process, saving company time and resources. I redesigned the client-facing web app to improve task completion times, modularity, and visual design.
Context
First, some background
The process of submitting clips to a visual effects house is a necessary part of making many modern movies or TV shows. But it’s also cumbersome, requiring workers at post production facilities to manually submit and verify pull request lists that can sometimes consist of hundreds of shots. This process costs valuable time, labor and company resources.
The Galixy Web App seeks to automate this process by allowing users to upload a pre-made CSV and confirm the details of the pull request in just a few clicks, thereby dramatically reducing the amount of time spent in this step of the post production workflow.
The Client
Light Iron is a post production company that handles nearly every aspect of a movie or TV show’s visuals after something gets shot. The company is a subsidiary of Panavision, a 70-year old imaging company that operates worldwide.
The Challenge
Where I come in...
Up to this point, the Galixy platform had no Designer involved in its development. The web app had been built out by a 2-man dev team, who already had their hands full building out the back-end architecture. As a result:
- The visual design suffered
- The development team was overextended
- User flows were not clearly defined
- No product testing had been conducted
The team needed a Designer with extensive knowledge of film & TV production and post production, and having over 15 years of experience in the industry, they hired me to consult on the design of the platform in summer 2022.
Business Objectives
Setting the goalposts
I conducted stakeholder interviews with Product Manager, Senior Producer and Senior VP of Engineering and Tech Ops and uncovered the following business objectives:
- Improve efficiency and red route completion time
- Future-proof the design so Light Iron can add new functionality later on
- Improve fit & finish of Galixy to match or exceed software from competitors
From here, I interviewed several target users and created this red route matrix based on my findings. I focused my effort on the top right quadrant:
Usability Testing
Putting the web app through its paces
I used this matrix to determine the tasks we would give users for their usability test sessions:
- View the status of a VFX Pull Request and confirm details therein
- Submit a new VFX Pull Request with custom settings provided by the tester
- Submit a Pull Request that throws errors, and correct all errors before submitting
- Email the primary point of contact on the contact page
I led testing sessions remotely with 5 Light Iron employees, each with varying familiarity with VFX Pulls Requests:
The key measurements recorded were:
- Success rates / Failure rates
- Completion times
- Perceived ease of use
Synthesis
Parsing the data
After completing the test sessions, I organized the results in a Trello affinity map with categories like “Navigational Clarity / Efficiency” and “Content Design / Writing”.
Looking at the 10,000 foot view Trello, the common issues experienced by most users became clear, and I organized the issues in a Priority Table:
The highest priority issues observed:
NAVIGATIONAL CLARITY
All 5 test participants were confused by the site navigation. In this build, selecting a project directs the user to a Contacts page instead of a page that has useful CTA’s like “View / Create Pull Requests” or “View CDLs”, which the stakeholders confirmed are the primary functions of Galixy.
"From here, I will say I don’t know where to go..."
– Maureen, Galixy Test Participant
ORIGINAL FLOW
Worse, the Contacts page is confusingly named “Dashboard” in the Projects menu, so naturally, when participants tried to reorient themselves by clicking the “Dashboard” menu, they were brought back to the same Contacts page as before, causing further confusion.
REVISED FLOW
As a temporary solution, we added CTA buttons on the project select page to shortcut the user to their preferred destination.
This more than halves the number of steps required to get to the Pull Requests page.
Design
Building a Homepage Dashboard
As a longer term solution, the team wanted to add a homepage dashboard to give users more context when logging in. So I was tasked with building wireframe designs for a hypothetical homepage dashboard. After some internal discussion, we landed on this design:
I based this design on several users who expressed the desire to see the statuses of all projects at a glance. The expandable menu > submenu design gives the user flexibility to access additional information without overwhelming them with too much info.This design was well-received by the team, and I was preparing to test the wireframe prototype with users.
BUT THEN...
The Product Manager and the rest of the team decided not to implement a homepage dashboard at this time, for two reasons:
- With current engineering practices, the data the team wanted in the dashboard would need to be input manually, which isn’t practical.
- The information we could include would largely not be useful to the majority of early users.
The designs we had to throw out.
It would be easy to write this detour off as wasted work, but several design decisions I made ended up being useful when designing the Project Dashboard.
Iteration
A fresh start: Project Dashboard
The Project Dashboard is different from the now-terminated homepage dashboard. It provides high-level, project-specific information as soon as a user selects a project.
I started the design process sketching using Crazy-8’s in order to get some different ideas down. I walked the Product Manager and one of the developers through my sketches and they preferred #5 and #6:
They liked these designs because they were:
Simple
They wanted the user to be able to quickly absorb information from the dashboard, so they liked the simplicity of visualizing categories into distinct, easily-scannable cards.
Modular
The team has plans to expand Galixy’s functionality in the future, so it was important that it be easy to add new modules into the Dashboard as its feature set grows.
Actionable
Finally, they knew they wanted to give the user options for navigating to their intended destination quickly, and they liked the easily-identifiable “Create New Pull Request” CTA in Design 6 with the horizontal card layout of Design 5:
WIREFRAMES
I took several lessons learned from designing the Homepage Dashboard when designing the wireframes for the project dashboard:
Dropdown Functionality
We wanted dropdown functionality to reduce cognitive overhead while allowing the user to access additional information:
CTAs
We wanted an easy-to-find CTA in order to create a new VFX Pull Request, and view all pull requests:
Available Info
We knew the information that could and could not be easily foregrounded to the user based on conversations with the developers:
I refined the designs and the Product Manager and developers signed off on the following Mid-Fidelity wireframe:
From here, I handed off deliverables to the development team - including VueJS code exported using the Anima Figma plugin and high resolution exports of the designs. The dev team is currently in the process of building it out using the PrimeVue UI / Development kit, which is how the rest of the site was built.
UX Writing / Content Design
Microcopy, Macro Impact
The first iteration of the web app suffered from poor content design and writing. Improving the clarity and conciseness of the site copy and content was crucial to improving usability. I performed a full UX writing audit across the entire site, with some highlights shown below:
ERROR COPY
Proper error handling is imperative when dealing with these kinds of large datasets. If an error is thrown, a user should be able to quickly and efficiently address it. In preliminary testing, my error copy improved the speed and efficiency with which users addressed the most common errors.
CLIP TOOLTIPS
Another small but necessary change. In testing, users were confused by the difference between Clip-based naming and Handle-based naming. I addressed this by adding tooltips that specify the meaning of each using language the user would understand.
MENU CONFUSION
This was a small but necessary change to eliminate user confusion. I changed "Dashboard" to "Contacts" until such a time that an actual dashboard is built.
Conclusion
Measuring my impact
As a reminder of the business objectives of redesigning the Galixy platform:
- Improve efficiency and red route completion time
- Future-proof the design so Light Iron can add new functionality later on
- Improve fit & finish of Galixy to match or exceed software from competitors
How I did...
USER FLOW
Even without the new dashboard designs implemented, preliminary user testing has revealed a 50% improvement in red route completion time due to the revised Pull Request flow. Test participants found the new designs easy to navigate and enjoyable to use.
MODULARITY
The Project Dashboard design introduced a modular framework into which new functionality can be added.
VISUAL DESIGN
The visual design of the Project Dashboard demonstrates a cleaner, simpler, more scalable design language that has received positive feedback from the product team as well as corporate stakeholders. These changes begin to raise the fit and finish of the software to compete with similar offerings from Light Iron’s competitors.
ADDED IMPROVEMENTS
Confirmation dialogue before quitting prevents accidental loss of work
Added hover states to convey editability of text entry fields
Simplified data tables improves usability on smaller screens
Revised error message copy clarifies errors messages
Status bar redesign clarifies Pull Request status
Client Testimonials
The design changes above have only just begun to roll out int the production version of Galixy, but we’ve already got excellent positive feedback from clients:
“I'm enjoying the improvements on Dashboard, particularly that warning tip that comes up when you pull the same frames more than once.”
– Tony, VFX Editor on Feature Project
“The new dashboard looks clean AF!”
– Derrek, Senior VFX Coordinator on TV Project
Moving Forward
There is still a lot of work to be done on the Galixy platform. I’m currently in the process of refining the custom UI elements I built, optimizing the Project Selection page for visual simplicity, and preparing to conduct additional usability testing to validate the new Project Dashboard once it’s live.
Meanwhile, I trust my contributions have set the platform up for success as they roll the software out to additional clients and internal users.
The Project
The Galixy web app is a platform for managing post production assets and metadata, and automates the visual effects pull request process, saving company time and resources. I redesigned the client-facing web app to improve task completion times, modularity, and visual design.
Context
First, some background
The process of submitting clips to a visual effects house is a necessary part of making many modern movies or TV shows. But it’s also cumbersome, requiring workers at post production facilities to manually submit and verify pull request lists that can sometimes consist of hundreds of shots. This process costs valuable time, labor and company resources.
The Galixy Web App seeks to automate this process by allowing users to upload a pre-made CSV and confirm the details of the pull request in just a few clicks, thereby dramatically reducing the amount of time spent in this step of the post production workflow.
The Client
Light Iron is a post production company that handles nearly every aspect of a movie or TV show’s visuals after something gets shot. The company is a subsidiary of Panavision, a 70-year old imaging company that operates worldwide.
The Challenge
Where I come in...
Up to this point, the Galixy platform had no Designer involved in its development. The web app had been built out by a 2-man dev team, who already had their hands full building out the back-end architecture. As a result:
- The visual design suffered
- The development team was overextended
- User flows were not clearly defined
- No product testing had been conducted
The team needed a Designer with extensive knowledge of film & TV production and post production, and having over 15 years of experience in the industry, they hired me to consult on the design of the platform in summer 2022.
Business Objectives
Setting the goalposts
I conducted stakeholder interviews with Product Manager, Senior Producer and Senior VP of Engineering and Tech Ops and uncovered the following business objectives:
- Improve efficiency and red route completion time
- Future-proof the design so Light Iron can add new functionality later on
- Improve fit & finish of Galixy to match or exceed software from competitors
From here, I interviewed several target users and created this red route matrix based on my findings. I focused my effort on the top right quadrant:
Usability Testing
Putting the web app through its paces
I used this matrix to determine the tasks we would give users for their usability test sessions:
- View the status of a VFX Pull Request and confirm details therein
- Submit a new VFX Pull Request with custom settings provided by the tester
- Submit a Pull Request that throws errors, and correct all errors before submitting
- Email the primary point of contact on the contact page
I led testing sessions remotely with 5 Light Iron employees, each with varying familiarity with VFX Pulls Requests:
The key measurements recorded were:
- Success rates / Failure rates
- Completion times
- Perceived ease of use
Synthesis
Parsing the data
After completing the test sessions, I organized the results in a Trello affinity map with categories like “Navigational Clarity / Efficiency” and “Content Design / Writing”.
Looking at the 10,000 foot view Trello, the common issues experienced by most users became clear, and I organized the issues in a Priority Table:
The highest priority issues observed:
NAVIGATIONAL CLARITY
All 5 test participants were confused by the site navigation. In this build, selecting a project directs the user to a Contacts page instead of a page that has useful CTA’s like “View / Create Pull Requests” or “View CDLs”, which the stakeholders confirmed are the primary functions of Galixy.
"From here, I will say I don’t know where to go..."
– Maureen, Galixy Test Participant
ORIGINAL FLOW
Worse, the Contacts page is confusingly named “Dashboard” in the Projects menu, so naturally, when participants tried to reorient themselves by clicking the “Dashboard” menu, they were brought back to the same Contacts page as before, causing further confusion.
REVISED FLOW
As a temporary solution, we added CTA buttons on the project select page to shortcut the user to their preferred destination.
This more than halves the number of steps required to get to the Pull Requests page.
Design
Building a Homepage Dashboard
As a longer term solution, the team wanted to add a homepage dashboard to give users more context when logging in. So I was tasked with building wireframe designs for a hypothetical homepage dashboard. After some internal discussion, we landed on this design:
I based this design on several users who expressed the desire to see the statuses of all projects at a glance. The expandable menu > submenu design gives the user flexibility to access additional information without overwhelming them with too much info.This design was well-received by the team, and I was preparing to test the wireframe prototype with users.
BUT THEN...
The Product Manager and the rest of the team decided not to implement a homepage dashboard at this time, for two reasons:
- With current engineering practices, the data the team wanted in the dashboard would need to be input manually, which isn’t practical.
- The information we could include would largely not be useful to the majority of early users.
The designs we had to throw out.
It would be easy to write this detour off as wasted work, but several design decisions I made ended up being useful when designing the Project Dashboard.
Iteration
A fresh start: Project Dashboard
The Project Dashboard is different from the now-terminated homepage dashboard. It provides high-level, project-specific information as soon as a user selects a project.
I started the design process sketching using Crazy-8’s in order to get some different ideas down. I walked the Product Manager and one of the developers through my sketches and they preferred #5 and #6:
They liked these designs because they were:
Simple
They wanted the user to be able to quickly absorb information from the dashboard, so they liked the simplicity of visualizing categories into distinct, easily-scannable cards.
Modular
The team has plans to expand Galixy’s functionality in the future, so it was important that it be easy to add new modules into the Dashboard as its feature set grows.
Actionable
Finally, they knew they wanted to give the user options for navigating to their intended destination quickly, and they liked the easily-identifiable “Create New Pull Request” CTA in Design 6 with the horizontal card layout of Design 5:
WIREFRAMES
I took several lessons learned from designing the Homepage Dashboard when designing the wireframes for the project dashboard:
Dropdown Functionality
We wanted dropdown functionality to reduce cognitive overhead while allowing the user to access additional information:
CTAs
We wanted an easy-to-find CTA in order to create a new VFX Pull Request, and view all pull requests:
Available Info
We knew the information that could and could not be easily foregrounded to the user based on conversations with the developers:
I refined the designs and the Product Manager and developers signed off on the following Mid-Fidelity wireframe:
From here, I handed off deliverables to the development team - including VueJS code exported using the Anima Figma plugin and high resolution exports of the designs. The dev team is currently in the process of building it out using the PrimeVue UI / Development kit, which is how the rest of the site was built.
UX Writing / Content Design
Microcopy, Macro Impact
The first iteration of the web app suffered from poor content design and writing. Improving the clarity and conciseness of the site copy and content was crucial to improving usability. I performed a full UX writing audit across the entire site, with some highlights shown below:
ERROR COPY
Proper error handling is imperative when dealing with these kinds of large datasets. If an error is thrown, a user should be able to quickly and efficiently address it. In preliminary testing, my error copy improved the speed and efficiency with which users addressed the most common errors.
CLIP TOOLTIPS
Another small but necessary change. In testing, users were confused by the difference between Clip-based naming and Handle-based naming. I addressed this by adding tooltips that specify the meaning of each using language the user would understand.
MENU CONFUSION
This was a small but necessary change to eliminate user confusion. I changed "Dashboard" to "Contacts" until such a time that an actual dashboard is built.
Conclusion
Measuring my impact
As a reminder of the business objectives of redesigning the Galixy platform:
- Improve efficiency and red route completion time
- Future-proof the design so Light Iron can add new functionality later on
- Improve fit & finish of Galixy to match or exceed software from competitors
How I did...
USER FLOW
Even without the new dashboard designs implemented, preliminary user testing has revealed a 50% improvement in red route completion time due to the revised Pull Request flow. Test participants found the new designs easy to navigate and enjoyable to use.
MODULARITY
The Project Dashboard design introduced a modular framework into which new functionality can be added.
VISUAL DESIGN
The visual design of the Project Dashboard demonstrates a cleaner, simpler, more scalable design language that has received positive feedback from the product team as well as corporate stakeholders. These changes begin to raise the fit and finish of the software to compete with similar offerings from Light Iron’s competitors.
ADDED IMPROVEMENTS
Confirmation dialogue before quitting prevents accidental loss of work
Added hover states to convey editability of text entry fields
Simplified data tables improves usability on smaller screens
Revised error message copy clarifies errors messages
Status bar redesign clarifies Pull Request status
Client Testimonials
The design changes above have only just begun to roll out int the production version of Galixy, but we’ve already got excellent positive feedback from clients:
“I'm enjoying the improvements on Dashboard, particularly that warning tip that comes up when you pull the same frames more than once.”
– Tony, VFX Editor on Feature Project
“The new dashboard looks clean AF!”
– Derrek, Senior VFX Coordinator on TV Project
Moving Forward
There is still a lot of work to be done on the Galixy platform. I’m currently in the process of refining the custom UI elements I built, optimizing the Project Selection page for visual simplicity, and preparing to conduct additional usability testing to validate the new Project Dashboard once it’s live.
Meanwhile, I trust my contributions have set the platform up for success as they roll the software out to additional clients and internal users.
The Project
The Galixy web app is a platform for managing post production assets and metadata, and automates the visual effects pull request process, saving company time and resources. I redesigned the client-facing web app to improve task completion times, modularity, and visual design.
Context
First, some background
The process of submitting clips to a visual effects house is a necessary part of making many modern movies or TV shows. But it’s also cumbersome, requiring workers at post production facilities to manually submit and verify pull request lists that can sometimes consist of hundreds of shots. This process costs valuable time, labor and company resources.
The Galixy Web App seeks to automate this process by allowing users to upload a pre-made CSV and confirm the details of the pull request in just a few clicks, thereby dramatically reducing the amount of time spent in this step of the post production workflow.
The Client
Light Iron is a post production company that handles nearly every aspect of a movie or TV show’s visuals after something gets shot. The company is a subsidiary of Panavision, a 70-year old imaging company that operates worldwide.
The Challenge
Where I come in...
Up to this point, the Galixy platform had no Designer involved in its development. The web app had been built out by a 2-man dev team, who already had their hands full building out the back-end architecture. As a result:
- The visual design suffered
- The development team was overextended
- User flows were not clearly defined
- No product testing had been conducted
The team needed a Designer with extensive knowledge of film & TV production and post production, and having over 15 years of experience in the industry, they hired me to consult on the design of the platform in summer 2022.
Business Objectives
Setting the goalposts
I conducted stakeholder interviews with Product Manager, Senior Producer and Senior VP of Engineering and Tech Ops and uncovered the following business objectives:
- Improve efficiency and red route completion time
- Future-proof the design so Light Iron can add new functionality later on
- Improve fit & finish of Galixy to match or exceed software from competitors
From here, I interviewed several target users and created this red route matrix based on my findings. I focused my effort on the top right quadrant:
Usability Testing
Putting the web app through its paces
I used this matrix to determine the tasks we would give users for their usability test sessions:
- View the status of a VFX Pull Request and confirm details therein
- Submit a new VFX Pull Request with custom settings provided by the tester
- Submit a Pull Request that throws errors, and correct all errors before submitting
- Email the primary point of contact on the contact page
I led testing sessions remotely with 5 Light Iron employees, each with varying familiarity with VFX Pulls Requests:
The key measurements recorded were:
- Success rates / Failure rates
- Completion times
- Perceived ease of use
Synthesis
Parsing the data
After completing the test sessions, I organized the results in a Trello affinity map with categories like “Navigational Clarity / Efficiency” and “Content Design / Writing”.
Looking at the 10,000 foot view Trello, the common issues experienced by most users became clear, and I organized the issues in a Priority Table:
The highest priority issues observed:
NAVIGATIONAL CLARITY
All 5 test participants were confused by the site navigation. In this build, selecting a project directs the user to a Contacts page instead of a page that has useful CTA’s like “View / Create Pull Requests” or “View CDLs”, which the stakeholders confirmed are the primary functions of Galixy.
"From here, I will say I don’t know where to go..."
– Maureen, Galixy Test Participant
ORIGINAL FLOW
Worse, the Contacts page is confusingly named “Dashboard” in the Projects menu, so naturally, when participants tried to reorient themselves by clicking the “Dashboard” menu, they were brought back to the same Contacts page as before, causing further confusion.
REVISED FLOW
As a temporary solution, we added CTA buttons on the project select page to shortcut the user to their preferred destination.
This more than halves the number of steps required to get to the Pull Requests page.
Design
Building a Homepage Dashboard
As a longer term solution, the team wanted to add a homepage dashboard to give users more context when logging in. So I was tasked with building wireframe designs for a hypothetical homepage dashboard. After some internal discussion, we landed on this design:
I based this design on several users who expressed the desire to see the statuses of all projects at a glance. The expandable menu > submenu design gives the user flexibility to access additional information without overwhelming them with too much info.This design was well-received by the team, and I was preparing to test the wireframe prototype with users.
BUT THEN...
The Product Manager and the rest of the team decided not to implement a homepage dashboard at this time, for two reasons:
- With current engineering practices, the data the team wanted in the dashboard would need to be input manually, which isn’t practical.
- The information we could include would largely not be useful to the majority of early users.
The designs we had to throw out.
It would be easy to write this detour off as wasted work, but several design decisions I made ended up being useful when designing the Project Dashboard.
Iteration
A fresh start: Project Dashboard
The Project Dashboard is different from the now-terminated homepage dashboard. It provides high-level, project-specific information as soon as a user selects a project.
I started the design process sketching using Crazy-8’s in order to get some different ideas down. I walked the Product Manager and one of the developers through my sketches and they preferred #5 and #6:
They liked these designs because they were:
Simple
They wanted the user to be able to quickly absorb information from the dashboard, so they liked the simplicity of visualizing categories into distinct, easily-scannable cards.
Modular
The team has plans to expand Galixy’s functionality in the future, so it was important that it be easy to add new modules into the Dashboard as its feature set grows.
Actionable
Finally, they knew they wanted to give the user options for navigating to their intended destination quickly, and they liked the easily-identifiable “Create New Pull Request” CTA in Design 6 with the horizontal card layout of Design 5:
WIREFRAMES
I took several lessons learned from designing the Homepage Dashboard when designing the wireframes for the project dashboard:
Dropdown Functionality
We wanted dropdown functionality to reduce cognitive overhead while allowing the user to access additional information:
CTAs
We wanted an easy-to-find CTA in order to create a new VFX Pull Request, and view all pull requests:
Available Info
We knew the information that could and could not be easily foregrounded to the user based on conversations with the developers:
I refined the designs and the Product Manager and developers signed off on the following Mid-Fidelity wireframe:
From here, I handed off deliverables to the development team - including VueJS code exported using the Anima Figma plugin and high resolution exports of the designs. The dev team is currently in the process of building it out using the PrimeVue UI / Development kit, which is how the rest of the site was built.
UX Writing / Content Design
Microcopy, Macro Impact
The first iteration of the web app suffered from poor content design and writing. Improving the clarity and conciseness of the site copy and content was crucial to improving usability. I performed a full UX writing audit across the entire site, with some highlights shown below:
ERROR COPY
Proper error handling is imperative when dealing with these kinds of large datasets. If an error is thrown, a user should be able to quickly and efficiently address it. In preliminary testing, my error copy improved the speed and efficiency with which users addressed the most common errors.
CLIP TOOLTIPS
Another small but necessary change. In testing, users were confused by the difference between Clip-based naming and Handle-based naming. I addressed this by adding tooltips that specify the meaning of each using language the user would understand.
MENU CONFUSION
This was a small but necessary change to eliminate user confusion. I changed "Dashboard" to "Contacts" until such a time that an actual dashboard is built.
The Project
The Galixy web app is a platform for managing post production assets and metadata, and automates the visual effects pull request process, saving company time and resources. I redesigned the client-facing web app to improve task completion times, modularity, and visual design.
Context
First, some background
The process of submitting clips to a visual effects house is a necessary part of making many modern movies or TV shows. But it’s also cumbersome, requiring workers at post production facilities to manually submit and verify pull request lists that can sometimes consist of hundreds of shots. This process costs valuable time, labor and company resources.
The Galixy Web App seeks to automate this process by allowing users to upload a pre-made CSV and confirm the details of the pull request in just a few clicks, thereby dramatically reducing the amount of time spent in this step of the post production workflow.
The Client
Light Iron is a post production company that handles nearly every aspect of a movie or TV show’s visuals after something gets shot. The company is a subsidiary of Panavision, a 70-year old imaging company that operates worldwide.
The Challenge
Where I come in...
Up to this point, the Galixy platform had no Designer involved in its development. The web app had been built out by a 2-man dev team, who already had their hands full building out the back-end architecture. As a result:
- The visual design suffered
- The development team was overextended
- User flows were not clearly defined
- No product testing had been conducted
The team needed a Designer with extensive knowledge of film & TV production and post production, and having over 15 years of experience in the industry, they hired me to consult on the design of the platform in summer 2022.
Business Objectives
Setting the goalposts
I conducted stakeholder interviews with Product Manager, Senior Producer and Senior VP of Engineering and Tech Ops and uncovered the following business objectives:
- Improve efficiency and red route completion time
- Future-proof the design so Light Iron can add new functionality later on
- Improve fit & finish of Galixy to match or exceed software from competitors
From here, I interviewed several target users and created this red route matrix based on my findings. I focused my effort on the top right quadrant:
Usability Testing
Putting the web app through its paces
I used this matrix to determine the tasks we would give users for their usability test sessions:
- View the status of a VFX Pull Request and confirm details therein
- Submit a new VFX Pull Request with custom settings provided by the tester
- Submit a Pull Request that throws errors, and correct all errors before submitting
- Email the primary point of contact on the contact page
I led testing sessions remotely with 5 Light Iron employees, each with varying familiarity with VFX Pulls Requests:
The key measurements recorded were:
- Success rates / Failure rates
- Completion times
- Perceived ease of use
Synthesis
Parsing the data
After completing the test sessions, I organized the results in a Trello affinity map with categories like “Navigational Clarity / Efficiency” and “Content Design / Writing”.
Looking at the 10,000 foot view Trello, the common issues experienced by most users became clear, and I organized the issues in a Priority Table:
The highest priority issues observed:
NAVIGATIONAL CLARITY
All 5 test participants were confused by the site navigation. In this build, selecting a project directs the user to a Contacts page instead of a page that has useful CTA’s like “View / Create Pull Requests” or “View CDLs”, which the stakeholders confirmed are the primary functions of Galixy.
"From here, I will say I don’t know where to go..."
– Maureen, Galixy Test Participant
ORIGINAL FLOW
Worse, the Contacts page is confusingly named “Dashboard” in the Projects menu, so naturally, when participants tried to reorient themselves by clicking the “Dashboard” menu, they were brought back to the same Contacts page as before, causing further confusion.
REVISED FLOW
As a temporary solution, we added CTA buttons on the project select page to shortcut the user to their preferred destination.
This more than halves the number of steps required to get to the Pull Requests page.
Design
Building a Homepage Dashboard
As a longer term solution, the team wanted to add a homepage dashboard to give users more context when logging in. So I was tasked with building wireframe designs for a hypothetical homepage dashboard. After some internal discussion, we landed on this design:
I based this design on several users who expressed the desire to see the statuses of all projects at a glance. The expandable menu > submenu design gives the user flexibility to access additional information without overwhelming them with too much info.This design was well-received by the team, and I was preparing to test the wireframe prototype with users.
BUT THEN...
The Product Manager and the rest of the team decided not to implement a homepage dashboard at this time, for two reasons:
- With current engineering practices, the data the team wanted in the dashboard would need to be input manually, which isn’t practical.
- The information we could include would largely not be useful to the majority of early users.
The designs we had to throw out.
It would be easy to write this detour off as wasted work, but several design decisions I made ended up being useful when designing the Project Dashboard.
Iteration
A fresh start: Project Dashboard
The Project Dashboard is different from the now-terminated homepage dashboard. It provides high-level, project-specific information as soon as a user selects a project.
I started the design process sketching using Crazy-8’s in order to get some different ideas down. I walked the Product Manager and one of the developers through my sketches and they preferred #5 and #6:
They liked these designs because they were:
Simple
They wanted the user to be able to quickly absorb information from the dashboard, so they liked the simplicity of visualizing categories into distinct, easily-scannable cards.
Modular
The team has plans to expand Galixy’s functionality in the future, so it was important that it be easy to add new modules into the Dashboard as its feature set grows.
Actionable
Finally, they knew they wanted to give the user options for navigating to their intended destination quickly, and they liked the easily-identifiable “Create New Pull Request” CTA in Design 6 with the horizontal card layout of Design 5:
WIREFRAMES
I took several lessons learned from designing the Homepage Dashboard when designing the wireframes for the project dashboard:
Dropdown Functionality
We wanted dropdown functionality to reduce cognitive overhead while allowing the user to access additional information:
CTAs
We wanted an easy-to-find CTA in order to create a new VFX Pull Request, and view all pull requests:
Available Info
We knew the information that could and could not be easily foregrounded to the user based on conversations with the developers:
I refined the designs and the Product Manager and developers signed off on the following Mid-Fidelity wireframe:
From here, I handed off deliverables to the development team - including VueJS code exported using the Anima Figma plugin and high resolution exports of the designs. The dev team is currently in the process of building it out using the PrimeVue UI / Development kit, which is how the rest of the site was built.
UX Writing / Content Design
Microcopy, Macro Impact
The first iteration of the web app suffered from poor content design and writing. Improving the clarity and conciseness of the site copy and content was crucial to improving usability. I performed a full UX writing audit across the entire site, with some highlights shown below:
ERROR COPY
Proper error handling is imperative when dealing with these kinds of large datasets. If an error is thrown, a user should be able to quickly and efficiently address it. In preliminary testing, my error copy improved the speed and efficiency with which users addressed the most common errors.
CLIP TOOLTIPS
Another small but necessary change. In testing, users were confused by the difference between Clip-based naming and Handle-based naming. I addressed this by adding tooltips that specify the meaning of each using language the user would understand.
MENU CONFUSION
This was a small but necessary change to eliminate user confusion. I changed "Dashboard" to "Contacts" until such a time that an actual dashboard is built.
The Project
The Galixy web app is a platform for managing post production assets and metadata, and automates the visual effects pull request process, saving company time and resources. I redesigned the client-facing web app to improve task completion times, modularity, and visual design.
Context
First, some background
The process of submitting clips to a visual effects house is a necessary part of making many modern movies or TV shows. But it’s also cumbersome, requiring workers at post production facilities to manually submit and verify pull request lists that can sometimes consist of hundreds of shots. This process costs valuable time, labor and company resources.
The Galixy Web App seeks to automate this process by allowing users to upload a pre-made CSV and confirm the details of the pull request in just a few clicks, thereby dramatically reducing the amount of time spent in this step of the post production workflow.
The Client
Light Iron is a post production company that handles nearly every aspect of a movie or TV show’s visuals after something gets shot. The company is a subsidiary of Panavision, a 70-year old imaging company that operates worldwide.
The Challenge
Where I come in...
Up to this point, the Galixy platform had no Designer involved in its development. The web app had been built out by a 2-man dev team, who already had their hands full building out the back-end architecture. As a result:
- The visual design suffered
- The development team was overextended
- User flows were not clearly defined
- No product testing had been conducted
The team needed a Designer with extensive knowledge of film & TV production and post production, and having over 15 years of experience in the industry, they hired me to consult on the design of the platform in summer 2022.
Business Objectives
Setting the goalposts
I conducted stakeholder interviews with Product Manager, Senior Producer and Senior VP of Engineering and Tech Ops and uncovered the following business objectives:
- Improve efficiency and red route completion time
- Future-proof the design so Light Iron can add new functionality later on
- Improve fit & finish of Galixy to match or exceed software from competitors
From here, I interviewed several target users and created this red route matrix based on my findings. I focused my effort on the top right quadrant:
Usability Testing
Putting the web app through its paces
I used this matrix to determine the tasks we would give users for their usability test sessions:
- View the status of a VFX Pull Request and confirm details therein
- Submit a new VFX Pull Request with custom settings provided by the tester
- Submit a Pull Request that throws errors, and correct all errors before submitting
- Email the primary point of contact on the contact page
I led testing sessions remotely with 5 Light Iron employees, each with varying familiarity with VFX Pulls Requests:
The key measurements recorded were:
- Success rates / Failure rates
- Completion times
- Perceived ease of use
Synthesis
Parsing the data
After completing the test sessions, I organized the results in a Trello affinity map with categories like “Navigational Clarity / Efficiency” and “Content Design / Writing”.
Looking at the 10,000 foot view Trello, the common issues experienced by most users became clear, and I organized the issues in a Priority Table:
The highest priority issues observed:
NAVIGATIONAL CLARITY
All 5 test participants were confused by the site navigation. In this build, selecting a project directs the user to a Contacts page instead of a page that has useful CTA’s like “View / Create Pull Requests” or “View CDLs”, which the stakeholders confirmed are the primary functions of Galixy.
"From here, I will say I don’t know where to go..."
– Maureen, Galixy Test Participant
ORIGINAL FLOW
Worse, the Contacts page is confusingly named “Dashboard” in the Projects menu, so naturally, when participants tried to reorient themselves by clicking the “Dashboard” menu, they were brought back to the same Contacts page as before, causing further confusion.
REVISED FLOW
As a temporary solution, we added CTA buttons on the project select page to shortcut the user to their preferred destination.
This more than halves the number of steps required to get to the Pull Requests page.
Design
Building a Homepage Dashboard
As a longer term solution, the team wanted to add a homepage dashboard to give users more context when logging in. So I was tasked with building wireframe designs for a hypothetical homepage dashboard. After some internal discussion, we landed on this design:
I based this design on several users who expressed the desire to see the statuses of all projects at a glance. The expandable menu > submenu design gives the user flexibility to access additional information without overwhelming them with too much info.This design was well-received by the team, and I was preparing to test the wireframe prototype with users.
BUT THEN...
The Product Manager and the rest of the team decided not to implement a homepage dashboard at this time, for two reasons:
- With current engineering practices, the data the team wanted in the dashboard would need to be input manually, which isn’t practical.
- The information we could include would largely not be useful to the majority of early users.
The designs we had to throw out.
It would be easy to write this detour off as wasted work, but several design decisions I made ended up being useful when designing the Project Dashboard.
Iteration
A fresh start: Project Dashboard
The Project Dashboard is different from the now-terminated homepage dashboard. It provides high-level, project-specific information as soon as a user selects a project.
I started the design process sketching using Crazy-8’s in order to get some different ideas down. I walked the Product Manager and one of the developers through my sketches and they preferred #5 and #6:
They liked these designs because they were:
Simple
They wanted the user to be able to quickly absorb information from the dashboard, so they liked the simplicity of visualizing categories into distinct, easily-scannable cards.
Modular
The team has plans to expand Galixy’s functionality in the future, so it was important that it be easy to add new modules into the Dashboard as its feature set grows.
Actionable
Finally, they knew they wanted to give the user options for navigating to their intended destination quickly, and they liked the easily-identifiable “Create New Pull Request” CTA in Design 6 with the horizontal card layout of Design 5:
WIREFRAMES
I took several lessons learned from designing the Homepage Dashboard when designing the wireframes for the project dashboard:
Dropdown Functionality
We wanted dropdown functionality to reduce cognitive overhead while allowing the user to access additional information:
CTAs
We wanted an easy-to-find CTA in order to create a new VFX Pull Request, and view all pull requests:
Available Info
We knew the information that could and could not be easily foregrounded to the user based on conversations with the developers:
I refined the designs and the Product Manager and developers signed off on the following Mid-Fidelity wireframe:
From here, I handed off deliverables to the development team - including VueJS code exported using the Anima Figma plugin and high resolution exports of the designs. The dev team is currently in the process of building it out using the PrimeVue UI / Development kit, which is how the rest of the site was built.
UX Writing / Content Design
Microcopy, Macro Impact
The first iteration of the web app suffered from poor content design and writing. Improving the clarity and conciseness of the site copy and content was crucial to improving usability. I performed a full UX writing audit across the entire site, with some highlights shown below:
ERROR COPY
Proper error handling is imperative when dealing with these kinds of large datasets. If an error is thrown, a user should be able to quickly and efficiently address it. In preliminary testing, my error copy improved the speed and efficiency with which users addressed the most common errors.
CLIP TOOLTIPS
Another small but necessary change. In testing, users were confused by the difference between Clip-based naming and Handle-based naming. I addressed this by adding tooltips that specify the meaning of each using language the user would understand.
MENU CONFUSION
This was a small but necessary change to eliminate user confusion. I changed "Dashboard" to "Contacts" until such a time that an actual dashboard is built.
Other Projects
©2022 Designed with ❤️ by Jon Stahl.