Liberty
Puzzles
Redesigning the website for a local puzzle business to accommodate an influx of pandemic-induced puzzles enthusiasts.
Project Type: Spec/Conceptual
Timeline: 2 weeks
Summary
-
Overview
Liberty Puzzles is a small business based in Boulder, Colorado that specializes in the production of wooden jigsaw puzzles. Their puzzles, which range in price from $60-$160, are made of 1/4’ thick slabs of wood with whimsical shapes that are hand-drawn and laser-cut.
-
Challenge
Users of the current Liberty Puzzles websites experience hesitation and frustration when using the site due to the dated UI and difficult-to-navigate categories for browsing. This results in a loss in potential online sales for the business.
-
Role
This was an independent project so I was the primary researcher and designer.
-
Results
The website redesign leverages research insights to alleviate users’ browsing challenges with more intuitive filtering features, while updating the UI and existing design systems to conform to industry standards.
A mockup of the website redesign for Liberty Puzzles.
Process
1. Discover
User Research
Competitive Analysis
Usability Testing
2. Define
User Personas
Problem Statement
User Journey Maps
3. Design
Sketching
Ideating
Wireframes
4. Deliver
Usability Testing
High-fidelity Prototype
Next Steps
Who are we working with?
Liberty Puzzles is one of the nation’s top puzzle manufacturers, but maintains a small business profile.
Liberty Puzzles, which is based in Boulder, Colorado, designs and manufacturers wooden jigsaw puzzles. Over the past two years, the store has exploded with business spurred by the pandemic. During the time of this project, the business was in the process of building a new manufacturing facility to increase operations and meet demand, providing a perfect opportunity to reevaluate their e-commerce experience.
Who are we designing for?
Buyers of puzzles have sets of criteria and the elevated price of Liberty Puzzles causes users to further scrutinize products.
The first step was to gain a deeper understanding of what puzzle-lovers are looking for when shopping online. In pursuit of this, 3 participants were screened and recruited via the designer’s personal network for a series of interviews. The purpose of this exercise was to discover the motivations, current experience, buying criteria, and potential pain points puzzlers encounter when shopping online for jigsaw puzzles.
It should be noted that participants all identified as female and three interviews is not a significant sample size given the population of jigsaw puzzle buyers writ large, which leaves room for potential biasing. However, for the scope of this project, the interviews did provide rudimentary evidence for the following trends:
Claire: The Careful Gift Giver
40 | Professor | Denver, CO
The Persona
These insights were then synthesized into a persona that represents one of Liberty Puzzles’ target users, Claire. Given the elevated price point of the puzzles, Claire puts more thought and energy into her buying process with Liberty Puzzles than with traditional puzzles. She is loyal to the puzzle brands she knows she enjoys and thoroughly vets new or unfamiliar manufacturers. Her current goal is to buy a gift for her sister and fellow puzzler Crystal that suits her interests and meets her standards of quality. However, she has limited time and patience to shop and while she’s motivated to shop local, she’s often frustrated that the e-commerce processes of local businesses are not nearly as easy as online giants like Amazon.
What are we working with?
The website and shopping experience for Liberty Puzzles currently causes two main problems for users, one functional and one related to aesthetics.
-
Dated Aesthetics
To get an idea of how users like Claire would move through the current site, the same three people who were interviewed also completed a short usability test. These users were all initially struck by the UI and visual design of the site. It was described as “amateur,” somewhat sketchy, and the business updates on the front page were dated, leading one participant to question if the business still existed.
-
Difficult Browsing
Functionally, the site performed very well when it came to finding a specific puzzle, if say, you saw a Liberty Puzzle out in the wild and used a keyword to buy it online when you got home. However, when directed to browse, all three participants expressed frustration for what they saw as seemingly arbitrary categories labeled by season and year.
“If you go to this website, you have to know you want a Liberty Puzzle because if not, this site isn’t going to convince you.”
— Usability Testing Participant
So what’s the problem?
When using the Liberty Puzzles website, users who want to buy puzzles as gifts are unable to easily browse through the catalog to find items that meet their selection criteria. Users also doubt the credibility of the site due to lack of good visual design principles, which leads to a loss in online sales.
The Solution
In order to solve this problem, it was determined that the solution should include:
Intuitive filtering features
Industry-standard visual design patterns
Up-to-date content and copy
How might we create intuitive filter categories?
Before tackling this question, some more information needed to be gathered regarding how users intuitively categorize puzzles. Since research thus far indicated that puzzle image is prioritized when shopping for gifts, an open card sort was created using puzzle images and participants were instructed to create their own categories as they saw fit. Fifty puzzles from the inventory were chosen as a representative sample and 9 participants completed the sort via Optimal Workshop.
The representative sample of 50 puzzle images was selected using the designer’s judgement and was therefore an interpretive exercise. Another sort with a different combination of images is recommended to validate findings.
A couple of results came out of this exercise, which informed next steps.
Overall, three mental models (subject theme, art style, and purpose) were primarily used to sort cards and many users used 2 or more in their sorts. The overlapping nature of these models suggests several filtering avenues need to be made available.
After results had been standardized, several categories emerged as more common than others. These provided a good starting point for image themes: animals, landscapes, fine art, maps, posters, and seasonal.
Using these insights, a user flow was mapped for how Claire might move through the new site to purchase a puzzle. The siloed category pages of the current site cause a cumbersome browsing loop of retraced steps. In the new streamlined flow, Claire can view all wood puzzles at once and use an on-page filtering feature to narrow down her search.
How might we redesign the aesthetics of the site so it conforms to user’s expectations of “reputable” websites?
To tackle the second problem regarding updating aesthetics and information, a comparative and competitive analysis was performed on the features of some of Liberty Puzzles competitors to determine common UI patterns and industry standards.
A feature analysis of several competitors reveals that Liberty Puzzles is lacking common design patterns and features, which likely contributes to user’s perceptions of the site as “sketchy.”
Direct competitor Wentworth Puzzles (which also specializes in wood puzzles) was chosen for a feature analysis along with other puzzle-specific companies NY Puzzle Co and Puzzle Warehouse. Galison has a more expansive product catalog, but was added for comparative purposes as a company that sells puzzles on a larger scale.
The feature analysis identified several relevant UI patterns like the location of the checkout and search icons in the top right and the positioning of the filtering options as either a horizontal navigation or left hand sidebar. In the process, the results of the cart sort results were mostly confirmed by the existence of several overlapping filtering options on competitors’ websites.
With this new research in mind, a potential site map was proposed that breaks the site down into its main functions: e-commerce and business information. These are translated into the two elements of the global navigation, Shop and About. The remaining pages are distributed into the secondary navigation and/or are listed as quick links provided in the footer.
The proposed site map for Liberty Puzzles has fewer pages and only two levels of navigation, compared to four on the current site.
What would a potential solution look like?
From there, ideation, sketching, and wireframes began. The focus of the preliminary sketches was to design a clear interface for browsing and implement more industry-standard design patterns throughout, including icons, a search bar instead of a search page, and comprehensive navigational footer. Business updates were removed from the home page and replaced with basic information about the company near the top of the page to provide easy access to all users and further bolster credibility.
Sketches (like the home, puzzles, and product pages shown here) were translated into grayscale wireframes, but the usability test was performed using the high-fi prototype shown below.
Explore the Prototype
Usability Testing
To test the efficacy of the prototype in addressing user pain points, a round of usability testing was performed with 4 individuals remotely via Zoom who were screened for interest in jigsaw puzzles. Participants, who were recruited from the designer’s personal network, were given a scenario in order to move through two intended flows in a high-fi prototype. The four tasks were to:
Find the 'Our Story' page in one minute.
Browse puzzles.
Browse puzzles about sea creatures.
Purchase octopus puzzle.
Two participants skipped the first task, the rest of the tasks were completed to 100%.
Two participants simply ignored the first task since there was information on the home page and the scenario given indicated the company was recommended by a friend, which was enough validation for those participants to start shopping. The rest of the tasks were completed to 100%.
Whoops.
Based on observations during the test and the subsequent results, there seemed to be a mismatch in what I was trying to test (browsing capabilities) and the scope of the prototype (only 12ish screens, only one developed product page). Priority one would be to continue building out the prototype so it is more representative of the authentic experience of browsing puzzles. Testing based on this prototype would be expected to reveal more insights on the design of the site itself, without the barriers posed by (or at least minimizing the artificial nature of) the prototype. I would also consider scaling back the fidelity, as introducing the additional variables of color and imagery may have also affected results.
What’s next?
Reconsidering the fidelity and building out the prototype to conduct another round of testing would be my first recommendations for next steps if this project were to move forward. Other next steps would include:
• Addressing minor fixes like adding an email option to the confirmation page.
• Experimenting with colors and outlines to help users distinguish overall puzzle shape because all product image card were on a white background.
• Exploring a mobile-dedicated browser experience, using analytics and further user research to determine if this would beneficial to users.
• Based on the emphasis the current site places on providing store updates, the next major step would be to iterate solutions for communicating this through the website or exploring a more robust social media content strategy.