StudioKlondike
patreon
[Background Blog] Pawprint Press Store Refresh
🕑 Added 2024-06-30 02:16:37 +0000 UTCHey Patrons,
Compymono here! For those who don't know, I handle the majority of the graphic design and packaging for Pawprint Press!
This past month I was asked to help migrate the site to a newer version of Shopify. (the service we use to run the Pawprint Press store) At the same time I took the chance to review the site design and look for ways I could improve it.
Starting Out
After some reflection and research of other storefronts, I decided to focus on improving the following:
Store navigation.
Promoting product collections.
Improve the visibility and consistency of buttons and other elements. Use more colour!
Mobile layout efficiency.
Home Page
The previous home page focused on displaying a slideshow of the recently released or promoted products.
While it's a great way to show off the excellent product photography our team doesβ as the release schedule and number of products increased, it's become difficult to promote anything but the most recent products.
Additionally, I often struggled with keeping the button and text placement easily visible on top of this slideshow.
The new layout reduces the size of the slideshow, and makes better use of the vertical space to display a set of collection buttons.
The button and text placement, font weight, and colours has been adjusted to be much more visible regardless of the content behind them.
These changes are also brought over to the mobile layout, where the collection buttons are even more useful as the regular navigation is buried under the top menu.
Although this new layout pushes the "Featured product" section further down the page, it should be much more useful for customers looking for a specific type of merch. (rather than browsing by game, or looking through every product on the store)
Product Page
Next up is the product pages! These pages already have a lot of custom code to extend the amount of information we can display on them. (i.e. pre-order tags, gallery website links, and the information sections above the "Add to cart" button)
The formatting of the buttons and text elements makes it difficult to find where the "Add to cart" actually is! You can see this pretty easily in the worst-case scenario below.
if there are more than one tags above the product name, it becomes difficult to realise that "Gallery" is actually a button to a page where you can see extra product photos at full size.
The new layout adds more colours and type weight variation to better highlight important elements.
The "Add to cart" button now has a unique orange gradient fill, making it much easier to identify.
Along with the product pages, I made similar changes across product cards in other pages of the website!
Product Description
Along with the TSR Pawbs, we introduced a new product description style to the store! Previously, we would use a single long image for each product's description.
This new description element uses images alongside text as part of the page itself.
The new descriptions use less image content and load faster than before.
As most of the text is rendered as part of the page itself, machine translators and screen readers can more easily access the text, improving accessibility.
The standardised layout reduces the amount of design workload required per product, freeing me up to work on more things!
Although these new descriptions were implemented a few months ago, I took this chance to improve their design further.
The text block colours and formatting has been adjusted for better impact.
The text margins have been reduced, allowing for more text to be displayed per line,.
On mobile, the image scaling behaviour has been adjusted so the full size of all images are shown, rather than cutting off the sides. (Previously I would have to design these images in a way knowing 1/3 of them could be cut off)
The reduced text margins have a big effect on mobile, allowing for more of the description to be seen at once.
Collection Pages
With the new collection buttons on the home page, I also designed new images for the pages themselves! (Plus I wrote some new text to pad out the space so the collection images display correctly π)
The number of products displayed on each row has been reduced from 5 to 4β making the product images easier to browse.
The number of products displayed on each collections page has been increased, meaning most collections can be displayed on one page without breaks.
The Apparel section received the biggest overhaul as I took new product photos for every shirt we've released, including some that a no longer available.
The new shirt product photos all use a consistent design that makes it easy for customers to see the design and compare colours and styles.
Miscellaneous Changes
With the return of the Amicus Kigu this past week, we added a Size Chart dropdown to the kigu and other shirts. Previously, this would be included as part of the description images.
The checkout page has been revised, with colours and fonts now matching those found across the rest of the store. (Unfortunately due to Shopify limitations, detailed design editing of this page isn't possible)
The navigation shown at footer of the site was also optimised on mobile, with the "Quick Links" and "Policies" sections being shrunk under dropdown menus.
Wrapping Up
While this is a bit of a diversion from what I usually do, I'm glad to finally have the chance to resolve some of the long-standing UX and navigational issues with the Pawprint Press store!
Previously, most of the design configuration was achieved using settings provided by Shopify but for many of these changes I had to go into the site code and overwrite the CSS directly.
As someone who primarily comes from a game programming background, the web dev work came with a bit of a painful learning curve, but I was able to achieve most of what I set out to do!
Perhaps I'll be able to use this experience as a chance to update the Studio Klondike website sometime soon!
β Studio Klondike
![[Background Blog] Pawprint Press Store Refresh](https://img5.runfaps.com/storage/7/ov/vi/e9630c-019e876e-4fb4-7ce8-82e6-501d0c2eee2e.png)
