Logo-RevvUp

Payment

Web APP

Senior Product Designer
UXD, 
UXR, UI & Facilitation

I worked in design management, leading the design team. I also learned and applied the company’s business needs. Led the end-to-end Product Design process:  co-creation with stakeholders, workshop facilitation, UX research, problem mapping, insights and ideation, user journeys, information architecture, wireframes, scenarios, user map flows, UI Design, and handoff to devs.
RevvUpi_iMac

Context

RevvUp
A startup founded in April 2020, RevvUp is building the future of automotive service centers with software that understands and optimizes operations at new car dealerships.
Their first product is helping change the $380B+ market with the first operations management tool for service centers.

RevvUp's challenge
Become the central hub of data within the dealership

Scenario
Today RevvUp's Web APP product offers car dealerships an APP with the following features:
• Chat application where the SA can communicate with clients
• Manager Dashboard with: customers, service advisor's name, RO's info such as status, gross revenue, opened date, and filter per period

The company earns money from a monthly payment fee.

The Payments section was another possible revenue source, getting a percentage per each transaction that was made.
My Challenge as a Product Designer
Designing the Payments section

Goal

Simple and intuitive payment process

Mapping

I used the mapping feature in Miro to understand the industry, the business, the challenges, and the money flow into car dealerships.

Miro - Business Mapping:

Proto-Persona

The car dealership is composed of a service manager and a team of service advisors.
Persona-1-SM-RevvUp
Persona-2-SA-RevvUp
Persona-3-Client-RevvUp

Problems | Insights

The stakeholders - Nate, CEO, and George, CTO - had participated in a mini-workshop to talk about user problems and assumptions (possible solutions) to fix them.

The problems highlighted below in bold are the ones prioritized, as it impacts the business and the user the most.

Miro's whiteboard also has:

Dependencies

• Stripe integration fails
• Internet connection
• Offer installment plans for vehicle owners

UX

• Multiple links to pay and the customer using the wrong one
• Customer decides to pay for fewer/more services
• Customer needs to be refunded
• Need an accurate report of all transactions and corresponding RO
• Customer doesn't understand where the link is
• Doesn't see detailed service repair information (George's vote  - CTO - as the main problem)
• Doesn't have a discount warranty coupon to pay
• How might we deal with payment in person?
• How might we offer a payment solution if the user doesn't have RevvUp's APP?
• Make it simple for vehicle owners to pay (Nate's vote - CEO - as the main problem)

Tech

• Payment link doesn't work
Dealership doesn't get notice or tracking for payment
• Payment is made but not marked as paid in DMS
• Customer sent the wrong RO to pay
• Someone pays but it is associated with no RO
• Payment request doesn't match the estimate
• Payment is made but not marked as paid in RevvUp
• Customer doesn't receive the link
• Wrong person is sent the link to pay

problemXinsight-RevvUp

Goal | Keep in mind

Simple and intuitive payment process

Prioritization

The workshop was also helpful to incorporate task prioritization and have a roadmap with a backlog.

Miro's whiteboard also has:
Matrix_Prioritization

Product Management

A kanban was used to organize tasks.

User Journey Map

I mapped a friendly user journey, and also some possible bad user journey scenarios.

The user journey to Payments is in Figma:
user-journey-friendly-bad

Benchmark | Inspirational case

The visit to Pirelli's store, which offers an end-to-end digital experience for car services, was an amazing benchmark.

The notes below were written after an interview with the service manager:
• The system is omnichannel
• Used by service managers, service advisors, mechanics, warehouse personnel, and customer attention support
• The devices are desktops and tablets
• All the services are managed in the system

Some system features are:
• Payments: 22 payment options
• Estimate
• Discounting
• Accounting
• Customer Info
• Services
• Selling
• Seller
• RO Number
• Service status
• Service Advisor's name
• Service open date and time
• Service description
• Item
• Item ID
• Item quantity
• Item quantity in stock
• Unit price
• Price margin
• Client Name
• Client number ID
• Total price
• Receipt
• Invoice
• Search and filters
• Tablet to take the car photo

Credit Card's API

Stripe was chosen to be the credit card's source.

Information Architecture

There are two versions: v1 (simplest), and v2 (complete).
Here it is possible to quickly locate the Payment's structure as part of the site map.

It's located in Miro:
information-arch-revvup

Data

Where did the RO's info come from?
It came from the Retool APP. There you will find all the RO’s data related to the car dealership service.

Wireframes

The draft (paperless and wireframe) is key for a good understanding of the basic scenarios, flows, and screen content's structure.

I interviewed the Head of Products a few times. From our conversations, I got a better understanding of the company’s business needs.
They were subjective and complex talks, and the feedback I got was essential for making improvements.

Goal | Keep in mind

Simple and intuitive payment process

UI Design

Problem
Doesn't see detailed service repair information

Assumption / Possible solution
Before paying, there is a checklist with detailed information
Payments-v2-Client-01.03.02
Problem
Dealership doesn't get notice or tracking for payment

Assumption / Possible solution
We need to push information to DMS when we process payment.
Estimate-v2-01.02.01
Problem
Customer needs to be refunded

Assumption / Possible solution
Ability for SA or SM to send a refund which will come from their Stripe cash account
Refund-v2-03.01.06
Problem
Customer decides to pay for fewer/more services

Assumption / Possible solution
Estimate feature that allows customers choose from a to do checklist
Declined-v2-Client-02.01.01

The Payment's components were designed using Figma's Auto Layout and Variant as tools.

The UI high-fidelity screens are in Figma:

User Map Flow

The final and definitive document:
• Documentation for stakeholders with the UI screens
• Navigable flows separated by sections
• User maps scenarios: normal, success, cancellation, and error
• Notes to developers with business and product rules
The simplest version is Payments v1, this is the MVP.
The complete version is Payments v2, adding status, estimate, and more Refund options.

The scenarios are:
• Payments v1 - Create: simplest version
• Payments v1 - Refund: simplest version
• Payments v2 - Estimates with same RO
• Payments v2 - Refund
• Payments v2 - Declined
• Payments v2 - Estimates with different RO
There are two other sections that show:
• RO & Estimate status
• Interaction: button interaction examples

Overflow with all the flows:
overflow-revvup

Handoff

There are two ways to get the assets and the specs:
• Screens from Figma - Web, and mobile:

• From Zeplin where it's also possible to see all the UI specs and download the assets, very very useful for devs:

Results

When I left the company, the Payment’s feature hadn’t been launched.
Because of this, I didn’t have the opportunity to measure its results.

Takeaways / What I learned

• Better plan from the beginning, understand stakeholder expectations, define priority tasks, agree on deadlines, develop kanbans to share with the product team

• Conduct a kick-off interview with questions that will help you better understand the entire project

• Understand the design maturity level of the stakeholders, if it is small, the idea is to work on the design step by step and contribute to the evolution of the design culture

• Confidently express the workshop rules to the team

• Focus on the main task at hand

Let's create something together