How do you marry the digital and physical for a joyful experience?
Stick Together
Experience Design
Experience/Digital Strategy
How do you marry the digital and physical for a joyful experience?
Stick Together
Experience Design
Experience/Digital Strategy
How do you marry the digital and physical for a joyful experience?
Stick Together
Experience Design
Experience/Digital Strategy
How do you marry the digital and physical for a joyful experience?
Stick Together
Experience Design
Experience/Digital Strategy
Overview
Puzzle Face allows you to create personalized puzzles based on people's photos to deliver a truly personal puzzle experience. Upload a photo, get a puzzle key and piece the 300 pieces included in the box together. Once you’re done, flip the puzzle carefully and you’ll see the face!
Role
At first I was asked to lead the design for the website. I provided additional advice around content production, general strategy inputs, and QA as the site got developed.
Scope
Experience Strategy
Web Design
Process
Discovery & Content Plan
Creative Development
Experience Strategy
Intake | Competitive Analysis | Content Planning
Experience Strategy
Intake | Competitive Analysis | Content Planning
Experience Strategy
Intake | Competitive Analysis | Content Planning
Experience Strategy
Intake | Competitive Analysis | Content Planning
Puzzle Face is a puzzle game that turns images into custom puzzles. They had a fantastic product but needed someone to help them show the world how it worked and provide a place for them to buy it.
Puzzle Face is a puzzle game that turns images into custom puzzles. They had a fantastic product but needed someone to help them show the world how it worked and provide a place for them to buy it.
Puzzle Face is a puzzle game that turns images into custom puzzles. They had a fantastic product but needed someone to help them show the world how it worked and provide a place for them to buy it.
Puzzle Face is a puzzle game that turns images into custom puzzles. They had a fantastic product but needed someone to help them show the world how it worked and provide a place for them to buy it.
Early on we discussed potential challenges and needs with the biggest one being:
“How do you show people how this works before they buy it?”
Early on we discussed potential challenges and needs with the biggest one being:
“How do you show people how this works before they buy it?”
Early on we discussed potential challenges and needs with the biggest one being:
“How do you show people how this works before they buy it?”
Early on we discussed potential challenges and needs with the biggest one being:
“How do you show people how this works before they buy it?”
Puzzle Face is a simple product with a couple of steps. You need a phone/laptop and the puzzle itself. Our first challenge was making sure that was clear.
Puzzle Face is a simple product with a couple of steps. You need a phone/laptop and the puzzle itself. Our first challenge was making sure that was clear.
Puzzle Face is a simple product with a couple of steps. You need a phone/laptop and the puzzle itself. Our first challenge was making sure that was clear.
Puzzle Face is a simple product with a couple of steps. You need a phone/laptop and the puzzle itself. Our first challenge was making sure that was clear.
Second, we needed to define what the page would need. Board game pages vary a bit but we realized we needed the following as an MVP:
Second, we needed to define what the page would need. Board game pages vary a bit but we realized we needed the following as an MVP:
Second, we needed to define what the page would need. Board game pages vary a bit but we realized we needed the following as an MVP:
Second, we needed to define what the page would need. Board game pages vary a bit but we realized we needed the following as an MVP:
An initial moment that quickly got to the core of the game
A description of the game and its contents
Game instructions and/or a video
Stunning product and players photography
Accolades and reviews
Content planning
Using our research as a guide, we outlined the content we would need for the website. We also started to think what type of media would be needed per section to plan for shoots as needed along with marking what we still need to write.
Establishing an effort hierarchy
Knowing we had a limited time and budget, we grouped content up to figure out what we'd put in the most work for. In the end we realized "Game Overview" would need more content and glamour shots while "How It Works" would require some more work on showing the puzzle mechanic.
Content planning
Using our research as a guide, we outlined the content we would need for the website. We also started to think what type of media would be needed per section to plan for shoots as needed along with marking what we still need to write.
Establishing an effort hierarchy
Knowing we had a limited time and budget, we grouped content up to figure out what we'd put in the most work for. In the end we realized "Game Overview" would need more content and glamour shots while "How It Works" would require some more work on showing the puzzle mechanic.
Content planning
Using our research as a guide, we outlined the content we would need for the website. We also started to think what type of media would be needed per section to plan for shoots as needed along with marking what we still need to write.
Establishing an effort hierarchy
Knowing we had a limited time and budget, we grouped content up to figure out what we'd put in the most work for. In the end we realized "Game Overview" would need more content and glamour shots while "How It Works" would require some more work on showing the puzzle mechanic.
Content planning
Using our research as a guide, we outlined the content we would need for the website. We also started to think what type of media would be needed per section to plan for shoots as needed along with marking what we still need to write.
Establishing an effort hierarchy
Knowing we had a limited time and budget, we grouped content up to figure out what we'd put in the most work for. In the end we realized "Game Overview" would need more content and glamour shots while "How It Works" would require some more work on showing the puzzle mechanic.
Web Design
Wireframes | Visual Design | QA
Web Design
Wireframes | Visual Design | QA
Web Design
Wireframes | Visual Design | QA
Web Design
Wireframes | Visual Design | QA
Early on we decided this needed to be easy for the client to manage, so we settled on Squarespace. We leveraged their Fluid Engine layout to build a more custom site than from existing templates.
Early on we decided this needed to be easy for the client to manage, so we settled on Squarespace. We leveraged their Fluid Engine layout to build a more custom site than from existing templates.
Early on we decided this needed to be easy for the client to manage, so we settled on Squarespace. We leveraged their Fluid Engine layout to build a more custom site than from existing templates.
Early on we decided this needed to be easy for the client to manage, so we settled on Squarespace. We leveraged their Fluid Engine layout to build a more custom site than from existing templates.
Initial moment
First, we decided on an image carousel at the start to quickly deliver interesting photography around how the game worked
Instructions
Second, a quick overview of the product and its contents to set expectations.
Instructions
Third, instructions in a video format. We had a set of videos made for social that showed how the puzzle worked so we leveraged content we had where we could.
Initial moment
First, we decided on an image carousel at the start to quickly deliver interesting photography around how the game worked
Instructions
Second, a quick overview of the product and its contents to set expectations.
Instructions
Third, instructions in a video format. We had a set of videos made for social that showed how the puzzle worked so we leveraged content we had where we could.
Initial moment
First, we decided on an image carousel at the start to quickly deliver interesting photography around how the game worked
Instructions
Second, a quick overview of the product and its contents to set expectations.
Instructions
Third, instructions in a video format. We had a set of videos made for social that showed how the puzzle worked so we leveraged content we had where we could.
Initial moment
First, we decided on an image carousel at the start to quickly deliver interesting photography around how the game worked
Instructions
Second, a quick overview of the product and its contents to set expectations.
Instructions
Third, instructions in a video format. We had a set of videos made for social that showed how the puzzle worked so we leveraged content we had where we could.
When it came to the design, I was asked to think of an Apple aesthetic when designing the site. (Shocking) I looked for similar references within the board game space but also looked for reference that used more color and photography to deliver on their premise.
When it came to the design, I was asked to think of an Apple aesthetic when designing the site. (Shocking) I looked for similar references within the board game space but also looked for reference that used more color and photography to deliver on their premise.
When it came to the design, I was asked to think of an Apple aesthetic when designing the site. (Shocking) I looked for similar references within the board game space but also looked for reference that used more color and photography to deliver on their premise.
When it came to the design, I was asked to think of an Apple aesthetic when designing the site. (Shocking) I looked for similar references within the board game space but also looked for reference that used more color and photography to deliver on their premise.
Beyond beautiful product photography, we started playing around with showing parts of the puzzle throughout the website to add texture and context for potential buyers.
Beyond beautiful product photography, we started playing around with showing parts of the puzzle throughout the website to add texture and context for potential buyers.
Beyond beautiful product photography, we started playing around with showing parts of the puzzle throughout the website to add texture and context for potential buyers.
Beyond beautiful product photography, we started playing around with showing parts of the puzzle throughout the website to add texture and context for potential buyers.
We used icons from the package itself to add more color to the pages along with taking cues from the package for design elements like the horizontal red lines and the yellow blocks behind the images.
We used icons from the package itself to add more color to the pages along with taking cues from the package for design elements like the horizontal red lines and the yellow blocks behind the images.
We used icons from the package itself to add more color to the pages along with taking cues from the package for design elements like the horizontal red lines and the yellow blocks behind the images.
We used icons from the package itself to add more color to the pages along with taking cues from the package for design elements like the horizontal red lines and the yellow blocks behind the images.
We also added some more texture to the FAQs with puzzle pieces and a 2-up style for the footer to make them a little more interesting.
We also added some more texture to the FAQs with puzzle pieces and a 2-up style for the footer to make them a little more interesting.
We also added some more texture to the FAQs with puzzle pieces and a 2-up style for the footer to make them a little more interesting.
We also added some more texture to the FAQs with puzzle pieces and a 2-up style for the footer to make them a little more interesting.
Once the Figma files were handed to dev, we worked closely to make sure the site was built to specs. We reviewed all possible devices and breakpoints to provide a seamless experience on any window type.
Once the Figma files were handed to dev, we worked closely to make sure the site was built to specs. We reviewed all possible devices and breakpoints to provide a seamless experience on any window type.
Once the Figma files were handed to dev, we worked closely to make sure the site was built to specs. We reviewed all possible devices and breakpoints to provide a seamless experience on any window type.
Once the Figma files were handed to dev, we worked closely to make sure the site was built to specs. We reviewed all possible devices and breakpoints to provide a seamless experience on any window type.
Reception & Life
Luanch | Sales
Reception & Life
Luanch | Sales
Reception & Life
Luanch | Sales
Reception & Life
Luanch | Sales
Puzzle Face launched at the end of 2023 after a successful development phase. It was live for about a year before it had to be taken down for business reasons but while it was up we got great feedback from individuals and vendors looking to purchase games for their shops/inventory.
Puzzle Face launched at the end of 2023 after a successful development phase. It was live for about a year before it had to be taken down for business reasons but while it was up we got great feedback from individuals and vendors looking to purchase games for their shops/inventory.
Puzzle Face launched at the end of 2023 after a successful development phase. It was live for about a year before it had to be taken down for business reasons but while it was up we got great feedback from individuals and vendors looking to purchase games for their shops/inventory.
Puzzle Face launched at the end of 2023 after a successful development phase. It was live for about a year before it had to be taken down for business reasons but while it was up we got great feedback from individuals and vendors looking to purchase games for their shops/inventory.
My reflections on what I learned with this project and areas I feel could be improved:
Learnings
Compared to previous projects, the clear need for photography came up. This meant a shoot which is costly, but I was able to properly justify it by walking the client through the research and content needs. Getting that additional cost approved really helped enhance the project, reminding me how important using the best photography is.
This was my 2nd time working with Squarespace. This time I had a developer working with me which allowed for a lot more flexibility when it came to plugging in custom code. Next time I feel I have a much better idea of what can be done or not.
Areas of Opportunity
I would have loved to add a little more interactivity. We had discussed putting pieces together on the site to show how it would work and then flipping it to show the result. While those would have been fun, they would have required a lot more work but might have made for much clearer instructions.
My reflections on what I learned with this project and areas I feel could be improved:
Learnings
Compared to previous projects, the clear need for photography came up. This meant a shoot which is costly, but I was able to properly justify it by walking the client through the research and content needs. Getting that additional cost approved really helped enhance the project, reminding me how important using the best photography is.
This was my 2nd time working with Squarespace. This time I had a developer working with me which allowed for a lot more flexibility when it came to plugging in custom code. Next time I feel I have a much better idea of what can be done or not.
Areas of Opportunity
I would have loved to add a little more interactivity. We had discussed putting pieces together on the site to show how it would work and then flipping it to show the result. While those would have been fun, they would have required a lot more work but might have made for much clearer instructions.
My reflections on what I learned with this project and areas I feel could be improved:
Learnings
Compared to previous projects, the clear need for photography came up. This meant a shoot which is costly, but I was able to properly justify it by walking the client through the research and content needs. Getting that additional cost approved really helped enhance the project, reminding me how important using the best photography is.
This was my 2nd time working with Squarespace. This time I had a developer working with me which allowed for a lot more flexibility when it came to plugging in custom code. Next time I feel I have a much better idea of what can be done or not.
Areas of Opportunity
I would have loved to add a little more interactivity. We had discussed putting pieces together on the site to show how it would work and then flipping it to show the result. While those would have been fun, they would have required a lot more work but might have made for much clearer instructions.
My reflections on what I learned with this project and areas I feel could be improved:
Learnings
Compared to previous projects, the clear need for photography came up. This meant a shoot which is costly, but I was able to properly justify it by walking the client through the research and content needs. Getting that additional cost approved really helped enhance the project, reminding me how important using the best photography is.
This was my 2nd time working with Squarespace. This time I had a developer working with me which allowed for a lot more flexibility when it came to plugging in custom code. Next time I feel I have a much better idea of what can be done or not.
Areas of Opportunity
I would have loved to add a little more interactivity. We had discussed putting pieces together on the site to show how it would work and then flipping it to show the result. While those would have been fun, they would have required a lot more work but might have made for much clearer instructions.
Special Shout-outs:
Client
Sylvia Stein
Developer
Serhiy Grabarchuk
Copy Assistance
Elissa Lavey
There are obviously many more people who helped out. While I may not have the space here, thank you 👏
Special Shout-outs:
Client
Sylvia Stein
Developer
Serhiy Grabarchuk
Copy Assistance
Elissa Lavey
There are obviously many more people who helped out. While I may not have the space here, thank you 👏
Special Shout-outs:
Client
Sylvia Stein
Developer
Serhiy Grabarchuk
Copy Assistance
Elissa Lavey
There are obviously many more people who helped out. While I may not have the space here, thank you 👏
Special Shout-outs:
Client
Sylvia Stein
Developer
Serhiy Grabarchuk
Copy Assistance
Elissa Lavey
There are obviously many more people who helped out. While I may not have the space here, thank you 👏