Louisiana Department of Agriculture and Forestry

Design lead, UX design, Design system
TL;DR
The Louisiana Department of Agriculture and Forestry (LDAF) was in dire need of a complete redesign of their website. The project would include improving site responsiveness and accessibility, fixing search, redesigning their content models and architecture, and finally migrating to an all-new headless CMS platform. In the end, we were able to improve confidence levels in the site from 33% to 96% and increase page load speeds on their most sought-after page from 12.6 to 2.7 seconds.

I served as the design lead overseeing the research and content design efforts of two other designers. Additionally, I was an individual contributor providing wireframes, prototypes and a complete component library built on top of the United States Web Design System.  
Logo for Louisiana Department of Agriculture and Forestry
Illustration of mobile, laptop and desktop devices featuring homepage of LDAF website on an orange background.
The problem
Outdated everything meant updating all of it.
Built on the WordPress platform, LDAF's website was about 12 years old. It had no dedicated staff assigned to manage updates or improvements, and its outdated blog page format and confusing architecture provided a disjointed and confusing reading experience. Louisiana residents who came to the site needing to complete crucial tasks to keep their businesses or farms compliant, were met with an non-mobile friendly front end and a confusing architecture.

Our primary problem to solve came down to one thing: How might we help users accomplish the tasks they are coming to the site for in the first place. This led us to embrace the Top Task methodology which would guide our research, and provide a framework for improving the architecture and content. More often than not, users were needing to make a payment, register, or apply for something. The payment gateway was out of scope for our contract, so we focused the applications, registrations and information content the site needed to provide.
A diagram with green, yellow and blue cards connected with lines depicting responsibilities for the UX team.
I created this UX team swim lane map to keep us in sync.
My Role
Team wrangler and user advocate.
A part from providing UX/UI assets, I served as design lead facilitating cross-functional collaboration between my team, the product manager, and the developers. I set a cadence for weekly UX team syncs as well as maintaining regular one-on-one’s with the researcher and content designer. During the discovery phase, my priority was aligning the UX team’s work with the rest of the project timeline by sorting out our dependency swimlanes. This gave us an outline for where the work of content, research, and UX/UI would rely on each other. It also helped articulate when user testing would need to take place. I worked closely with the Product Manager to make sure the client goals and user needs were aligned and helped define our agile-ish process.
Web page wireframes with post-it notes containing feedback for content modeling plus one image of pencil sketches of webpage mockups.
An example of an early page layout workshop focused on content structure.
Research & Design
Analyzing top tasks was the key to improving usability.
As we got underway, we prioritized the type of research and additional resources we would need to deliver consistent, research-based KPIs during the project. Since the architecture and content needed a complete overhaul, relying solely on Google Analytics for 1-to-1 KPIs between the old and new site would be challenging. Therefore, I advocated for an increased budget for user testing and content auditing tools to help us effectively track task improvements from the old platform to the new one.

While the content designer and researcher on my team were kicking off their work, I assisted the engineering team by providing a UX audit of the various CMS platforms they were reviewing. In each case, I tested demos of each of the client-side dashboards and created walk-through videos of myself adding, publishing, and editing content to show where stakeholders may struggle with each interface. I provided the engineers a database with my notes, videos and grading of each CMS. My feedback was then included in the final tech stack proposal we presented to the client.
Post-it note session focused on sorting client priorities for their website.
The first priority session I led breaking down client concerns from the brief and the contract.
Another post-it note session focused on further clarifying website needs against client perception.
The second session I led with the goal of drafting a reflection document to be shared with the client.
Part of our team traveled to an on-sight meeting with the client office leads where they conducted card sorting exercises and learned more from each group requiring their own content space on the new site. Upon return we held a series of our own sessions further refining content and menu label language. Out of this our architecture rose from the ashes like a mighty Phoenix. While the content designer wrangled the new content model, I started pulling together page template concepts based on our new plan that would implement the C.O.P.E (Create once, publish everywhere) approach to content. This would streamline their writing process and make their website more dynamic and consistent.

