GRECEIPTS

00

CLIENT

TOOLS

TASKS

TIMELINE

GRECEIPTS

SKETCH
INVISION

UI/UX DESIGN
INFORMATION ARCHITECTURE
INTERACTION DESIGN

3 WEEKS

DASHBOARD/HOME SCREEN

SEARCH/EXPENSES SCREEN

RECEIPT SCREEN

Login screen wireframes were not provided

LOGIN SCREEN

01

              Receipts is an app designed to
               improve consumer/
               retailer interaction and do   
               away with paper receipts. It consists of a consumer facing mobile application and a retailer facing desktop application. Through interaction between these platforms consumers can scan receipts,
store spending data, track finance metrics, and receive targeted sales based on spending habits.

My team was tasked with the development of branding and design of native mobile application. We did this by creating style tiles, mockups of key screens, an interactive prototype, and a style guide. Key screens as delivered to us for mockups were:

MY CHALLENGE

THE BEGINNING

G

OUR PRODUCT

GReceipts was a complex product. User interaction began by scanning a receipt online or in-store. Once users did this could they take advantage of other functionality. But this function required implementation of back-end software by retailers. Developing this software and gaining buy-in required a large amount of work.

Our review of GReceipts revealed the main issue that stemmed from this: our product was in an early stage of development. Various pieces of functionality or areas of the product weren’t designed yet.

Because of this our client afforded us a lot of design freedom which was exciting. However, they also requested we redesign pieces of the top level structure and information architecture. This presented a challenge. After branding development we only had two weeks to
make these considerations and complete mockups and user testing. We would need to identify our top level priorities and our development process would need to be quick and would.

Meetings with our client focused on brand values and direction. Initial discussion revealed they required a trustworthy and professional design. To achieve this we would create a clean and minimal design.

Further discussion of design references revealed an additional consideration. We weren’t surprised to learn they valued clean, minimal layouts. But we didn’t anticipate their reaction to this design.

Even though they didn’t like the style of this layout, they did like the unique nature of the graphic elements. This revealed that our client wanted a clean, simple design but they also wanted GReceipts’ design to stand out from the crowd and be memorable in the eyes it’s users.

OUR CLIENT

Our client created GReceipts for anyone who shops and didn’t want to limit their product to one user set. This led my team to design for our domain rather than a specific user. This meant our competitor analysis on this project would be of even greater importance than past projects.

OUR USER

Mint
Card structure, font variation, and one area-of-interest color created a strong hierarchy. This paired with a color palette marked by light neutrals made Mint feel very professional. However, the lack of an interesting design element made this feel bland and forgettable.

Earnest
An unconventional information structure and graphics made this design unique and memorable. Inconsistent sizing and alignment of elements led to difficulty digesting content. This made the design feel unprofessional
and untrustworthy.

TrueBlue
This combined the best of Earnest and Mint. A strong use of white space and font sizing/color variations created a strong hierarchy and was professional and trustworthy. Unique animated elements made it memorable for users. Since the elements were minimal they didn’t interfere with content and kept the design professional.

We evaluated 17 competitors dealing in personal financing, banking, and data visualization. Knowing our required design characteristics we assessed how well our competitors conveyed these, how we could implement what they were doing well, and improve on what they were doing wrong. Mint, Earnest, and TrueBlue designs exemplified the things that we learned from these evaluations. Many of our competitors were professional at the expense of being memorable and it was often difficult to distinguish between them. TrueBlue stood out because it used a unique design element without sacrificing professionalism. The key was keeping this element understated and content hierarchically more important. This was the key to the balance that we struck in our designs.

OUR COMPETITORS

02

Through this we identified:

RESEARCH

Before beginning our designs
we needed to understand our
product, domain, and stake-
holders by conducting research
in four
main ways:
Through
this we
identified:

  1. Reviewing client assets
  2. Style testing with our client
  3. Competitor analysis
  4. Review of wireframes

03

DESIGN
PRINCIPLES

As the final piece of our research we synthesized what we had learned and formed design principles to guide our work.

GReceipts’ designs create trust and safety. Their users need a feeling of security when it comes to finances. Professionalism through elements like strong contrast, simple layouts, and reserved color will convey this sense of security.

GRECEIPTS HAS YOUR BACK

THAT WAS EASY

DON'T FORGET ABOUT ME

The best interfaces are almost invisible to the user. They avoid unnecessary elements and language used is clear and concise. Using common patterns, GReceipts’ users can digest data easily and accomplish tasks quickly. Designs are consistent across the platform so once users learn to do something they can transfer that skill to all areas of the app.

In a world with thousands of financial apps vying for users’ attention it’s easy to get lost in the shuffle. GReceipts declares itself an individual and stakes it's claim on users by delivering a novel take on solving a common problem. GReceipts designs do the same by giving users a reason to remember their app even after users put it down.

W

                ith research completed
                it was time for our  
                team to break off, take  
                what we learned from our research, and build our individual brands. We began this process by  building
style tiles.

I achieved professionalism in this tile through large areas of white contrasted with dark neutrals, a combination of serif and sans serif typefaces, strong typographical hierarchy, and a reserved use of color. Using soft gradients and drop shadows I created a sense of sophistication that enhanced the professionalism. My client was thrilled with the simplicity and professionalism of this design and felt the drop shadows and gradients presented a unique visual element that made it memorable.

