Overview
Photon Commerce empowers supply chain industry leaders to digitize invoices, capture data, and manage suppliers at the speed of light. Used by leading fulfillment centers, Photon centralizes messy data and communications like paper, PDFs, invoices, packing slips, emails into a modern collaboration platform using AI. Teams collaborate around invoicing, resolve exceptions, and achieve end-to-end visibility, reducing labor, blind arrivals, errors, and delays.
Team
Product Manager
UI/UX Designer
Engineer
My Role
UI/UX Designer
Design Process
User Research - Competitors Research - Define Problem & Propose Solution - User Persona & User Scenario - Sitemap - Wireframes - User Testing - Style Guide - Interface Design
1. User Research
To study public sentiment,
Product manager interviewed small business owners, who are currently using bookkeeping applications. Through this process, we could get information about user’s opinions on emphasizing line item, Photon Commerce’s main feature, and figure out users’ trouble with existing bookkeeping applications.
Interviewees’ feedbacks about line item idea were 80% positive, because they will be able to use the app to manage their receipts and invoices more efficiently with the line item feature.
On the other hand, many interviewees were overwhelmed by existing bookkeeping applications’ interfaces. Their interfaces are cluttered with features they barely use, and it can be overwhelming for new users.
2. Competitors Research
To find out current trends,
I used, studied, and analyzed existing bookkeeping apps on the market, and also learn from their successes and avoid their mistakes.
3. Define Problem & Propose Solution
Problem Statement
There are a lot of bookkeeping apps, but none of them analyze and record receipts and invoices in detail. They only provide simple information like a total amount.
Solution Statement
Photon Commerce provides a bookkeeping app, that analyzes even the small information, such as each line item, on receipts and invoices and organizes them to save it for users’ convenience.
4-1. User Persona
To walk in user’s shoes,
I made a user persona, based on the result of user research.
4-2. User Scenario
Trigger
Four days ago, Bill bought a lot of ingredients at various markets, and as he runs his restaurants, he finds that one bag of onion and two boxes of milk are lacking.
Action
Bill opens Veryfi app, where he has been captured all his receipts and invoices, to check all the receipts from four days ago.
Frustration
Bill is frustrated, because he visited seven markets, and he does not remember which markets he bought one bag of onion and two boxes of milk. He clicks each receipt document and clicks a photo of the receipt again from receipt document to see list items one by one. He looks through seven receipts, a total of 51 line items to find where missed one bag of onion and two boxes of milk. Bill wishes there was an app that records all line items and simply searches them to find where got them from.
Bill laments about how inefficient it is to Noah, who owns cafe next to Bill’s restaurants, then Noah recommends to use Photon Commerce.
Solution & Reward
Bill signs up for Photon Commerce, the app capturing receipts with many line items, and is satisfied that Photon Commerce app records most information on receipts and he can easily search them if he needs to find something. He is happy that he can manage and check his receipt and invoice documents with few clicks and it saves a lot of his time.
5. Sitemap
To establish a pathway of the app,
I arranged a sitemap, organizing functions, and its flow.
6. Wireframes
To visualize the sitemap,
I constructed wireframe, placing texts, buttons, image boxes, and other elements on the screen-ratio artboard. In addition, my design had to be as simple as possible to shorten the developing time. In this process, I could get a better sense of how each screen would look, and be able to use wireframe for user testing.
7. User Testing
To get feedback for the wireframes,
I conducted user testing with two of interviewees and my teammates. I let them use the wireframe, answered their questions, and asked them questions about the usability of it. All feedbacks were positive in terms of clarity and usability of the wireframes.
8. Style Guides
To make the app’s appearance consistent,
I developed style guides, for web and mobile applications, where I contemplated the typography, color scheme, icons, and other UI elements.
9. Interface Design
To infuse life to the app,
I designed interface, on the basis of my style guides.
Design
Photon Commerce is a bookkeeping app to save and manage receipts and invoices. A bookkeeping app should be safe and secured, hence indigo, the company’s brand color, with shades of blue is used to make the app feel secured and serious. Also, it’s interface is designed to be as simple and intuitive as possible, so users do not get any confusion, using the app.
Dashboard
The dashboard is the first screen the users see when they sign in. The dashboard is composed with a widget section, that shows users’ overall statuses of their invoices and spending, and document section, where users can see their uploaded receipts and invoices.
Documents Preview Web
Document preview card was designed to have a spreadsheet look and feel, to show it is exportable to CSV file. In addition, when there are more than four line items, the expand button will be added to show the rest of the line items upon click.
Documents Preview Mobile
The line item is a key feature for Photon Commerce, hence a list of line items must be shown on document preview. I had to go through a few trial and errors to come up with a solution for documents preview design
Widget Cards Web
Widget cards show an overview of monthly spending. I needed to find a way to show more detailed information in limited space. I decided to show details upon mouse hover.
Widget Cards Mobile
Hover is not working for mobile applications, so I decided to design two different statuses, overviews, and details, for each card. Overviews and details will switch back and forth upon tap, but users would not know that they can tap widget cards. To solve that problem, a guide, that shows users can tap widget cards, is added.
Document
Documents page includes all detailed information from receipts or invoices. Users can easily edit the information if needed.
Color-coding for Status
I struggled with color for Approved Status. Approved means, it is approved so the user can pay the invoice now, so it requires the user's attention. Red grabs the user's attention, but it would make the user think something is wrong, and green on a white background would grab the user's attention as well, but it would make the user think everything is completed. Dark blue was chosen, so the user would not think something is wrong, or everything is completed. It grabs the user's attention to lead the user to do the required action.
Chat
Chat Design
To clearly differentiate the participants, I used blue for the user and gray for others. Moreover, to maximize the differentiation, the user's messages are on the right side and others' messages are on the left side.
Type In Document
In type in document page, users can manually type in information about the document without a photocopy of receipts or invoices.
Prototype
Conclusion
By working as a UI/UX Designer at Photon Commerce, I was able to experience product development from start to end with teamwork, as well as gained exposure working in a fast-paced environment that required high-quality work. The product is in the developing phase. As I looking back on my design, I would improve Document Preview for mobile. I would use swipe left to delete documents and swipe right to see details of documents.
If you like what you see and want to work together, get in touch!
designbk4@gmail.com