WorkAbout
DNMC website on a laptopDNMC mobile website on an iPhone
DNMC logo

Overview

Based in Fort Collin, Colorado, DNMC is a group of dairy industry professionals that offer nutrition and management consulting to dairy farms across the globe. Looking to refresh their brand and digital presence, DNMC hired me to redesign their website. While it has yet to go into production, I worked closely with the company's founder to develop a responsive prototype that would provide a more compelling experience for existing and potential clients.

The Problem

The DNMC website was stylistically outdated, inefficiently organized, and difficult to navigate, causing clients and employees to underutilize the website's tools and content.

Target Audience

Clients (dairy farmers), DNMC Employees, and Industry Partners.

My ROle

Product Designer (Research, User Testing, Visual Design, Prototyping)

Tools Used

Adobe XD, Tobii eye-tracking glasses, Rotato, Google Forms

Time Frame

October - November 2019

Research

Surveys + User Testing

Old DNMC website on desktop and mobile.
The original landing page on desktop and mobile.

To become acquainted with the existing website, I conducted a thorough audit and created a site-map, making sure to explore every nook and cranny. Information was spread thinly across the navigation and there were very few interactive elements, creating a particularly static experience.

Old DNMC site-ma

After meeting with DNMC to learn more about the intended purpose of their website, I interviewed several DNMC employees, clients, and industry partners to learn more about how the website was being used. It was clear from these interviews that the website was being underutilized. Half of the employees only used the website about once a week and two thirds of clients didn't even use the website to access their data – opting to have it emailed to them instead. As shown in the sitemap, this data – in the form of reports and analytics – was buried behind multiple pages in an outdated digital-filing system.

In addition to the interviews, I conducted hands-on testing with users who were unfamiliar with the website. Users completed four tasks while wearing eye-tracking glasses. The eye-tracking results, time taken to complete each task, and general observations were recorded to direct the redesign.

ideation

Information Architecutre + wireframes

Redesigned DNMC site-map.

I found that all of the website's content could be reorganized under just 5 pages by grouping similar topics together. For example, About, Our Team, Mission Statement, and Contact could all be combined into one About page. The landing page needed a massive overhaul, as it had no marketing content or calls to action. I sketched out what each page might look like to make sure I wasn't leaving out any important content. Then I moved on to a mid-fidelity prototype. which I used to conduct a second round of user testing to see if my new information architecture provided a better user experience than the original website.

DNMC website sketches

validation

prototyping + user testing

DNMC mid-fidelity wireframes.

I presented a new set of users with the same four tasks from my initial testing but this time on the new prototype. With the redesigned prototype, users completed tasks 54% faster and with 36% fewer clicks. They also rated the tasks 29% easier on a qualitative feedback. The only task that had a slightly higher average click number and insignificant time difference was Task 1, learning about one of the DNMC team members. That information was now categorized under About rather than Our Team, so while there wasn't an improvement in click number, it was location was more logical and consistent to the overall information architecture.

User testing results showing an improvement from the redesign.

Implementation

Final Design + Prototype

Having validated my mid-fidelity prototype, I used it as a framework to design the final prototype with the company's imagery, rewriting much of their digital marketing material to generate more engagement. The mobile version followed the same structure to provide users with a seamless responsive experience.

Retrospective

What I Learned + Final Thoughts

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 will hopefully be able to move forward with production in the near future. 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.

check out another project

A captivating game prototype that helps young students practice math in the classroom and at home.
A travel planning app prototype that helps users get the most out of their trips.

Don't be shy, introduce yourself!

Copyright © 2020 Jake Martin