Registration Process
BLK Owned
Overview
My Role
UX/UI Designer — Research & Testing, User Flows, Interaction Design, Visual Design
Team Members
Yosra Musa, PM
Kenny Nguyen, Developer
Timeline
2 Months - Launched June 1st, 2024
The Business
BLK Owned is a non-profit organization that highlights and supports racialized and black-owned businesses in the Greater Hamilton Area through markets, events, workshops, educational programs, and an online business directory.
I joined the team as the sole designer to create a new web experience for their website and community platform. This case study focuses on the improvements made to the directory search experience and the business registration process.
Highlights
Users can now quickly search for businesses anywhere on the site
The directory provides and organizes business information for users more effectively
Adding a business to the directory is now clearer and concise for users
Context
Background
An opportunity to increase the visibility of underrepresented businesses in our community.
BLK Owned’s mission focuses on promoting, advocating for, and supporting the growth of black-owned businesses in the Greater Hamilton Area. This is achieved through several initiatives, including an online black-owned business directory
The directory allows entrepreneurs to register their businesses and provides users with access to a curated list of black-owned brands across various industries.
Business Problem
Increasing the number of active directory users and the monthly rate of newly registered businesses.
User Problem
Finding reliable black-owned businesses in the Greater Hamilton Area that fit their needs and search criteria.
Constraints
Development and Time Limitations.
The launch of the new website would coincide with the launch of the updated Trailblazer Program. The expectation was that the redesign, testing, and development would be completed before the new cohort began.
June 1st deadline. The site needed to be functional in time for new members.
Development Approach. The chosen approach reduced the scope of design and functionality.
Seamless Migration. The existing directory data would need to integrate into the new format.
Opportunity Identification
The directory is BLK Owned’s most valued offering but was less discoverable for users.
User & Stakeholder Interviews
The research goal was to identify existing friction points in the search/listing experience from users and requirements from stakeholders.
Of the four types of website visitors, three utilize the directory and its features.
Interviews revealed a need to enhance the directory experience for users searching for specific businesses and for entrepreneurs registering their businesses on the back-end.
Black-owned Business Ally. Their goal is to find and support black owned businesses.
Entrepreneur. Their goal is include their own business in the directory and establish a new acquisition funnel.
Government. They are searching for a reliable resource to support black-owned businesses, and racialized communities.
Mid-Large Organizations. Their goal is to determine BLK Owned’s grant eligibility.
Overcomplication of the search and registration experiences.
Users looking for black-owned businesses appreciated the search function but were overwhelmed with too many business categories that provided few results. Users wanted to quickly browse though the catalogue of businesses.
Usability Testing
Adding a business on the directory looked like more work than it really was.
Testing with entrepreneurs highlighted several friction points along the process of adding and editing their existing business listing on the directory.
Contextual overload. A single-page registration form with several fields failed to provide users with a sense of progress and resulted in many “empty” listings.
Manual Intervention. Editing a listing was not fully functional feature, requiring the team to address issues manually.
Unused Features. The business dashboard remained unused because its data was not compatible with the current features of the directory.
The Challenge
Simplify the search and registration processes to deliver an intuitive directory experience for the front and back-end users.
What does success look like?
Seamless Search. Expand directory search functionality across the site, ensuring a seamless and efficient search experience from any page.
Concise Business Registration. Organizing and structuring the business registration process to acquire more businesses and improve completion rate.
Updating Flows
Improving the business registration journey to increase the listing completion rate and increasing the number of new user acquisitions.
Existing Business Registration Flow Issues
A one-page extensive form created the perception of a more daunting task.
Adding a business to the directory required users to fill out a form on a single page with a minimal sense of progression, which increased the likelihood of abandonment.
Business Registration Flow Updates
Incrementally revealing form fields to provide users with perceived progress.
Categorizing form fields into logical groups that are incrementally revealed keeps users motivated throughout the process by reducing the cognitive load of seeing the entire form at once.
After completing the form, a review period occurs before any listing is approved to appear in the directory. To manage expectations, this process is clearly communicated to users at the end of the flow
Business Registration Flow Iterations
Optimizing the directory search experience affected the fields required in the business registration form.
Based on stakeholder and user feedback aimed at simplifying the directory search, several fields were removed/replaced to ensure alignment between registration information and the business cards/pages.
Comparative Analysis
Using search overlays to simplify complex search criteria
Comparative Analysis
Modern search-focused sites intuitively organize search filters into a dedicated modal.
Analyzing search-focused websites revealed a prevalent design pattern. Search overlays efficiently organize advanced search options while retaining a clear layout, preventing cognitive overload.
Keeping ideation within scope:
Referencing these solutions supported my ideation process for enhancing the directory's search experience. However, BLK Owned's smaller scale operation and feedback indicate that older users may find an overlay overwhelming compared to a traditional search bar.
Search Iterations
Enabling directory search from anywhere on the site.
Navigation Bar Iterations
Creating a search “first” navigation bar.
Through stakeholder discussions, striking a balance between promoting other business offerings and integrating a responsive search field that enables users to find businesses presented a challenge.
Drawing from my comparative research, I was inspired to adopt the search modal approach, organizing search filters into an overlay to provide space for search options.
Feedback: It may overcomplicate things.
Full search parameters available anywhere on the site.
Too much time and resources to implement based on development approach.
Certain user groups may find this overwhelming in comparison to traditional search.
Trimming down the search modal.
Building off of the feedback I received, I opted to simplify the search modal back into a traditional search bar, moving the industry filter to the directory page, which offers full search parameters.
Feedback: Beyond the scope of implementation.
The search input becomes the primary focus on trigger, with the other navigation elements becoming hidden.
May be difficult to implement due to the chosen development approach.
Selected iteration.
The selected iteration removes the modal and follows a more traditional search bar, revealing the location filter on selection. On smaller displays, the location filter is removed to maintain spacing and responsiveness.
Directory Wireframe
Old Layout
Low discoverability of the existing directory makes searching for businesses feel secondary.
Usability testing results highlighted the low discoverability, as users encountered the directory search page significantly later on during their session.
Findings from initial usability testing:
The “Business Hub” navigation button did not communicate to users where it would take them, causing them to stumble onto the directory through other page links
The directory only presented 2-3 businesses above the fold due to a nonfunctional map integration
The cards could give more context about the business enticing users to click and learn more.
Wireframes
Card based focused layout design for stronger hierarchy and scannability
I decided to use a card based layout approach similar to other directories to help users quickly find and make informed decisions on business they’d like to learn more about.
Iterations
Feedback: Improving SEO through dedicated business pages instead of overlays
Through feedback, I decided to change my initial decision to have more information for the business appear in an overlay when the card is selected, to a dedicated business page
Selected due to better SEO, leading to more traffic to site through these business pages from external search.
Final Designs
Users can now quickly search for businesses anywhere on the site
The directory provides and organizes business information for users more effectively
Adding a business to the directory is now clearer and concise for users
Impact and Retrospective
The designs fulfilled the stakeholders vision, and we're excited to measure success once the site has been developed fully.
Design Value and Impact
The team had never actively tracked site and directory usage. With the redesign, I encouraged the team to begin measuring key metrics to measure performance.
Business Registration Completion Rate. Understanding the percentage of users who do not complete the registration flow for their business and why.
Directory Acquisition Rate. Two businesses are added to the directory monthly. The redesign should encourage more businesses to be added to the directory.
Number of Directory Searches. While the current rate is unknown, it would be beneficial to track how many searches users are making on the directory monthly along with the terms.
Project Takeaways
Working with a PM and developer on a real timeline provided several challenges that influenced design decision and iterations.
I've learned a lot about collaboration between developer and designers, and how I can set up team mates for better success in the future through strong documentation and frequent communication.