Close

Case Study

A Design System for More Efficient Production

Pattern libraries help to keep everyone on the same page with quick visual confirmation of how elements and components should look and behave.

Background

AgriLogic had two large enterprise applications used by internal business and external agent users alike. One for mapping and one for processing. Both were about to begin or in the middle of transition from legacy code to newer code and architecture. The inconsistencies, regular bug fixes, kickbacks and rework often produced an average of up to a 100 tickets at any given time. Not only did the UI need to be updated, but the process flow was in dire need of a user-centered approach. Essentially, there was no formal process or standards for user tasks. It was a daunting limitation that was seen as the company's biggest pain point with partnering agencies.

The Challenge

When I came on board, it was clear that BA's, Devs and QA's were not on the same page. Code, elements and components were disparate from one page to the next, which not only caused confusion by the end user, but also brought on a host of issues internally with team communication and cohesion. There was a lot of blame going around that was not healthy for an efficient and productive team.

High development cost was an issue as well, due to rework, kickbacks and unhappy users. Manpower resources were stretched thin and management had to work twice as hard to keep things moving forward.

Senior development staff and I worked on defining and creating front-end controls that improved the speed at which developers could develop new features.

Waterfall development made for costly revisions. By introducing LEAN UX principles and low-fi or quasi-functional prototyping, we were able to learn and iterate sooner.

I worked with a talented team of developers and designers, all focused on improving the application and the end user experience.

The Strategy

The senior staff and I worked together to develop a plan of attack. First we began by unifying the user interface look and feel, from legacy to new the new code architecture, with standards and a styleguide. Next the senior development staff and I built controls for regularly used elements and components, each with standards and consistency built in to the code. I also built a pattern library for quick visual reference by the various team members. I also created wireframe templates for BA's to use and reduce their ramp-up time for requirements.

When all of these were completed, I built a design system to house them all. One location with a code repository, standards and visual guides for each of the disciplines to use from requirements to testing.

Once I was able to assess the problems the company faced, I then had to explain to the business and other IT heads how UX fit into the organization and how they would benefit from it.

I conducted interviews with BA's, Devs and QA's to better understand their issues. Once I had a strategy together, I was able to quickly produce wireframes and lo-fi prototypes to validate, learn and iterate quickly.

Once we had made iterations from wireframes and lo-fi designs, we began prototyping hi-fidelity versions and process walk-throughs to further refine our concepts.

The Iterations

It's rare that you knock it out of the park on the first round, so we built the design system to be a flexible, living document. We knew that as we pushed out new elements, we would get feedback, learn and need to iterate based on our findings. Some of the issues we ran into ranged from controls that did not account for all scenarios, causing devs to write custom code, to low adoption rates of the new wireframe templates. We didn't educate the BA's enough and help them incorporate the templates into their workflows. We did enough research up front with the various users that our failures were minimal and easy to rectify.

Not everyone is familiar with a design system, so education was important to user adoption and business buy-in.

From login, to policy creation, everything needed to adhere to the new UI standards, user-centered design process and behavior. The details mattered.

Building a pattern library helped shape the design direction. I've found its one of the best places to figure out what works and doesn't work together visually, sooner.

The Result

The results were immediate from the first initiatives. We gained accolades from the business and end users, improved team communication between the disciplines by giving them one source of truth and reduced overall development cost and resources required. One of the best results was we now had more time and resources to focus on improvements and innovations; a dashboard, global search, mobile mapping, digital signature and other capabilities that were called "game changers" by partnering agencies.

Team Unity

BA's, Dev and QA's all had one guide to follow and adhere to. Teams could focus on solving user problems, rather than communication issues.

Efficient Use of Resources

Teams that are on the same page work more efficiently, reducing the cost and resources required for rework, kickbacks and inconsistencies.

Delighted End Users

Both the business and agent users benefited from the team's new efficiency, as more time was spent on innovation and improvement, rather than fixing inconsistencies.

Recommendation

"Shane is without a doubt the best UI/UX Designer I have ever ran across in my 15+ years as a software developer.

He and I worked together for nearly 4 years. During that time, we completed several projects together. My personal favorite project with Shane was designing a solution for an innovative controls library that simplified and streamlined the front-end development for all of our development teams. This library vastly improved the overall quality of the application while decreasing the amount of development time needed.

I was particularly impressed by Shane’s ability to transform business requirements into a beautiful, functional design and communicate his proposals to a wide range of audiences. He is passionate about providing the best possible experience for the end-user and was able to work with extremely technical developers as well as completely non-technical end-users. While some of these users were stubborn in their beliefs and feared change, Shane was able to explain the benefits of a new design in a way they could understand and get excited about instead of dreading changes to their normal routines.

Though his UI/UX abilities are top-notch, most importantly, Shane is extremely personable. He is always in a good mood. He is the kind of guy you want to have a beer with. To this day, we continue to stay in touch with each other.

Eventually, I hope we can work together again. As a leader or a team member, Shane earns my highest recommendation." - Brad Peterson, Sr. .Net Development Lead, AgriLogic