Summary
Image renditions is a feature aimed at giving users control over how images are cropped and displayed across different contexts. With this functionality the marketer wouldn’t have to ask creatives for edits and/or creatives wouldn’t have to open Photoshop to complete them.
Role
I was the lead designer for this feature and as such I coordinated with PM, engineering and other designers throughout the process of driving this feature to completion. I designed all the interactions and for the visuals, since we weren’t building using the design system platform, we needed to mimic the design system in our own stack, so I worked closely with a visual designer to define visuals consistent with Oracle’s Design System.
User Story
Marketers need to be able to make quick and dirty edits to existing assets and their renditions without having to ask creatives for these edits.
Personas
Anna: The marketing manager
UX Goals
- Support the most basic, but also popular and trendy image editing functionality.
- Transfer and leverage existing mental models.
- Make it an immersive experience.
- Organize tools and functionality based on frequency of use.
Process
There was a lot of process involved in this one starting with a heavy competitive analysis to examine and document established mental models and to brainstorm potential feature sets in common image editors inside other content management systems. We looked at:
- Wix
- Weebly
- Squarespace
- Shutterstock editor
- WordPress
- Adobe Experience Manager
Then, we went through a card sorting excercise to help us group and organize related functionality.
Outcome
- Development finished before time! So they took on the “Watermark” tab which was added toward the end of the design process AND had enough bandwidth to support some of the functionality originally designed for the “Advanced Editing Panel”.
- Since we had added more tabs to the toolbar than originally planned (mainly because we couldn’t support the side panel right off the bat, but also because development went rather quickly for this feature area) I merged the “Rotate” and “Flip” tabs into one.
- Well received by customers. I had Customer Advisory Board Sessions with them for feedback throughout the process.
- Users were thrilled about not having to rely on creatives for such basic edits and were also pleased with the efficiency gains by not having to open a separate application to make cropping and other basic changes.
- Introduced a video editor UI which basically reuses this same immersive pattern and dark editor UI which was loved by the team and by our customers and users.
Walkthrough
