receiptpal cover mobile
receiptpal desktop cover

ReceiptPal

From Receipts to Rewards, in a Snap

ReceiptPal

From Receipts to Rewards, in a Snap

ReceiptPal

PFrom Receipts to Rewards, in a Snap

ReceiptPal

From Receipts to Rewards, in a Snap

ReceiptPal

From Receipts to Rewards, in a Snap

After a round of shopping and dining, we often come home with a handful of receipts that end up discarded. Enter ReceiptPal, a free app for iOS and Android that turns those very receipts into something you'll actually find valuable. Every paper or online receipt submitted is an entry into a weekly drawing for a bonus cash prize, and every 4 receipts submitted earn 100 points, which can in turn be exchanged for rewards such as Amazon gift cards.

After a round of shopping and dining, we often come home with a handful of receipts that end up discarded. Enter ReceiptPal, a free app for iOS and Android that turns those very receipts into something you'll actually find valuable. Every paper or online receipt submitted is an entry into a weekly drawing for a bonus cash prize, and every 4 receipts submitted earn 100 points, which can in turn be exchanged for rewards such as Amazon gift cards.

After a round of shopping and dining, we often come home with a handful of receipts that end up discarded. Enter ReceiptPal, a free app for iOS and Android that turns those very receipts into something you'll actually find valuable. Every paper or online receipt submitted is an entry into a weekly drawing for a bonus cash prize, and every 4 receipts submitted earn 100 points, which can in turn be exchanged for rewards such as Amazon gift cards.

After a round of shopping and dining, we often come home with a handful of receipts that end up discarded. Enter ReceiptPal, a free app for iOS and Android that turns those very receipts into something you'll actually find valuable. Every paper or online receipt submitted is an entry into a weekly drawing for a bonus cash prize, and every 4 receipts submitted earn 100 points, which can in turn be exchanged for rewards such as Amazon gift cards.

After a round of shopping and dining, we often come home with a handful of receipts that end up discarded. Enter ReceiptPal, a free app for iOS and Android that turns those very receipts into something you'll actually find valuable. Every paper or online receipt submitted is an entry into a weekly drawing for a bonus cash prize, and every 4 receipts submitted earn 100 points, which can in turn be exchanged for rewards such as Amazon gift cards.

ReceiptPal was created in partnership with one of the largest market research companies in the world, The NPD group, which provides information, analysis, and advisory services regarding consumer behavior to companies in more than 20 industries.

ReceiptPal was created in partnership with one of the largest market research companies in the world, The NPD group, which provides information, analysis, and advisory services regarding consumer behavior to companies in more than 20 industries.

ReceiptPal was created in partnership with one of the largest market research companies in the world, The NPD group, which provides information, analysis, and advisory services regarding consumer behavior to companies in more than 20 industries.

ReceiptPal was created in partnership with one of the largest market research companies in the world, The NPD group, which provides information, analysis, and advisory services regarding consumer behavior to companies in more than 20 industries.

ReceiptPal was created in partnership with one of the largest market research companies in the world, The NPD group, which provides information, analysis, and advisory services regarding consumer behavior to companies in more than 20 industries.

tutorial, home screen, camera view

1) ReceiptPal's onboarding tutorial. 2) Home screen featuring one verified receipt, one in progress, and two receipt slots remaining until the card is completed. 3) Camera view when snapping a receipt.

1) ReceiptPal's onboarding tutorial. 2) Home screen featuring one verified receipt, one in progress, and two receipt slots remaining until the card is completed. 3) Camera view when snapping a receipt.

1) ReceiptPal's onboarding tutorial. 2) Home screen featuring one verified receipt, one in progress, and two receipt slots remaining until the card is completed. 3) Camera view when snapping a receipt.

1) ReceiptPal's onboarding tutorial. 2) Home screen featuring one verified receipt, one in progress, and two receipt slots remaining until the card is completed. 3) Camera view when snapping a receipt.

1) ReceiptPal's onboarding tutorial. 2) Home screen featuring one verified receipt, one in progress, and two receipt slots remaining until the card is completed. 3) Camera view when snapping a receipt.

Registering is Annoying—Let's Make it Easier

I was tasked with revamping the registration process for both new and existing users as part of a major update for ReceiptPal. The primary reason was to incorporate automatic online receipt (or “e-receipt”) submissions, a new feature that allows users to connect the app to their email for an effort-free alternative to manually forwarding e-receipts to a dedicated email address. This was a prime opportunity to examine the entire existing flow and see where improvements could be made.

