.png)
Image Editing
ROLES & RESPONSIBILITIES
Lead Designer, Research, UX, Visual Design
Image Editing translates the imgix rendering API into an easy-to-use visual editor, giving users more control over their visual media while speeding up designer and developer workflows.
After the successful launch of Asset Manager, I would lead the imgix design team in creating Image Editing. This visual editor would translate the technical capabilities of the preexisting image rendering API into a user experience that would appeal to imgix power users and help imgix better serve non-technical users previously unable to leverage the rendering API.
Image Editing allows imgix users to resize, format, crop, and enhance their images from inside Asset Manager, saving designers and developers time by simplifying their workflows. The user experience for image editing wasn’t just built to function inside Asset Manager, but eventually, replace outdated imgix visual editors built for customer education, embedded examples, and sales tools.
This final design for Image Editing showcases the size and formatting editing mode.
.png)
The URL editing mode allows users with technical knowledge of the rendering API to edit their images.
Why build a visual editor for the Image Rendering API?
imgix has long boasted about "Photoshop-level image operations", but had yet to launch a visual editor that would deliver on this promise for non-technical users such as designers, marketers, and other positions. Image editing would aim to solve this by delivering a visual editor that both developers and non-technical user types could save time with.
01
Non-technical imgix users still prefer 3rd party visual editors for their workflows vs our API.
Despite being able to edit an image in a browser via URL syntax or using the Sandbox product, our customers with design, marketing, and product teams were not successfully leveraging our image rendering API in their process or workflows.
02
Asking non-technical users to learn over +150 parameters, variables, and proper API syntax can be frustrating.
For certain user types, interacting with a UI is the preferred pattern when editing an image. Asking users to go outside of their area of expertise to use imgix shouldn't be our standard.
03
Current imgix product offerings for visual editing are outdated, hard to use, and slow.
Due to both usability and stability concerns, the imgix Sandbox product had been underperforming for years. Though still used by internal teams, creating a new product that could eventually replace it would be highly beneficial to customers and internal teams.
With a clearer understanding of why we needed to build Image Editing, it was time to start thinking through how it would fit into the imgix product space. Having thought through future use cases of the Asset Manager product when designing it, I had a good idea of how Image Editing would fit nicely into the workflow of Asset Manager.
This graphic illustrates the different product areas of imgix, with the addition of Image Editing, and how users would flow through it.
Setting a focus for our target user base with "non-technical" users.
Once we knew that Image Editing would likely exist inside of Asset Manager, designing the experience for the same user type, non-technical users, would be our principal focus. However, like Asset Manager, I wanted to make sure that our efforts to create a user experience accessible to designers did not result in a frustrating experience for developers or other imgix power users.
In designing Image Editing for non-technical users, Asset Manager would provide more value for creative, marketing, and support teams.
Analyzing the previous imgix visual editing tools.
In its history, imgix has previously tried to release or create different visual editors. In order to best learn from past mistakes and successes, my team sought to learn what we could from two products, Gearbox and Sandbox, still being used by imgix customers and as internal imgix tools.
Below are some brief product summaries from both Gearbox and Sandbox, coupled with some of my team's insights from our analysis. Through this process, we were able to gain substantial insight into what imgix users were looking for in a visual editor, and this information would assist my team a great deal throughout the design process.
An example of Gearbox in use, users add their parameters, determine what parameters should have interaction, then create an embeddable instance.
Gearbox is an internal tool at imgix focused on creating embeddable examples imgix users could interact with. Mainly used for documentation or marketing materials, it had its own UI language for every current rendering API parameter.
01
Image Editing should be designed to later support embedding.
Although the initial product focus isn't likely to include support for embedding, the editing UI should be designed in such a way that it would easily translate to that kind of experience. Keeping the UI compact and contained will be key to achieving this.
02
Don't overcomplicate interactions with unnecessary UI elements.
Gearbox features many different types of interface elements such as sliders, but these elements aren't calibrated to reasonable values. Without an alternative option to input their own number, users are stuck trying to precisely slide to a specific value.
03
Interactive demos are very helpful in marketing and documentation.
Explaining complicated product concepts is difficult without interactive demos. Image Editing will need to replace Gearbox soon such that teams are not splitting resources to maintain two products.
An example of Sandbox in use, users upload an image or paste an imgix URL. Then they can add parameters and enter values using only text input fields.
Sandbox is a URL exploration tool that allows users to break down an existing imgix URL into its various parameters. You can also add, remove, or edit parameters but must use valid rendering API syntax in order to make changes. Primarily used as a sales tool, there were imgix customers who would use this tool to build image URLs.
01
Breaking down user edits in an imgix URL helps non-technical users become power users.
Being able to edit an image and then see how those changes would be applied in URL syntax is a great way to help non-technical users gain a more robust understanding of the rendering API product.
02
Don't require users to master the syntax of parameters just to make edits to an image.
In certain ways, Sandbox is easy to use, but it still requires that users understand proper parameter syntax in order to make edits. Our new solution should function well with very little knowledge of the rendering API.
03
Make sure the final Image Editing user experience doesn't alienate power users.
We should provide space in the Image Editing experience for power users to edit their images using URL syntax. This could look and feel like a text editor environment developers are familiar with.
Working through the editing UX & fit mode edge-cases.
One of the biggest limitations of having the rendering API power Image Editing would be dealing with fit modes. With imgix, you can't stack multiple types of resizing or cropping one after another as you would do with an app like Photoshop. Instead, users must set "Resize Fit Modes" based on the type of resizing operations they would like to use on their images. This early-stage UX work was critical in helping to communicate Image Editing functionality to the front-end engineering team.
Users shouldn't have to set fit modes, it should be automatic.
Working through these kinds of flows helped illustrate the importance of removing fit modes from the experience wherever possible to the front-end team. Though it would require more development and behind-the-scenes logic to make Image Editing function without having to set fit modes, it would end up dramatically improving the experience.
Automatically handling fit modes for users.
This graphic illustrates how a simple user interaction requires quite a bit of logic behind the scenes. This type of early UX work was important and helped my team identify what types of user interactions might be more complex than they would seem, such as removing a focal point crop red line guides automatically once a user would like to download their image.
When fit mode conflicts occur, we have to handle them.
Choosing to handle fit modes behind the scenes for users doesn't completely remove them from the user experience. There are instances where users may try to stack certain operations that require different fit modes, but this is impossible to do given the limitations of the rendering API. We worked together with the front-end team to brainstorm how we might solve fit mode conflicts in a way that would best reduce the burden on users.
Early concepts and wireframes.
When it came time to start getting into the UX with wireframes, I oversaw my team in generating different approaches we could take in building a visual editor. After iterating and multiple rounds of feedback, we ended up with two main concepts that we proceeded to get more critical feedback on. Though these concepts would change substantially after feedback, we gained invaluable feedback that would inform our final concepts and direction.
"Grouped Parameter" Concepts
Rather than having users select their parameters from a list, all parameters would be grouped by category and could be enabled or disabled. This concept would be the most compact and reduce the overall amount of UI in the visual editor.
"Add Parameter" Concepts
This concept focused on providing helpful information on imgix parameters while allowing users to add the parameters of their choice from a helpful list. Any parameter with a UI element like a slider should also include an input field for improved usability and precision.
Preset Selection
One way that we could help speed up workflows and serve non-technical users might be to provide presets. These would allow users to quickly apply common operations to an image rather than finding and enabling different parameters.
Saved Edits Library
Allowing users to save their own edits of an origin image could help users create a type of folder structure for image edits. This would exist outside of Image Editing, but perhaps be accessible elsewhere in Asset Manager.
Key takeaways and insights from testing, research and feedback.
01
Users aren't as interested in presets as we might have thought.
A preset-focused visual editor did not quite receive the positive user response we were hoping for. Presets went a bit too far in the direction of holding the user's hand, and our users wanted a more robust and customizable user experience.
02
Parameter descriptions are well received, but users don't want to pick from a list.
Simply put, users need to see editing options laid out in front of them more in line with traditional visual editors. One area that received a positive reaction was concepts featuring descriptions of various parameters, and we would include these in designs moving forward.
03
Users expect a visual editor to feature a dark mode.
Through research and other feedback, it became clear that users preferred to edit images in dark mode. Though the imgix product dashboard did not have any kind of dark mode, we would work to retool our design system colors in order to support it.
Reworking our concepts & approach based on feedback.
After receiving valuable feedback I would take a more hands-on role in getting the final user experience locked in. In these concepts, we would shift the experience towards a "mode switching" pattern. This would allow more space in the editing side panel for editing UI, and reduce the number of complex fit mode conflicts a user might run into. I also collaborated with our product team to focus the initial parameters we would aim to launch with.
Asset Manager Details View
After exploring other avenues for accessing Image Editing in Asset Manager, we ultimately decided that it would be an expansion of the "asset details view" and easily accessed via a tab-based navigation.
Editing Panel
The editing panel features a viewer and important modified image details such as dimensions or file size. The viewer functions as a kind of zoomed-out view that allows users to better understand how their changes relate to the original image
Mode Switching
Rather than having all of the parameters grouped in huge dropdown lists, we focused on designing a mode-switching experience that would give us more space for parameters to exist in the editing panel.
Crop Modes
By creating a cropping mode, we would be able to greatly reduce issues with the previously mentioned fit mode conflicts. This concept helps users select a cropping operation that is best for different situations.
Custom UI For Cropping
Users have certain expectations with visual editors that our rendering API can't fulfill on its own. Having a custom cropping UI that could then translate into proper imgix values for a custom crop is but one of the methods we used to improve the editing experience for non-technical users.
URL Editor
There are plenty of technically inclined imgix power users that would prefer to enter rendering API parameters via URL. With a URL editor mode, we could provide these users a much-improved experience in our product dashboard, rather than having them open an image in a new tab and make changes in the browser address bar.
Final designs, launch, and key takeaways.
After much iteration and testing, we narrowed the initial product launch to focus on size, formatting, cropping, and URL editing modes. This would cover the most common user needs while establishing enough of a design system to quickly expand into new editing modes and features in the future. My team generated extremely detailed design guides, working alongside the front-end team to ensure that implementation was as seamless as possible.
As a product, the launch of Image Editing has increased the value of the imgix rendering API for non-technical users previously unable to access it, and has dramatically expanded the Asset Manager platform for all types of users from free tiers to contract customers. My team was also able to design a visual editing design system that will allow imgix to replace outdated tools and products that are becoming increasingly difficult to maintain and provide a more streamlined experience for imgix and its customers.
01
Users are integrating Image Editing into their workflows and are excited for additional features.
Users that were previously relying on Sandbox have already started to switch over to Image Editing. Having a visual editor built right into Asset Manager allows users to spend more meaningful time in the product dashboard and reducing the number of different applications in their workflows.
02
Image Editing increases the value of the Rendering API for a new group of users.
For some time now the rendering API has stalled in its growth, but with Image Editing, an entirely new group of users can gain value from this product. Many existing customers can now expand their use of imgix beyond just their technical teams, appealing to designers, marketers, and more.
03
Our visual editing design system will translate seamlessly into an embeddable tool.
Though the initial launch of Image Editing doesn't include embeddable options, the UI is built to be compact and modular, allowing us to reuse these components for an eventual Gearbox replacement.
Breaking down the final interface details and interactions.
Editing Panel Modes
With three different editing modes for launch, Size & Formatting, Cropping Tools, and URL Editing, we needed to have a user experience in each mode that catered to the needs of these different parameters. Though certain cropping tools have extra UI that exists outside of the editing panel, we were able to accomplish quite a bit with input fields and switches, reducing the total number of unique interactions a user will have to contend with.
Editing Panel Modules
We wanted to make sure that this design system would be able to expand beyond Image Editing, and that is why we have grouped specific parameters together in their own modules. This also allows us to better relate parameters that are frequently used together. Each operation also has correct rendering API syntax meant to help non-technical users gain a better understanding of the product. A long hover over these will trigger tooltips for each operation, explaining what it does and linking to imgix documentation should a user wish to learn more.
Buttons & Input Fields
Image Editing was built in a more modern tech stack than other areas of the product dashboard, and this would allow the design team the opportunity to improve and update existing input fields, buttons, and other aspects of the product dashboard design system that was getting to be close to 7 years old. the input fields were overhauled to have more visible selected state, improving keyboard-based interactions, and improving accessibility features for Image Editing.
Toolbars & Modals
Updating our toolbar and modal styles was necessary in order to have a functioning dark mode interface for Image Editing. A new edition here is the zoom bar, a critical piece of UI that improves the focal point crop experience in two key ways. First, we were not able to have mouse-based zoom for launch, and second, we wanted to make sure users on touch-based devices would still have a fast way to zoom in on an image crop.
Other Editing UI
Certain editing operations required a more custom approach in their UI. I knew that we wanted to make use of switches early on as a simple way to enable or disable different crop modes or operations. This would allow users to disable their work to try out other modes instead of removing their progress. Directional cropping was greatly improved with a simple selection grid, and point-of-interest cropping was a simple binary choice but improved with a graphic for each that showcased how this complex cropping operation functioned.
Iconography & Grids
My team worked to design new icons for Image Editing, establishing a pattern where each new mode would get its own visual identity. Our previously designed transparency grid for Asset Manager also needed to be updated to be compatible with a dark mode interface.
Educational Tooltips
Image Editing was built with non-technical user types in mind, but I wanted to make sure there were UI patterns to help improve someone's technical understanding of the product should they want to seek it out.
New Dark Mode Colors
When designing our new dark mode, I quickly discovered that our existing colors were not going to be enough. I programmatically added new shades to our palette, and a few custom one-off colors needed for other situations.
.png)
Resizing & Aspect Ratio
One of the more tricky experiences to get right in the implementation phase was the relationship between width, height, and aspect ratio. Unlike other visual editors, our user's needs are such that we can't just include width and height because many users prefer to edit or need to edit based on aspect ratio. I worked side by side with a front-end engineer to make sure aspect ratio was functioning as intended, setting specific rounding values for common ratios rather than displaying them as decimals.
Automatic Image Operations
There are many parameters in the rendering API that function in a simple on or off way. With automatic operations, I wanted the experience to be extremely fast and as simple as flipping a switch, so that is exactly the type of UI pattern we used. This interaction also simplifies any touch-based interactions.
Changing Editing Modes
My team learned early on in this project that putting too many operations in one view is overwhelming for our target users. Allowing users to select an editing mode allows more space in the editing panel to create a better user experience for each parameter. Future expansions of Image Editing will function as editing mode additions in this dropdown.
.png)
Cropping Tools
Having our cropping tools in one editing mode reduces the number of fit-mode conflicts a user might run into as Image Editing expands in features. We have also added additional UI that exists outside of the rendering API to improve the user experience for two of the most popular cropping features, focal point, and custom cropping.
.png)
URL Editing Mode
For many technically minded power users using URL parameters is still a preferred way to edit images. The URL editor mode features two ways to edit an image with rendering API parameters. First, a kind of pseudo-language that simplifies the experience where related parameters are automatically nested and simple but repetitive syntax like "&" is represented by a new line. Second, users can switch to a traditional URL viewer mode. This mode will also allow non-technical users to understand how their previous UI-based edits would be applied in URL syntax.
Fit Mode Conflict & Product Education
Although the initial launch designs would be scaled down such that there would be no fit-mode conflicts, the top comp illustrates how we would present these conflicts to a user. We would inform users what operations we would need to disable, along with a link to more information should they want to understand more. The tooltip functionality is built into each parameter and designed to help users understand more about any given editing operation they might have questions about.
