So what was confusing about the previous experience?

This was my design review. I focused on the form itself and identified key issues in the copy, components, functionality and overall intent of the form.

The Form:

Problems:

1. Confusing page title
2. Multiple CTAs produce confusion & hesitation.
3. Teal button takes user out of the form
4. Buttons fail accessibility

Observations:

• Should all payment amounts be visible?
• What if user prefers to add a custom amount?
• Only Apple Pay allowed, consider more options?
• UI feels cluttered and unclear.
• Why does the orange button have an arrow icon and the grey one doesn’t?

The Confirmation:

Problems:

1. Form has been submitted and the ‘back arrow’ does not take user back
2. No transaction details or summary of purchase
3. Buttons fail accessibility
4. Buttons are inconsistent with the previous page; devs have built multiple instances of the same component

Observations:

• Avatar does not make sense
• Close button is irrelevant because user is on a tab
• Completion of flow does not return user to place of origin
• Graphics, colors and brand elements are competing against messaging

Discovering where to make improvements

I partnered with UX research and we initiated conversations with users. Evaluating core users flows highlighted disruptions and missed opportunities for engagement. Looking at other payment apps provided new ideas and inspiration.

emoji_objects

Key insights

Perks weren’t as important as we thought
Users wanted to give specific amounts of money
Localized payment options weren’t accepted
The current experience was disruptive
There was an over abundance of copy

It was time for a fresh approach to the UI

Using the insights gained during the discover stage, I had more confidence approaching and exploring a new design. Team feedback was crucial in narrowing down the ideas.

Things I explored

gesture_select

New form interactions

chat

A conversational approach

copy_all

Full page verses a sheet

play_shapes

Agressive simplification

draw

Clear copy and messaging

palette

Visual design & color

Sketches and mockups

Feedback and alignment

I presented the design options to the entire mobile team for review and feedback.

arrow_split

What we decided

Use sheet modality for a less disruptive and more contextual experience
Perks visibility not priority, keep focus on the form
Build and test designs 2 and 5

Delivering the final designs

1. The Conversational Form

2. The Incremental Form

All screens, dialogues and components

Outcome: Testing proved a success, but the project was deprioritized

Due to the nature of start-ups, priorities shifted and the project was deprioritized, however according to our users, the design was improved.

User Experience

Relieve user confusion.

84%

Understood what to do

92%

Preferred the new design

Notable feedback for option #1:

”The text made it very clear
on what I should do.”

Design

Create a clear and intuitive design.

Improve the visual design = Everyone was excited about the new direction.
Fix accessibility issues = All elements are WCAG compliant.
Consider localization and scalability = UI optimized for multi-lingual support.
Provide clear and helpful copy = Users confirmed this.

Business

Increase revenue by improving conversion rates.

This goal has yet to be proven due to deprioritization.

A redesign that relieved user confusion by 84%

So what was confusing about the previous experience?

The Form:

Problems:

Observations:

The Confirmation:

Problems:

Observations:

Discovering where to make improvements

Key insights

It was time for a fresh approach to the UI

Things I explored

New form interactions

A conversational approach

Full page verses a sheet

Agressive simplification

Clear copy and messaging

Visual design & color

Sketches and mockups

Feedback and alignment

What we decided

Delivering the final designs

1. The Conversational Form

2. The Incremental Form

All screens, dialogues and components

Outcome: Testing proved a success, but the project was deprioritized

User Experience

Relieve user confusion.

84%

Understood what to do

92%

Preferred the new design

”The text made it very clear
on what I should do.”

Design

Create a clear and intuitive design.

Business

Increase revenue by improving conversion rates.

Home

Next

I’m ready for next steps if you are.

So what was confusing about the previous experience?

The Form:

Problems:

Observations:

The Confirmation:

Problems:

Observations:

Discovering where to make improvements

Key insights

It was time for a fresh approach to the UI

Things I explored

New form interactions

A conversational approach

Full page verses a sheet

Agressive simplification

Clear copy and messaging

Visual design & color

Sketches and mockups

Feedback and alignment

What we decided

Delivering the final designs

1. The Conversational Form

2. The Incremental Form

All screens, dialogues and components

Outcome: Testing proved a success, but the project was deprioritized

User Experience

Relieve user confusion.

84%

Understood what to do

92%

Preferred the new design

”The text made it very clear on what I should do.”

Design

Create a clear and intuitive design.

Business

Increase revenue by improving conversion rates.

Home

Next

I’m ready for next steps if you are.

”The text made it very clear
on what I should do.”