Why did we decide to refresh the package detail pages?
A couple of months ago in Web Engineering Stores team we kickstarted the work of consolidating package details pages across Canonical stores. Snap and charm details pages on snapcraft.io and charmhub.io while similar, their layouts, placement of metadata, and UI components differed in subtle yet noticeable ways. Both were created quite a long time ago and didn’t adhere to the latest design standards of our websites.
So our main goals were to modernize the design using the latest design patterns from Vanilla, and to establish a unified, consistent experience for package details pages across our current (and future) storefronts.
The goals and the process
Last cycle we worked on the initial specification to identify areas of improvement and consolidation. We reviewed current page designs and highlighted inconsistencies in the presentation of metadata, layout, etc.
(comparison of package details pages in snapcraft.io and charmhub.io)
We discussed those aspects between the Web Engineering and Design teams and narrowed down the scope of the first changes to layout (using the left-side sidebar) and updated package details header (the top section of the page that features the most important information).
Evaluating implementation options
Alongside specifying the scope and the process of the page refresh, we evaluated possible technical aspects of the consolidation. While aligning the look of the package details pages, we wanted to make sure we could reuse as much code as possible between the stores.
We evaluated several options, from Vanilla patterns based on Jinja macros, React or Web Components, or the new Design System Pragma implementation. Some appeared more useful than others, and we continue to investigate future possibilities of server-side rendering of React alongside Flask applications, but for initial implementation, we decided to stay on our current tech stack and utilize the Jinja macros implementation introduced by Vanilla patterns.
This approach allows us to focus on consolidation of the page designs without introducing many technical changes and refactors.
Designing for consistency
As part of the initial investigations and based on the defined scope of the design changes, we’ve built proof-of-concept prototypes of new package details pages both on snapcraft.io and charmhub.io. This allowed us to review and test them in actual products with real live snaps and charms. This was particularly important, as much of the content of those pages is created and maintained by publishers of said packages, and we need to make sure that any design changes we introduce work with a variety of edge cases.
(comparison of prototype refreshed pages on snapcraft.io and charmhub.io)
These prototypes have been used as a base for a proper design review, where our colleagues from UX and Visual Design made sure that the proposals adhere to our current design guidelines and patterns.
We’ve put particular focus on the package details header component, which features the most important metadata about the package on top of the page and highlights the channel map and install instructions. While keeping the overall design consistent, we had to make sure that the pattern is flexible enough to facilitate the specifics of each package. This allows us to not only reuse this component between current snapcraft.io and charmhub.io stores, but also to take it into account in the design work for future stores.
First step on the path to unification
We started this cycle with turning some of those plans into reality. We reimplemented our initial proof of concept in snapcraft.io, now properly rewriting the whole page layout using the new Vanilla grid and patterns, extracting the package details header into a separate, reusable component implemented as a Jinja macro.
Along the way, we discovered a couple more edge cases where we had to adjust our previous design decisions, but thanks to close collaboration between the Web and Design teams, this has been an efficient process.
And with that work done, this week we released the updated snap details page to snapcraft.io as our end-of-year gift to the snap community.
(comparison of snap details page before and after the refresh)
With this initial step out of the way, next year, we will continue the path to consolidation by reusing the components and lessons learned to refresh the package pages on charmhub.io.