Prologue
Our Problem
Project Kickoff
Our Discovery
Our Solution
Stepping Back
Retrospective
More Findings
Epilogue
Our Process
As with most teams that move quickly, a few functional details had to be polished during the build, but it was rewarding to see the project abide by our design. As we consolidated our codebase strictly inside Shopify, transitioning to our new theme was a matter of minutes.
The new store launched in September 2018, in time for the Boxing Day — the team’s busiest day of the year.
The new store launched in September 2018, in time for the Boxing Day — the team’s busiest day of the year.
The launch
At the time of writing (5 months since launch), the rebuild seems to have solved our main usability issues and improved customer experience across devices.
Most importantly for me though, it was pleasing to see that we successfully created a sandbox to work in for the creatives at Poches & Fils. It’s great to see the store change in vibe and feel as collections come and go, something that wasn’t seen often before the rebuild.
Most importantly for me though, it was pleasing to see that we successfully created a sandbox to work in for the creatives at Poches & Fils. It’s great to see the store change in vibe and feel as collections come and go, something that wasn’t seen often before the rebuild.
The results
✓ Reversed conversion rate’s downtrend
✓ Increased conversion rate by 6%
When speaking to their customers, the pocket was often standing on its own. Although you cannot buy a pocket without its garment, customers were usually drawn to the brand by their favourite designs. They shopped in 2 ways — looking for a product (e.g. t-shirt, long sleeve, etc.) to compliment their chosen pocket design or vice versa.
The pocket concept
Most designs from the catalogue had a purely aesthetic purpose — they were fun, humorous and looked great. Other times, they were collaborations with celebrities or raising money for a good cause.
How designs come about
As pocket designs are often arbored with details (e.g. patterns and illustrations), a catalogue page could help users explore designs in a more focused way.
Approved
I want to view all the pocket designs
Product feed displays all of our products and can be filtered based on traditional controls like gender and garment type. Pocket designs could be another filter that overrides pockets of relevant products in the feed.
Approved
I want to view the product feed with my pocket choice
In the store’s search bar, users could query pocket designs based on their name, style or colour.
Rejected because of estimated feasibility
I want to search for a pocket design
Something stressed by the founders was the possibilities offered by the brand. Since they could produce any kind of pocket design to garment combinations, customers had to be able to enjoy this aspect when shopping.
Shopping with freedom
From the short study, four statements emerged:
1. Customers can primarily be interested in a pocket design
2. Marketing treats pocket designs like products
3. For pocket concept products, any pocket to garment combination is possible
4. For pocket concept products, customers always make two choices — garment type and pocket
Based on our statements, we started thinking about design concepts that were mindful of how our customers viewed pocket designs. We delivered 4 feature candidates to be approved by the team at Poches & Fils before we could prototype and test.
1. Customers can primarily be interested in a pocket design
2. Marketing treats pocket designs like products
3. For pocket concept products, any pocket to garment combination is possible
4. For pocket concept products, customers always make two choices — garment type and pocket
Based on our statements, we started thinking about design concepts that were mindful of how our customers viewed pocket designs. We delivered 4 feature candidates to be approved by the team at Poches & Fils before we could prototype and test.
The only aspect that called for innovation was the pocket selector. Poches & Fils had 100+ pockets in rotation and their accessibility on the product page was a must. If a customer could not mindlessly explore the full catalogue and view their new pocket choices on the garment — it meant that our design had failed.
To boost creativity, we took our wireframes and presented our use case to a designer meetup. I knew the product page was a sensitive topic for the team at Poches & Fils because of the amount of resources that had been invested in the build. To edge this, my aim was to take home as many design ideas and opinions so that our stakeholders would be more than confident that no stones had been left unturned.
To boost creativity, we took our wireframes and presented our use case to a designer meetup. I knew the product page was a sensitive topic for the team at Poches & Fils because of the amount of resources that had been invested in the build. To edge this, my aim was to take home as many design ideas and opinions so that our stakeholders would be more than confident that no stones had been left unturned.
The ideas could be grouped into 4 pattern families;
1. Modals
2. Carousels
3. Drawers
4. Scroll areas
1. Modals
2. Carousels
3. Drawers
4. Scroll areas
We started by defining our minimum and maximum pocket design sizes to explore different contexts for every mockup. After sketching low-fidelity variants for each concepts, we decided to prioritise the carousel and scroll solutions, as they did not require the user to move up to a focused level when changing pocket design.
We narrowed down to the carousels instead of the inline scroll areas as the former showed better discoverability and its categorisation did more for the lack of content overview. Scroll areas were also not promising on touch devices — I assumed they could induce the same kind of frenetic scrolling we observed in our early study as they were both scrolling patterns.
Exploring carousels with data, we saw that we had a segmentation choice. We explored common categories like Most Popular, New or Featured but the sheer amount of pocket designs always created a disproportionately large category. This made us look for categories that were more evenly distributed.
We were looking to create categories that could help the user in their pocket search. Luckily, asking around at Poches & Fils revealed that inventory was already organising pockets into categories like Fun, Food, Nostalgia and more.
We ran with it and started to prototype the product page as a whole. Following testing, arrows revealed to perform better than dots and we were able to confidently pick the right pocket design size for production.
We narrowed down to the carousels instead of the inline scroll areas as the former showed better discoverability and its categorisation did more for the lack of content overview. Scroll areas were also not promising on touch devices — I assumed they could induce the same kind of frenetic scrolling we observed in our early study as they were both scrolling patterns.
Exploring carousels with data, we saw that we had a segmentation choice. We explored common categories like Most Popular, New or Featured but the sheer amount of pocket designs always created a disproportionately large category. This made us look for categories that were more evenly distributed.
We were looking to create categories that could help the user in their pocket search. Luckily, asking around at Poches & Fils revealed that inventory was already organising pockets into categories like Fun, Food, Nostalgia and more.
We ran with it and started to prototype the product page as a whole. Following testing, arrows revealed to perform better than dots and we were able to confidently pick the right pocket design size for production.
Much of our early questioning revolved around the pocket concept — it was important for me to see what it represented for Poches & Fils and their customers. I interviewed the team’s Art Director and surveyed the marketing team to gather some learning points.
Championing our competitive advantage
Since the current store design lumped every products on a single page, we set out to rebuild the navigation system to account for new products as well as the idea of the pocket catalogue. Based on Poches & Fils’ list of current and future products, we informally prioritised the items with the marketing team to create the browsing experience.
Although we had a hunch that a card sort would back our assumption that the pocket catalogue should be on the same level as Men, Women and Youth, we did not have the authority to investigate the issue at this time. We moved on confidently knowing that its implementation was going to be a step forward in terms of experience.
Although we had a hunch that a card sort would back our assumption that the pocket catalogue should be on the same level as Men, Women and Youth, we did not have the authority to investigate the issue at this time. We moved on confidently knowing that its implementation was going to be a step forward in terms of experience.
Cleaning up the browsing experience
The previous product builder had been the controversial page of the store. From our early studies, we saw that the unorthodox layout created many usability issues. Our plan going forward was to scale back to a traditional approach for the product page.
Building a Poches & Fils garment
One of our main challenge was to dump our external app bypassing Shopify’s product variant limit. With an unstable backend architecture, new feature ideas were diluted since the engineering team was bias towards keeping the status quo. Our aim was to stabilise the store to foster a better development environment for future changes.
Although it was believed by the engineering team that the external code was a necessary evil for our large product variant use case, looking at well established custom t-shirt stores gave us a hint that is was possible to inside of our e-commerce provider.
To solve our issue, we brought in a Shopify expert to rethink the architecture — from physical inventory to the import. The downsides were the need to implement core changes in operations and logistics, but the upsides were huge in terms of product flexibility — granular control of products and overall Shopify performance.
Although it was believed by the engineering team that the external code was a necessary evil for our large product variant use case, looking at well established custom t-shirt stores gave us a hint that is was possible to inside of our e-commerce provider.
To solve our issue, we brought in a Shopify expert to rethink the architecture — from physical inventory to the import. The downsides were the need to implement core changes in operations and logistics, but the upsides were huge in terms of product flexibility — granular control of products and overall Shopify performance.
Solving the technical crux
Going forward with design, two questions informed my approach:
1. What is the pocket’s role?
2. What is the best shopping experience at Poches & Fils?
1. What is the pocket’s role?
2. What is the best shopping experience at Poches & Fils?
Improving the experience for every stakeholder
Looking for that beautiful poutine pocket you saw in the streets? From the catalogue, sift through designs and categories to quickly find your pocket.
From the product feed, filter by your design to see how your selection looks on different types of garments.
From the product feed, filter by your design to see how your selection looks on different types of garments.
Not shy about our difference
The shopping experience feels familiar while staying true to the brand. Take your time, or not, but always be sure that you will find what you need from an online commerce experience.
An experience you already know
The product page makes it easy for you to see all the possible combinations at Poches & Fils. From home or on commute, you are sure to make your gift special — even if it’s for you!
Mix and match as you please
Known for its fun and versatile brand, the shopping experience at Poches & Fils reflects those same values. Looking for a garment or a specific design, the store proudly displays its catalogue for you to dive in, but never to get lost in.
Rebuilding of the store
At this point, I was even more confident in the value of standard e-commerce experiences for our specific use case. The shop experience had been built around a desire to do stand out, which in turn created important issues for design, engineering and product teams.
Online shopping, a bit like blogs, is a common challenge for the web and so best practices, that have been tried and tested, should not be discarded easily. Going forward with the rebuild, our proposal focused on what had to be done differently as opposed to what we could do differently.
Online shopping, a bit like blogs, is a common challenge for the web and so best practices, that have been tried and tested, should not be discarded easily. Going forward with the rebuild, our proposal focused on what had to be done differently as opposed to what we could do differently.
Unique pattern created unique problems
For the past year, conversion rate had slowly but steadily declined every month. Less users were reaching the checkout page and less sessions were converting into sales.
Store conversion is in free fall
Although the company was communicating to millennials, our users were spread out into older age groups. This revealed an inclusivity issue as the complicated UI was not mindful of all tech literacy levels.
Tech literacy is a false assumption
In the coming seasons, Poches & Fils was going to start selling products that did not fit their standard pocket-to-garment system. This would essentially break the product page as it was designed around the idea of adding a pocket to clothes.
New collections will suffer
The rigid nature of the shop limited the Poches & Fils team in their creative endeavours. The team had to shorten or adapt their product titles so the UI would not look out of place.
Creatives were stuck in a box
From smaller phones to bigger desktops, the experience changed greatly. The complex architecture created responsiveness issues that had been patched on a screen per screen basis, making UI changes a nightmare for engineers.
Inconsistent experience
The team had previously worked around Shopify’s product variant limit by building an external app handling product imports. This harmed many coveted out of the box Shopify perks (e.g. plugin efficiency, on-site SEO and native page creation).
Downstream issues because of backend
Before starting to design, we looked to gather more global data. Since the team was running on Shopify, native analytics were readily available.
I partnered with the technical co-founder to investigate on the overall experience of the app. The aim was to gather data at scale.
In parallel, it was also important for me to understand how the internal team was managing the product. Because of the nature of fashion brands, the ability for the creative teams to do their best work was intrinsically related to the customer experience.
I partnered with the technical co-founder to investigate on the overall experience of the app. The aim was to gather data at scale.
In parallel, it was also important for me to understand how the internal team was managing the product. Because of the nature of fashion brands, the ability for the creative teams to do their best work was intrinsically related to the customer experience.
Putting it all together
Although not surprised by the issues found, the study loudly brought to light the crux of the project. Building a garment at Poches & Fils was far from the traditional experience. The identity of the brand was also rooted in that difference — a vast ever-changing catalogue of pocket designs.
Working with but not around
Compared to physical retail outlets carrying their products, the digital world had an advantage — we could highlight the true customisability of the brand. This made me curious as to how the shopping experience could celebrate pocket designs instead of being limited by it.
One advantage of the web over the physical world is that something can be in 2 departments at the same time. Space and things isn’t treated the same in web.
Steve Krug
Early on, we had fairly clear goals thanks to the team at Poches & Fils and their continuous user testing.
I partnered with my design colleague Florence as we tested the user experience with our entourage. Our aim was to expose challenges faced by customers when building their garment and checking out as the store was built around a complex product page.
I partnered with my design colleague Florence as we tested the user experience with our entourage. Our aim was to expose challenges faced by customers when building their garment and checking out as the store was built around a complex product page.
Feeling the issues for ourselves
The product page did not include content or microcopy that was expected by customers like size guides, backordered sizes, product description or information on returns.
Oblivious to user expectations
When adding a product to the shopping cart, the user was sent directly to a full screen cart page. Users who did not want to check out just yet had to find their way back to the product page.
Interrupted shopping experience
In order to go through the pocket catalogue and find the right pocket design, users had to horizontally scroll through 100+ designs, prompting frenetic back and forth gestures.
Suboptimal pocket design selector
The product page combined all men, women, youth and baby variations for a specific garment type (e.g. t-shirt, long sleeve, shirt or tank top). Users were confused as to what product they were building and the controls to achieve the desired result.
Busy product page
During the project, there are two instances (that I know of) where I could of saved the team a bit of time if I had done some better digging.
One time, since the Facebook chat plugin was fairly new, Poches & Fils was not aware of its existence. When we presented the pros and cons of our chat options, Messenger was instantly the winner because of the importance of Facebook for the team — it turned out they heavily used Facebook to handle customer issues like questions and returns.
Another time, taking a closer look at the inventory logistics would of brought to light the use of categories to organise pockets — which could of accelerated the design of the pocket selector.
It’s comforting to know that in both situations the process took us to the right solutions, but the feeling of wasted time is never a good one.
One time, since the Facebook chat plugin was fairly new, Poches & Fils was not aware of its existence. When we presented the pros and cons of our chat options, Messenger was instantly the winner because of the importance of Facebook for the team — it turned out they heavily used Facebook to handle customer issues like questions and returns.
Another time, taking a closer look at the inventory logistics would of brought to light the use of categories to organise pockets — which could of accelerated the design of the pocket selector.
It’s comforting to know that in both situations the process took us to the right solutions, but the feeling of wasted time is never a good one.
The benefits of looking internally
One of Poches & Fils’ competitive advantage is their special relationship with their audience. More specifically, the brand is known to be funny and light hearted, a personality felt in their communications and content.
During the project, I realised that our use of dummy text created some back and forth as we started testing real content. Although I like to think we used placeholder text safely, with such a peculiar brand voice and tone, call-to-actions turned into punch lines were not always merciful of their surrounding elements.
Aside from broadening my idea of what copy can be, I learned the value of soaking myself in a brand’s content early on. Instead of simply reading brand guidelines, it’s so much better to look for relevant instances of that brand.
During the project, I realised that our use of dummy text created some back and forth as we started testing real content. Although I like to think we used placeholder text safely, with such a peculiar brand voice and tone, call-to-actions turned into punch lines were not always merciful of their surrounding elements.
Aside from broadening my idea of what copy can be, I learned the value of soaking myself in a brand’s content early on. Instead of simply reading brand guidelines, it’s so much better to look for relevant instances of that brand.
…lorem ipsum this lorem ipsum that
Treat tone and voice like colour palettes
The aim for the project was to simplify the commerce experience while staying rooted in what made the brand great. For the founders, buying clothes at Poches & Fils should be a playful experience of finding the right pocket and building your own garment. The idea was to stay ingrained in their identity while delivering a stellar online shopping experience.
Our high level goals were to:
1. Make the shopping experience fast and easy
2. Champion the brand and content
3. Reconciliate code base exclusively on Shopify
Our high level goals were to:
1. Make the shopping experience fast and easy
2. Champion the brand and content
3. Reconciliate code base exclusively on Shopify
Back to basics
I led the product team, design of the user interface and experience. I worked alongside a designer on the UI.
During the project, I worked with the Founders, Head of Product, Art Director and 2 Product Managers.
Following design, I led product management, working closely with the engineering team and the rest of the product team until launch.
The app was officially live in September 2018.
During the project, I worked with the Founders, Head of Product, Art Director and 2 Product Managers.
Following design, I led product management, working closely with the engineering team and the rest of the product team until launch.
The app was officially live in September 2018.
My role
Poches & Fils is a hip fashion brand based in beautiful Montreal, better known for their shirt pockets. Original designs produced by local artists, printed on a pocket, attached to a t-shirt. This fun concept quickly expanded to long sleeves, tank tops, socks, phone cases — all part of well thought out collections every season.
Their first online store — designed in 2016, was struggling to keep up with the team’s success. The online store had been designed to match the unique brand, but unfortunately the effort translated into fundamental usability issues.
The result was a messy shopping experience.
Their first online store — designed in 2016, was struggling to keep up with the team’s success. The online store had been designed to match the unique brand, but unfortunately the effort translated into fundamental usability issues.
The result was a messy shopping experience.
Designed for a wow
In 2015, Poches & Fils was selling t-shirts out of a garage. By 2017, the team grew over 30 and sold their fashion apparel in over 250 stores. People were in love with their products, but not the same could be said about their online shop.
I was part of the online store rebuild for one of the coolest brands in town.
I was part of the online store rebuild for one of the coolest brands in town.
Not reinventing the wheel
Reconstitution of the original Poches & Fils product page
On desktop, the many hover animations and effects confused customers when trying to build their garment. On a public WiFi or with bad reception, this translated into a slow and jumpy experience.
Heavy animations created issues