Home

>

Works

>

Kickstarter Case Study

Case Study

Case Study

Introduction

Introduction

Kickstarter: Project Creation Redesign

Kickstarter: Project Creation Redesign

A redesigned project creation page implementing user experience practices, heuristics, and psychology to reduce the page drop-off rate.

Nominated as a finalist for the Kickstarter redesign contest under Fia Reyes!

A redesigned project creation page implementing user experience practices, heuristics, and psychology to reduce the page drop-off rate.

Nominated as a finalist for the Kickstarter redesign contest under Fia Reyes!

Project Background

This project is part of Bitesize's Kickstarter Redesign Contest. I entered the test and hone to gauge my skills compared to the competition.


I redesigned the Kickstarter page to conform to good UX Practices and psychology to reduce the drop-off rate of the creation page.

Project Background

This project is part of Bitesize's Kickstarter Redesign Contest. I entered the test and hone to gauge my skills compared to the competition.

I redesigned the Kickstarter page to conform to good UX Practices. I also used psychology and heuristics to improve the interaction.

Project Information

Client

Kickstarter

Team & Role

Solo UX Designer

Timeline

March 24' (2 Weeks)

Deliverables

Prototype

Project Information

Client

Kickstarter

Team & Role

Solo UX Designer

Timeline

March 24' (2 Weeks)

Deliverables

Prototype

Before and After (Summary)

Before and After (Summary)

The Problem

The Problem

Understanding the problem and forming project goals.

Understanding the problem and forming project goals.

Defining the Problem and Setting Goals

Defining the Problem and Setting Goals

Users abandon the process upon seeing the screen.

Users abandon the process upon seeing the screen.

The Problem

The Problem

Kickstarter is seeing a high drop-off on the first step of the project creation screen. I was tasked with redesigning the screen to reduce drop-off.

Kickstarter is seeing a huge drop-off on the first step of the project creation screen. Users abandon the process upon seeing the screen above. I was tasked with improving the screen based on user feedback to reduce drop-off.

Project Goals

Project Goals
  1. Analyze negative user feedback.

  1. Uncover UI/UX and Human Factors problems.

  1. Uncover UI/UX and Human Factors problems.

  1. Redesign the experience based on feedback and the uncovered problems.

Project Constraints

Defining Constraints

  • Redesign is based on contest project parameters; not current Kickstarter.

  • Based on desktop only.

  • User Feedback was provided to me.

Project Constraints

Defining Constraints
  • Redesign is based on contest project parameters; not current Kickstarter.

  • Based on desktop only.

  • User Feedback was provided to me.

Research

Research

Analysis on the current experience to determine WHY users drop off.

Analysis on the current experience to determine WHY users drop off.

User Feedback

Beginning the process

I began by examining the user feedback due to being tangible information.

Why do Kickstarter creators experience frustrations?

  • A lack of clear preview of how their project card will appear on the platform.

  • They need direction on titles, descriptions, and images to deliver a strong first impression.

  • Uncertainty on the ability to edit project details and image pre & post launch.

User Feedback

Beginning the process

I began by examining the user feedback due to being tangible information.

Why do Kickstarter creators experience frustrations?
  • A lack of clear preview of how their project card will appear on the platform.

  • They need direction on titles, descriptions, and images to deliver a strong first impression.

  • Uncertainty on the ability to edit project details and image pre & post launch.

UX/UI Contributors to Drop-Off

UX/UI Contributors to Drop-Off

Elements contributing to drop-off

Elements contributing to drop-off
  1. Header links provide options to leave the page.

  1. Header links provide options to leave the page.

  1. Element shapes lead users away from the form and towards header links.

  1. Element shapes lead users away from the form and towards header links.

  1. No recommended guidelines for fields such as Image Upload.

  1. No recommended guidelines for fields such as Image Upload.

Interaction Problems

Analyzing the interaction holistically

I identified implicit problems that could contribute to drop-off.

  • No way to jump around steps. A linear project creation process can overwhelm users, who may be ideating on certain fields.

  • Must be completed in one sitting? No words such as "Save Changes" imply to that the process must be completed in one sitting.

  • Boredom. A long and monotonous creation process might lead to drop-off.

