The D3 Website Redesign
The Project
D3 is a Woodworking company based in Huntsville, Alabama. Their specialty is transforming beautiful materials into custom wood works of art that leave customers in awe. D3 selected my company to elevate the UX/UI of their product via a redesign of the entire website. The goal was to achieve a more polished, elegant look to impress users in order to drive sales conversions. D3 wanted a web presence that is structured for growth beyond the local Huntsville market. Once I had an understanding of general guidelines for the look they were after, I lead my small team to produce a web redesign that exceeded the client's expectations.
Before (Starting Point)
The Problem
Drake Daggett of D3 Wood Works sought to expand the reach of his company's online presence and to boost business. He realized that his previous site just wasn't consistent with industry standards and he wanted users to feel the elegance of his work. Upon a Heuristic Evaluation of the original product, it was clear that the usability of the site was overlooked. This website was still in the first-draft stage, just to have some online presence and it was full of usability issues, such as broken links, cut-off text, overwhelming design, and navigation that did not match the user's mental model. My number one goal for this project was to make the website quick and easy to use, while maintaining an elegant and modern aesthetic.
The Design Process Begins!
I conducted a Heuristic Evaluation of the website and analyzed some of the websites that the client liked in addition to a competitor analysis to review industry standards. Once I had an idea of what direction to go in with the design, I started sketching (with pen and paper) a few wireframes to start ideating. Once I had several different design solutions to choose from, I discussed the ideas with my team and then picked the best of the designs to translate into a digital wireframe for the client to review.
Wireframing Bootstrap Breakpoints
Below is an example of the wireframes I created for the D3 project according to bootstrap breakpoints, meaning how the design translates for different the six different standard screen sizes, XXL - XS. Everything for this project was designed using the Adobe Creative Cloud, mostly XD.
Hi-Fidelity Mockup Sample for Clarity
Below is a sample hi-fidelity mockup that I sent Drake with the first round of wireframes, to ensure he could adequately visualize the proposed design in full color. He was delighted by the initial version of this mockup with very few edits - my first draft exceeded his expectations! I did not expect such overwhelmingly positive feedback so early in the design process from a brand new client.
Hi-Fidelity Mockups for Each Page
Hi-Fi Mockups of Bootstrap Breakpoints
Upon sending Drake another batch of wireframes along with a full set of hi-fidelity mockups for each page on the website in the XXL breakpoint size, he had no edits! At this point, it was clear that Drake trusted me to respect his website and produce designs that would take his brand to the next level. From here, it was full steam ahead with translating these designs into the other breakpoint sizes. Below is a sample of what one page looks like broken down into the full range of standard screen sizes.
Behind the Scenes
Below is an ~exclusive~ behind the scenes look at my work from a bird's eye view in Adobe XD. The organized mess you see is all of the website pages in wireframe format for each breakpoint screen size. After creating wireframes of each page in each size and having them approved by Drake, I proceeded to make a full set of hi-fidelity mockups for each page in each size, ensuring that the design was consistently elegant and easy for users to quickly navigate to achieve their goals.
Results
This project is still in progress - currently in the programming stage and Drake couldn't be more excited to have it all come together. Check back later for updates!
