Header Desktop Screens 3.jpg

BiznessPlus Website

BiznessPlus is a business directory website where users can find and contact small businesses, and small business owners are able to list their businesses on the site.

Role

UX researcher, UX designer,  UI designer

Client

Student Project for the Google UX Design Course

The Problem

People find it hard to hire the services of small businesses as they’re not able to get their contact information. Also, small business owners struggle to drive traffic to their businesses and get a larger audience.

Responsibilities

User research, wireframing, user interface design, low and high-fidelity prototyping, usability testing

Project Duration

July 2021 - July 2021

The Goal

To create a website where users can easily find small businesses and small business owners can list their businesses.

Research

User research was conducted through online surveys. Secondary research was also done to understand what solutions to the problem had already been carried out.  I found out that users were frustrated about getting wrong contact details and not enough information about the small businesses. They also struggled to identify which businesses were verified on the websites. The pain points identified are as follows;

  • A lot of businesses have incorrect or outdated contact information.

  • Users find it difficult to locate small businesses in their area.

  • Small business owners find it difficult to attract a larger audience to their business.

  • Users struggle to trust the ability of small businesses due to past experiences.

Personas were created to define each user group and help build empathy.

Problem Statement

Kwame is a busy business manager who needs A quick and easy way to find small businesses in his area because he will like to spend less time and money looking for businesses that fail to deliver quality services.

Kwame Philips.png

Problem Statement

Melissa is a baker who needs a way to promote her business online because she will like to increase sales.

Melissa Moyo.png
User Journey Map

A user journey map was created for the user flow of finding a small business on the website.

User Journey Map.jpg
Ideation

A competitive audit was conducted to identify the opportunities and gaps of the direct and indirect competitors. These competitors were Business List, Connect Nigeria and Dun & Bradstreet. The goal was to compare the user experience of their app and website.

Some opportunities I identified were to provide product images/photography of businesses, provide a map of businesses listed, and provide a way for users to know which businesses have been verified.

Sitemap

Trust and difficulty finding the contact details of small businesses was a primary pain point of users, so I used that knowledge to create a sitemap. My goal here was to make strategic information architecture that would improve the overall experience for users and make it easy to find information.

Sitemap Screenshot.jpg
Wireframes and Low-Fidelity Prototype

Iterations of each screen of the website were drafted on paper and elements that will be well-suited to address the user pain points were marked using an asterisk. I kept user pain points in mind, and focused on creating an easy browsing experience for them.

Since users will most likely access the site on a variety of devices, I started to work on designs for additional screen sizes to make sure the site will be fully responsive.

Desktop Sketch.jpg

Desktop paper wireframes

Mobile Sketch.jpg

Mobile paper wireframes

After creating paper wireframes for the app, iterations were made and refined in the digital wireframe format. I made sure to base screen designs on feedback and findings from the user research. Prioritizing user pain points and the placement of contact information, and visual elements on the business description page was a key part of my strategy.

03 Description Page – Desktop (Old).jpg

A wide range of information such as contact information, business description and reviews, distills trust in users and gives them a variety of ways in contacting the small businesses

Lo fi All Screens.jpg

Wireframes were created for desktop, tablet, and mobile to make the site responsive.

I created a low-fidelity prototype by connecting the screens of the main user flow of finding a small business and sending an enquiry message. View the Small Business Directory Website Low Fidelity Prototype

Desktop Lo fi Prototype.jpg

Usability Study Round 1

An unmoderated usability study was conducted on the low-fidelity prototype in round 1 of testing where 5 participants took part in the study, The goal of the research was to determine if users can complete the core tasks in the app. The Key Performance Indicators (KPIs) measured were Time on task, conversion rate, and System Usability Scale. An affinity diagram was used to organize the findings of the research. These are as follows,

  • Users found it difficult to understand the homepage.

  • Users had difficulty reading the text on the page.

  • Users struggled to navigate through the business description page.

Mockups and High-Fidelity Prototype

Based on insights from the usability study, I made changes to layout of the business description page. I added a side page navigation so users can be able to see what information is on the page and click on it to be taking to that section. I also increased the text size of all screens to make the visibility of content much easier.

Before Usability Studies

03 Description Page – Desktop (Old).jpg

After Usability Studies

03  Description Page - Mockup - Desktop.jpg

Desktop Screens

All Desktop Screens.jpg

The High - Fidelity Prototype followed the same user flow of the low-fidelity prototype and included design changes made after the usability study. View the Small Business Directory Website High Fidelity Prototype

High-fidelity Prototype.jpg

Mobile Screens

All Mobile Screens.jpg
Accessibility considerations
  1. The colour palette passed the WCAG 2.0 for both AA and AAA.

  2. I Increased the size of the text and used headings of different sizes for better visibility and visual hierarchy.

  3. I used landmarks to help users navigate through the site.

Takeaways and Next Steps

The target users shared that our design was intuitive to navigate through, more engaging with images, and demonstrated a clear visual hierarchy.

I learned to always put the users need first. A small change can have a major impact on the experience of a product.

The next step will be to conduct another round of usability studies to validate whether the user pain points have been addressed effectively.