Enhancing Growth Capacity of Shopify’s Custom Storefronts

understanding the problem

To fully comprehend the issue, we created workflow charts to map the entire process. This exercise helped us identify all dependencies linked to GitHub, from the creation of a storefront to deployments – two significant features used by all users. The charts also highlighted potential areas for simplification, providing a clear path for enhancing our product’s flexibility.

research

To gain a deeper understanding of the problem, we embarked on a comprehensive research journey. We collected direct feedback from existing clients, conducted surveys within the partner developer community, and held interviews with existing clients and partners.

The key findings revealed that developers needed better guidance, improved documentation, and quicker workflows. These insights were invaluable in informing our design decisions, leading us to prioritize changes that would shorten their workflow, reorganize the deployments UI for better scanability, and improve the environment management flow.

ideation and design

The ideation phase was a melting pot of creativity and insights. I generated ideas through creating low-fidelity mock-ups, conducting competitor analysis, and utilizing feedback from user interviews and existing clients. In some cases, I dug deep into the existing data to ensure that we were focusing on the right areas.

The key features of the design solution included a clean, simple UI, shortened workflows, and smart defaults. These features were designed to provide a seamless and efficient experience for the users. The design solution was tested by sharing it with the internal developer community, fresh eyes from sister teams, and select clients for beta testing.

usability testing and iteration

Feedback from testing highlighted the need for better documentation and an improved onboarding experience. I took this feedback into account and iterated on the design, considering a better-defined onboarding experience and adding extra information requested by users in a way that didn’t create extra noise in the UI.

final designs

The final design featured a clean, simple yet aesthetic UI, shortened workflows, and smart defaults, all aimed at enhancing the user experience.

The intuitive interface prioritized functionality and correct information hierarchy, while the streamlined workflows reduced task completion time.

We revamped the storefront creation flow, the deployment lists and management, and updated the visuals to elevate the quality of the feature.

outcome and reflection

The final design was well-received by our users, marking a significant improvement over the previous version. We saw an increased number of users choosing the alternative setup instead of the out-of-the-box GitHub integration, and more stores being launched than ever before. This was a clear indication that our efforts to enhance the product’s flexibility were successful.

Reflecting on the project I learned that using user needs as a backup to sell ideas to the team is a lot easier and that designing for developers is easier because of the quick internal feedback loop.

However, if we were to do it again, I’d make sure to collaborate with the team to set requirements in the very early stage, avoiding work ending up unused. I’d be a lot more confident in advocating for UX improvements that were initially not part of the project proposal.

‍