Image editing, simplified.

 
0_Hero image_2_shadow_2.jpg

WEB TOOLS

SQUARESPACE IMAGE EDITOR

 
 
0_macbook_mockup.jpg
 
 
 

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

The existing Aviary image editor was way past its expiration date, both literally and figuratively speaking. It looked dated, clunky and filled with unwanted features so the project was urgent. Aviary was also glaringly incongruous visually with the sleek modern Squarespace aesthetic.

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.

 
191E22_dark grey.png
 

 
 

“I never use the image editor on Squarespace. It’s confusing and clunky. I’d rather just edit in Photoshop.”

- Squarespace customer

 
 

 
F0F0F0 BG_lt grey.png
 

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.

 
 
 
0_Data Analysis.png
 
 

Breaking down Aviary and testing all the features helped us understand how the UX/UI of the new tool could be improved.

 
 
0_breakingdownAviary.png
 
 

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.

 
 
 
 
0_Image Editor_CompetitorAnalysis.png
 
 

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.

 
 
User-Personas_stacked_SQSP.jpg
 
 

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. 

 

QUICK ITERATIONS

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.

 
 
Wireframe.jpg
 
0_sketches.png
 
0_ideation+sketch.jpg
 
 
 

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.

 
 
IA_diagram.jpg
 
0_informationArchitecture_f0f0f0.jpg
 
 

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.

 
 
0_explorations_darkmode.jpg
 
 

Mobile was a low priority user story but I explored some ideas based off of the desktop versions.

 
0_Mobile Explorations.jpg
F0F0F0 BG_lt grey.png
 

THE SOLUTION

 

OUT WITH THE OLD

 
The final launched image editor is very close to where I left off in my design iterations. There is a stark contrast between the old editor and the new. The redesigned tool is stripped down to the core essential functions as opposed to the over-cluttered tools of the old Aviary editor. We use a full screen image editor rather than a pop-up modal. There is less wasted negative space, especially on landscape images. The UI is much cleaner and aligns with the Squarespace visual identity.
 
 
 
0_comparison.png
 

THE RESULT

 
 
0_FINAL IMAGE EDITOR_wnotes_transparent.png