UX/UI Design
Research
Information Architecture
Visual Design
Interactive Prototyping
Testing
User Surveys
Competitive Analysis
User Interviews
User Personas
User Stories
User Flows
Site Map
Wireframes
Style Guide
User Tests
Card Sorting Study
Hi-fi Mockups
Prototype
Paper and Ink
Google Forms
Unsplash
Adobe Photoshop
Figma
Optimal Workshop
3 Weeks
Product’s Owner
My client hired me to create a software as a service (SaaS) website for e-commerce sellers to keep track of the cash flow coming in and out of all their online stores.
Each online marketplace or platform has their own sales tracking system and some offer back-end analytics but sellers who sell on multiple online platforms don’t have an easy way to keep track of all their business finances and make confident business decisions.
Design an easy to use financial service website for e-commerce sellers who sell on multiple online platforms and need to keep track of their expenses, income and profit.
.png)
I began my design journey by creating a user survey to obtain quantitative data and 15 e-commerce store owners from major cities around the country took the survey.
.png)
.png)
.png)
I then conducted a user interview where the user walked me through her financial process as a small
e-commerce seller and I learned her preferences, needs and frustrations. And it gave me a clearer idea of the features that I needed to include in the website.
The interviewee is a 30 year old who sells workout bands through Shopify and Amazon.
After understanding my users, I created personas. I reviewed my data, and I determined the users for this application are young entrepreneurs who use the big marketplace platforms that are out there today, like Amazon, eBay and Shopify to conduct their business. They are self taught business managers that need a simple software to track and analyse their sales, expenses and profits.
Steve, 31
Store Owner
Los Angeles, CA
Steve is an online store owner where he sells vintage style apparel and graphic t-shirts. He makes 200 sales a month and writes down all his sales in an excel file but doesn't have an accurate way to keep records of his business expenses. He sells his products on his own website through Shopify but also sells on eBay and Amazon.
• Needs a software to keep track of his sales and expenses
• Needs a software that integrates his sales through multiple channels and connects bank account information securely
• Needs analytics to help him make the right business decisions
• Having to write every transaction one by one in his excel file
• Not knowing his profits after his expenses
• Not knowing on which platform his products sell best and how he should devote his time and efforts
Laura, 28
Scroll Saw Artist
Brooklyn, NY
After Laura graduated art school she became a scroll saw artist. She sells wooden signs on her own website through Shopify but also takes custom orders through Etsy. Her business is taking off but art school never taught her money management or business terminology. She is self taught in business marketing and relies heavily on social media ads.
• Needs a software to manage her business cash flow
• Expects the software to use friendly language
• Need a software to categories her transactions and analytics
• Desires a low effort, smooth and easy to use finance software
• Not knowing if she should increase the price of her products
• Feeling intimidated by business terminology
• Complicated to use financial software
• Not knowing who to target her social media ads
Then I created a Competitive Analysis between GoDaddy Bookkeeping, Quickbooks and Sellbrite because these websites can help online businesses count their finances or illustrate sale analytics.
• Integrates sales from e-commerce sites like Etsy, Amazon and eBay
• Can track income and expenses on a cash basis within categories
• Uses easy to understand language in their categories like “Money I have” and “Money I Owe”
• Has a visual graph in the homepage that illustrates the yearly Profit, Income and Expenses
• It has no analytics or insights
• The user can’t compare sales and profit between different e-commerce sites
• The font style in their buttons should be improve for an easier read
• Expenses are easily automated and categorized with connection to credit cards and bank accounts
• Syncs your invoices with Shopify and other tools
• It has a simple invoice maker
• The user flows are easy to follow
• It has clean, minimalistic, and non distracting screens
• It has no analytics or insights
• It will not categories the sales
• The reports look like credit card statements and they should be made easier to read
• Integrates sales from e-commerce sites like Amazon, eBay, Shopify, BigCommerce and Etsy
• Excellent graphs that illustrate sales on multiple “channels” and the top 5 products
• You can list inventory on multiple channels but syncs inventory to prevent overselling
• Automatically updates listings
• Shipping option access
• Does not illustrates profits, income and expenses
• It has no categories for business expenses or sales
• It does not connect to credit cards and bank accounts
After understanding my users and reviewing my research, I decided on 4 major areas to concentrate on because they were chosen on the user survey, mentioned on the user interview and embodied in the needs and frustrations of the personas.
I created high, medium and low priority user stories and developed them into user flows.
First Time User
Create an account
High
Returning User
Connect business CC and bank account
View total profit, income and expenses
Check analytics
Input expenses manually
Input orders manually
Categorize expenses
Update settings
High
Input inventory cost
View list of sales
View list of expenses
The User Flows helped me organize the process of each task in the application with the minimum amount of steps and problems a user can encounter.
I then created a possible site map of the website.
.png)
I drew a few quick sketches of how the website should be structured and how the home screen screen could possibly look like.
Then I redrew them into Figma for a better understanding of my user flows and the steps the user will need to follow to perform a task. After I was done with the wireframes, I conducted quick informal product testings, revised and changed the architecture of the website along the way.
The name, TRACK was inspired by the action word, tracking. It implies to follow a trail or trends. In business is very important to know your cash flow trends because it allows you to make educated business decisions.
The colors of the website are a combinations of turquoises, greens and blues.
Turquoise represents wisdom, tranquility, protection, and good fortune. These are all qualities a young business owner needs.
Comfortaa Font is recommended for accessibility and in this application it embodies friendliness and simplicity.
After the wireframes, the structure of the pages and the branding of the website were completed, I created the first High Fidelity Mockup. Here the user gets a prototype with the major concepts worked out and a clickable experience.
I tested the application on two different e-commerce sellers and business managers. The participants used a Figma clickable prototype on a computer screen and were recorded through Zoom. I gave them eight tasks and asked them to perform these tasks on the website and talk out loud what they were doing while they were navigating through the website.
The participants gave valuable feedback, compliments and suggestions.
After my usability test, I discovered participants had a hard time understanding what the main categories meant so based on my participants feedback, I changed the names of the main categories and conducted a close card sorting study.
With TRACK e-commerce sellers who sell on multiple online platforms now have an easy way to keep track of all their business finances and make confident business decisions.
The next step will be to design the user onboarding experience because this is a new product and a series of flows would give the user a guided introduction to integrating their e-commerce stores and bank accounts. After that the mobile version of the website should be design because my user personas are young entrepreneurs on the go.
This product was successful because I created a Minimum Viable Product (MVP) designed for small e-commerce sellers to keep track of their finances. I learned that even after you design your clickable hi-fidelity prototype there’s always room for research and improvement.
Thank you for stopping by, I hope you enjoyed my work. If you want to chat about UX or have any questions, feel free to
contact me.
.png)
