Redefining the Online Store Editing Experience

research

A significant amount of research had been conducted on this project before I joined the company, including a lot of competitor analysis. I used the existing research to understand the user personas for this project, who were merchants needing to customize their store further to meet their vision. Their needs included clearer navigation between pages and sections, an optimized workspace for larger screens, more flexible design options, and a better understanding of how global settings impact their theme or pages.

It’s just too many clicks and going back and forth three times just to change the title and the content. Why can’t I just click on the content on the preview to edit? It’s so frustrating!

- Usability test participant #5

constraints

One of the noteworthy limitations that we had to overcome was the postponement of the inline editing part of the project due to its complexity.

Another significant challenge was designing for mobile. With no hover interactions and significantly less space, the mobile solution had to be completely different from the desktop solution.

process

Our design process was initiated with a week-long design sprint, a concentrated effort to redefine navigation between sections and blocks, as well as reinvent the experience of picking resources (e.g., images, pages, products, collections) to fill in their sections.

Examples from the outcome of the sprint: introduce blocks in the sections list, second sidebar to edit settings and use of popovers instead of full sidebar takeovers.

Following the sprint, we had a prototype that we could test with users. Based on the feedback, we made several adjustments to our design. We confirmed that the second sidebar provides a more intuitive navigation experience. We also deprioritized the block search feature based on user feedback, indicating that it was not as critical to the user experience as we initially thought.

The work didn’t stop here as there were still some frustrations about the impact of changes as well as not being able to test the designs in many different sizes of screens. I created a low-fidelity prototype to demonstrate the potential of a mini-sidebar, containing items that have global impact and a very flexible viewport size manager.

Simultaneously, I prototyped an interactive preview with the help of 3 front end developers where users could select content to be edited and see how that works together with the sidebar elements. This feature was designed to provide users with a real-time view of their changes, enhancing the immediacy and interactivity of the editing process.

Who would have thought that finding the right color for the selector lines (that contrast well enough with most websites) would be so difficult though? A very extensive research on colors and accessibility helped with making the final calls.

final designs

The design solution was implemented in stages to ensure each element was thoroughly tested and refined. The first stage was the new sidebar with the expanded sections and block list.

This was followed by the secondary sidebar with the settings of the selected item, providing users with a more detailed control panel for their content.

Next, we introduced the mini sidebar to fix the information hierarchy, ensuring that users could easily access the tools they needed without overwhelming their workspace.

Finally, the interaction was added onto the preview, which was possible to be toggled on and off. This was one of the biggest wins that had a very loud positive feedback and took over about 50% of the navigation tasks from the sidebar.

outcome

The redesign of the online store editor had a significant and positive impact on both the user experience and the business metrics. One of the most immediate effects was a decrease in accidental work loss. The new design made it easier for users to navigate the editor and make changes without fear of losing their work.

Another key impact was the increase in trials turning into actual customers. The enhanced flexibility and efficiency of the new editor made it more appealing to potential customers, encouraging them to commit to a paid plan.

reflections

Reflecting on the project, it presented several challenges that offered valuable lessons.

Navigating through a lot of opinions from different sides reinforced the importance of open communication and collaboration. The project also honed my decision-making and prioritization skills due to time constraints. Designing for mobile devices was a significant challenge that pushed me to think creatively and adapt the design to fit unique constraints.

One of the key learnings was the importance of usability testing, which provided direct feedback on our design and helped us make user-centered decisions. If I were to do it again, I would question previous research more and do more by myself, not only rely on existing ones.