Builders Cabinet Supply
Take an existing brand and add features to grow business.
10 min read
Role | UX/UI Designer
Duration | 4 Weeks
Tools Used | Figma, Photoshop, Typeform
Gathering initial information from prospective clients is time consuming and a strain on salespeople. BCS’s employees needed a way to streamline the customer to designer process.
While working within their existing UI and design, create a new customer and employee login portal and free quote question wizard to aid both prospective customers and employees.
The Big tease
In working through this project I was tasked with building a tool to help the company's designers simplify the process with clients. Instead of streamlining the process for the clients, testing showed that the most value would be in developing an employee portal, which wasn’t even part of the original design!
Builders Cabinet Supply (BCS) has been in business since 1986 and has been online since 2006. Their website currently is used strictly as a learning and advertising platform for prospective and current customers. Moving forward BCS would like to update the website to provide a custom quote building section. Here customers can more accurately chose cabinet finishes and create custom saved selections. So much of this process can be automated in order to provide clients with the ability to make selections on their own.
The charge of this project will be to design a “free design and quote” process contained both within and adjacent to the individual user portal. In using this service, clients will be able to enter all relevant personal information, including name, address, phone number, and email so that they can receive either a email quote or call back from a kitchen design specialist. The process will also ask users to answer basic information questions pertaining to both their existing kitchen and potential new kitchen, and upload any documents (i.e., pictures) of potential inspiration for the designer to view. Customers with existing accounts will be able to browse inventory of door styles, wood types, and finishes, as well as save combinations that will be available to their designer.
BCS’ current website only provides customers with information on the business and their products. This includes details pages, FAQ sections, learning resources, and basic contact forms. But what if it could do more? I was charged with streamlining the process between customer and designer. How could I reduce the need for redundant interactions that ultimately didn’t develop user confidence? Could the whole process of the first meeting be automated? Research would show that new clients wanted to reduce face to face interaction and were more likely to engage with the company if they answered more project specific questions up front. But how would we accomplish this?
Through my initial competitor research I found numerous other companies that had already automated this process. Using some of their patterns, I put together a list of potential ideas for customer website quote interactions. This research was not just in the cabinet marketplace, but also in other industries where users need to purchase items through a quote process.
I decided, instead of interviewing potential users, I would focus my attention on BCS’s employees. I interviewed and surveyed all the designers who currently work for the company to understand what would make their process easier, faster, and more efficient. After this process I decided to do some quick user research on possible personas. I looked through client lists provided by the company and spoke with multiple employees to discuss their recent clients and how I might cater to them more specifically. Using that information I built this persona.
Read the room
Drawing research from the employees was an incredibly valuable tool. Who better to talk to than those who go through this process every day. I started with asking a series of questions designed to break down the process so I could better understand what solutions would be needed.
- What are the things you need a prospective client to bring with them to a first meeting in the showroom in order to be the most efficient and productive?
- What questions do you typically ask a client at a first meeting?
- What questions do clients typically ask at a first meeting?
- What information is most important to prospective clients?
- How many in person meetings do you typically have with a client?
- What information do you need to share with clients throughout the design and install process?
- If you could have any parts of the designer/client process automated what would they be?
The feed back was tremendously helpful and would become the rough skeleton for the “free quote wizard” that I would eventually implement. It lead to a series of 6 questions we could ask users in order to almost completely eliminate the first in person meeting with a designer, which could save employees roughly 33% of the time they spent working with clients in person.
- What kind of project do you have?
- What spaces are included in your project?
- Is this new construction or a remodel?
- Do you have measurements of your space?
- Do you have any inspiration photos?
- Do you have appliance information?
- Have you decided on a cabinet door style?
Having a prospective client answer these questions prior to any face to face interaction not only gave the employees valuable information that would save them time, but also gave customers a means to be invested and more personally committed to the process. This tool also allows design “leads” to be sorted and perhaps more curated to individual employees who were a better fit to the client based on multiple factors.
Working inside the system
This was my first time working within an existing company's set of UI. I really enjoyed it. Having the backbone of an existing set of rules was somewhat of a comfort and let me explore the far edges of the creative “box”. The existing site really had very little when it came to icon navigation or call to action. This presented a two fold challenge. I needed to create a new set of UI elements but not make them feel unlike the spartan nature of the site's current information architecture. I kept with a simple outlined, monochromatic approach for new icons, as to not make anything too complicated or obtrusive. Using best practices would keep these new functions aligned with the current site, but sometimes you need to embrace the heart of the original design without being literally tied to it. I presented the new ideas alongside the current UI patterns so no one felt like I was trying to hide anything.
What did you feed it?
Exploring the current site, I determined that it was only providing two services. Firstly it was an advertising and contact portal, which is the most important function of most small brick and mortar business online presence. Secondly it was a learning portal for current and future customers to discover trending patterns, answer process questions and pick product styles. The things I wanted to provide would almost double the site in size simply by adding one new section. I added an accounts section, which looking back was a huge undertaking but with big payoffs. Adding this functionality to the site would take it from a static product to a malleable one. This simple functionality would provide users with multiple new reasons to visit and ultimately buy, even if the site itself didn’t sell anything directly.
Building the solution
All the branding and UI elements are based on ideas of fresh, clean, and productive. The app needed to feel simple. Instead of wire framing from nothing, this time I decided I needed to start with a more complete UI feel. This was driven by the fact that I needed to stick within the sites own patterns. This isn’t to say that I didn’t need to start with multiple sketches and simple ideas that would later get polished, but rather that color and style was more important to the process than perhaps starting from scratch.
How will the people react?
Now that I had a working prototype with new features it was time to test it up and find all my mistakes and misgivings. The feedback I received was amazingly positive. The overwhelming feeling from the usability testing was that the new features looked and felt like the old site but with a ton of new exciting features. I built an affinity map and used that to develop a list of results and suggestions to improve the site. The objectives of the usability testing were as such:
- Observe how users accomplish given tasks
- Evaluate users experience using quote wizard
- Evaluate information gained from quote wizard as a tool for BCS designers
- Discover users ability to navigate account portal and build mood boards for a design
- Look for dead ends and traps in user experience
- Discover any objects or choices that do not fit within existing company branding UI.
The other thing I decided to do was create a “typeform”. It is an amazing tool that allows you to build out a quick and powerful questionnaire or survey and immediately attach it to your site. I built the quote wizard on this platform with a simplified UI feeling and allowed the company's designers to start using it with potential clients to test it live. Results have been positive and have led to a few different iterations that will only make the site better and more powerful.
This is a sum up of all the pages I created. It's crazy that we started with a somewhat simple challenge and ended up adding essentially 3 full features. Using these new tools will definitely make the jobs of the employees more efficient and perhaps even a bit more fun!
view the prototype
The Big Finish
Thanks so much for reading all the way down to the bottom. I hope you liked reading about this project as much as I enjoyed doing it.