Sightbox Product
Member Payments Page
Role: UI/UX Designer
Contributors: Lead Product Designer, Engineers, PM's , CX Team Leads
Timeline: 9/23/2019-10/26/2019
Problem
Member wants to know where they are in their plans journey. Patients don't have access to their invoices/invoice history. In addition, users don't have the ability to update payment method.
Requirements
Create an area for users to view their payment history, payment status (paid, declined, refunded, processing, scheduled), and edit their payment method.
Phase 1
My Plan choice displayed.
Phase 2
Include a total balance due at the top of the history showing a user where they are in their journey.
Phase 3
Discover
Research
Current Landscape
This was an opportunity to design our component for tables in our design system. It was important to consider responsiveness without sacrificing the details of the table. I compiled some observational research on current best practices for responsive table design.
1
Spotify served as a great point of reference for responsive table design, seamless transitions and stacking between breakpoints made for a smooth experience in either desktop or mobile.
1
1
User Interviews
As apart of this ongoing effort to redesign our member portal experience it was important to listen to the expectations users had about where to find certain information.
2
Through observational interactions with the product, users' feedback suggested exploring a solution with account information outside of the payments page, keeping all info on payments related to financial inquiries.
2
2
Existing Feature Research
Looking into both UX and Visual design details found in similar member dashboards. This revealed responsive details to be mindful of while approaching the design of the progress bar feature.
Design
Potential Solutions
Phase 1 Requirements
-
Prioritized CC info over invoice list from CX team feedback of the top need for users to manage vs. CX managing.
-
Color-coordinated status for Paid and Declined status.
-
Built table component for design system.
.png)
.png)
Phase 2 Requirements
Members would have the ability to see their plan selection as well as self-select changing their plan type.
.png)
.png)
Phase 3 Requirements
Design a timeline chart of users payments that includes an indication where a user is in their plan.
-
What's the emotional response from users around seeing large amounts of $$$ represented?
-
Would a user prefer seeing how much $$ they've paid off vs. much they owe?
-
What is the best data point to reflect the user journey?
-
% of total paid? Months left?
-
-
What's the best way to visualize payment progress?
-
Bar, tube, donut, teardrop?​
-
User Considerations
Sketching
Some ways I explored the progress display included a status tracker with notifications and a donut chart showing proportional amounts paid.
WIP Prototypes
.png)
.png)
Deliver
Final Thoughts
WIP
This project was cut off due to the company shutting down. In my spare time, I'm chipping away at what the best final solution would look like.
Collaborate & Iterate!
Visualizing data could take so many different forms. Getting different ideas came from close collaboration and discussions with my fellow designers and engineers. I liked exploring a solution for progress display that would work best in mobile and directly communicate status.
Prioritize
A payments page is no small feat to turn out in one go. This project required strategic prioritization with PM's to rollout feature updates and modifications over different sprints.
Negotiate
A great opportunity to advocate for design and the user while also balancing business goals and roadmap objectives. Looking at ways to give the user what they need through phased out updates.