Builders Cabinet Supply

About the project

BCS needed a process to streamline the customer to designer interactions.
Challenge:
Build a tool to help simplify interactions between the company's designers and clients while working within their existing UI and design.
Solution:
I created a new customer and employee login portal and free quote question wizard to aid both prospective customers and employees. Testing showed that the most value would be in developing an employee portal, which wasn’t even part of the original design!
My Role
  • User research & Analysis
  • Competitor comparison
  • Persona creation
  • MVP definition
  • Wireframes
  • UI design and Prototyping
  • Usability testing

The Process

Define, Research, Ideate, Deliver

Working in an agile process, I focused my initial research on employees at BCS in order to discover their specific pain points. I wanted to define parts of the process that could be improved the most.

  • Conduct User testing to unveil unexpected pain points
  • Focus on research results to provide users with features that they really need.
  • Create user based Personas
  • Define new user and task flows based on research and user feedback.
  • Develop wireframes and prototypes working within existing company UI.
  • Conduct Usability testing with high fidelity prototypes to identify opportunities.

The Research

User Survey

I conducted an employee survey. The questionnaire had a variety of questions targeted at designer to client interactions.The feedback became the rough skeleton for the “free quote wizard”. 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.

Questions derived:
  • 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?

Comparing Solutions

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.

Comparing Solutions

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.

User Flow

I broke down the original BCS user flow and created a proposed expansion. Based on the user research and the original challenge, I added a quote wizard and an employee and customer portal.

Ideate

Sketching Solutions

BCS branding and UI elements are all fresh, clean, and simple. Instead of wireframing from scratch, I wanted a more complete UI feel. I knew 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.

Working inside the system

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. Using best practices, I kept these new elements aligned with the current UI.
Methods:
  • No need to add new colors. BCS already had strong 3 color palette.
  • Stay consistent. Stick with the single typography choice already in place.
  • Add for need, not for fun. I only added new icons and CTA's when it was necessary for the user experience.

Testing

Usabilty testing

The feedback from the usability testing showed that the new features looked and felt like the old site, seamlessly weaving into the fabric of BCS's original design. Using an affinity map, I developed a list of results and suggestions to improve the site.
Objectives:
  • 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.

Typeform

Typeform 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 had the company's designers start using it with potential clients.

Visaual Design

Wizard In Action

The final design of the wizard is a simple and concise 7 questions. All questions are based on the user research and help to reduce timely designer to client interactions.

Wizard In Action

The final design of the wizard is a simple and concise 7 questions. All questions are based on the user research and help to reduce timely designer to client interactions.

The Big Finish

What have I learned from this project?

  • Assumptions can block true progress: -What I believed to be the initial solution to the problem/challenge turned out to only be a small piece of the final solution. Being open to more possibilities helped deliver a better final product.
  • Don't feel limited inside a system: - Working within an existing UI kit can be a challenge sometimes. It can feel like you can't be as creative as you want. But embracing that challenge can also stretch you as a designer and I found that I was perhaps even more creative with stricter rules placed on me.