Belwith Keeler Décor Solutions | Decorative Cabinet Hardware
Sept. 2021
B2B Portal
Background
For several years, the Belwith Keeler Décor Solutions’ (BKDS) team anticipated the development of their very own B2B Portal in order to establish a foundation to enter into the unified commerce world. When the project first began in Q3 of 2021, I was merely assigned to lead the UI design, but after two months shy of kicking off the project, the project owner and UX lead moved on from the company. This brought an opportunity for me to take charge of my first large scale project.
The initial B2B process involved a series of steps for both the BKDS’ sales team and the customer. To place an order, a customer needed to email their internal sales rep with their order in a PDF format. From there, the sales rep would then look up the inventory levels of each product to determine if it was readily available for ordering. Considering the manual steps in this process, and lack of product inventory awareness, there was room for error and improvement.
With a vision to elevate this existing method, the leadership team established a clear objective: to develop a secure B2B Portal that seamlessly facilitates product search, inventory updates, client quoting, fast ordering, shipment status tracking, and more.
My Role
”Portal Guru”
Project Manager
Lead UI/UX Designer
Team Shoutouts
WebriQ (Superstar Developers)
Becca Frucci (Social Media Magician)
Todd Ramsdell (IT Master)
The Mission
Empower customers with an enhanced, tailored, ordering experience.
Scope It
Understanding the ObjectiveWhen beginning a project of this scale, the first problem we aimed to solve was defining all our internal and external goals. This meant we needed to strategize what we needed to gather and account for in order to create the best solution for our target users.
Our target users included: BKDS Sales representatives, a range of showrooms, interior designers, and affiliate designers/builders.
Cross-Functional Communication
Once the leadership team crafted a broad outline of the project scope, I collaborated with representatives from each department to align our efforts and communicate the strategic plan, ensuring we collectively work towards our shared objective.
Sales
IT
Accounting
CS
eComm
Defining Flowcharts & User Groups
One of our first objectives was to define the differing parent/child permissions. This feature was developed to better aid and equip our larger showrooms.
Sitemapping the Evolving Experience
Creating a well-defined sitemap made it easy to review, communicate, and reference back to with internal and external team members.
Time to Make SomethingDesign
With the project scope ready and the UX well underway, it’s time to start designing the front-end of this experience. Given that our B2B Portal prioritizes functionality over flashy aesthetics, the goal of the UI was to maintain a sleek and straightforward design, ensuring ease of use and clarity for our users.
Visualizing the Experience Through Wireframes
My wireframing process typically begins on paper. With the project scope in hand, I begin to represent the large UI components/sections with shapes and scribbles. Then, the drawings quickly become digitized through the amazing platform of Figma.
Ability to view product inventory
Product inventory levels are updated three times a day.
Creation of client quotes
To begin an order you must first create a quote.
Access to view and download resources
A range of product photography and logos readily available.
Branding UI Components
I designed a simple style sheet for our devs to use when reviewing the wireframes in preparation for development.
Highly-Fidelity Prototypes
After presenting the wireframes to the team of devs, we then collaborated on bringing them to life by adding in the branded elements and product images.
This pivotal phase enabled us to visualize the brand system as a whole.
Break It Til You Make ItTest It
& Launch
As soon as the Portal prototype became a testable dev link, I immediately began conducting a series of tests with internal team members and our target customers.
Onboarding the Internal Team
To best equip our internal team for through testing, I designed and presented a powerpoint deck summarizing the project.
Within the presentation, I also defined the key objectives for department to look out for while testing.
Keeping the Customer Informed
Email campaigns played a huge role in effectively launching the B2B Portal and notifying our customers about updates. Email + social campaigns ensured that the customers were well-informed and educated with the latest developments.
I coordinated a mini photoshoot with one of our local showrooms to create unique, original content for promoting our new digital tool.
I provided art direction to our photographer, strategically chose the screens worth highlighting, and posed in some of the shots.
