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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
I'm very proud of this snippet! 🙌🏼
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
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.
As for design, I learned that sometimes presenting one or two options is more effective than a handful.