AI Document & ID Fraud Checker Tool
About SingleKey
SingleKey is a risk-management software aiming to give property managers and small landlords the tools and expertise to find the right tenants and mitigate risks in the rental market. They do this through their three primary products, a Tenant Report (a credit & background check in one), Rent Collection (automated & reported rent payments), and Rent Guarantee (renter’s insurance).
Project Summary
SingleKey was introducing an AI document fraud checker tool that would scan and check tenant-submitted income documents such as paystubs and bank statements for signs of tampering or alterations. Document fraud was a huge issue in the rental community, with many landlords facing tenants providing fake documents that were very difficult to detect for fraud to the naked eye.
At the same time, landlords could previously only view tenant-submitted documents by downloading them to their device. This was particularly an issue with busy property managers and realtors, with already a lot of documents to sort through on their computers. We wanted to improve the usability of the Tenant Report by eliminating this problem and allowing our clients to view documents directly in app.
My role
I was assigned to this project to mesh these two goals together. I collaborated with the senior designer, Melissa O, SingleKey’s CEO, and the front-end developer to come to a final solution.
Project Goals
🌟 Integrate the AI powered doc fraud checker tool seamlessly within the document view
🌟 Allow landlords to view and scroll through a gallery of documents within app
Process
Round 1
My first instinct was to place the verification tool next to the file view in a full-page modal because of the amount of content we had to focus the user on. The full-page modal gives the content plenty of room without requiring too much scrolling, while also reducing distractions underneath a regular overlay modal.
I arranged the key document details—like the title, document type, and download button—right above the image, with the data checks in a single column on the right. Users would also be able to scroll through all of the documents and see their data checks update as they browse.
Round 2: Brainstorming the ID check
After chatting with the team and getting their feedback, I made some tweaks to the full-page modal. I moved the document details and download button up into the header and shifted the data checks to the left side of the page, where users naturally look first.
We also focused in on how to show a top-level summary of the ID verification in the tenant report. When users click on one of the images, it will pull up the full-page modal for a closer look. I tried out different ways to showcase the ID and selfie on the report—using smaller cards with file details and larger cards as well. I also considered putting both images side by side in the full-page modal, so users wouldn’t have to scroll back and forth to compare them.
Round 3
I made the sidebar collapsible so users could view the document at 100% zoom. I also focused on how the expanded view for failed document checks would look. On the left, you’ll see the type of check, and on the right, there’s a FAIL/PASS chip. If a document check fails, we’ll pull in data from our AI partner to explain why it didn’t pass, by making the row expandable. ie. 'Detected edited font': The document contains fonts that appear abnormal.
This would reduce the height of the content within the sidebar unless the user wanted to understand more and open up the row.
Round 3: Refining the doc check sidebar
As we approached the final stages of the sidebar design and were finalizing which document checks we would show the user, I focused on creating a more visually appealing way to present the new feature. I placed the sidebar title and description in a vibrant violet banner, complete with an eye-catching icon.
I also added icons for each of the checks, and refined the check tooltips to provide concise explanations of each one's purpose.
Round 4: Mobile designs
I explored several options for presenting the sidebar on mobile devices, including sliding in from the bottom, taking up the full page, or coming in from the left side. I also tried out different button styles and sizes. In the end, the team agreed on option three: making 'Document Verification' the primary button and 'Download' the secondary icon button, since the content in the new feature was more important than downloading the images.
Final design
I did some final visual clean up of top header bar, such as adjusting the chip components to the smaller size, and changing the failed checks dropdown's fills to a light red to emphasize the fail status further.
I also worked on UX messaging for inactive states. The feature only covers the first three documents uploaded by tenants, as well as only PDFs (no image files) so I worked on what the sidebar would inform users in those situations.
The final design features a clean and responsive view of the documents and government ID alongside the fraud checks. The fraud checks provide all the information needed without being too overwhelming upfront, and is optimized for mobile screens.