I was tasked with revamping the registration process for both new and existing users as part of a major update for ReceiptPal. The primary reason was to incorporate automatic online receipt (or “e-receipt”) submissions, a new feature that allows users to connect the app to their email for an effort-free alternative to manually forwarding e-receipts to a dedicated email address. This was a prime opportunity to examine the entire existing flow and see where improvements could be made.

I was tasked with revamping the registration process for both new and existing users as part of a major update for ReceiptPal. The primary reason was to incorporate automatic online receipt (or “e-receipt”) submissions, a new feature that allows users to connect the app to their email for an effort-free alternative to manually forwarding e-receipts to a dedicated email address. This was a prime opportunity to examine the entire existing flow and see where improvements could be made.

I was tasked with revamping the registration process for both new and existing users as part of a major update for ReceiptPal. The primary reason was to incorporate automatic online receipt (or “e-receipt”) submissions, a new feature that allows users to connect the app to their email for an effort-free alternative to manually forwarding e-receipts to a dedicated email address. This was a prime opportunity to examine the entire existing flow and see where improvements could be made.

I was tasked with revamping the registration process for both new and existing users as part of a major update for ReceiptPal. The primary reason was to incorporate automatic online receipt (or “e-receipt”) submissions, a new feature that allows users to connect the app to their email for an effort-free alternative to manually forwarding e-receipts to a dedicated email address. This was a prime opportunity to examine the entire existing flow and see where improvements could be made.

wireframes for registration flow

Mapping out the registration flow using the initial wireframes.

Mapping out the registration flow using the initial wireframes.

Mapping out the registration flow using the initial wireframes.

Mapping out the registration flow using the initial wireframes.

Mapping out the registration flow using the initial wireframes.

I began with how to access Registration in the first place—the Settings page—and organized the list of items into distinct categories for easier scanning. From there, I defined what the registration flow looked like with the inclusion of the new feature, dubbed “Email AutoDiscovery”, for every type of user. The first step of registration, inputting an email address, allows the app to identify a user as new or existing, and whether or not their email address has been verified (if not, registration is incomplete).

I began with how to access Registration in the first place—the Settings page—and organized the list of items into distinct categories for easier scanning. From there, I defined what the registration flow looked like with the inclusion of the new feature, dubbed “Email AutoDiscovery”, for every type of user. The first step of registration, inputting an email address, allows the app to identify a user as new or existing, and whether or not their email address has been verified (if not, registration is incomplete). 

I began with how to access Registration in the first place—the Settings page—and organized the list of items into distinct categories for easier scanning. From there, I defined what the registration flow looked like with the inclusion of the new feature, dubbed “Email AutoDiscovery”, for every type of user. The first step of registration, inputting an email address, allows the app to identify a user as new or existing, and whether or not their email address has been verified (if not, registration is incomplete). 

I began with how to access Registration in the first place—the Settings page—and organized the list of items into distinct categories for easier scanning. From there, I defined what the registration flow looked like with the inclusion of the new feature, dubbed “Email AutoDiscovery”, for every type of user. The first step of registration, inputting an email address, allows the app to identify a user as new or existing, and whether or not their email address has been verified (if not, registration is incomplete).

I began with how to access Registration in the first place—the Settings page—and organized the list of items into distinct categories for easier scanning. From there, I defined what the registration flow looked like with the inclusion of the new feature, dubbed “Email AutoDiscovery”, for every type of user. The first step of registration, inputting an email address, allows the app to identify a user as new or existing, and whether or not their email address has been verified (if not, registration is incomplete).

3_ADbanner

Explanation of the new Email AutoDiscovery feature seen on the Registration view, right where the user can also toggle the feature once registered.

Explanation of the new Email AutoDiscovery feature seen on the Registration view, right where the user can also toggle the feature once registered.

Explanation of the new Email AutoDiscovery feature seen on the Registration view, right where the user can also toggle the feature once registered.

Explanation of the new Email AutoDiscovery feature seen on the Registration view, right where the user can also toggle the feature once registered.

Explanation of the new Email AutoDiscovery feature seen on the Registration view, right where the user can also toggle the feature once registered.

Though a banner detailing Email AutoDiscovery’s benefits exists upon entering Registration Settings, I took care to include a short and succinct description on the first page of the actual registration process as well. This covers any user that chooses to ignore that banner or is unclear about what this feature entails.

Though a banner detailing Email AutoDiscovery’s benefits exists upon entering Registration Settings, I took care to include a short and succinct description on the first page of the actual registration process as well. This covers any user that chooses to ignore that banner or is unclear about what this feature entails.

Though a banner detailing Email AutoDiscovery’s benefits exists upon entering Registration Settings, I took care to include a short and succinct description on the first page of the actual registration process as well. This covers any user that chooses to ignore that banner or is unclear about what this feature entails.