Here I created professionalism through a strong use of white space and typographical hierarchy. However, I used multiple colors, rounded buttons and iconography, and an interplay between graphics and photography to create a fun and inviting design. My client liked this tile. They felt that it was fun and inviting but they didn’t think it was the right amount of professionalism for GReceipts.

Here I pushed graphic elements further than the second tile to create a unique design. Line patterns added visual interest but I kept them hierarchically less important by keeping line weight and color understated.
My client was also thrilled with this tile. They loved the reserved use of pattern to create visual interest but felt it still remained very professional. They felt the second and third tiles would be great options for GReceipts. I agreed with the feedback I received and decided to combine the first and second tiles to create my final style.

04

STYLE TILES

STYLE EXPLORATION

DASHBOARD SCREEN

A lack of persistent navigation resulted in frequent user backtracking and punished those who utilized GReceipts’ full range of functionality. To remedy this I created a persistent bottom navigation, which housed the general option screens users needed to access regardless of location in the app. From there I identified functionality unique to GReceipts and placed links to each within the home screen.
Additionally, I addressed confusion created by link copy. The “account” and “search” links did not accurately portray what they were. The account feature housed a QR code scanner used to scan receipts while the search feature took users to a screen that displayed spending habits and receipt listings. To remedy this I changed “account” to “QR Code” and “search” to “expenses” and paired each title with an explanation of what the section provided to users.

The pie chart here was designed to visualize user spending by displaying upwards of 40+ categories. However, it also needed to be functional. Tapping on pieces of the chart drilled further into spending by accessing more granular categories. A pie chart with a large number of categories presented tapability and legibility issues because of the limited space afforded on a phone. To solve for this I created a drop-down menu that doubled as a picker. As users cycled through categories in the picker it highlighted the corresponding section of the pie chart. Once they chose a category it drilled down further into that category in the same way that tapping on sections did. This allowed me to list a large amount of categories while keeping the chart in view and the screen clutter-free.

EXPENSES SCREEN

Additionally, you can see I changed how users accessed receipts. Originally, tapping on a receipt took a user to a separate page to view it. When done, they had to hit the back button to return to their expenses. This was tedious and kept users from evaluating purchases within the context of their spending. To remedy this I made the receipt expand downwards when a user tapped on a carrot
on the right side of the receipt card.

EXPENSES SCREEN

Tapping on a receipt item populated a modal, which gave the user the option to favorite, expense, gift, or return the selected item. This took users away from the screen they were viewing and hid functionality resulting in superfluous taps and less use of these options. To remedy this I made these actions persistent by moving them onto the receipt itself and paired each line item with a radio button, which allowed users to act on multiple items at once.

RECEIPT SCREEN

05

MOCK UPS

Our initial mock ups were of four main screens: the login, dashboard/ home, search/expenses, and receipt. I identified opportunities to improve the wire-frames
and set about 
recreating them.

With wireframes created I built out the initial high fidelity versions of my screens in order to begin user testing.

06

USER TESTING

We determined the effectiveness of our branding through user testing. We discovered how users reacted to visual design choices we made and determined how these choices informed users about the brand to determine if our designs hit the mark on the
values we outlined
in our research. My
team conducted in-
depth tests with
six users and survey
testing of 29 users.

Results from testing were positive. Users liked the visual style and the unique visual elements such as patterning. This caused many users to describe my design as attractive and cool. They also appreciated the large use of white and the hierarchy of elements, describing it as trustworthy and professional. This was great to hear. In the eyes of users I hit each characteristic I had intended to. However, there was still room for improvement. Testing revealed minor issues that I used to formulate opportunities for iteration.

RESULTS

A lack of contrast across all elements undercut professionalism for some users. This caused legibility issues and made some users feel the app wasn't finished.
The serif and sans serif typefaces didn’t feel right for this product. It needed something less severe for headers and more modern for secondary text to increase professionalism.
Negative space on the home screen felt awkward and because of its overabundance I only displayed three cards above the fold. This caused users to unnecessarily scroll to the fourth.

ITERATIONS

07

FINAL PRODUCT

SCREENS, PROTOTYPE
STYLE GUIDE

FINAL INVISION PROTOTYPE

This prototype shows additional states and screens I built to create user flows. It also demonstrates the functionality changes I implemented in the pie chart and the receipt sections.

STYLE GUIDE

This style guide provides insight into aspects like color, typography, graphics, and layout elements.

FINAL SCREENS

Here you can see a sampling of the final screens created. For additional states see the final InVision prototype below.

My client was thrilled with my final product. They felt it was spot on for their brand and embodied each of the qualities they had expressed a need for. They were also impressed with the changes made to interaction, functionality, and structure of the app and felt it all greatly improved the user experience. They expressed that in five years of developing GReceipts they had never thought of some of the changes I made.

VIEW PROTOTYPEDOWNLOAD STYLE GUIDE

08

MOVING FORWARD

FUTURE
CONSIDERATIONS

If I had the chance to continue building out GReceipts, there are are two tasks I would focus on:

               uild out additional   
              screens to
show and test  
              different user
flows. Due   
               to the the amount of GReceipts still in flux, my ability to build and test user flows was limited. By building out more screens I would be able to continue to test, iterate, and improve this product. 

Build out the Expenses screens using Principle or a more robust animation software like Adobe After Effects. Because of the complex interactions between the pie chart and drop down menu it was difficult to test functionality. I had to  create much of it in the abstract. Creating a prototype capable of demonstrating complex micro-interactions and animations would allow me to test my design with users and iterate to improve.

B

FIN