InvoiceMe — A website for small business owners to send and track invoices
My Role: As the lead UX Designer on this project, I created personas, a problem statement, user journey maps, wireframes, a prototype, performed usability studies, created a mock up, and took into account accessibility during the process.
The Goal: Create a website that gives small business owners a place where they can track and send invoices to clients for their services. It should be easy to use and effective.
Problem Statement
Mira is a persona that is used to represent the target audience for the app I am creating. She is a Freelance Graphic Designer who needs an effective way to track and send invoices because she wants to be more professional and organized.
Target Audience
Persona
Challenges
During the making of this website, I was working on it by myself, and just like during the making of the app I feel that I could have benefited from having other people to bounce ideas off of.
It was different for me to go from the making of an app, to the making of a website for desktop. Everything about making a website was different than the app, but after learning about website layouts I was able to execute.
It was hard for me to know when I was done with the website. I am a perfectionist, and wanted to make sure everything was right before I stopped working on it.
Research
Usability Study Findings
The homepage of the app needed more information. I added a highlight of the features the website already has, and ones that are coming soon.
On the track page, there needed to be a way to see how far past due the invoice is. I added a mock invoice page for when a user clicks/taps on the invoice number that will show more information about the invoice.
A search bar is needed for the website. This was added to the homepage.
Sitemap
Design Process
Overview
The design process for the website came a lot easier than the design of the app. After spending time making major decisions about color, font, icons, etc in the app I was able to transfer all of that into a website.
Just like during my design of the app, I drew out paper wireframes of the homepage and picked my favorite features from each to put into the final design.
I created a low fidelity prototype from the paper wireframes, and conducted a usability study to make sure everything was flowing right. I made a few adjustments after the study with the feedback I was given.
Finally, I added color, icons, and typography to complete the High-Fidelity version of the app.
Paper Wireframes
Wireframes and Low - Fidelity Design
Low-Fidelity Design
Final Design
Conclusion
My designs will allow small business owners to have a professional looking way to send invoices to clients, as well as a way to keep invoices organized. This will take stress out of the equation for the small business owner. This version of the website is for desktop, and will be convenient for use at a brick and mortar locations that have a desktop for employees to use while at work.
I learned a lot with the creation of my first website in Figma. If I were to continue to expand on this website, I would add the features that I displayed on the homepage that are “coming soon” such as payment processing, and payment plan options for paying invoices.