Delivery Hero is a multinational online food ordering and delivery platform that operates in 70+ countries and partners with 500,000+ restaurants. The Restaurant Vendor Portal is an online one-stop shop where restaurant, business owners can track orders, analyze sales data, get insights, grow with marketing tools, and more.
I was the sole designer in the Vendor Portal Reporting & Insight Squad, which is responsible for tackling problems and challenges related to dashboard, data, financials, and billing.
Based on the quarterly Vendor NPS (Net Promoter Score) surveys, we identified that Billing & Payment area consistently ranks as one of the lowest performing key drivers among Vendor Portal. Vendors have repeatedly provided feedback that our current portal's finance experience is the worst among competitors for several reasons, including confusing sales formulas and lack of transparency and consistency in payout information.
Because Vendros are dissapointed and unsatisfied with financial reporting experience, this leads to:
Our team initiated the Financial Clarity project, focusing on three key areas: Payout Financial Clarity, Sale & Performance Financial Clarity, and Order-Level Financial Clarity. I crafted design solutions aimed at bringing consistency, clarity, and transparency to the financial experience within the vendor portal.
Disclaimer: All views expressed here are my own and do not necessarily reflect the views of the respective company. Some design elements have been changed from the original.
The impact of the improvements on the Order and Dashboard pages after 3 months of implementation
Increase on the CSAT Score when it comes to billing and payments related
Decrease in the volume of negative tickets related to payment complaints
Increase vendor engagement & stickiness with Dashboard & Order Page
How might we...
— 01. Order-Level Financial Clarity
❌ Problem
Vendors express concern and disappointment regarding the accuracy of sales value and earnings. Currently, there is no way to view detailed financial data ( sales, cost, comission) per order.
🟢 Solution
— 02. Sale-Performance Financial Clarity
❌ Problem
Vendors have noticed significant discrepancies between the sale amounts displayed on the platform and the actual earnings they receive. As a result, they frequently contact their Account Managers seeking clarification on how the earnings are calculated.
🟢 Solution
— 03. Payment-Level Financial Clarity
❌ Problem
F&B corporation vendors, in particular, find it challenging to consolidate sales and profits across outlets and desired time periods. Street food stall vendors also feel uncertain and lack confidence in their business cash flow due to unclear payout statuses.
🟢 Solution
Finances Page - Demo
Let's take a look behind the design process. As the project involved both the Billing Squad and the Dashboard team, we initiated a "kick-off" week to get to know each other better and establish a solid foundation for the entire project. We engaged all participants and key stakeholders from the beginning, including the Head of Growth, Product Managers, Product Designer (myself 💁), UX researcher, Sale Account Manager and Engineering team.
Rapidly adding core features to a product risk it becoming quickly fragmented. To make sure that the product stayed cohesive and that we were building the right things for our customers, I partnered with PM and Engineering leadership to align on 2 product principles that would underpin all future product development.
Numbers should consistently match across all vendor touchpoints, sourced from the same data.
Our solution should provide clarity on how numbers are calculated, fees/charges are determined, and what factors contribute to the final payout.
All income sources and deductions should be clearly displayed, accompanied by explanations, reasons, and support options.
To uncover any potential issues in navigation and interactions related to billing and payment, I analyzed Google Analytics data and heatmaps. I then conducted a comprehensive audit of the financial page and analyzed competitors' approaches to billing and financial challenges. These steps improved our understanding of the market and revealed areas for product enhancement.
Findings were shared with the project team, aligning everyone towards our common goal.
Three key opportunities that we can explore to enhance the financial experience as following
Subpages and tabs are utilized commonly in the financial page.
Ability to view payout details for a desired period in advance, without the need to download the invoice.
Display a consistent and detailed sales formula and data table layout across all platforms.
After identifying key areas for improvement, I collaborated with the UX researcher to plan our research in order to gain a deeper understanding of the problem space. This involved analyzing APAC free text feedback and conducting vendor interviews in Singapore.
After conducting research, we identified distinct needs between street food stalls and F&B corporations. To prioritize the most critical problems and address the significant needs of key user groups, we created two personas representing these audience segments. This approach enables us to focus our efforts effectively.
I then proceeded to review the vendor journey, encompassing the order journey to success, while considering the frictions and needs identified from the two personas. This allowed me to distill the key insights from the vendor perspective.
User want to tally total transactions easily across various time period
User want to receive the right payment amount on the right time
User want to tally deductions easily and confidently
After presenting the insights to PMs, we established key metrics, in addition to the product vision, to define the success of the project. These metrics were aligned with our team's OKRs for the fourth quarter.
Improve vendor satisfaction by increasing the Payout CSAT score by 6%.
Reduce vendor reliance on Account Managers by decreasing the volume of support tickets related to payout.
Increase vendor engagement & stickiness with Payout by 5%.
To determine the most critical features for the initial release, we collaborated with Product Managers and the engineering team to revisit the User Story Map during a workshop. We utilized a simple T-Shirt scale for estimation and MoSCoW framework for prioritization.
Prior to brainstorming session, me and PM created a list of "How Might We... " questions to help us better align our user’s tasks and goals. We then spent 2-3 minutes brainstorming the solutions for each problem and replaying the process with a second round to come with as many solutions as possible.
After brainstorming, I created multiple design solutions, considering the pros and cons of each option. When making decisions, I took into account factors such as system complexity, team involvement, and, most importantly, alignment with our personas.
With many exploration, I then presented multiple design concepts along with my recommendations to gather feedback from my PMs.
After our session, the PMs and I were in agreement regarding the options we wanted to move forward with.
To minimize bias and gather additional feedback, we also conducted design review workshop with Engineer team to get feedback on technical's perspective and the Sales Account Manager, who has valuable firsthand experience with user inquiries. Following that, we conducted user testing with the chosen solutions to identify any frictions in our proposed solutions. This allowed us to make further improvements before proceeding with our launch.
Based on workshop feedback and user testing findings, we made improvements considering technical constraints and personas prioritization. While chain vendors are crucial, we also considered the needs of small vendors.
Here are the key insights that I have narrowed down for iteration based on findings and feedback. I also revisited our product vision to ensure that the improved solutions align with our project goals, technical constraints, and the needs of our users.
Most vendors are busy with operational work in their restaurants, so displaying a large number of metrics and options in the Dashboard can be overwhelming and mentally taxing. It is important to only present the critical information to vendors and provide the ability to delve into details on their own.
=> For Dashboard page, I decided to display explaination of Total Est. Earning through the pop-over, allowing vendors to easily understand how it is calculated and granting them the option to access further details by navigating to the report page.
Iteration on Dashboard Page: Displaying pop-over instead of Accordion
It is crucial to provide vendors with key metrics such as Gross Sales and Net Payout, as well as important information like upcoming payout amount and time, in a concise and easily accessible format. This allows vendors to quickly review the information at the end of the day. Additionally, vendors expressed a desire to view detailed cost breakdowns without the need to download the invoice or complex interaction
=> The Financial Page navigation has been enhanced with a Tab structure. Vendors can now view business metrics in the Summary Tab, and access Payout and Statements in separate tabs. Additionally, they can easily access the cost breakdown and choose specific date ranges for the Financial Summary.
Iteration on Finances page with dedicated tab: Summary, Payouts and Additional Statements
Knowing the upcoming payout amount is crucial, but vendors also express a need to track the progress and current stage of their payouts, considering the possibility of concurrent payouts.
=> In response, I have revised the approach for displaying information in the Upcoming payout card to address these scenarios and accommodate concurrent payout cycles. Furthermore, I have expanded the use cases to cover various payout cycles.
The iteration of Payout status - clear progress depends on different use cases
F&B Corporations require improved sorting options for monthly statements in addition to the payout cycle invoices (daily, weekly). They also need the ability to download or filter statements based on outlets and date ranges.
=> To address these needs, I have enhanced the Statements download feature by providing vendors with greater flexibility with Date and Outlet views,. Furthermore, I have implemented filter options to allow vendors to easily narrow down their choices.
The iteration on Statement documents download - provide more flexibility
With all the revisions made, I have created the final prototype and prepared the hand-off documentation for development. The engineering team has prioritized and aligned with the product roadmap. The development stage began with the Order Page, and the Financial Page will be the final phase.
Since the development plan is expected to take 3 months after the hand-off for all features, we are currently able to measure the impact of the improvements on the Order and Dashboard pages.
Increase on the CSAT Score when it comes to billing and payments related
Decrease in the volume of negative tickets related to payment complaints
Increase vendor engagement & stickiness with Dashboard & Order Page
and there's so much more to come, we believe!
This project marked my initial venture into designing a Dashboard and Financial features. It presented a multitude of challenges and opportunities in addressing longstanding critical issues within the platform. Among the most exciting aspects of this endeavor was making financial information and reports easily understandable and actionable. Considering the bustling nature of our vendors' restaurant businesses, the more streamlined and simplified the information we provide, the quicker they can complete their financial and reporting tasks.
Friction often arises between designers and developers due to the different tasks and perspectives on the same challenges. Effective communication and bridging any knowledge gaps are important for achieving better results. I've learned the importance of early conversations to minimize unexpected issues. This includes providing all design files and relevant documentation and organizing meetings with the right people to ensure synchronization.
In the real world, when dealing with complex systems and displaying information, there are numerous situations that deviate from the typical or expected usage patterns such as vendor with single vs multi outlet, daily vs monthly payout cycle, etc.... Working on this project has emphasized the importance of constantly questioning myself and considering potential issues or challenges that users may face during the design process. By doing so, I strive to anticipate and address these edge cases, ensuring that the design solution is robust and capable of accommodating a wide range of scenarios. This mindset enables me to create more inclusive and user-friendly designs that cater to the diverse needs of users in real-world situations.
Designing an AI-based assessment platform that empowers sonographers to seamlessly enhance their skills and achieve certifications.
*Case study coming soon ´{´◕ ◡ ◕｀}
Crafting the first online ticketing platform in Iraq to help users easily grab tickets and enjoy sport events.