Though a banner detailing Email AutoDiscovery’s benefits exists upon entering Registration Settings, I took care to include a short and succinct description on the first page of the actual registration process as well. This covers any user that chooses to ignore that banner or is unclear about what this feature entails.

Though a banner detailing Email AutoDiscovery’s benefits exists upon entering Registration Settings, I took care to include a short and succinct description on the first page of the actual registration process as well. This covers any user that chooses to ignore that banner or is unclear about what this feature entails.

4_ADdescrip

A succinct description is available here as well to inform users of what the new feature is.

A succinct description is available here as well to inform users of what the new feature is.
A succinct description is available here as well to inform users of what the new feature is.

A succinct description is available here as well to inform users of what the new feature is.

A succinct description is available here as well to inform users of what the new feature is.

A Visual Overhaul

A Visual Overhaul

A Visual Overhaul

A Visual Overhaul

A Visual Overhaul

In the previous design, inputting date of birth and gender was done through text buttons that opened a scrollable picker. To streamline this view in the re-design, the text button for date of birth was swapped out for a form field matching the email address field above it, and gender was made into a segmented control to make selection just that little bit easier. In fact, the visual design of the entire registration flow was overhauled to make it more consistent with the rest of the app, swapping out the formerly dark overlay for the light background used elsewhere in the app. A green stroke was added to highlight the active field, and an error state in the form of an orange stroke accompanying an error message was added to provide additional clarity should something go wrong (e.g. a wrongly formatted email address).

In the previous design, inputting date of birth and gender was done through text buttons that opened a scrollable picker. To streamline this view in the re-design, the text button for date of birth was swapped out for a form field matching the email address field above it, and gender was made into a segmented control to make selection just that little bit easier. In fact, the visual design of the entire registration flow was overhauled to make it more consistent with the rest of the app, swapping out the formerly dark overlay for the light background used elsewhere in the app. A green stroke was added to highlight the active field, and an error state in the form of an orange stroke accompanying an error message was added to provide additional clarity should something go wrong (e.g. a wrongly formatted email address).

In the previous design, inputting date of birth and gender was done through text buttons that opened a scrollable picker. To streamline this view in the re-design, the text button for date of birth was swapped out for a form field matching the email address field above it, and gender was made into a segmented control to make selection just that little bit easier. In fact, the visual design of the entire registration flow was overhauled to make it more consistent with the rest of the app, swapping out the formerly dark overlay for the light background used elsewhere in the app. A green stroke was added to highlight the active field, and an error state in the form of an orange stroke accompanying an error message was added to provide additional clarity should something go wrong (e.g. a wrongly formatted email address).

In the previous design, inputting date of birth and gender was done through text buttons that opened a scrollable picker. To streamline this view in the re-design, the text button for date of birth was swapped out for a form field matching the email address field above it, and gender was made into a segmented control to make selection just that little bit easier. In fact, the visual design of the entire registration flow was overhauled to make it more consistent with the rest of the app, swapping out the formerly dark overlay for the light background used elsewhere in the app. A green stroke was added to highlight the active field, and an error state in the form of an orange stroke accompanying an error message was added to provide additional clarity should something go wrong (e.g. a wrongly formatted email address).

In the previous design, inputting date of birth and gender was done through text buttons that opened a scrollable picker. To streamline this view in the re-design, the text button for date of birth was swapped out for a form field matching the email address field above it, and gender was made into a segmented control to make selection just that little bit easier. In fact, the visual design of the entire registration flow was overhauled to make it more consistent with the rest of the app, swapping out the formerly dark overlay for the light background used elsewhere in the app. A green stroke was added to highlight the active field, and an error state in the form of an orange stroke accompanying an error message was added to provide additional clarity should something go wrong (e.g. a wrongly formatted email address).

registration screen and error state

The Register screen was optimized top to bottom to provide a more streamlined experience. Active and error states for the form fields provide immediate, useful feedback.

The Register screen was optimized top to bottom to provide a more streamlined experience. Active and error states for the form fields provide immediate, useful feedback.

The Register screen was optimized top to bottom to provide a more streamlined experience. Active and error states for the form fields provide immediate, useful feedback.

The Register screen was optimized top to bottom to provide a more streamlined experience. Active and error states for the form fields provide immediate, useful feedback.

The Register screen was optimized top to bottom to provide a more streamlined experience. Active and error states for the form fields provide immediate, useful feedback.

Clarity is Key

Clarity is Key

Clarity is Key

Clarity is Key

Clarity is Key

