Projects

Web design

User experience design

Branding

UI design

Research

Accounting for Small Businesses

-- An online accounting web solution for small businesses.

My Role

Product Designer — Feature Scoping, Research, Interaction Design, Visual Design, Prototyping

Team

Donye Collins - Product & Visual
DesignerOlakunle - Stakeholder
‍Ope - Product Manager

Timeline & Status

2020 - 2021

Getting acquainted with Simplebks

One of the main advantages of using digital products is that they allow businesses to manage various tasks and issues easily from a mobile device. For instance, Simplebks is a digital saas product that enables business owners to input and complete basic business accounting tasks.

• Brand Identity Design
• Pre-launch Landing page
• Sketch/Wireframes
• UI design
• Marketing website

🥊 The challenge with businesses and their accounting process

As a business grows, its accounting needs become more complex, and a solution is often needed to tackle the complexities surrounding accounting and finances, mostly paper-based solutions or hiring third-party accounting services becomes the go-to for most small businesses.

Therefore, to solve for the challenge, my goals were to help conceptualise, design and think through the user experience of a dashboard web app that lets small businesses in any industry manage and plan their accounting easily.

🔎 Understanding what I got myself into (researching)

To kick things off, I had to conduct some deep over the desk research (basically googling a lot and reading articles), as this was my first time designing for accounting software.

The major aim of this research, aside being a newbie to accounting was to gain some insights that would answer these questions:

• Who exactly are the target users and what do they need?
• What/how is a small business financial accounting process flow like? basically how does it function?
• What affects these businesses when they go about their daily accounting management and what are the current processes they use? • What constraints, metrics and data do I need to design for?
• How do these businesses interact with existing solutions in the market?

At the end of my over the desk research, I started to have a more clear overview of whom I was designing for and what they would need from Simplebks.

📊 What do users think?

Next, I wanted to gather more insights into who I will be designing for and what are their habits when it comes to financial accounting.

I opted for creating a quick Google Survey that provided us with the following information out of 16 surveyed individuals who represented their businesses.

• 65% use Paper based methods, Microsoft Excel to handle financial records and accounting tasks • 90% generate & produce invoices using paper or Microsoft word • 70% receive payment via Bank Transfer or a payment link
• 90% keep track of mostly forecasting, income, expenses as good practice.
• 70% keeps track of their expenses using banking apps
• 30% keep track of their expenses using spreadsheets, online accounting platforms or paper based methods

🗣 Face-2-face with some users

With the help of the stakeholders, I ran open-question interviews with 4 individuals who were business owners.
The conversations were open and spontaneous and as expected, this brought out useful insights that validated my findings from my research so far and gave me an important help for the defining the problems and ideating solutions to them.

“I had to find myself an easy-to-access dashboard to have a clear overview of my finances, it's why i use Quickbooks”

“One of the most annoying task for me as a business owner is the paperwork... it's time consuming, error prone and complex.”

“I use banking apps cause like automated features when it comes to accounting for my finances”

With both interviews and the initial research, I combined the resulted data in order to have a much clearer overview of the accounting industry and this gave me some sense of direction towards the goals for Simplebks.

🤔 So how does accounting work in the market?

After all those insights, I had to snoop around the competitors and see what they are up to, what their processes are and how well have they solved these problems businesses were facing currently and what could Simplebks do better where they fail?

The goal was to see what was available and how I could improve on the existing accounting experiences. Some of the products we looked at were Quickbooks, Waveapps, Xero, Freshbooks.

This exercise validated my directions and gave me helpful insights into what the Minimum Viable Product for Simplebks should be.

🎉 Research Insights secured! Now let’s identify possible solutions

I proceeded in combining the findings from all the research using HWM (How might we - questions) in order to help shape my thought processes into ideating potential solutions and obtained:

• HMW make SMEs be in control and knowledgeable about their financial situation before, during, and after?
• HMW creates a system that saves SMEs ’ resources by automating basic tasks and processes?
• HMW create a system that allows SMEs to effectively and confidently manage and keep track of invoices, payment and expenses?

Being satisfied with the HMWs, I went further to define the problem statement and an hypothesis to it:

The problem statement

Businesses need to find an efficient system to keep up with their financial situation on the go, while effortlessly tracking expenses and gaining a clear overview of their financial situation

The hypothesis: a possible answer

Simplebks believes that providing SMEs with a friendly and effective online responsive solution that allows them to track and maintain clear financial records, in order to gain confidence over their bookkeeping would help solve SMEs pain points.

Finding solutions & Prioritising

Having generated an hypothesis statement, and some HMW’s, the stakeholders and I (Ope, Olakunle & Me) had a brainstorming exercise using an Affinity Diagram to outline possible solutions and determine the best features to help solve the users problems.

Building an MVP requires delicately brainstorming the right features to set the tone for the future of the product, hence the stakeholders and I spent time prioritising the features gotten from the brainstorming exercise and what needs building.

