Image Editing Simplified
SUMMARYSquarespace is renowned for its user-friendly platform that enables the creation of visually stunning websites. However, given the extensive features offered, certain elements like the Image Editor required significant enhancements to meet evolving user needs and expectations.
MY ROLELead Product Designer
• UX Research
• Wireframing
• Prototyping
• Visual Design
TASK AT HANDThe Aviary Image Editor was long overdue for an update, appearing outdated and cumbersome with redundant features. It clashed starkly with Squarespace’s sleek, modern aesthetic. Many users either overlooked the editor or were unaware of its existence. On a powerful platform like Squarespace, it’s essential to keep users engaged without requiring them to leave and return for basic tasks like image editing.
THE APPROACHTrim the Excess
By analyzing data metrics, we determined how customers utilized each editing tool in Aviary, revealing several underutilized features that could be streamlined. To validate these findings, we conducted a series of tests:
Usability Testing: We observed users interacting with the image editor in a controlled setting, gaining qualitative insights into their perceptions and usage of features, and identifying pain points and areas for improvement.
Preference Testing: We presented different versions of the editor to users, asking them to rank and express their preferences. This helped us understand which features and layouts were most appealing and useful to them.
Analyzing and testing the features of the old Aviary tool provided insights into how the UX/UI of the new tool could be enhanced.
Competitive Research
Analyzing competitive image editing apps on mobile and desktop revealed essential functions and user needs. We regularly used apps like VSCO, SnapSeed, and Instagram to understand their features. This analysis helped us refine our tools, aiming to deliver an elegant, simple, and intuitive end product.
User Insights
User interviews with Squarespace customers gave us insight into the motivations and pain points of the Image Editor experience. I developed user personas based on some of the interviews.
The key takeaway was that while Squarespace is a robust platform for small businesses, some tools were not optimized for users who need quick and efficient solutions. Specifically, the Image Editor fell short of seamlessly integrating with the overall Squarespace experience.
Given that not every user has access to advanced photo editors like Photoshop or possesses the time and skills to use them, improving our tool became a crucial and valuable endeavor.
Iterative Process
Sketching ideas and testing them with users facilitated rapid iteration. With numerous office employees using Squarespace sites, we regularly conducted interviews and tested updates with them.
An important factor was the upcoming Squarespace OS, which we used as a reference to ensure visual alignment in our UI.
Having worked on part of the SQSP modal system redesign, I was familiar with the design system and applied the new visual language and ratios to the editor. Placing the menu on the right margin aligns with both the SQSP platform and the upcoming new OS, while maximizing usable image space.
Information Architecture
Through continuous user interviews, iterations, and tests, I mapped out the streamlined system to ensure the most effective flow and essential functionalities.
Visual Explorations
UX/UI explorations refined the final design. We discovered that dark mode, while desirable for users, was challenging to implement and less essential, so we decided to remove it.
Although mobile responsiveness was a lower-priority user story, I explored several concepts inspired by the desktop versions.
SOLUTIONSOut with the Old
The final Image Editor launch marks a major upgrade from the previous version. Unlike the cluttered Aviary editor, the redesigned tool emphasizes core functionalities. We chose a full-screen layout over a pop-up modal, minimizing wasted space, especially on landscape images. The user interface is now cleaner and perfectly aligns with the Squarespace visual identity.
Key Takeaways
As a product design intern on the CMS team at Squarespace, I led this project in collaboration with another designer, a product manager, and developers. My responsibilities spanned from initial discovery, including competitive research and user interviews, to creating user personas, conducting ethnographic research, and handling ideation, wireframing, and UX/UI design. I’m proud of the impact my work had on improving the image editing experience, and using the editor throughout the project has been both fulfilling and highly beneficial.
Credits
DESIGNAddi Hou
Eric Kim
TOOLSSketch
Invision
Explore similar projects
MOBILE APP | CX DESIGNERShaping the Future of Online Grocery Shopping
Needing to establish new internal processes and shape customer behaviors, Walmart looked to us for ways to transform their business via present and future state concepts.
B2C | LEAD UX DESIGNERTaking Travel Booking to New Horizons
A complete redesign of the Vacations by Marriott website, focusing on enhancing the digital booking experience with fresh design templates and a user-centered approach.
B2C | LEAD UX DESIGNERDigital Innovation Meets Trusted Coverage with Berkley Insurance
Starting with the foundation, our team revamped the digital experience and visual identity for a Fortune 500 insurance company, ensuring alignment with their diverse industries, products, and regions.