Puzlkind is a digital platform for solo or multiplayer jigsaw puzzl-ing. Created in response to COVID-19 and the days of isolation that ensued around the world, it includes in-game audio and messaging features to lend itself as a unique medium for interpersonal interaction. With its friendly voice and immersive replication of the tactile jigsaw puzzle, Puzlkind is, above all, a meditative and therapeutic experience.

role: product designer
type: desktop\mobile native app
team: puzzle artist sarah jane lapp and engineer mike ferrier
time: 2.5 months. launched feb 2021

context & vision

Sarah Jane, a jigsaw puzzle artist, had hosted regular puzzle happy hours prior to COVID-19, and Mike was a software engineer who frequented these workshops. After COVID-19 hit, Sarah Jane and Mike decided to re-create the happy hours online. Their vision was to:

01 \ recreate the physical jigsaw puzzle experience online

03 \ design a multiplayer jigsaw puzzle experience

04 \ promote sarah jane's jigsaw puzzle art

challenge 1/2
unfamiliar context

Once they had a working desktop prototype, Sarah Jane and Mike tried hosting a few workshops with it and found that users needed a lot of guidance navigating the app. This is where Sarah Jane reached out to me.

step 1, understand the problem

observing the design and user feedback, I found the core issue to be that a jigsaw puzzle app is at best an infrequent experience in the first place.

Most of our users were not familiar with online jigsaw puzzles. So when they opened the app not knowing what to expect and landed on this screen (image), users felt overwhelmed by the amount of unfamiliar visual & verbal stimuli.

step 3, hypothesize & experiment

First, I "cleaned up" the interface and identified the "main pathways" and the "ancillary pathways". Then, based on user feedback and my own observations, I identified key personas and brainstormed what each type would expect to find upon opening the app.

Framing question:

"what are users' immediate desires and what are the factors that disrupt them from achieving those goals?"

——
High-level user journey and user flow for a new user, an invited user, and a returning user.

the new user

Immediate desire:
\ "How do I start playing a jigsaw puzzle?"
\ "Where's the menu of jigsaw puzzles?"
\ "Tell me what this app does and what I'm supposed to do"

Disruptive factors:
\ Visual noise
\ Novel words and metaphors
\ CTAs without apparent direction (e.g. buttons, links, menu)
\ Multiplayer puzzle is an unfamiliar concept

the invited user*

Immediate desire:
\ "What am I supposed to do with this code?"
\ "Jenny said she sent an invitation. What does that mean?"

Disruptive factors:
\ No direct reference to "invitation", "joining", or "code"
\ No apparent pathway to any next step

——
* In Puzlkind, users can invite friends to work on the same jigsaw puzzle together. To invite someone, a user can send a unique alphanumeric code via their friend's email, or send an in-app invitation.

the returning user

Immediate desire:
\ "I want to resume where I left off on my puzzle"

Disruptive factors:
\ No direct reference to resuming a previous puzzle
\ No recognition of user's history
\ No apparent pathway to any next step

Then, I played around with alternative information architectures and wireframes of the home screen that'd best align with users' mental models.

step 4, prototype

Based on this exercise, I sketched out two revised versions of the home screen. For both versions, I reasoned...

overarching principle

echo, visually and verbally, the objectives of each user.

for the new user —
use familiar words and clear CTA

The experience of a new user is the litmus test for the home screen's usability. This means the home screen needs to be as straightforward as possible, with clear visual cues and languages that don't rely on any context.

\ Color and typography distinguish CTAs from descriptive text, and contain the novel concept of "multiplayer puzzles"

\ Visual noise—Remove or tone down all elements that do not serve the purpose of guiding the user to a main flow.

\ Illustration was a key component to the brand, so I utilized it in a way that added to the above goals.

for the invited user —
let them say "ohhhh" instantly upon entering

The "invite" feature is an inherently vague process to anyone using it for the first time.

\ Invitations sent by email: Make it clear that they have to download and/or launch the app.

\ Invitations sent in-app: Note the sender of the invite that their recipient will see an alert on their app screen.

\ Place a prominent and explicit CTA—"You have an invitation", "I received an invite code"—on the home screen.

\ Returning users who want to resume where they had left off are "impatient." Place the words they're looking for ("continue", "previous...") first on the list (top of list on mobile phones) so it's easy to target.

\ Signal that the app recognizes their history by displaying their screen name.

option A

option B—breaking up the steps

email invitation

step 5, testing & drawing a conclusion

Upon user testing with Option A against Option B, which bundled all the multiplayer routes into "puzl TOGETHER" to "contain" the unfamiliar notion of multiplayer puzzles and break it up into more digestible steps, I found that users prefer Option A because:

\ The multiplayer options were clear enough to them

\ They liked having the "received a code" option up front instead of having to click into one layer first

challenge 2/2

applying an elaborate aesthetic