Layer Reveal: Representing layer lists into smaller chunks.
Overview
Layers are responsible for lots of things: adjusting color, masking, adding new elements, etc. As a result, a detailed artwork can contain hundreds of layers.
Our team of 5 designers created a customizable layer search and reordering interface to improve the workflow of filtering through layer lists. For this conceptual exploration, I focused on how layers are ordered and how hidden layers are displayed.
Role
UI Designer
UX Researcher
Duration
2022, 7 weeks
･˳ . ⋆ .˳⁺⁎˚ ⋆･˳ . ⋆ .˳⁺⁎˚ ⋆･˳ . ⋆ .˳⁺⁎˚ ⋆･˳ . ⋆ .˳⁺⁎˚ ⋆･˳ . ⋆ .˳⁺⁎˚ ⋆･˳ . ⋆･˳ .
The current representation of layers limits digital artists’ creativity and productivity in their flow of producing artwork.
Standard lists show all layers in the entire canvas. This may be too much information when the user only wants to work with specific objects or layers.
Users need to scroll and drag over a lot of layers to find the correct location, requiring you to maintain a mental model of where the layer should go.
Our solution allows easy searching and rearranging of layers through a compact list.
Press L to activate Layer Reveal.
Click on the canvas to reveal layers at a location.
Click and drag layers on the pop-up list to reorder.
We thought about artists' struggles from color creation and selection to object orientation, and eventually landed on layers.
We crowdsourced recurring attributes in image and vector graphics tools that lead to arduous workflows. After community observation and secondary research, we discovered that the limited flexibility of layer manipulation was a big concern for artists of all skill levels.
Current user flows reveal a lack of flexibility for user manipulation.
Long layer lists demand extensive searching to locate layers.
It is not always possible to view the entire layer list, especially when reordering.
Drag-and-drop reordering is tedious with a lot of layers.
We sketched different ways to grant user control and freedom.
My sketches focused on how layer selection and browsing might look and function. We grouped our ideas and gravitated towards those that highlight objects at a targeted area to offer a real-time fluid experience.
To assess the novelty and impact of our solutions, I conducted a competitive analysis on 4 tools that offer similar functionalities.
My research revealed that the large view of layers in the current market makes it hard to track and edit layers quickly.
Unlike its competitors and our other concepts, Layer Reveal scopes in on fewer layers that the user needs to locate and manipulate. The pop-up layer list can be leveraged to increase access to nearby layers and speed up the sorting process.
Moving forward with LR, we brainstormed different use cases that could best serve all types of layers.
To facilitate confident interactions with raster and vector layers, we ideated ways of emphasizing layers other than stack and efficiently switching between layers. Through a lot of iterative sketching, we narrowed down into hidden layers, layer hierarchy, and area selection.
I hypothesized how interacting with the LR pop-up would work and look on the canvas.
I generated mechanisms that lay the foundation of LR's primitive and address the 3 product principles found in the understand phase: finding, reordering, and organizing layers.
Pop-up layer list: Users can customize the hierarchy of surrounding layers.
Dynamic toolbar: Users can reorder and hide/show components of the pop-up.
After reviewing our idea's alignment with the research insights, we completed concept testing on both novice and expert artists.
The concept testing raised confusion about our area selection concept. The area selection tool seemed conceptually redundant as it reveals all layers at a specified location, rather than at a smaller scope of the canvas.
We decided to remove this helpful but not necessary feature and prioritize making LR's core features feel really good.
The visual reference of the pop-up and hidden layers lacked clarity in conveying their usages.
Participants had difficulty understanding that the layers on the pop-up were draggable.
The gray lines were not immediately noticeable.
Participants wanted a way to quickly hide layers on the pop-up.
I took the opportunity to redesign the hidden layers pop-up so that they are recognizable and intuitive.
For the next iteration, my goal was to optimize customization of the hidden layers feature.
I added hidden layer options where users are able to adjust the type and number of hidden layers on the pop-up. By redefining the visual hierarchy of hidden layers, users can work on a selection of layers without feeling overwhelmed.
We then tested our new prototype to push and validate our ideas further.
Participants voiced their concerns about the suitability of our dark-themed UI.
Participants had a lack of understanding of how layers on the pop-up look on the full list.
The pop-up might be visually inaccessible on top of an artwork with a dark color palette.
With these points in mind, I established guidelines for the use of color accents that would create a higher contrast between the layers and the workspace.
We landed on these final designs, including a new exploration for a fast layer fix.
“Reverse search” according to the canvas to find specific layers.
Quick reordering by limiting information to just relevant layers.
Hierarchy as bounding boxes, which are easier to recognize and organize than a layer list.
Automatically detects layer errors and suggests fixes.
Given our problem space was exploratory in nature, the biggest lesson I learned was adaptability.
It was crucial to consider various angles in the decision-making process and ground our work in the insights of both novice and expert users to make the best design decisions for our overarching goals.
Our next steps would be to decrease the risk of accidentally reordering hidden layers and to push our underdeveloped features even further.
Layer Reveal: Representing layer lists into smaller chunks.
Overview
Layers are responsible for lots of things: adjusting color, masking, adding new elements, etc. As a result, a detailed artwork can contain hundreds of layers.
Our team of 5 designers created a customizable layer search and reordering interface to improve the workflow of filtering through layer lists. For this conceptual exploration, I focused on how layers are ordered and how hidden layers are displayed.
Role
UI Designer
UX Researcher
Duration
2022, 7 weeks
･˳ . ⋆ .˳⁺⁎˚ ⋆･˳ . ⋆ .˳⁺⁎˚ ⋆･˳ . ⋆ .˳⁺⁎˚ ⋆･˳ . ⋆ .˳⁺⁎˚ ⋆･˳ . ⋆ .˳⁺⁎˚ ⋆･˳ . ⋆･˳ .
The current representation of layers limits digital artists’ creativity and productivity in their flow of producing artwork.
Standard lists show all layers in the entire canvas. This may be too much information when the user only wants to work with specific objects or layers.
Users need to scroll and drag over a lot of layers to find the correct location, requiring you to maintain a mental model of where the layer should go.
Our solution allows easy searching and rearranging of layers through a compact list.
Press L to activate Layer Reveal.
Click on the canvas to reveal layers at a location.
Click and drag layers on the pop-up list to reorder.
We thought about artists' struggles from color creation and selection to object orientation, and eventually landed on layers.
We crowdsourced recurring attributes in image and vector graphics tools that lead to arduous workflows. After community observation and secondary research, we discovered that the limited flexibility of layer manipulation was a big concern for artists of all skill levels.
Current user flows reveal a lack of flexibility for user manipulation.
Long layer lists demand extensive searching to locate layers.
It is not always possible to view the entire layer list, especially when reordering.
Drag-and-drop reordering is tedious with a lot of layers.
We sketched different ways to grant user control and freedom.
My sketches focused on how layer selection and browsing might look and function. We grouped our ideas and gravitated towards those that highlight objects at a targeted area to offer a real-time fluid experience.
To assess the novelty and impact of our solutions, I conducted a competitive analysis on 4 tools that offer similar functionalities.
My research revealed that the large view of layers in the current market makes it hard to track and edit layers quickly.
Unlike its competitors and our other concepts, Layer Reveal scopes in on fewer layers that the user needs to locate and manipulate. The pop-up layer list can be leveraged to increase access to nearby layers and speed up the sorting process.
Moving forward with LR, we brainstormed different use cases that could best serve all types of layers.
To facilitate confident interactions with raster and vector layers, we ideated ways of emphasizing layers other than stack and efficiently switching between layers. Through a lot of iterative sketching, we narrowed down into hidden layers, layer hierarchy, and area selection.
I hypothesized how interacting with the LR pop-up would work and look on the canvas.
I generated mechanisms that lay the foundation of LR's primitive and address the 3 product principles found in the understand phase: finding, reordering, and organizing layers.
Pop-up layer list: Users can customize the hierarchy of surrounding layers.
Dynamic toolbar: Users can reorder and hide/show components of the pop-up.
After reviewing our idea's alignment with the research insights, we completed concept testing on both novice and expert artists.
The concept testing raised confusion about our area selection concept. The area selection tool seemed conceptually redundant as it reveals all layers at a specified location, rather than at a smaller scope of the canvas.
We decided to remove this helpful but not necessary feature and prioritize making LR's core features feel really good.
The visual reference of the pop-up and hidden layers lacked clarity in conveying their usages.
Participants had difficulty understanding that the layers on the pop-up were draggable.
The gray lines were not immediately noticeable.
Participants wanted a way to quickly hide layers on the pop-up.
I took the opportunity to redesign the hidden layers pop-up so that they are recognizable and intuitive.
For the next iteration, my goal was to optimize customization of the hidden layers feature.
I added hidden layer options where users are able to adjust the type and number of hidden layers on the pop-up. By redefining the visual hierarchy of hidden layers, users can work on a selection of layers without feeling overwhelmed.
We then tested our new prototype to push and validate our ideas further.
Participants voiced their concerns about the suitability of our dark-themed UI.
Participants had a lack of understanding of how layers on the pop-up look on the full list.
The pop-up might be visually inaccessible on top of an artwork with a dark color palette.
With these points in mind, I established guidelines for the use of color accents that would create a higher contrast between the layers and the workspace.
We landed on these final designs, including a new exploration for a fast layer fix.
“Reverse search” according to the canvas to find specific layers.
Quick reordering by limiting information to just relevant layers.
Hierarchy as bounding boxes, which are easier to recognize and organize than a layer list.
Automatically detects layer errors and suggests fixes.
Given our problem space was exploratory in nature, the biggest lesson I learned was adaptability.
It was crucial to consider various angles in the decision-making process and ground our work in the insights of both novice and expert users to make the best design decisions for our overarching goals.
Our next steps would be to decrease the risk of accidentally reordering hidden layers and to push our underdeveloped features even further.
Layer Reveal: Representing layer lists into smaller chunks.
Overview
Layers are responsible for lots of things: adjusting color, masking, adding new elements, etc. As a result, a detailed artwork can contain hundreds of layers.
Our team of 5 designers created a customizable layer search and reordering interface to improve the workflow of filtering through layer lists. For this conceptual exploration, I focused on how layers are ordered and how hidden layers are displayed.
Role
UI Designer
UX Researcher
Duration
2022, 7 weeks
･˳ . ⋆ .˳⁺⁎˚ ⋆･˳ . ⋆ .˳⁺⁎˚ ⋆･˳ . ⋆ .˳⁺⁎˚ ⋆･˳ . ⋆ .˳⁺⁎˚ ⋆･˳ . ⋆ .˳⁺⁎˚ ⋆･˳ . ⋆･˳ .
The current representation of layers limits digital artists’ creativity and productivity in their flow of producing artwork.
Standard lists show all layers in the entire canvas. This may be too much information when the user only wants to work with specific objects or layers.
Users need to scroll and drag over a lot of layers to find the correct location, requiring you to maintain a mental model of where the layer should go.
Our solution allows easy searching and rearranging of layers through a compact list.
Press L to activate Layer Reveal.
Click on the canvas to reveal layers at a location.
Click and drag layers on the pop-up list to reorder.
We thought about artists' struggles from color creation and selection to object orientation, and eventually landed on layers.
We crowdsourced recurring attributes in image and vector graphics tools that lead to arduous workflows. After community observation and secondary research, we discovered that the limited flexibility of layer manipulation was a big concern for artists of all skill levels.
Current user flows reveal a lack of flexibility for user manipulation.
Long layer lists demand extensive searching to locate layers.
It is not always possible to view the entire layer list, especially when reordering.
Drag-and-drop reordering is tedious with a lot of layers.
We sketched different ways to grant user control and freedom.
My sketches focused on how layer selection and browsing might look and function. We grouped our ideas and gravitated towards those that highlight objects at a targeted area to offer a real-time fluid experience.
To assess the novelty and impact of our solutions, I performed a competitive analysis on 4 tools that offer similar functionalities.
My research revealed that the large view of layers in the current market makes it hard to track and edit layers quickly.
Unlike its competitors and our other concepts, Layer Reveal scopes in on fewer layers that the user needs to locate and manipulate. The pop-up layer list can be leveraged to increase access to nearby layers and speed up the sorting process.
Moving forward with LR, we brainstormed different use cases that could best serve all types of layers.
To facilitate confident interactions with raster and vector layers, we ideated ways of emphasizing layers other than stack and efficiently switching between layers. Through a lot of iterative sketching, we narrowed down into hidden layers, layer hierarchy, and area selection.
I hypothesized how interacting with the pop-up would work and look on the canvas.
I generated mechanisms that lay the foundation of LR's primitive and address the 3 product principles found in the understand phase: finding, reordering, and organizing layers.
Pop-up layer list: Users can customize the hierarchy of surrounding layers.
Dynamic toolbar: Users can reorder and hide/show components of the pop-up.
After reviewing our idea's alignment with the research insights, we completed concept testing on both novice and expert artists.
The concept testing raised confusion about our area selection concept. The area selection tool seemed conceptually redundant as it reveals all layers at a specified location, rather than at a smaller scope of the canvas.
We decided to remove this helpful but not necessary feature and prioritize making LR's core features feel really good.
The visual reference of the pop-up and hidden layers lacked clarity in conveying their usages.
Participants had difficulty understanding that the layers on the pop-up were draggable.
The gray lines were not immediately noticeable.
Participants wanted a way to quickly hide layers on the pop-up.
I took the opportunity to redesign the hidden layers pop-up so that they are recognizable and intuitive.
For the next iteration, my goal was to optimize customization of the hidden layers feature.
I added hidden layer options where users are able to adjust the type and number of hidden layers on the pop-up. By redefining the visual hierarchy of hidden layers, users can work on a selection of layers without feeling overwhelmed.
We then tested our new prototype to push and validate our ideas further.
Participants voiced their concerns about the suitability of our dark-themed UI.
Participants had a lack of understanding of how layers on the pop-up look on the full list.
The pop-up might be visually inaccessible on top of an artwork with a dark color palette.
With these points in mind, I established guidelines for the use of color accents that would create a higher contrast between the layers and the workspace.
We landed on these final designs, including a new exploration for a fast layer fix.
“Reverse search” according to the canvas to find specific layers.
Quick reordering by limiting information to just relevant layers.
Hierarchy as bounding boxes, which are easier to recognize and organize than a layer list.
Automatically detects layer errors and suggests fixes.
Given our problem space was exploratory in nature, the biggest lesson I learned was adaptability.
It was crucial to consider various angles in the decision-making process and ground our work in the insights of both novice and expert users to make the best design decisions for our overarching goals.
Our next steps would be to decrease the risk of accidentally reordering hidden layers and to push our underdeveloped features even further.