Onebit, Inc.
Onebit is a SaaS company providing a financial software program that manages income and expenses for small business owners.
Project Brief: Redesign Onebit's website to better communicate their services and product with their target audience. Also, improve the website's writing and messaging.
My Role: User Research, UX Writing, UI Design, User Testing
Project Team: Stephanie Ronquillo and David Robles
Project Time: 3-week remote sprint
Tools: Figma
My Design Process
DISCOVER
• C&C Analysis
• Current State Usability Tests
• User Interviews
DEFINE
• Affinity Map
• User Persona
• Problem Statement
• HMW Statements
DESIGN
• Sketches
• Wireframes
• Usability Tests
DELIVER
• Hi-Fi Prototype
• Client Feedback
• Next Steps
Discover Phase
C&C Analysis
My teammates and I began the client project by researching finance/accounting software programs such as Quickbooks and Excel to find out how Onebit compares to their competitors. We found that Onebit shares many features of the top features with competitors.
Testing the Current Website
We gathered a group of small business owners to test Onebit’s current website through contextual inquiries. We asked each business owner separately the following questions:
Task 1: How would you go about learning about Onebit and their services?
Task 2: After navigating the site, how would you go about getting early access/signing up for Onebit?
KEY DISCOVERIES
• I need to learn more about Onebit before signing up for anything.
• I want to know the advantages Onebit has over its competitors.
• I want to know who else is using Onebit.
• I feel like the information on the site is confusing.
• I would like to know the pricing.
User Interviews
We conducted interviews with a different set of independent business owners to understand their reasoning, their motivations and the importance on how they track their business finaces.
Below are some sample questions:
• As a small business, how do you currently track your expenses? Why do you use that method?
• What are your favorite features from that platform?
• What are your dislikes about that platform?
• How often do you check your business expenses?
Define Phase
Affinity Mapping
To synthesize the data from our interviews, we created an affinity map. The process helped the team identify trends and needs among the targeted audience. We used “I Statements” to interpret the data gathered to make it about real people and not just “data.”
Trends / Insights
• I use an accounting program to manage my finances.
• I get frustrated when dealing with my business finances.
• I spend a lot of time on my business finances.
• I like features that allow me to be more productive.
• I want features that are accessible and insightful.
• I started my business based on my passions.
User Persona
After analyzing all of our synthesized research from our targeted users, we have created Miguel, who summarizes the key data points, behaviors and goals of all our users we interviewed.
Problem Statement
As a small business owner, Miguel handles his restaurant’s finances himself. He needs a way to get business insights so that he can make smart decisions and grow his company.
How Might We Statements
To address Miguel's problem, we applied the How Might We framework to brainstorm some potential ideas. The ones that resonated among our team were:
• HMW give Miguel the confidence to know his business is growing?
• HMW present business data in a way to make it more digestible to Miguel?
• HMW provide Miguel the financial information he needs about his business?
• HMW display the benefits of data insight and analysis?
•HMW help Miguel feel secure using a business intelligence tool?
Design Phase
Beginning of Ideation
We started the design phase by drawing low-fidelity sketches of each page using pen and paper based on the insights found in the discover phase.
Landing Page
How It Works Page
About Page
Building Wireframes
Next, we designed mid-fidelity grayscale wireframes with new content to help our client understand the direction we were going with the website.
Usability Testing
We asked a new set of small business owners to navigate through the mid-fidelity prototype with the following tasks:
Task 1: How would you go about learning about Onebit and their services through the site?
Task 2: After navigating the site, how would you go about getting early access/signing up for Onebit?
Deliver Phase
High Fidelity Prototype
Using the feedback from testers, annoucing that Onebit was not live yet on the landing page was a top priority. We also changed buttons, navigational schemes, headlines and graphics for tasks to be completed quicker.
High Fidelity Version 2
After another round of usability testing, we continued to make changes to the prototype to reduce confusion.
Final Prototype
Client Feedback
We received rave reviews from the client. Satisfied with the redesigned website. They will implement all the newly designed pages once their site goes live in late 2021.
Next Steps
• Feature testimonials and reviews from clients to show credibility.
• Display interactive videos that show off the features, tools and dashboard.
• Highlight statistics, data and analytics to represent how Onebit actually helps businesses.
• Update photos. More action shots of the Onebit staff and add pictures of clients.
• Fully build out the Sign Up page once the site is live.
• Add call to action buttons to pricing page when it goes live.
• Use icons and fun illustrated video, a visual map to show flow of money.