My very first wireframes relegated Email AutoDiscovery to its own section in Registration Settings, but the interface turned out quite cluttered because the same email address had to be displayed twice and the process for turning off the feature was unclear. To fix this, each registered email was given its own dropdown menu where the user can enable/disable Email AutoDiscovery, or if they choose to do so, delete that particular email from ReceiptPal entirely.

My very first wireframes relegated Email AutoDiscovery to its own section in Registration Settings, but the interface turned out quite cluttered because the same email address had to be displayed twice and the process for turning off the feature was unclear. To fix this, each registered email was given its own dropdown menu where the user can enable/disable Email AutoDiscovery, or if they choose to do so, delete that particular email from ReceiptPal entirely.

My very first wireframes relegated Email AutoDiscovery to its own section in Registration Settings, but the interface turned out quite cluttered because the same email address had to be displayed twice and the process for turning off the feature was unclear. To fix this, each registered email was given its own dropdown menu where the user can enable/disable Email AutoDiscovery, or if they choose to do so, delete that particular email from ReceiptPal entirely.

My very first wireframes relegated Email AutoDiscovery to its own section in Registration Settings, but the interface turned out quite cluttered because the same email address had to be displayed twice and the process for turning off the feature was unclear. To fix this, each registered email was given its own dropdown menu where the user can enable/disable Email AutoDiscovery, or if they choose to do so, delete that particular email from ReceiptPal entirely.

My very first wireframes relegated Email AutoDiscovery to its own section in Registration Settings, but the interface turned out quite cluttered because the same email address had to be displayed twice and the process for turning off the feature was unclear. To fix this, each registered email was given its own dropdown menu where the user can enable/disable Email AutoDiscovery, or if they choose to do so, delete that particular email from ReceiptPal entirely.

multiple emails on registration screen
Each associated email address can be expanded to reveal action items, and collapsed to simplify the view when not needed.
Each associated email address can be expanded to reveal action items, and collapsed to simplify the view when not needed.
Each associated email address can be expanded to reveal action items, and collapsed to reduce clutter when not needed.
Each associated email address can be expanded to reveal action items, and collapsed to simplify the view when not needed.
Each associated email address can be expanded to reveal action items, and collapsed to simplify the view when not needed.

One User Action, Many Variables

One User Action, Many Variables

One User Action, Many Variables

One User Action, Many Variables

One User Action, Many Variables

Several other factors had to be considered so that every type of user was accounted for, including the compatibility of a user’s email provider with Email AutoDiscovery, whether the authorization was through OAuth (e.g. Gmail) or an IMAP provider (e.g. Yahoo Mail), and what happens if the app loses authorization due to a changed email password.

Several other factors had to be considered so that every type of user was accounted for, including the compatibility of a user’s email provider with Email AutoDiscovery, whether the authorization was through OAuth (e.g. Gmail) or an IMAP provider (e.g. Yahoo Mail), and what happens if the app loses authorization due to a changed email password.

Several other factors had to be considered so that every type of user was accounted for, including the compatibility of a user’s email provider with Email AutoDiscovery, whether the authorization was through OAuth (e.g. Gmail) or an IMAP provider (e.g. Yahoo Mail), and what happens if the app loses authorization due to a changed email password.

Several other factors had to be considered so that every type of user was accounted for, including the compatibility of a user’s email provider with Email AutoDiscovery, whether the authorization was through OAuth (e.g. Gmail) or an IMAP provider (e.g. Yahoo Mail), and what happens if the app loses authorization due to a changed email password.

Several other factors had to be considered so that every type of user was accounted for, including the compatibility of a user’s email provider with Email AutoDiscovery, whether the authorization was through OAuth (e.g. Gmail) or an IMAP provider (e.g. Yahoo Mail), and what happens if the app loses authorization due to a changed email password.

7_errors
1) An error message that occurs when the user has changed the password to their email provider. 2) What the user sees if they attempt to register with an unsupported provider.
1) An error message that occurs when the user has changed the password to their email provider. 2) What the user sees if they attempt to register with an unsupported provider.
1) An error message that occurs when the user has changed the password to their email provider. 2) What the user sees if they attempt to register with an unsupported provider.
1) An error message that occurs when the user has changed the password to their email provider. 2) What the user sees if they attempt to register with an unsupported provider.
1) An error message that occurs when the user has changed the password to their email provider. 2) What the user sees if they attempt to register with an unsupported provider.

Hundreds of Receipts? No Problem

Hundreds of Receipts? No Problem

Hundreds of Receipts? No Problem

Hundreds of Receipts? No Problem

Hundreds of Receipts? No Problem