Interaction Problems

Analyzing the interaction holistically

I identified implicit problems that could contribute to drop-off.

  • No way to jump around steps. A linear project creation process can overwhelm users, who may be ideating on certain fields.

  • Must be completed in one sitting? No words such as "Save Changes" imply to that the process must be completed in one sitting.

  • Boredom. A long and monotonous creation process might lead to drop-off.

Problem Refining

Determining the problem and creating goals to resolve drop-off.

Problem Refining

Determining the problem and creating goals to resolve drop-off.

The Final Problem and Goals

How can we increase task completion rate based on the user feedback of the current experience?

User feedback states that creators require guidance and visual feedback to solve their frustrations. The current user interface reveals UI elements that can also contribute to a lower task completion rate.

Redesign Goals

  1. Remove elements that detract the user from completing the form.

  1. Add elements that resolve the user feedback frustrations.

  1. Enhance the experience with practices encouraging task completion.

The Final Problem and Goals

How can we increase task completion rate based on the user feedback of the current experience?

User feedback states that creators require guidance and visual feedback to solve their frustrations. The current user interface reveals UI elements that can also contribute to a lower task completion rate.

Redesign Goals

  1. Remove elements that detract the user from completing the form.

  1. Add elements that resolve the user feedback frustrations.

  1. Enhance the experience with practices encouraging task completion.

Ideation

I assumed long forms bored users into drop off; so applied visual changes and psychology to enhance the experience.

Ideation

I assumed long forms bored users into drop off; so applied visual changes and psychology to enhance the experience.

— Visual Design Ideation —

— Visual Design Ideation —

Project Card Preview

Project Card Preview

Real Time Card Preview

Real Time Card Preview

Provides instant visual feedback to creators for their project card.

Provides instant visual feedback to creators for their project card.

Adding a Progress Bar

Adding a Progress Bar

Progressive Tasks

Progressive Tasks

Divides the form into smaller task to reduce the "overwhelming" feeling of long forms.

Divides the form into smaller task to reduce the "overwhelming" feeling of long forms.

Taking advantage of the Goal Gradient Effect

Taking advantage of the Goal Gradient Effect

Motivates users to complete the task the as they near the final step.

Motivates users to complete the task the as they near the final step.

Overlay with Advice

Overlay with Advice

For Users Who Need Guidance

For Users Who Need Guidance

A link provides guidance on professional techniques for strong first impressions.

A link provides guidance on professional techniques for strong first impressions.

Header Redesign

Header Redesign

Removing unnecessary links

Removing unnecessary links

Provides less opportunities for users to leave the form.

— Interaction Design Ideation —

— Interaction Design Ideation —

Informing the user of saving progress.

CTA Changes

Notifies and confirms saved progress, important long forms.


120ms animation to feel responsive. Falls under the Doherty Threshold of <400ms.

Informing the user of saving progress.

CTA Changes

Notifies and confirms to the user that their changes are being saved.

120ms during state transitions to give users time to notice and falls under the Doherty Threshold of <400ms to FEEL responsive.

Knowledge on previously edited and active forms.

Field States

Many fields results in users forgetting what they edited or where they are.


Inspired by the Von Restorff Effect to isolate specific field types.

Knowledge on previously edited and active forms.

Field States

Many fields can result in users forgetting changed elements.

Previously edited fields have a color stroke, and a focused state differentiates the field currently in use.

Inspired by the Von Restorff Effect to isolate which fields were changed with visual differences to prevent unintended changes.

Final Solution

A experience designed to motivate and help users get started on a Kickstarter.

Final Solution

A experience designed to motivate and help users get started on a Kickstarter.

A Redesigned Form — With a card you can preview changes!

A Redesigned Form — With a card you can preview changes!

Instant Feedback and Preview

Instant Feedback and Preview

See the edits you make in real time so you always know how your project will appear to others. No more wondering if your project will look bad or clicking off the page!

See the edits you make in real time so you always know how your project will appear to others. No more wondering if your project will look bad or clicking off the page!

