Menzner Hardwoods
This hardwood company hired our team to (re)build a website and online brand presence based on research and user testing.
​
This project was completed over the course of six months and was done by myself and one other designer.
QUICK VIEW
We started this project by sending out customer surveys and doing an extensive audit of the website that was built for the company nearly a decade earlier.
Process
Customer Surveys
~ 20 Respondents
These surveys let us know that users care most about ease of use when it comes to searching the product catalog. Most users access the website via desktop. Users are looking for resources and a quote tool, both of which aren't offered on the original site.
Website Audit
Briefly describe your degree and any other highlights about your studies you want to share. Be sure to include relevant skills you gained, accomplishments you achieved or milestones you reached during your education.
Industry Audit
8 Competitor Websites
We audited 8 websites from the same industry and region as Menzner. These are sites that our client identified as competitors or inspiration. We took a look at places the websites seemed weak as well as elements of the sites that appeared interesting or viable.
Define & Synthesize
Personas, SWOT Analysis
Design Goals
After the research and data collection we created user personas and journeys. This kind of thinking helped to prepare our design goals and made clear all of the elements we would need to create for the new site. It also helped us decide what kind of design system we wanted to create.
After this first phase we presented our work to the client and got approval to begin working on the base structure of the new website as well as putting together a design system.
Information
architecture
We laid out the information architecture for the new website including a basic outline for most of the pages we planned to build. This gives us an idea of what elements we'd need to design.
Site map
We also put together a new main navigation and a site map.
DESIGN SYSTEM
Atomic Design
Atoms, Molecules, Organisms, Templates & Pages
We chose to use the Atomic Design method, as laid out by Brad Frost. Following this system we began to design the most basic elements first, then moved onto small groupings of those elements, and built up to full templates and pages.
 |  |
|---|---|
 |  |
 |  |
Wireframing
At the same time we were wireframing. Going through the pages listed in the architecture and sketching out, first on paper and then in Figma, what potential layouts could be.
Hi-Fi Wireframes
When the design system was built we published the elements in Figma and began using the library of assets to create high fidelity wireframes that would become functioning prototypes. We built the pages to be responsive, but we also built mobile versions of each page.
Prototyping
We prototyped all of the pages to be functional and put together a comprehensive user test. We tested the prototype for the first time with 10 users and recorded the sessions.
User testing
The first round of user testing has wrapped up. We tested the prototyped site with 5 employees, 5 current customers, and 5 potential clients. We then made changes to the design based on the feedback from those users.
BUILDING
Now we are building! We've chosen WebFlow as the platform we will be using and after we build out the site we will do another round of user testing.
To be continued...