Bookey
The easiest way for freelancers to manage their books.
Prototype
Overview
Bookey is a mini capstone project I designed while attending DesignLab.
Since this project only allowed 12 hours, user research and usability testing were not included in this process.
I pulled inspiration from the book ‘Solving Product Design Exercises.’ This book offers common problems designers solve while interviewing.
My role as a UX/UI Designer
I researched bookkeeping and project management websites to understand their designs.
I also researched how websites offer dark more to their users.
I designed Bookey’s logo and interface.
Tools
Figma, Whimsical, Optimal Workshop, Google Suite, Invision
Challenges
Freelancers find work from multiple sources. This can make managing admin tasks overwhelming.
They need an easy way to manage their invoices, expenses, taxes, profits, losses, and overall bookkeeping.
Goals
Design logo, login, and dark mode.
Showcase an overview of invoices, expenses, banking, projects, reports, and taxes.
Create the task flow for adding a new project.
EMPATHIZE
Competitor Analysis
I researched bookkeeping websites as direct competitors. I wanted to learn about their design layout and what features they offer. QuickBooks had great designs and features.
I also researched project management websites as indirect competitors. I wanted to learn their features and what features they might have compared to the bookkeeping apps. I found that HoneyBook had an excellent dashboard design.
User Identity
Audience: Designers, Artists, Photographers, Videographers, Drivers, Sitters, etc
Employment Status: Full Time, Part Time, Seasonal, Temporary
Freelance Experience: Student, Entry Level, Mid Level, Senior Level, Business Owner
Needs:
Overview of accounts, income, expenses, profit, and losses.
Easy way to manage finances.
Stay organized within projects.
Pain Points:
Remembering what project expenses are.
Remembering who hasn’t paid.
Being overwhelmed by lack of organization.
DEFINE
User Story
Stevie is a freelance designer that takes on work from many clients that sometimes pay her on time and sometimes forgets. Some of the projects also have expenses, which come out of her overall rate. Stevie uses Bookey to help her manage her accounts, profit, losses, and taxes as well as keep her projects’ finances organized. She no longer feels overwhelmed by bookkeeping.
Task Flow
The user goes to Bookey’s website
Logs into their account
Views Dashboard Overview of income, expenses, banking, projects, reports, and taxes.
Click on Projects on the left bar
Clicks Add New Project
Inputs New Project information
Clicks Save
Views Project Page
IDEATE
Wireframe Sketches
I decided to write out notes for this project first, then sketch out some wireframes. I wanted to outline each page I would design. First, the login, then the Dashboard, and last, how the task would be completed.
Logo
At first, I pulled a book logo off Google as a placeholder. I wanted to show a key in a book. After speaking with my mentor, he advised me to try basic letter marks, word marks, or pictorial marks instead. I decided to have the B in the logo to be the bold background that looks like an open book and the lowercase k look like a spinal key that keeps the book open.
High Fidelity Wireframes
I designed the login, dashboard, and task flow for adding a new project. While designing the wireframes, I pulled inspiration from Quickbooks and HoneyBook, then blended it into my design.
Freelancers would be able to connect their bank accounts to manage their income and expenses. The overview will highlight revenue and losses. They will also be able to organize which project an expense was for and set reminders for remaining balances.
Iterate Wireframes
This mini capstone project took a total of 12 hours to complete.
Within the first 6 hours, I came up with the project idea, researched competitors, identified a user story and task flow, sketched, and designed wireframes.
In the last 6 hours, I created the logo and added a dark mode feature. This feature would change the color scheme from light to dark to help the user’s eyes feel more comfortable.
I attempted to use a Figma plugin to accomplish this with one click, however, it didn’t adjust all the colors or images. I decided to scrap the plugin and change the color palette manually.
PROTOTYPE
I created this prototype to show how the user would move through my design.
I wanted them to be able to walk through each frame.
Flow 2 is my original design.
Flow 3 is my dark mode design.
REFLECTION
In the beginning, I had a hard time focusing on one problem to solve because I had many directions I could have taken on this project.
Once I receive feedback from my mentor, he helped me narrow down my design to focus on bookkeeping. I was able to design Bookey’s dashboard and task flow once I had a clearer vision of the problem I was solving for.
A common feature, that I’d yet to try, is dark mode. This feature is helpful when you’re on your computer late or your eyes are tired from staring at a computer for many hours.
I was excited to figure out how to design for dark mode and I’m happy with how it turned out.