Interaction through the receipt
Client: G-Receipt Role: UX/UI designer Tools: Sketch, Illustrator, InVision Timeframe: 3 weeks
PayDatum is a new startup company which provides receipt processing service that enables retailers and consumers to interact through the receipt itself through their G-Receipt mobile app. The effortless and seamless operation of G-Receipt within any checkout process makes it an ideal solution to fill a large gap in today’s decentralized (content and service) post-sale services. G-Receipt as a technical solution embraces the ubiquity of mobile and cloud computing to facilitate consumer-retailer post-sale activities in ways that are much more convenient to consumers and much less expensive to retailers. The main benefit of G-Receipt consumer app is that it could automatically classify receipts straight from the retailer checkout operation.
Three designers were working on this project. We were working with the founder of G-Receipt and his developers for three weeks. Our client provided us MVP of product and screenshots of the mobile app. There weren’t any UX wireframes or research before we got this project. The idea was that we need to design app for the iOS mobile platform and to create it in that way so users can easily use the application without confusion. Therefore, this application is potential something new on the market, and our client wanted to have the app that users could be familiarized with in a fast and easy way.
REVIEW MVP PROJECT
Since we didn’t have any other source, our first step was to check MVP of the app, see how it works and tried to find similarity with other apps on the market so that we could start with competitive analysis.
Our client needed help to reorganize this Homepage and also wanted from us to build Alerts, Specials and Preferences screens because they didn’t have that build out. On the Homepage, the most important thing is Account or QR Code, because users need quick and easy access to it whenever they check out in a store. There were lots of features worded in a way that didn’t have a sense at first sight, and my challenge was to rephrase some of this features, and that way avoid users confusion.
This Receipt screen was the most important for the client because there was a difference between this application and other which track expenses. The main advantage of this app is that offer to their consumers' option where they can tap on an item and put that item in separate folders (expenses), gift, favorite or send a request to return an item.
When consumers create folders and start to add articles in folders allow them to track their work, home, or other expenses. An additional feature is that consumers can gift item to another person. As well, if an item is favored that allows retailers to send users special offers for certain product.
This screen represents Category section. I noticed a lot of confusing things here. First of all, pie chart, which supposed to be clickable. When users click on any of these section of the pie chart that leads them to another screen where were placed receipts for those category. That wasn’t user-friendly, and I didn’t figure out at first sight that pie chart is clickable. I thought about pie chart and asked myself what happened if Transportation section is only 1% or only one receipt under that section, how users can click on such a small part of the pie chart?
Next part was sliding date options which represent date filter. While users move slider left or right receipts below were changing by date. It was very complicated to use because users need to be so patient while moving this slider if they want to see receipts for a particular date. The main conclusion for me was app design which gave me feeling of color disbalance, inconsistency and very bad usage of the brand logo for different retailers.
After we had finished with MVP testing of the app, we were prepared for the first meeting with the client. We wanted to know more about how our client sees and wants his brand to be presented to the audience. Additionally, we had lots of questions for our client and his team about app functionality and how far we could go with changes.
For kickoff meeting, we provided them the gut and adjectives test. Our client and his team chose powerful, capable, convenient, secure, and modern as adjectives they wanted to see in our designs. Trustworthiness was the most important feature for the app because G-Receipts deals with important user data.
They gave us open space to do whatever we thought is correct and proper for the app, starting with the logo, colors, changing features and improvising, so all for a better appearance and usability of the app.
VISUAL COMPETITIVE ANALYSIS
We didn’t have any wireframes or personas to review before starting with competitive analysis, so we decided to analyze as much as possible competitors in and out of the category. Our competitors were apps which primary goal was to track users expenses and also bank apps because they’re dealing with users data. Some of the apps we analyzed you can see below.
After we finished competitive analysis, we came up with some takeaways, made the clear vision and next step creating design principles. Our main takeaways were to keep light interface everywhere. We wanted to use minimal aesthetics that focus on the product and the CTA’s. Blue color to be aesthetic execution because blue gives a feeling of trustworthy and professionalism. Furthermore, usage of elements that don’t clash or compete.
Completion competitive analysis led us on next stage in a design process, to build strong design principles.
When we finished team work, we started to build our individual solutions for G-Receipt. My first step was to create style tiles and present it to our client, so he can choose from three different options what he prefers and what thinks was the best for his brand and app.
Our client and his developers gave me feedback for my initial design solutions. They wanted to see a combination of the second and the third style tiles. They really liked iconography, card layout, colors and typography from the second style, and pie chart from the third one. They thought that simplicity is crucial for their users, as well as fonts and colors should be easy to interpret even for those with color blindness.
Considering we didn’t have wireframes and we had only three weeks for this project it was a big challenge for me. Our creative director gave us guidelines and determined which parts of the application to design and present to our client for next presentation. We needed to create login flow, homepage, category screen, and receipt screen, so according to that design, our client could build rest of application later.
I decided to start from the beginning and try to make whole flow for almost every features which this application could offer to users. I was aware of the shortage of time, but I wanted to challenge myself and try to push my boundaries. First of all, I wanted to change the logo.
It looked unprofessional and didn’t give a feeling of trustworthiness. Our client wanted his application to be trustworthy and to have a simple design, but at the same time to be memorable.
I took a couple of hours to explore and find inspiration for new logo design. Some of the adjectives which lead me to make a decision were trustworthy, secure, minimal, modern and memorable.
I explored squares, arrows, different G shapes and all of these to come up with a logo which could represent G-Receipt brand the best.
After few hours I came up with new logo and concept for the logo. Squares are stable, represent trust, order, and security. Square in G-Receipt logo suggests security because G-Receipt is dealing with significant personal and data information of the users. G-Receipt, also wanted its brand represented trustworthy, as well as simple, minimal and memorable. When users see this logo for the first time, G-Receipt wants to be easy for them to remember logo and connect that with simplicity, minimalistic and trustworthiness of G-Receipt brand.
My next step in the design process was to try to simplify the use of the application’s features. When I tried MVP of the app, a few times I confused myself, and I wanted to make it more comfortable for use and avoid confusion.
When I finished, screens design my team and I needed to conduct user testing. We wanted to know how users feel and behave while using the app. The most important part of user testing was to see if it was evident to them that items on receipt screen were clickable. Since that was unique function and didn’t exist before in any app, we wanted to be sure that they could figure it out without additional instructions.
This is the summary of user’s comments for my design. They thought the application looked very clean and clear and straightforward too. They thought the design was very direct and they couldn't see anything risky about it.
All of the users made a comment that app looked trustworthy, professional and safe which is very important for this kind of the application.
I got some of the suggestions during user testing.
After user testing and presentation to our client, I summarized all feedbacks and started making iterations on my screens. I had one week to make changes to the existing screens, make new screens to have complete flow and make a prototype.
I spent hours and hours working on this project and trying to find an as better solution as possible. I didn’t know too much about UX design, and I tried to learn, in the move in very short time. In the end, I presented my final deliverables to our client, and my creative director together with the client was impressed how fast I finished the whole project, even more quickly than they expected and required.
CHECK PROTOTYPE BELOW
To provide exact UI instruction for future designers and developers I created a style guide which you can see here.
Due to the nature of the project and broad scope of the G-Receipt market, their need to be a more clearly defined goal of G-Receipt product. I feel that this product could fare better if it had a clearer purpose and had more of a specific focus on who G-Receipt users are (demographic and behavioral). User research is something to consider in giving a better perspective on the problem G-Receipt are trying to solve. The idea for this app is something new because it offers manipulation with items on receipt, should consider a proper on-boarding process to orient the users to the system surrounding G-Receipt and feature set revolving around it.
WHAT I LEARNED
Working on this project, I had lots of challenges. First of all, I was on a team with two teammates, and we didn’t have good communication at the beginning. I felt very tough working with them but too little time to adjust our relationship and working atmosphere with all obligations and tasks. After few days in a very bad working condition, I asked for conversation, trying to make everything works better and to overcome misunderstandings and disagreements. After that conversation, we worked much better and finished our deliverables on time. I learned how to deal and work in not ideal team surroundings, and for me this is very important, to be open and to initiate conversation in order to overcome disagreements.
I discovered that I could think as UX designer and make significant changes to the application, and all of that in a shortage of time. I was very proud of myself at the end of this project when our client called me after the final presentation and said that I helped them to see their product in an entirely new way and that they will be very happy if I continue to work on the G-Receipt application. It was huge satisfaction for me, and I was surer of the belief that I should continue to progress and to take a step forward towards UX design.
Below you can see recommendation which my client gave to me.