The other major redesign I was responsible for was ReceiptPal’s receipt log. The NPD Group noticed that this secondary feature became the primary way for some users to keep track of their expenses. It made perfect sense given that the process of capturing receipts also documents all the key information regarding their purchases (retailer, date, amount). Unfortunately, as receipts piled up over time, the lack of organization other than its default listing in reverse chronological order became a hindrance if a user wanted to hunt down specific purchases. Naturally, the next step in the receipt log’s evolution was to introduce sorting and filtering.

The other major redesign I was responsible for was ReceiptPal’s receipt log. The NPD Group noticed that this secondary feature became the primary way for some users to keep track of their expenses. It made perfect sense given that the process of capturing receipts also documents all the key information regarding their purchases (retailer, date, amount). Unfortunately, as receipts piled up over time, the lack of organization other than its default listing in reverse chronological order became a hindrance if a user wanted to hunt down specific purchases. Naturally, the next step in the receipt log’s evolution was to introduce sorting and filtering.

The other major redesign I was responsible for was ReceiptPal’s receipt log. The NPD Group noticed that this secondary feature became the primary way for some users to keep track of their expenses. It made perfect sense given that the process of capturing receipts also documents all the key information regarding their purchases (retailer, date, amount). Unfortunately, as receipts piled up over time, the lack of organization other than its default listing in reverse chronological order became a hindrance if a user wanted to hunt down specific purchases. Naturally, the next step in the receipt log’s evolution was to introduce sorting and filtering.

The other major redesign I was responsible for was ReceiptPal’s receipt log. The NPD Group noticed that this secondary feature became the primary way for some users to keep track of their expenses. It made perfect sense given that the process of capturing receipts also documents all the key information regarding their purchases (retailer, date, amount). Unfortunately, as receipts piled up over time, the lack of organization other than its default listing in reverse chronological order became a hindrance if a user wanted to hunt down specific purchases. Naturally, the next step in the receipt log’s evolution was to introduce sorting and filtering.

The other major redesign I was responsible for was ReceiptPal’s receipt log. The NPD Group noticed that this secondary feature became the primary way for some users to keep track of their expenses. It made perfect sense given that the process of capturing receipts also documents all the key information regarding their purchases (retailer, date, amount). Unfortunately, as receipts piled up over time, the lack of organization other than its default listing in reverse chronological order became a hindrance if a user wanted to hunt down specific purchases. Naturally, the next step in the receipt log’s evolution was to introduce sorting and filtering.

receipt log and individual receipt
1) The receipt log is where all submitted receipts can be viewed. 2) Tapping on any receipt in the list allows the user to see it in detail, whether it's one they snapped or one submitted online.
1) The receipt log is where all submitted receipts can be viewed.
2)
Tapping on any receipt in the list allows the user to see it in detail, whether it's one they snapped or one submitted online.
1) The receipt log is where all submitted receipts can be viewed.
2) Tapping on any receipt in the list allows the user to see it in detail, whether it's one they snapped or one submitted online.
1) The receipt log is where all submitted receipts can be viewed.
2) Tapping on any receipt in the list allows the user to see it in detail, whether it's one they snapped or one submitted online.
1) The receipt log is where all submitted receipts can be viewed. 2) Tapping on any receipt in the list allows the user to see it in detail, whether it's one they snapped or one submitted online.

I started by doing an audit of numerous shopping apps, where sorting and filtering is an important part of the experience. I came across a surprising amount of variation for the types of UI implemented, and took stock of what worked the best for parameters similar to the ones ReceiptPal would end up using. I learned that context is helpful—giving feedback on how a user’s search parameters affect the pool of results made the experience much smoother.

I started by doing an audit of numerous shopping apps, where sorting and filtering is an important part of the experience. I came across a surprising amount of variation for the types of UI implemented, and took stock of what worked the best for parameters similar to the ones ReceiptPal would end up using. I learned that context is helpful—giving feedback on how a user’s search parameters affect the pool of results made the experience much smoother.

I started by doing an audit of numerous shopping apps, where sorting and filtering is an important part of the experience. I came across a surprising amount of variation for the types of UI implemented, and took stock of what worked the best for parameters similar to the ones ReceiptPal would end up using. I learned that context is helpful—giving feedback on how a user’s search parameters affect the pool of results made the experience much smoother.

I started by doing an audit of numerous shopping apps, where sorting and filtering is an important part of the experience. I came across a surprising amount of variation for the types of UI implemented, and took stock of what worked the best for parameters similar to the ones ReceiptPal would end up using. I learned that context is helpful—giving feedback on how a user’s search parameters affect the pool of results made the experience much smoother.

I started by doing an audit of numerous shopping apps, where sorting and filtering is an important part of the experience. I came across a surprising amount of variation for the types of UI implemented, and took stock of what worked the best for parameters similar to the ones ReceiptPal would end up using. I learned that context is helpful—giving feedback on how a user’s search parameters affect the pool of results made the experience much smoother.

