Our team at Staples Print and Marketing had been working on a site refresh with redesigned flows that would work for all of our products, we had to make an exception for cards and invitation products.
Other products in our catalogue had a flow that focused on letting the user select the materials, and different print product options first, as a majority of our customers came in with their own designs, rather than choosing a template design that was available on the website. Cards and invitations products were different, because we knew that although customers uploaded their own design for the majority of the year, there were large spikes in sales for Cards and Invitations products that had template designs on them. For this reason, we needed to come up with solutions for a flow that would present the customers with both templates as well as product options.
First, I did some preliminary research before scheduling a workshop with key stakeholders. For the research, I took a look at the sales data the Product Owner shared, noted the current observed flow of Cards and Invites products, and the potential flow should we launch the product with the site refresh redesigns without making adjustments, so we could better see where it needed work.
I also spent some time on Fullstory observing customer behaviour and called out some faults of the current flow that we could improve.
Finally, I took a look at similiar products from our competitors and highlighted some interesting solutions that they had.
With that, we were ready to start our workshop. At Staples, our team had been utilizing the Lean UX Canvas tool for our workshops. Since it was a smaller workshop consisting of 4 people and because we were all very familiar with who the user is, and what the problem was, I decided to do a modified mini Lean UX that focused on solutioning. For this modified version, we briefly discussed the business problem, who we were trying to solve the problem for, and what we wanted to achieve for the user. I also presented the research findings above so that we were all clearer on what we wanted to solve for, and to help give us ideas for the solutioning stage.
For the workshop itself, over the course of 4 sessions, we focused on brainstorming solutions, and quickly sketching up the more practical and popular ones.
We found that the proposed solutions mostly revolved around the larger flow of Cards and Invites, and how we might improve it so it would work all-year-round, as well as some solutions that focused on making template selection more fun for the user.
We wrote hypothesis based on each solution, wrote down the risks and assumptions for each, and listed what we could do to mitigate the risks. In between each step, we placed each hypothesis on a Prioritization Matrix, measuring the risk and value of each hypothesis.
We were able to decide on the following key solutions:
We still had some issues that were exclusive to cards and invites due to the how different the product flow and needs were from the start. For one, the card options available were very limited, which would make using our configurator hard to use for our customers. We didn't want users to run into "That option is not available" over and over again.
I kept running into various other issues, as I progressed. This meant that at various points, I would consult our team, I would consult various dev teams, I would talk to other product designers who had created the pages and components that we were using to try to come up with solutions for all of these various issues.
The hardest part of this was:
Much of the components and pages that were utilized for the project were previously created by others on my team (which made me feel like a raccoon when I popped into other's Figma files to copy their components at the time), but there were 2 components that needed to be created for the project: the Visual Filter and the Card Selector.
We had seen several versions of the Visual Filter on other competitor sites and decided that it was an optimal way for us to allow users to browse different categories of templates easily.
I also had to design a Card Selector specifically for the project, as we had decided to divvy up the card into 3 separate categories.
I also did some accessibility documentation for the new components, and took the opportunity to redesign the existing accessibility documentation. You can find more on that here.
After release, we found that users were engaging less with cards and invitations pages than was normal. The project was released at the same time as many other projects, so I needed to pin down any issues that we could fix for the flow that I designed. For this, I spent some time looking at Fullstory to get an idea of where users were getting stuck:
This gave me an idea of where to focus, but I was still unsure of "why" the users were exiting at certain points and what information or lack of information made them exit. So I did a usability test on the whole flow, and tested both template and non-template users:
I found that the biggest issue was that users did not understand the difference between the three card types: Same-Day Cards, Signature Flat Cards and Folded Cards, and that confusion caused hesitation. We also found room for improvement on the navigation on the Template Selection page, as well as some small changes for the Visual Filter (it was too large, and hiding the results below the fold). I presented the findings with my team, and we decided on some Action Items.
The next steps were to work on the action items, particularly the problem of how to make the card types easier to understand for users.
I did work on this until I was not able to- I focused on making the card selector on the Template Selection Page easier to understand based on some feedback from users- mostly focusing on language and image UI changes:
I tested the mockups on usertesting.com and found that although users responded a lot better to the new mockup, there was still some apprehension. The name of the categories, as well as the way/attributes that we had divided them by was a larger issue than how they were presented. I had planned to talk to others on my team about alternative solutions that might require a higher level of decision-making, but at this juncture, the project was put on hold.
Had I continued on, I would have recommended we consider changing the categories entirely, as one of them is a fullfillment type (Same-day card) while the other indicate the format of the card. We had previously explored the possibility of alternative ways to allow users to select same-day products, and that would have been my preferred next step.
