Research & Redesign

Kitchen & Bath Design Group is a multi-generational family owned business spanning decades. They specialize in custom cabinets with attention to quality and timeless designs. KBDG serves the Atlanta area in Georgia along with parts of the South in the US.
‚Äć

I was approached by the CEO and current owner of KBDG after hearing of my work from a friend. I spent close to 4 months on designing and developing the KBDG website.

POSITION
Web Designer
RESPONSIBILITIES
UX Research
UI Design
Prototyping
Web Development
TOOLS
Sketch
HTML/CSS
jQuery/Javascript
COMPANY
Kitchen & Bath Design Group
YEAR
2017 - 2019

It's Time for a Redesign

KBDG's current website lacked content and intuitive design therefore the obvious solution was a redesign of the website. After several conversations with the CEO, one sentence in particular stood out to me that encapsulated all of his frustrations and desires.

I want my work presented in the best way possible for future clients ūüėé

My Process

My process usually consists of 3-5 phases depending on the project. In this case, I had a 5 phase process beginning with discovery and ending with launch. This process is the culmination of research, UX best practices and personal experiences.

Discovery

Competitive Analysis  |  User Interviews  |  User Personas

What is out there? 

One of the most important pieces to the Discovery process is a competitive analysis. Understanding what the competitors are doing in the industry is very important in determining where we could go. Sometimes I found that some wheels have been invented and there's no point in trying to reinvent but to innovate on existing ideas. Researching KBDG's immediate competitor (unfortunately I cannot disclose my complete competitor's analysis), I noticed an outdated website suffering from poor performance and flash. This was a great opportunity to stand out from the crowd by crafting a user focused website with modern design thinking.

Pain Points

The old KBDG website was built with Wordpress. In 2017, the Wordpress theme used was considered outdated. Aside from the lack of an attractive design, the website was not responsive for mobile or tablet views. Photos were scarce and the copy was unoriginal. The client expressed his frustration with his website.

Who's the user?

It was clear from our conversations that the users would be potential clients, KBDG's sales team and interior designers usually hired by homeowners and builders. Their user needs were very similar; simple navigation, photo presentation and accessible from their tablets and mobile devices. Normally, I create multiple user personas based on each individual needs but in this case the requirements were shared across all users.

Brainstorming

Sketches  |  Wireframes

Moleskine Sketches

Below are notes and sketches taken during the Discovery phase interviews and exploration. Processing the meetings, I brainstormed possible layouts and noted specific user flows.

From sketches to Sketches

After brainstorming possible layouts and user flows, it was time to put together some rough wireframes. I spent several hours translating my sketched thoughts into Sketch app which helped me see what was visually possible. I wasn't ready to show the client anything yet.

Prototyping & Testing

Mock ups  |  HTML Prototype  |  User Tests

Mid-Fidelity Realizations

After selecting a few wireframes to explore further, I was ready to reveal to the Client my work so far. I was playing around with two main variations that I called "Light Theme" and "Dark Theme". The Light Theme was going to have a light navbar and colors all around. The Dark Theme was the opposite; blacks and greys with orange accent.
At our weekly meeting, I presented my mockups to the Client to see what he thought. The Client chose the Dark Theme because to him it conveyed sophistication and timelessness. I went over other areas of the design with him to make sure I was going in the right direction.

Bootstrapping a Prototype

The UI design was about 90% complete. I was maintaining a style guide while I was designing so I can use it for the next phase. I built a rough prototype using Bootstrap and some simple CSS classes to see how the website feels in the browser. I played around with responsive classes as well.

User Testing

I held several meetings with the sales team, an interior designer, one of the employees in production and a few family members to observe how each would navigate the website prototype. I wanted to see if there were any roadblocks or confusion. I asked their thoughts on the prototype and I received positive feedback. Someone did suggest I remove the orange bottom border of the hero image. After testing that, I realized it was better without the orange bottom border. Another meeting with the Client approved the direction once again so I was ready to move to web development.

Web Development

HTML/CSS  |  Javascript/jQuery

No Wordpress

From the beginning I decided that I was not going to use Wordpress for building out the website. I knew a little HTML/CSS but decided that I would learn as I go. I followed many tutorials on YouTube, Stack Overflow, forums, Twitter, Jon Duckett's books, Treehouse, etc. I used Bootstrap for the grid classes, SASS as my CSS preprocessor, Gulp as my task runner, and jQuery for some page interactions.

Learning to Code

Going into this project with very little coding experience was intimidating enough but it forced me to learn quicker and apply some creative thinking when it came to repeating code.
In particular, I was proud of this Javascript function I created using React. It loops through an array and renders HTML to the DOM. The function has props passed for the HTML strings so based on the counter I set (based on the number of files in the folder) it would spit out HTML elements.
This snippet saved me days. Before I was copying pasting and editing every line by hand. Learning more about Javascript, I realized that I could save tremendous time by creating a loop function with React props.
I'm very proud of this snippet! ūüôĆūüŹľ

Launch & Review

Deployment  |  Review  |  Lessons

Ship it!

I gave myself a couple weeks after finishing development to go through every page and test it myself. Passing my tests, I uploaded the files and launched the next day on a Saturday. (Reason being that if something went wrong, I would have buffer time to fix).

Download Full Resolution Screenshot

What were the results?

The following Monday, I received overwhelming positive feedback on the website. The Client gave me feedback from his clients and how they found the website very professional and simple to navigate. I kept an eye on the site for a couple of weeks fixing some bugs (issues with responsiveness and font) and even changed a few things based on some feedback from KBDG employees.

Lessons

Taking on a project of this scope was a huge personal accomplishment for me. I designed for years but coding from scratch was a new endeavor. I learned Javascript, SASS, DRY coding, Gulp and many more.
As for design, I learned that sometimes presenting one or two options is more effective than a handful.

Visit Website