Creativity Club

Google UX: Responsive custom cards website

Project Overview

Creativity Club: Homepage
Project Duration
June 2023 (1 week)
The Product
Creativity Club is a custom playing cards e-commerce store where people with varying levels of design experience can easily create beautiful decks.
My Role
UX designer, researcher 
User research, competitive audit, conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, iterating on designs and responsive design
The Problem
Most custom playing card companies have clunky and intimidating design tools

Understanding the User

Persona: Jonathan

Jonathan is a busy professional who is looking for a straightforward and quick way to design custom cards.

Persona 1
Creativity Club: Sitemap

Paper Wireframes

I created clear focal points and established a distinct visual hierarchy to guide the user through the main flow.

Paper Wireframe: Screen Sizes

I created wireframes for mobile and tablet screens to maximize accessibility and convenience.

Creativity Club: Lo-fi Homepage

Starting the Designs


One of the primary pain points for users was overwhelming website layouts. I grouped pages where users would look for them to establish a self-explanatory informational architecture.

Creativity Club: Paper Wireframe Different Screen Sizes

Digital Wireframe

My initial wireframe showed a breakdown of the customizable card elements. Some users still felt overwhelmed while trying to create a design. I added a carousel of templates to provide additional scaffolding for users that needed more guidance.

Digital Wireframe: Mobile

To optimize the design for a mobile screen without sacrificing key information, I presented the design elements using cards, increased the size of the CTA button, and reduced the number of templates on the carousel.

Low-fidelity Prototype

This low-fidelity prototype shows the primary user flow of creating a deck and checking out.
Creativity Club lo-fi prototype

Creativity Club: Lo-fi Homepage for MobileCreativity Club: Lo-fi Prototype Overview

Usability Study Findings

Design Tool Saving

Users wanted the option to save without checking out

Navigation Cues

Users weren't aware of some interaction elements

Study type:
Unmoderated usability study

Document Icon
Participants Icon

5 participants

USA, remote

Location Icon
Clock Icon

20-30 minutes

Usability study Parameters

Creativity Club: Paper Wireframe 1Creativity Club: Paper Wireframe 3Creativity Club: Paper Wireframe 2

Refining the Designs

Creativity Club: Lo-fi Cards Page

Before Usability Study

After Usability Study

Creativity Club: Hi-fi Cards Page
Hi-fi Mockup: HomeHi-fi Mockup: CardsHi-fi Mockup: Home for MobileHi-fi Mockup: Cards 2Hi-fi Mockup: Cheackout


Hi-fi Prototype Overview

Mockups: Design Tool

Based on the insights from the usability study, I made changes to improve the user’s design journey. I added a save button to save progress at any point. I also added a breadcrumb trail (just above the green arrow) to let the users know where they are in the process.

After Usability Study

Creativity Club: Lo-fi Homepage Page

After Usability Study

Creativity Club: Hi-fi Homepage Page

Mockups: Homepage

To make navigation easier, I added elevation to interaction elements like the cards from the carousel and the main CTA button

High-fidelity Prototype

My hi-fi prototype follows a similar user flow the the lo-fi prototype. It includes design changes from the usability study insights and several of my own that I thought would improve the user flow.

Creativity Club Hi-fi Prototype


I used landmarks such as navigation bars and footers for users who need assistive technologies when navigating the site

Visual Hierarchy

I created a visual hierarchy by using different heading sizes, which are annotated for screen readers.

Moving Forward

Next Steps

Conduct another usability study on the new website

Iterate on current features and ideate on new ones

What I Learned

I learned the value of user research and usability studies. In my initial designs, I made assumptions about the users within this niche market: who they are and what they would look for in a luxury custom cards company. Getting concrete feedback from real people was integral to developing a thoughtful, functional website.