Sandi's Cards Website Redesign
Who is Sandi’s Cards?
Sandi’s Cards blends creativity and connection through interactive card-making kits. The product inspires hands-on activity and brings a lot of crafting fun!
My Role
I partnered with Sandi and fellow UX designer Samantha Matchett to give the website a fresh look. We dove into the full UX process and I sharpened my client-collaboration skills as well as my Figma skills.
Step 1
Do a preliminary evaluation of the existing Sandi's Cards. I need to find out user flows, pain points, and much more.
Step 2
Talk with Sandi to understand client needs. I want to know the limitations and intentions of the project.
Step 3
Research, Design, Research, Design. Iterate in this cycle and create a cohesive design that incorporates insights.
Step 1:
Heuristic Evaluation
To better understand the user experience, I conducted a Nielsen Norman Heuristic Evaluation. This is a reliable method for spotting usability issues firsthand.
My goal? Test the checkout flow for buying a card.
Turns out, that simple task revealed exactly what we needed to focus on: the Home Page and Shop Page.
Step 2:
A Card Talk
I’ll admit, I was nervous before meeting Sandi. I knew the product but not the person or her expectations. To stay focused, I made a simple meeting outline to guide our chat and learn what she liked and didn’t like about her site. That first talk revealed my main focus on the Home and Shop pages, and any nerves quickly disappeared once I met Sandi. She was a dream client, and I was ready to dive in.
Me
Me
Sandi
“I’d love to hear what’s working well on your site and what you’d like to improve. What feels most important to you right now?”
“I really want the homepage to feel more welcoming and creative. The shop page works, but it could be easier to browse.”
“Nice! I’ll start by exploring how to make those pages more inviting and intuitive. I also want to make sure your personality shines through.”
Project Title
Add paragraph text. Click “Edit Text” to update the font, size and more. To change and reuse text themes, go to Site Styles.
Project Title
Add paragraph text. Click “Edit Text” to update the font, size and more. To change and reuse text themes, go to Site Styles.
Sandi's likes of her previous Home Page design:
-
Color edge to edge
-
Fixed carousel
-
Free shipping banner
Sandi's likes of her previous Shop Page design:
-
Four cards per row
-
Recent cards first
-
Size of thumbnails
Sandi's dislikes of her previous Home Page design
-
No logo
-
No footer
-
Icons too small
Sandi's dislikes of her previous Shop Page design
-
No "Shop" title
-
Cards do not stretch to fill page
-
No in-page cart
Step 3:
Research, Design, Repeat
User research is one of the most essential parts of my UX process. I had explored the site myself and gathered early insights from Sandi and my colleague Sam, but I needed real users to truly understand the full experience. My first step was conducting usability surveys to capture primary feedback.
In this project, I used guidance from the Google UX Design Course’s Usability Testing Playbook to shape my research. I ran nine usability surveys with participants across different ages and tech skill levels. Since Sandi shared that most of her users are women 55+, I spotlighted one participant who fit that perfectly: Donna.
About Donna:
• Mid-60s, with kids in their late 20s and early 30s
• Loves staying active and getting crafty
• Comfortable navigating the internet (most of the time)
“I don’t know where I am!”
- Donna, two seconds after landing on Sandi’s Cards homepage
I told her that if I’m any good at my job, I’d fix that. Scroll down to see what happened next.
Step 3 (continued):
Research, Design, Repeat
My pen was itching to hit the page, and my head was overflowing with ideas for Sandi’s ideal home and shop screens. I grabbed an old sketchbook and let the wireframes flow. Getting my first ideas out fast is one of the most enjoyable parts of my process ... and next time I’ll use my iPad so no one has to suffer through my chaotic handwriting!
Home Page Wireframe
• Sandi loved the full-width, colorful carousel on her current homepage, so I carried that energy into the updated wireframes
• I introduced a clear logo and experimented with cleaner header and footer layouts to address user and client issues
• Since users struggled to reach her, Sandi requested a “Contact Us” feature, which I began incorporating into the new design
Shop Page Wireframe
• Sandi liked full-width layouts, so I narrowed the outer margins in each iteration to maintain balance and flow
• To tackle concerns from the heuristic evaluation and user surveys, I added a filter system and experimented with multiple placement options
• Based on Sandi’s feedback and user survey insights, I introduced an in-page cart for a smoother shopping experience
Into the future: Digital Wireframes
After brainstorming and digging into user research, it was time to bring the wireframes into the digital world. This Figma file has some of the shop page iterations and the home page iterations, so you can see the consistency across iterations.
I created two iterations on my own, and on the third, my mentor and colleague Samantha Matchett jumped in during live sessions with the client to refine and improve the designs. Sam’s guidance was invaluable, and I couldn’t have reached this level of polish without her. Thanks, Sam!
Home Page Digital Wireframe
• Established a basic color palette for brand consistency and clarity
• Added the official logo and scaled icons for accessibility
• Highlighted the snail mail subscription with snail figures to reinforce the brand
• Collaborated with Sam to place a standout site banner above the carousel, setting the site apart from competitors
Shop Page Digital Wireframe
• Added a page search to go beyond the competition and paired it with a streamlined filter set
• Gave the in-page cart more prominence as a key feature across two iterations
• Refined icons to better match Sandi’s brand, improved scaling, and applied technical Figma tricks with help from Sam
Step 3 (still going!):
Research, Design, Repeat
After many many weeks of meetings with the client (Sandi) and my colleague (Sam), plenty of research, and a whole journey in refining and improving my technical skills, I was finally ready to start making the final iterations: High-Fidelity Prototypes!
I was super excited to let my design principles go to work. But I'll be honest, my first iterations were bad. Unfortunately, I got a little ambitious in the first few iterations. Looking back, if I had to identify and learn from my mistakes, I went for color over clarity and Sam quickly helped me rectify that! You can see these less clear, messier preliminary iterations to the left of the "final" iterations.
High Fidelity Prototypes
The "Final" Iterations
After committing to the User Experience process for months, doing various forms of tangible research, and designing a cohesive brand for Sandi's Cards - it was time to send the final product to the client!
Home Page "Final" Iteration
• Established a hierarchy system with font types and sizes uniformly divided from H1 - H4, while also implementing primary and secondary buttons, creating a consistent and clear iteration
• Navigated the prototype using keystrokes, applied a screen reader, used a contrast checker, applied ample spacing, and inserted legal instances to reinforce accessibility standards
• Utilized my training in design by applying gestalt principles, taking into consideration color contrast, balance, and symmetry
• Embedded a global expandable search function for greater ease-of-access
• Created universal header and footer with balanced, on-brand buttons
Shop Page "Final" Iteration
• Developed a high fidelity modern in-page checkout which addressed all concerns for clarity and customization
• Navigated the prototype using keystrokes, applied a screen reader, used a contrast checker, applied ample spacing, and inserted legal instances to reinforce accessibility standards
• Utilized my training in design by applying gestalt principles, taking into consideration color contrast, balance, and symmetry
• Embedded a global expandable search function for greater ease-of-access
• Created universal header and footer with balanced, on-brand buttons
Thank you for visiting!
Please feel free to look at more of my portfolio.