Sorting Needs to Be Quick...

Sorting Needs to Be Quick...

Sorting Needs to Be Quick...

Sorting Needs to Be Quick...

Sorting Needs to Be Quick...

Sorting is more likely to be used rather than filtering when the user is gathering more general, high level information about their purchases. As a result, I wanted to make it as easily accessible as possible, so I placed a dropdown menu right on the main receipt log view in favor of an entirely separate view, within a bar that doubles as a way to display how it is currently being sorted. Sorting type affects how purchases are displayed as well—when sorted by date, purchases are chunked into individual months and labelled accordingly, while sorting alphabetically triggers an A-Z index that makes browsing easier.

Sorting is more likely to be used rather than filtering when the user is gathering more general, high level information about their purchases. As a result, I wanted to make it as easily accessible as possible, so I placed a dropdown menu right on the main receipt log view in favor of an entirely separate view, within a bar that doubles as a way to display how it is currently being sorted. Sorting type affects how purchases are displayed as well—when sorted by date, purchases are chunked into individual months and labelled accordingly, while sorting alphabetically triggers an A-Z index that makes browsing easier.

Sorting is more likely to be used rather than filtering when the user is gathering more general, high level information about their purchases. As a result, I wanted to make it as easily accessible as possible, so I placed a dropdown menu right on the main receipt log view in favor of an entirely separate view, within a bar that doubles as a way to display how it is currently being sorted. Sorting type affects how purchases are displayed as well—when sorted by date, purchases are chunked into individual months and labelled accordingly, while sorting alphabetically triggers an A-Z index that makes browsing easier.

Sorting is more likely to be used rather than filtering when the user is gathering more general, high level information about their purchases. As a result, I wanted to make it as easily accessible as possible, so I placed a dropdown menu right on the main receipt log view in favor of an entirely separate view, within a bar that doubles as a way to display how it is currently being sorted. Sorting type affects how purchases are displayed as well—when sorted by date, purchases are chunked into individual months and labelled accordingly, while sorting alphabetically triggers an A-Z index that makes browsing easier.

Sorting is more likely to be used rather than filtering when the user is gathering more general, high level information about their purchases. As a result, I wanted to make it as easily accessible as possible, so I placed a dropdown menu right on the main receipt log view in favor of an entirely separate view, within a bar that doubles as a way to display how it is currently being sorted. Sorting type affects how purchases are displayed as well—when sorted by date, purchases are chunked into individual months and labelled accordingly, while sorting alphabetically triggers an A-Z index that makes browsing easier.

sorting in the receipt log
1) Receipts are sorted new to old by default. 2) Tapping the green bar allows the user to change sort order. 3) Selecting alphabetical order changes the headers accordingly and adds a slider for quick navigation.
1) Receipts are sorted new to old by default. 2) Tapping the green bar allows the user to change sort order. 3) Selecting alphabetical order changes the headers accordingly and adds a slider for quick navigation.
1) Receipts are sorted new to old by default. 2) Tapping the green bar allows the user to change sort order. 3) Selecting alphabetical order changes the headers accordingly and adds a slider for quick navigation.
1) Receipts are sorted new to old by default. 2) Tapping the green bar allows the user to change sort order. 3) Selecting alphabetical order changes the headers accordingly and adds a slider for quick navigation.
1) Receipts are sorted new to old by default. 2) Tapping the green bar allows the user to change sort order. 3) Selecting alphabetical order changes the headers accordingly and adds a slider for quick navigation.

...And Filtering Needs to Be Flexible

...And Filtering Needs to Be Flexible

...And Filtering Needs to Be Flexible

...And Filtering Needs to Be Flexible

...And Filtering Needs to Be Flexible

The receipt count displayed within the sorting bar was actually born out of designing the filtering experience. When filtering, the receipt count provides immediate feedback in order to prevent the user from closing it just to discover they had selected parameters not applicable to any receipt. I realized it was also beneficial in the main receipt log view as an additional indicator for whether or not the receipts had a filter applied. After all, if you usually see that there’s 200+ receipts and the count is currently only at 83, you know something is up even without taking stock of the filter icon in the corner being filled in.

The receipt count displayed within the sorting bar was actually born out of designing the filtering experience. When filtering, the receipt count provides immediate feedback in order to prevent the user from closing it just to discover they had selected parameters not applicable to any receipt. I realized it was also beneficial in the main receipt log view as an additional indicator for whether or not the receipts had a filter applied. After all, if you usually see that there’s 200+ receipts and the count is currently only at 83, you know something is up even without taking stock of the filter icon in the corner being filled in.

