Sensibill is a solution for financial institutions and banks to collect, synthesize, and action customer spend data to personalize at scale using receipt and invoice capture and data extraction.

Timeline 4 Weeks

Role User Experience & Visual Design

Overview

This project was assigned by Product and Executive Leadership. Sensibill wants to visualize their API to show FI stakeholders how their users might adopt Sensibill’s receipt capture feature. We explore In-App Tooltips, In-App Guides, Relevant and Timely prompts, and Rewards and Incentives to illustrate our solutions.

The Problem

How might we prompt banking app users to adopt Sensibill’s receipt capture feature?

The Solution

Engaging In-app guides, helpful user tooltips, rewards & incentives, paired with timely and relevant user prompts.

51% of SMB customers use personal banking because they don’t see the value in switching to or using business banking services

Only 28% of traditional bank users are satisfied with their digital banking tools

Discovery

Initial research into in-app guide and tooltip practices along with our personas helped pave the groundwork for sketching out our solutions. Sketches were done in procreate and pen and paper.

User Stories

Meet Olivia

She’s a parent and an SMB owner Over $5,000 was spent in the last two months across 27 merchants

She’s a mother:

• Bought multiple kids’ meals at fast food establishments - alongside adult meals

More about her SMB - she’s an educator:

• Olivia is most likely in a teaching profession based on book purchases focused on autism, tutoring manual
• Recently registered an internet domain for a trust training company
• Attending courses from TeamTeach for positive behavioral management

Timely & Relevant User Prompts

In this flow we explore timely and relevant prompts for receipt capture feature adoption with incentives. The user is prompted by their bank to capture their receipt to a recent credit transaction to earn a reward. The user is then lead to their TD Account where the specific transaction is highlighted and prompted to capture their receipt. Once agreed the user is lead to an in-app walkthrough explaining the benefits of the TD Receipts feature.

• Prompt users to capture expenses with notifications
• Immediately remind users to capture important expenses, such as those imperative for taxes
• Incentivize users with rewards

In-App Feature Announcement

In-app feature announcements are a great way to introduce users to a new and helpful feature. We decided to use an in-app tooltip that prompts users for a new feature tour instead of immediately launching them into a lightbox modal. This way the user has more control and the experience is less jarring or aggressive.

• Mindful of the amount of information presented - showing too much at once increases users’ cognitive load
• Increase usability by explaining the purpose
• Focus on primary user tasks or atypical interactions, and design for maximum scannability by using visuals and succinct text.
• Visuals aid instructions

In-App Banners

In-app feature announcements are a great way to introduce users to a new and helpful feature.

• Mindful of the amount of information presented - showing too much at once increases users’ cognitive load

In-App Banners

Competitive Analysis

After addressing our challenges we were curious to see how industry leaders were handling their websites, we looked into direct competitors and top industry leaders such as Segment, Plaid, and Klarna. We paid special attention to how they communicated the value of their offerings, page structure, navigation, and how they visualized their technology.

View full analysis here.

💡 Key Takeaways

• Segment is a great inspiration for visualizing Sensibill’s AI data engine using simple animation
• We can use animation for communicating complex ideas
• The Fintech space is saturated with dark “code inspired” branding - we can differentiate Sensibill by concentrating on our light and airy feel
• Using Plaid and Segment as inspiration we found that we could alleviate navigation issues by implementing a mega menu

User Research

To make more informed design decisions, we gathered psychographics on our target audiences - leveraging cognitive principles and user stories to understand our audience and increase conversion.

Read the full summary of our research here

User Stories

Based on data and research we focused on two major audiences. Bank executives looking for Fintech solutions, and skeptical banking clients concerned about data security.

Bank Executive Sara Sara is researching Fintech solutions to bring back to her bank that will help them better understand and serve their customers, she is wondering if Sensibill’s tech might be the right fit for their needs.

Security wary Dale Having just downloaded his first banking app, Dale notices Sensibill’s receipt capture option. Concerned about banking security he finds himself researching Sensibill to learn more.

Wireframes & Prototypes

Wireframe V1

After deciding on messaging we designed the homepage wireframe structure, input design inspiration, and animation storyboards. We shared Sensibill's value story and design direction with leadership using visuals, animation storyboarding, and in-file design rationale. Using skeuomorphic UI elements allows us to elude to app benefits without the expectation that we are selling an app when we are selling our technology.

View full analysis here.

💡 Objectives for testing

• Observe the reaction to Sensibill’s technology visualizations
• Understand if we are properly telling Sensibill’s story - are we attracting financial institutions?
• Observe reaction to structure and length of homepage
• Uncover usability issues

Wireframe V1 Feedback

• Stakeholders are concerned about the lift and budget associated with 3D animation. Is there a solution we can come to that is economical with a quicker turnaround?
• The length of the page feels long, we need to distill down messaging and support visuals.

• Include more FI logos for trust and confidence
• A large animated Sensibill Data Engine visual might be out of budget range - can we do this in an economical way?
• Should feel more personal by showcasing people

Wireframe V2

• Header showcases actual user and user profiles - making the site more user-centric and approachable
• Collect, synthesize, action visuals as vector images that imitate Sensbill’s AI data engine as a more economic solution
• Experience, Enrichment, Intelligence visuals as skeuomorphic UI

Wireframe V3

• We lifted the main data engine visual as the website header using animation to show the full platform story
• Removed trust messaging to the bottom as confidence reinforcement with the customer quote section
• Extraction, Enrichment, Intelligence visuals as vectors in a parallax scroll create a feeling of interaction and interest for the user and reduce the length of the page
• Use of vectored illustration and icons are lower lift and economic

Conclusion

With help from Product and Leadership, we were able to distill down our main value story; using animation and vector illustration, align with our target audience, and implement UX best practices. View it live 🌎

• Sensibill data engine animation showcased in the header - immediately shows FI’s our larger story and platform capabilities
• Distill our data engine value story into Extraction, Enrichment, and Intelligence visuals.
• Custom Icon and illustrations showcase Sensibill benefits
• Megamenu makes it easier for users to navigate and align with appropriate solutions

Extraction, Enrichment, & Intelligence Visuals