Old-Project: Website redesign Impact: 70% increase in customer satisfaction

Overview

Ringle Dingle is an AI-powered responsive website that lets users create and send customized cards as e-greetings and physical paper cards.

Project Details:

Duration: 4 weeks
Tools: Figma, Maze, Photoshop
Role: UX / UI Designer
Client: Dolphin Studios

Challenge

Holiday cards represent about 20% of the 6.5 billion greeting cards Americans buy each year. How might we effectively increase awareness and boost sales of physical cards during Ringle Dingle's holiday-themed website redesign?

Solution

In this case study, I'll showcase how I redesigned the website, spotlighting the physical cards feature and creating a smoother and more enjoyable card creation experience for users.

Usability Testing Highlights Key Challenges

Usability Testing Insights:

• Task 1: Create a Card
  Success Rate: 100% | CSAT: 20%

• Task 2: Share via Email
  Success Rate: 80% | CSAT: 10%

• Task 3: Purchase a Card
  Success Rate: 0% | CSAT: 0%

Categorized User Feedback:

• Confusing AI Prompts
  Users struggled with unclear instructions and found the card creation process confusing.

• Limited Customization Options
  Users desired more choices for poem length, AI-generated images, and narrator options.

• Difficulties with Physical Card Purchases
  Users encountered challenges in finding and purchasing physical cards, including missed buttons and safety concerns.

Competitive Analysis

After learning about the users encountered on Ringle Dingle, I began exploring e-greeting websites to understand their features as well as how users customize and share cards.

• I conducted a feature inventory to see how different websites help users create and customize cards.

• I looked at well-known e-greeting platforms, alongside a niche website leveraging AI technology.

Sketching User Flows

The next step was to brainstorm potential user flows and design directions for the website.

• How can I make writing AI prompts easier for users?

• How do I redesign a lengthy card creation process and make it simple and quick?

• How do I allow users to customize cards?

Task Flow 1: Create and customize a card

This flow lets users take a step-by-step approach to creating a card and customize it using prompts, a narrator's voice and music.

Task Flow 2: Checkout and send customized order

This flow allowed users to choose a delivery method – email or mail – and go through a standard e-commerce checkout process.

Low Fidelity Wireframes

Creating lo-fi sketches to build a clickable prototype for early usability testing.

High-Fidelity Prototype

High-Fidelity Prototype Testing:

Method: Conducted 10 usability tests using Maze with the high-fidelity prototype

• Task Success Rate: 100% of users successfully created and purchased cards

• Customer Satisfaction Score (CSAT):

  • Pre-Design: 20%

  • Post-Design: 90%

Usability testing on Maze

View Prototype in Figma