DNMC Website Redesign

A UI/UX Case Study

The objective of this project was to redesign the website for a company called Dairy Nutrition and Management Consulting, LLC. The old website wasn't receiving very much use from the company's clients because the site's useful features and content were not being presented in a user-friendly or attractive way. The redesigned responsive website would need to have the following three qualities:

The Problem

DNMC's old website was clearly visually outdated. On top of this, the content was spread very thinly across the website — similar pages were not grouped together like users wanted, making navigating the website a pain.

Old Sitemap: almost all content had its own page forcing users to click through multiple pages
New Sitemap: having more densely organized content would help users find the info they were looking for and provide a greater ability to market the company's services

Research

After meeting with the client and discussing their goals, it became clear what aspects of the website needed to be totally rethought. The website's audience (client dairy workers, DNMC employees, and industry partners) were surveyed to gain insight into how they used the existing DNMC website, their opinions about it, and how they accessed the information that DNMC provides. It was clear from the results that the website was underutilized. Half of the surveyed DNMC employees only used the website as often as once a week, and two thirds of the surveyed clients didn't even use the website to access their data — they opted to have it emailed directly to them instead.

Test users were observed completing four tasks to evaluate the existing website's usability. The tasks were completed on desktop and mobile devices while wearing eye-tracking glasses to gain even more insight on what the test users were experiencing. The data gained through these tests was used to direct the redesign.

Redesigning

Based on how the users interacted with the site's content, low-fidelity and mid-fidelity wireframes were produced using the new site map. With the content grouped more intuitively, users were able to complete tasks much more quickly and effectively.

Low-fidelity wireframes were sketched for each page to ensure the division of content was practical.
These mid-fidelity wireframes were used to conduct the second round of user testing to evaluate the reorganization of content and user flows.
With the redesigned wireframe, users completed tasks 54% faster and with 36% fewer clicks. The tasks were also 29% easier based on qualitative user feedback.

For the final interactive prototype, I used soft greens and a modern typeface to give the website the updated aesthetics it needed and provide users with a more enjoyable visual experience. The new design had many more opportunities to show visitors the services offered by the company and included effective marketing tactics such as testimonials and call to action buttons.

The "About" page combined four separate pages from the existing website into one intuitive page of information: Our Mission, Contact Info, About Us, and Meet the Team.
The new "Clients" page showed the different services DNMC offers with dynamic images and descriptions.
The Client Dashboard shows critical dairy information, giving farmers a powerful tool and convincing reason to consistently use the website to access their data.
Rather than just linking external PDFs like the existing website, the new "Publications" page makes it easier for users to see recent articles published by DNMC employees.
The improved "Dairy Summit" page provides more imagery and easy to navigate information about this annual event, making the even more appealing and exciting to DNMC's audience.

Final Thoughts

In my journey of learning UX/UI design, this project marks my first completed, fully-thought-out interactive design; diving much deeper than just aesthetics and visual design. By surveying real users and conducting multiple rounds of user tests, I was able to feel confident in my design decisions, knowing that the redesigned website had a much higher level of usability. The client loved the prototype and we are looking to move forward with production in the coming months. This project taught me the importance of validating my decisions with real user testing, putting aside my personal tastes and styles in favor of research and results.

Go to Next Project