[Design Plan] Remove pre-filled info in the card

Owned by Pereira, Filipa (Deactivated)
Last updated: Jun 03, 2024
3 min read

Contents

Intent

Insert here

The DRI for this discovery activity is [Person]

Discovery Plan

Kick off

Milestone

Output

Owner

Approver(s)

Reviewer(s)

Status

Milestone

Output

Owner

Approver(s)

Reviewer(s)

Status

Problem defined

  • Opportunity template, sections Context, Problem Statements and Expected Outcomes

 

 

 

NOT STARTED IN PROGRESS

done

Stakeholders informed

  • Kick off meeting

 

 

 

 

Discover

Opportunity/problem ticket

 

Milestone

Output

Owner

Approver(s)

Reviewer(s)

Status

Milestone

Output

Owner

Approver(s)

Reviewer(s)

Status

Stakeholders interviewed

  • List of stakeholder requirements

 

 

 

 

Franchisees interviewed

  • List of FZ requirements

 

 

 

 

Existing metrics understood

  • Report with current values for main KPI's (input to next milestone)

 

 

 

 

Success metrics defined

  • List of success metrics

  • Targets to aim for

  • Definition of how each metric will be measured

 

 

 

 

Run usability testing on existing solution

  • Proposed changes to the design

 

 

 

 

User interviews

 

 

 

 

 

Online surveys

 

 

 

 

 

Desk research

 

 

 

 

 

Competitor landscape

 

 

 

 

 

Persona mapping

 

 

 

 

 

User journey (use cases) mapping

 

 

 

 

 

Define

Opportunity/problem consolidation documentation

[Insert here Confluence page on opportunity findings consolidation]

Milestone

Output

Owner

Approver(s)

Reviewer(s)

Status

Milestone

Output

Owner

Approver(s)

Reviewer(s)

Status

Problem consolidation

  • Opportunity template: insights section and any others that may be relevant

 

 

 

 

Approach review and stakeholder validation

 

 

 

 

 

Develop

Note: the term “Develop” refers specifically to the production of solution design artefacts. There will be no software development in this phase.

List of solutions & designs

[Insert here Confluence page on solutions tested or figma designs]

Milestone

Output

Owner

Approver(s)

Reviewer(s)

Status

Milestone

Output

Owner

Approver(s)

Reviewer(s)

Status

Ideation & wireframing

  • High-level user flows

  • High or low fidelity wireframes

 

 

 

 

Design & prototype

  • Figma happy path screen flows

  • Figma prototype (if needed)

 

 

 

 

User testing

  • Report with findings and insights

  • Changes recommendations

 

 

 

 

Design review with stakeholders and franchisees

  • Approval for final happy path screen flows

 

 

 

 

Deliver

Note: the term “Deliver” refers specifically to the delivery of solution design artefacts. There will be no software development in this phase.

Solution Description

[Insert here the same solutions page if applicable]

Figma Link: https://www.figma.com/design/wEeYkRHLwLdMJHKvQJOdd0/%5BIBFEC-1795%5D-Remove-Pre-filled-Name-On-Card-field?node-id=7979-30251 ) 

Important: there are 2 different Payment Pages designs for each type of order: Delivery and Pick-up orders. By now, this should not affect the Dev Team but the Core FE.  

Also important: the pick-up orders flow has 2 variations depending on when the confirmation store was configurated to be displayed in the front: Store Confirmation page is activated before or after Order Payment page. 

DoD 

In Whitelabel-app: 

  • The pre-filled info in the “Name on Card” field has been removed. 

  • The “Name on Card” field appears empty, only showing the place holder (which is the “Default” State in the Design System) 

  • The required fields are marked with “*”. 

  • Show the Label in “Focus” “Filled” and “Error” field states, so the user has an extra guidance of what they are filling up: 

Focus State: 

Filled State: 

Error State:

 

Fix the type of keyboard displayed when the expiration date field is active: 

 

On the left, the current flow in which the alphanumeric keyboard is displayed. On the right, the new solution which shows the numeric keyboard.  

  • Change the icon for “Add new card” dropdown so it is more aligned to the copy description: 

Current icon: 

 

New icon: 

 

  • Show the title “Payment Details” before the dropdown: 

 

 

Milestone

Output

Owner

Approver(s)

Reviewer(s)

Status

Milestone

Output

Owner

Approver(s)

Reviewer(s)

Status

Feature (MVP) agreement

 

 

 

 

NOT STARTED

Tech solutioning review

 

 

 

 

NOT STARTED

Development Handoff

 

 

 

 

NOT STARTED

Analytics tagging

 

 

 

 

NOT STARTED

User story breakdown

 

 

 

 

NOT STARTED

Documents

Ideally (not mandatory) we should use the same Opportunity and Solution templates that we use for Delivery.