Once the rest of my UX team was deep in the weeds of discovery, I started to research and plan the UI design and component library. I needed to work closely with their marketing team to align the new site with their brand guidelines. After some initial research into state-level style rules, and gathering examples of LDAF’s existing print collatoral, I pitched a few simple style tiles to test the water and get to know the client’s vision. After we nailed down a basic color palette and some early style choices (button styles, rounded corners, typography) I got to work on a larger proposal with a more complete set of components. We wanted to make sure their new front end played nicely with plans being established by Louisiana’s Office of Technology, who had recently started work on their own component library built on top of the United States Web Design System (USWDS).
Post-it note work session meant to refine the purpose of some UI components.
As we rolled out the component library we saw certain one's being used differently than our original intentions. We needed to work through use cases and make sure we understood why and if we needed to make further adjustments to our design.
Time was a factor and we didn’t want to reinvent the wheel, so we followed suit and integrated some of the existing, Louisiana state UI styles into our designs and built our library on top of the USWDS. Using this system would ensure that any team who came after us would find an open source, well-maintained set of code to manage. I built out my components and documentation in Figma, complete with a directory and guidance for patterns and use cases.

Throughout the project, I conducted various workshops and concepting sessions such as content template and strategy workshops, component reviews, and landing page brainstorming. As the project came to a close I led a decision matrix session to assist stakeholders in writing new content. This matrix was included in the final content guidance.
A diagram meant to assist stakeholders know what kind of content goes with each call-to-action UI component.
I led a session focused on creating this content decision matrix that was included as part of our content style guide.
Outcomes
Improvements for the people.
While the client had a long wish list of desires for their new website, everything fell under the simple umbrella of improving access: easier-to-understand menu labels, simplifying technical terms into common language, fixing a broken search function, creating task-focused content types, and finally updating the UI and functionality to be fast, secure, and meet AA WCAG standards.

In the end, the client was over the moon about how things turned out. They now had a new platform that allowed them to help more Louisiana residents quickly and efficiently. It was easier to update content, and their new architecture meant each department had room to grow and make their corner of the website their own.

Key improvements:

Findability
In our usability testing, users went from a 50% fail rate for finding pages and tasks on the old site, to 100% success rate on the new site.

Confidence
Confidence levels increased from 33% on the old site, to 96% on the new site.

Page loads (as of 8/17/23)
Home page has improved from 12.1s to 4.5s.
Indian Creek (their most popular page) improved from 12.6s to 2.7s.
A selection of wireframes used to determine final page styles.
Wireframes OMG so many wireframes!
A selection of components designed for the front end of the new LDAF website.
A selection of components I designed for their new design library, based on USWDS.
It's all a part of learnin'
Pick your budgets and words carefully.
There are a few key takeaways from this project. First, our whole team learned the Top Task methodology and it was an extremely helpful way to approach a complete redesign of architecture, menu labels, and page content structure. It provided a meaningful “user first” foundation that put us on common ground with our stakeholders. Government agencies are already serving the people, so this approach was very logical for them to understand and it made our recommendations more meaningful. It also allowed us to tie our research and improvement data to the specific requests laid out in the scope (as shown above). It was very labor-intensive given the amount of time we had. Concessions had to be made in the backlog and discussing these trade-offs with the client was a good exercise in being thoughtful and prepared.

Secondly, clients frequently want the moon and account execs want to land the contract and often cut corners in scoping in order to make it seem feasible to the client. But budgets must absolutely ensure you’re able to set the clients up for success longterm. It is never enough to just “build a website” for a client. To truly improve their experience as stewards of a new ecosystem, you must provide education and guidance for after the site launch. This means style guides for components and content, as well as training on the new platform. They need to know how to maintain the new content model and understand the architecture well enough to guide future changes and updates. Post-launch activities must be considered equally with everything that leads up to launch, otherwise, you ultimately fail users. After the site went live we still had a long to-do list. Everyone pitched in and worked hard to make sure the client felt confident, which was a testament to the collaborative and helpful nature of our team.

Lastly, it took us a bit of time to unify our goals at the beginning, especially when it came to how the project roadmap would unfold. We knew we wanted to avoid a waterfall process. While the team agreed that an agile workflow would have been ideal, I knew the client wasn’t familiar enough with agile to be able to sell that to the rest of their team effectively. In a client's mind, a new website generally means an expectation of a "hard launch date." We spent a lot of time in discussion with them discussing what kind of release approach would work best. In the end we did a kind of “wa-gile” approach and had to operate tri-lingually. Internally we were speaking in agile-like terms. Our point-of-contact was comfortable enough with the concept for us to use some of terminology with them in our weekly check-in. But when it came to their immediate ecosystem in the office we had to support them by speaking more plainly and talking about the launch as a more specific event. This was a great lesson in knowing the limitations of your client partners and being able to meet them where they were, and still maintain internal project integrity.

Want to work together?

If you like what you see and want to work together, get in touch!