Simplifying app updates

App developers building on Shopify’s platform serve millions of merchants, but the app building experience was fragmented and impacting merchants. Developers could manage their app extensions in code, and version their changes, but they needed to update their app configuration in the UI in the Partner’s Dashboard. Any changes to their app configuration, like updating an app name, went live immediately. This left developers to coordinate updates across multiple surfaces.

Project goals

  • Developers can build locally and deploy everything at once, with a single command

  • Introduce modularity, so teams can easily add new configurations for developers

My role

  • Designed information architecture and content hierarchy

  • Developed style guides and content patterns

  • Mapped end-to-end experience

  • Defined and named concepts

Renaming for conceputal clarity

The page where developer’s managed their app name and URL was called App Setup. The name never accurately captured everything included on the page, and it definitely didn’t work in the context of code.

After consulting with the engineering and product teams that would be adding to this page and introducing modules to this part of the app, we renamed the page and these modules configuration.

Creating meaning with hierarchy

Conveying hierarchy, relationships, and dependencies are a challenge when it comes to designing code files. If you’re too prescriptive with your structure, developer’s code will fail if they don’t match your formatting exactly.

Solution: lightweight groupings mapped to merchant features. For example, all privacy webhooks are nested under webhooks. This makes it easier for developers to think about what they’re trying to build, rather than the type of field they need.

Designing for context switching

Once developers deploy their app configuration, it’s captured in the Partner’s Dashboard as a snapshot of their app. I decided to show the keys and values in the Partners Dashboard exactly as they’d been provided in code. The job to be done of this page is troubleshooting an issue. Developers might be looking for an error in their configuration. Displaying the keys and values exactly as they’ve provided them should make it as easy as possible for them.

Outcomes

Shipped for Shopify’s Winter Edition ‘24.

Reduced the toil and cognitive load caused by switching between surfaces during development.

Increased adoption of CLI.