Payment
Web APP (B2C)
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.
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.
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
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:
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:
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:
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
Problem
Dealership doesn't get notice or tracking for payment
Assumption / Possible solution
We need to push information to DMS when we process payment.
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
Problem
Customer decides to pay for fewer/more services
Assumption / Possible solution
Estimate feature that allows customers choose from a to do checklist
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:
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