The receipt count displayed within the sorting bar was actually born out of designing the filtering experience. When filtering, the receipt count provides immediate feedback in order to prevent the user from closing it just to discover they had selected parameters not applicable to any receipt. I realized it was also beneficial in the main receipt log view as an additional indicator for whether or not the receipts had a filter applied. After all, if you usually see that there’s 200+ receipts and the count is currently only at 83, you know something is up even without taking stock of the filter icon in the corner being filled in.

The receipt count displayed within the sorting bar was actually born out of designing the filtering experience. When filtering, the receipt count provides immediate feedback in order to prevent the user from closing it just to discover they had selected parameters not applicable to any receipt. I realized it was also beneficial in the main receipt log view as an additional indicator for whether or not the receipts had a filter applied. After all, if you usually see that there’s 200+ receipts and the count is currently only at 83, you know something is up even without taking stock of the filter icon in the corner being filled in.

The receipt count displayed within the sorting bar was actually born out of designing the filtering experience. When filtering, the receipt count provides immediate feedback in order to prevent the user from closing it just to discover they had selected parameters not applicable to any receipt. I realized it was also beneficial in the main receipt log view as an additional indicator for whether or not the receipts had a filter applied. After all, if you usually see that there’s 200+ receipts and the count is currently only at 83, you know something is up even without taking stock of the filter icon in the corner being filled in.

filtering receipts
Price slider automatically ranges from the receipt with the lowest amount to the highest. Any changes instantly reflect in the receipt count at the top.
Price slider automatically ranges from the receipt with the lowest amount to the highest. Any changes instantly reflect in the receipt count at the top.
Price slider automatically ranges from the receipt with the lowest amount to the highest. Any changes instantly reflect in the receipt count at the top.
Price slider automatically ranges from the receipt with the lowest amount to the highest. Any changes instantly reflect in the receipt count at the top.
Price slider automatically ranges from the receipt with the lowest amount to the highest. Any changes instantly reflect in the receipt count at the top.

Of course, it’s possible the user will go ahead anyway and apply filters that turn up zero receipts. If this happens, they’ll see a message explaining what happened, along with a button that easily brings users back to filtering and doubles as a visual link to the main filter icon seen in the top nav bar.

Of course, it’s possible the user will go ahead anyway and apply filters that turn up zero receipts. If this happens, they’ll see a message explaining what happened, along with a button that easily brings users back to filtering and doubles as a visual link to the main filter icon seen in the top nav bar.

Of course, it’s possible the user will go ahead anyway and apply filters that turn up zero receipts. If this happens, they’ll see a message explaining what happened, along with a button that easily brings users back to filtering and doubles as a visual link to the main filter icon seen in the top nav bar.

Of course, it’s possible the user will go ahead anyway and apply filters that turn up zero receipts. If this happens, they’ll see a message explaining what happened, along with a button that easily brings users back to filtering and doubles as a visual link to the main filter icon seen in the top nav bar.

Of course, it’s possible the user will go ahead anyway and apply filters that turn up zero receipts. If this happens, they’ll see a message explaining what happened, along with a button that easily brings users back to filtering and doubles as a visual link to the main filter icon seen in the top nav bar.

empty state no receipts after filtering
The empty state helps guide the user back to the filtering screen.
The empty state helps guide the user back to the filtering screen.
The empty state helps guide the user back to the filtering screen.
The empty state helps guide the user back to the filtering screen.
The empty state helps guide the user back to the filtering screen.

When filtering, the user can narrow down their receipts by specifying a date range, price range, and the merchants from which the receipts originated. Filtering merchants in particular proved to be a unique challenge. Optimizing the browsing and merchant selection experience meant it had to be in its own separate view, complete with an A-Z index to make a long list more manageable. However, I didn’t want to force the user to switch back and forth between views more than they needed to. The solution? Showing the merchants as interactive buttons on the main filtering view, allowing the user to remove any merchant without having to hunt it down in the full list, while ensuring all the ways receipts are being filtered are accessible at a glance.

When filtering, the user can narrow down their receipts by specifying a date range, price range, and the merchants from which the receipts originated. Filtering merchants in particular proved to be a unique challenge. Optimizing the browsing and merchant selection experience meant it had to be in its own separate view, complete with an A-Z index to make a long list more manageable. However, I didn’t want to force the user to switch back and forth between views more than they needed to. The solution? Showing the merchants as interactive buttons on the main filtering view, allowing the user to remove any merchant without having to hunt it down in the full list, while ensuring all the ways receipts are being filtered are accessible at a glance.