🛣️ Drafting and mapping out flows based on the brief

With the help of the PM (Ope), we drafted a brief to needed for the sprint aimed at designing a brand identity, landing page, and web dashboard.

With the list of features for the MVP set, drawing out a user journey flow was the next step on my process, this would eventually be a guide when working on the experience for Simplebks.

🏗️ Setting tone for the brand and it’s first users

Building the Simplebks experience was a hefty task for a 1 man design team, and with 12 weeks to build the experience, I had to kickoff with the brand identity design, then a pre-launched landing page to help gain our first set of users to help validate the product.

Identifying the brand for Simplebks

With David Spencer in mind, I defined which visual attributes Simplebks would have: Easy to use, Uncomplicated, Honest, Professional. I designed 3 options to represent the brand in the keywords needed to communicate the brand message

To bring a life into Simplebks, I chose vibrant colour palettes to create an appealing, clean look that speaks professionalism and confidence.

For primary colours, deep blue and vibrant blue were chosen; for additional accents, the light yellow colour was picked.

Option 1 with a colour combination of Option 3 was the final option selected.

Pre-launching the product, got us our first 100 users in 2 days added to our waitlist

Once the visual identity and the brand guide was completed, I moved on to building a pre-launched landing page using subtle block elements to portray the core features like inventory, invoicing, financial statement and analysis.

420+

Users joined the waitlist

🏗️ Building the experience: Phase 1

With over 420+ users on the waiting list, I knew the pressure that came with designing a good experience for the product so we could easily convert these users into paying users. This next phase had my head on mood-boarding, wireframes to wrap my head on the solution and user-flow and then move into UI high-fidelity designs.

Kicked off with mood-boarding the visual aesthetics

An aesthetically pleasing experience is necessary for our users factoring how poorly designed our competitors products are, factoring this in mind, I needed to gather designs of existing products I find pleasing, subtle and easy to use or navigate.

Utilising the user-flow to map out a low fidelity wireframe

This phase was less important when I look back with the experience that comes after building this product, but at the time, it made sense for me to help shape my mind around how everything would play out.

Drafting V1, the first UI

Having done the user flow and some low fidelity wireframes to help wrap my head around the solution framing, I knew it was time for some magic, I moved on to working on the core fidelity in just plain black and white UI, now you may ask why?

I needed to focus on the structure and layout first, the idea is to understand what data structures needed to be represented and how best to represent these data.

This phase was delicate and helped shaped the experience

Having done the V1, I shared this with the team and it helped us gain much clearer direction for the platform design. After this feedback session, I proceeded into a much higher definition of the product but as a high-fidelity design.

The aim was to worry less about the UI and aesthetic and just focus on functionality and the user experience, once this is confirmed good to go from the stakeholders, I will proceed into applying styling to the design and work on the UI.

Here are some snapshot with focus on the dashboard, adding transaction and POS service pages.

Dashboard

Add new transactions

Entity/Business customer screen

Point of Sale

🏗️ Web app design: Phase 2

Now we have everything we need to map out the entire UI experience, it was easier from this point on.

High fidelity visual designs

Before designing and implementing high visual styles to the wireframes, I had a discuss with the stakeholders to approve of the wireframes and tested with the initial users from the interview, this gave room for good feedback which allowed me to make adequate corrections.

Using a classic, left sidebar navigation layout, I designed a minimal and easy web app that allows you to sign up, onboard and input your transactions easily and generate your financial report immediately, while keeping the visual design attributes at the start of this process in mind

Onboarding

Get started screen

Dashboard

Apologies for lack of more design screens, they are confidential

🏗️ Adding final touches with a website ready for launch

At this stage, the team wanted a marketing website that could speak the features of the product offerings and help sell what Simplebks is and get it’s ideal users to convert into paying users.

🔎 Testing and Feedback

Wireframe designs were shared with stakeholders to get early feedback, this allowed for Internal testing at every phase of the project which helped with a lot of helpful feedback, this helped us improve on the designs and development before testing with users (10 users) after the high-fidelity phase;

• 80% found the platform easy to use and less daunting like the competitors

• 20% needed user guides to help them get more familiar with the platform on first time basics in other to reduce learning curve

With this feedback, I worked on improving the corrections and feedback and progressed to handing off the final screens (the pre-launch landing page, web app designs and marketing website) with design specs to the developer for implementation.

📊 Results and what's next?

When we released the launched the product, we saw a 55% user sign-up conversion from the waitlist.

With this good news, this project is by no means finished, the team continued building on the designs I worked on even after I left the team and did more testing with every feature development release.

235+

Free tier
users

80+

Paying
users

55%

Conversion rate with new design

🎙️ Feedback I got?

Your work has been excellent so far Collins, I love this, Ope was right when he recommended you for this role, great job Collins, let's send this to the dev and get started.