SQUARESPACE
Image Editing Simplified
The Project
Squarespace is well known for its intuitive software for visually striking website building and hosting. Their tagline is “Dream it. Build it. Make it.” With so many facets to their consumer facing software, some features, such as their Image Editor, could certainly be improved.
I jump-started this fast-tracked project in the summer of 2018. It launched in early 2019.
My Role
This was the primary project I worked on as a product design intern at Squarespace on the CMS team. I led this project, working alongside another designer, a product manager and developers.
My primary roles were initial discovery through competitive research and user interviews that led to user personas, ethnographic research, ideation, wireframing and UX/UI.
The final image editor was launched after my internship concluded, but much of my findings remain in the final successfully launched product.
PROBLEM
Outdated Tools
Many customers we spoke with either bypassed the existing editor or weren't aware of its existence. When you are on a powerful platform like Squarespace, you don't want to force people to leave and come back to perform simple yet essential tasks like fixing their images.
“I never use the image editor on Squarespace. It’s confusing and clunky. I’d rather just edit in Photoshop.”
- Squarespace customer
INSIGHTS
Trim the Excess
Through data metrics, we were able to determine actual usage by customers of the individual editing tools. Aviary contained a multitude of under-utilized tools that could likely be edited down. Once we knew exactly which tools were essential and which could be edited based on the data, we conducted A/B testing on the moderately used tools to help us understand what features users absolutely needed.
Breaking down Aviary and testing all the features helped us understand how the UX/UI of the new tool could be improved.
PROCESS
Competitive Research
Analyzing competitive image editing apps on mobile and desktop helped determine which specific functions were commonly used and needed. Our team began using apps like VSCO and SnapSeed on a regular basis to get a feel of the features. Instagram was also a commonly used app for simple image editing, Analyzing the most utilized features of competitive apps helped us hone down our tools. Our goal was to create an elegant, simple, intuitive end product.
User Insight
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 primary takeaway was that while Squarespace was a powerful platform for small businesses, some of the tools it offered had not been fully optimized for people who needed to do things fast and efficiently. The Image Editor in particular did not align holistically with the overall Squarespace experience.
Not every user has Photoshop or similar photo editors, nor the time and skills to utilize them, so making our tool much better proved to be a worthy effort.
Iterative Process
Sketching out quick ideas and getting them in front of users helped us quickly iterate. Since most people in the office had personal Squarespace sites, we constantly interviewed employees and tested out iterations with them.
One major consideration was the pending new Squarespace OS that the team had been working on for months. We could reference this yet-to-be-launched product for UI considerations to ensure visual alignment.
Having worked on a re-design of the SQSP modal system prior to this project, I was well versed with the design system and started incorporating the new visual language and ratios into the new editor.
Placing the menu on the right margin aligned with the rest of the SQSP platform and the yet-to-be-launched new OS. It also made sense in maximizing usable image space.
PROCESS
Information Architecture
After a constant cycle of user interviews, iterations and user tests, I mapped out the newly simplified system to the most effective flow and the most essential functionalities.
Visual Explorations
UX/UI explorations helped us get closer to the final design. We found out that dark mode was more of a “nice-to-have“ for users and harder for developers to build, so we edited out that feature.
Mobile was a low priority user story but I explored some ideas based off of the desktop versions.