When filtering, the user can narrow down their receipts by specifying a date range, price range, and the merchants from which the receipts originated. Filtering merchants in particular proved to be a unique challenge. Optimizing the browsing and merchant selection experience meant it had to be in its own separate view, complete with an A-Z index to make a long list more manageable. However, I didn’t want to force the user to switch back and forth between views more than they needed to. The solution? Showing the merchants as interactive buttons on the main filtering view, allowing the user to remove any merchant without having to hunt it down in the full list, while ensuring all the ways receipts are being filtered are accessible at a glance.

When filtering, the user can narrow down their receipts by specifying a date range, price range, and the merchants from which the receipts originated. Filtering merchants in particular proved to be a unique challenge. Optimizing the browsing and merchant selection experience meant it had to be in its own separate view, complete with an A-Z index to make a long list more manageable. However, I didn’t want to force the user to switch back and forth between views more than they needed to. The solution? Showing the merchants as interactive buttons on the main filtering view, allowing the user to remove any merchant without having to hunt it down in the full list, while ensuring all the ways receipts are being filtered are accessible at a glance.

When filtering, the user can narrow down their receipts by specifying a date range, price range, and the merchants from which the receipts originated. Filtering merchants in particular proved to be a unique challenge. Optimizing the browsing and merchant selection experience meant it had to be in its own separate view, complete with an A-Z index to make a long list more manageable. However, I didn’t want to force the user to switch back and forth between views more than they needed to. The solution? Showing the merchants as interactive buttons on the main filtering view, allowing the user to remove any merchant without having to hunt it down in the full list, while ensuring all the ways receipts are being filtered are accessible at a glance.

12_filtermerchant
Allowing the user to delete merchants right on the main filtering view frees them from the burden of hunting for those exact merchants in the list again just to deselect them.
Allowing the user to delete merchants right on the main filtering view frees them from the burden of hunting for those exact merchants in the list again just to deselect them.
Allowing the user to delete merchants right on the main filtering view frees them from the burden of hunting for those exact merchants in the list again just to deselect them.
Allowing the user to delete merchants right on the main filtering view frees them from the burden of hunting for those exact merchants in the list again just to deselect them.
Allowing the user to delete merchants right on the main filtering view frees them from the burden of hunting for those exact merchants in the list again just to deselect them.

Surpassing Goals

Surpassing Goals

Surpassing Goals

Surpassing Goals

Surpassing Goals

ReceiptPal’s success exceeded the expectations of The NPD Group, and data from submitted receipts (anonymized and aggregated) has been instrumental to them in developing market research that helps brands create better products. Small Planet's success with this project fostered a long-lasting partnership with The NPD Group which continues to this day.

ReceiptPal’s success exceeded the expectations of The NPD Group, and data from submitted receipts (anonymized and aggregated) has been instrumental to them in developing market research that helps brands create better products. Small Planet's success with this project fostered a long-lasting partnership with The NPD Group which continues to this day.

ReceiptPal’s success exceeded the expectations of The NPD Group, and data from submitted receipts (anonymized and aggregated) has been instrumental to them in developing market research that helps brands create better products. Small Planet's success with this project fostered a long-lasting partnership with The NPD Group which continues to this day.

ReceiptPal’s success exceeded the expectations of The NPD Group, and data from submitted receipts (anonymized and aggregated) has been instrumental to them in developing market research that helps brands create better products. Small Planet's success with this project fostered a long-lasting partnership with The NPD Group which continues to this day.

ReceiptPal’s success exceeded the expectations of The NPD Group, and data from submitted receipts (anonymized and aggregated) has been instrumental to them in developing market research that helps brands create better products. Small Planet's success with this project fostered a long-lasting partnership with The NPD Group which continues to this day.

Executive Creative Director: Brian Kelly
Designer: Isar Chang
Developers: Nick Bowlin, Stephan Petzel, Tammy Tyberg
Senior Producer: Michael Seidler

Executive Creative Director: Brian Kelly
Designer: Isar Chang
Developers: Nick Bowlin, Stephan Petzel, Tammy Tyberg
Senior Producer: Michael Seidler

Executive Creative Director: Brian Kelly
Designer: Isar Chang
Developers: Nick Bowlin, Stephan Petzel, Tammy Tyberg
Senior Producer: Michael Seidler

Executive Creative Director: Brian Kelly
Designer: Isar Chang
Developers: Nick Bowlin, Stephan Petzel, Tammy Tyberg
Senior Producer: Michael Seidler

Executive Creative Director: Brian Kelly
Designer: Isar Chang
Developers: Nick Bowlin, Stephan Petzel, Tammy Tyberg
Senior Producer: Michael Seidler

© Isar Chang 2019