Clarification

Clarification

Users now know that they can edit their Kickstarter information pre & post creation.

Users now know that they can edit their Kickstarter information pre & post creation.

Need advice? We've got you covered!

Need advice? We've got you covered!

Helping users to form better Kickstarters!

Helping users to form better Kickstarters!

Click on any of the green links to learn what makes a product good! Use tried and true techniques that professionals use in their fields — and apply it to your Kickstarter!

Click on any of the green links to learn what makes a product good! Use tried and true techniques that professionals use in their fields — and apply it to your Kickstarter!

Past Iterations

An example of some elements I chose to scrap BUT, built off or learned from their failed implementation.

Past Iterations

An example of some elements I chose to scrap BUT, built off or learned from their failed implementation.

Past Iteration - Example 01

Old Progress Bar

Initially intended to be a more compact design.


Scrapped give visible names of the steps to improve navigation.

Past Iteration - Example 01

Old Progress Bar

Initially intended to be a more compact design.


Scrapped give visible names of the steps to improve navigation.

Past Iteration - Example 02

Project Card Preview Button

Scrapped when I realized that users would rather see their design updated real time.

Past Iteration - Example 02

Project Card Preview Button

I initially used a design that previews the card with an overlay.

The design was scrapped when I realized that users would rather see their design be updated WHILE filling the form.

Reflections

Thank you for reading!!


This is a look into lessons learned from the project. I also explore into what I could have done different if I had more time.

Reflections

Thank you for reading!!


This is a look into lessons learned from the project. I also explore into what I could have done different if I had more time.

Learnings

Learning to apply assumptions

It was hard working without in-depth research. However, I was able to apply my assumptions into small quality of life changes.

Improving my interaction design

Taking the user feedback and translating it into an interaction design. I learned how to create elements that enhance the interaction rather than a redesign.

Learnings

Learning to apply assumptions

It was hard working without in-depth research. However, I was able to apply my assumptions into small quality of life changes.

Improving my interaction design

Taking the user feedback and translating it into an interaction design. I learned how to create elements that enhance the interaction rather than a redesign.

What I Would Have Done Differently

Refining the components

After completion of the project, I realized there's no element to minimize the progress bar or hide the preview card on the edge case if the user feels it's too distracting. I now have knowledge on these UX problems for future designs.

Reiterate on Layouts Based on Viewports

A problem I faced was trying to layout the form and elements in perfect position. In hindsight, I did not think about experimenting with viewports to resize elements. In the future, I would do this based on the content of the page.


For this project, I assumed that users were focused on filling the form and did not mind the awkward sizing of the content. But, it's a methodology I would like to implement regardless.

A/B Tests

Two weeks meant I could not recruit people to do in depth user testing. However, I pondered on the idea of doing quick A/B Testing to survey which iteration of a form users liked more.

What I Would Have Done Differently

Refining the components

After completion of the project, I realized there's no element to minimize the progress bar or hide the preview card on the edge case if the user feels it's too distracting. I now have knowledge on these UX problems for future designs.

Reiterate on Layouts Based on Viewports

A problem I faced was trying to layout the form and elements in perfect position. In hindsight, I did not think about experimenting with viewports to resize elements. In the future, I would do this based on the content of the page.

For this project, I assumed that users were focused on filling the form and did not mind the awkward sizing of the content. But, it's a methodology I would like to implement regardless.

A/B Tests

Two weeks meant I could not recruit people to do in depth user testing. However, I pondered on the idea of doing quick A/B Testing to survey which iteration of a form users liked more.

FIA

WORKS

Thank you for visiting!

Let's work together!

© 2024 Fia - Inspired by the world of NieR:Automata.

This portfolio was designed and built by Fia.

FIA

WORKS

Thank you for visiting!

Let's work together!

© 2024 Fia - Inspired by the world of NieR:Automata.

This portfolio was designed and built by Fia.

FIA

WORKS

Thank you for visiting!

Let's work together!

© 2024 Fia - Inspired by the world of NieR:Automata.

This portfolio was designed and built by Fia.