Responsibilities
UX Designer / Developer
Strategy, Research, Design, Development
Michelman
How a User-Centered Re-Design made Michelman's Customer Satisfaction Metrics Skyrocket
Role
Employer
Timeframe
Q3 2019 - Q1 2020
My Role
I led the UX efforts on this project, working closely with a multidisciplinary team to transform Michelman’s website. I was responsible for the overall design direction, from creating a new design system to mapping user journeys that simplified complex chemical selections.
My role included everything from hands-on coding to guiding junior designers, ensuring the final product met both user needs and business goals.
Process
Michelman’s new website launched in 2019, transforming a dated online brochure into a global, user-friendly platform that streamlined the chemical selection process across multiple markets. By creating regional sites and a comprehensive design system, we reduced support calls and improved customer satisfaction. The website became essential during the pandemic, driving increased page views and inquiries. In this case study, I’ll walk you through my role in leading this complex UX project, from design to development, and the skills I honed along the way.
Summary
Continuous Improvement
Understand the Problem
Stakeholder Interviews
Define the Problem
Persona Creation
User Flow Creation
Results
Skills & Growth
Develop the Solution
Design System Creation
Working with Jr Designers
Interface Design
PHP Development
Deliver the Solution
QA & Launch
To fully understand this case study, it'll be helpful to know more about Michelman.
Michelman is a global chemicals company based in Cincinnati, Ohio. Although it's been family run for over 70 years, Michelman is truly a global company, with locations in Europe, China, Japan, and India.
Michelman's products touch many, many different industries – from Digital Printing to Agriculture to Plastic Composites. Chances are you've probably interacted with a chemical created by Michelman if not today, at some point this week.
With literally thousands of potential combinations of Market / Application / Solution / Product, Michelman has the ability to impact and serve just about any business – which means the leads coming in need to have a streamlined process to find the exact right chemical for them.
It's Pronounced 'Michael'-'Man'
What is Michelman?
Hold Up...
- As we had suspected, customers were frustrated on the reliance on customer success representatives
- There was a clear need for users to be able to navigate the website on their own, naturally finding a handful of potential solutions for their industry – rather than trying to sift through the thousands of solutions Michelman has available
- Potential customers almost always have a clear idea of what industry their company is in, but almost never know what type of solution they're looking for
Findings
Understanding the Problem
01
Due to some legal and contractual issues, our team didn't have access to actual Michelman customers. We did, however, have unlimited access to the Michelman Customer Success teams, who acted as our proxy during our initial user interviews. We sat down for a series of 15-20 minute interviews (conducted both in-person when possible, but also over the phone and via email with some of our international colleagues). We asked what the typical customer experience was like on the website, what pain points customers have expressed, and how a new website could best serve them.
Initial user Interviews
Defining the Solution
02
It became clear that creating a clear user flow would solve a lot of business issues for Michelman. Having the user be able to find the solutions they need (rather than call Michelman to figure it out) would not only cut down on support time, but would theoretically result in fewer bounced leads.
We knew that we wanted to funnel the user through an industry-based user flow, since most of the users knew the industry their company was in. Being able to filter their experience by industry would cut down on the amount of suggested solutions by a LOT, and with continued navigation down the user flow, the user could continue to search for exactly what they were looking for.
Note: Although customers usually know the industry/market they're in, but maybe not the application type, it was important for us that the user not be forced to use a traditional search + filter approach to finding a solution. Instead we decided to use clear page design to allow the user to find their solutions naturally.
User Flow
Design
03
With the state of Michelman's online presence, I knew it would be important to be opinionated about the visual design choices made on the new website. With this being a fresh start for the company, I knew we'd need to create a design system that could be used to lay out interfaces for any new digital experiences the company might create over the next several years.
I spearheaded the creation of a new design system, designing atomic components and rules systems in Sketch. This included a type system (based on the popular 8pt type system) that could change depending on the messaging or tone used (important for multicultural experiences), a sizing system based on t-shirt sizes (again, 8pt based), colors, shadows, data visualization, atomic components, and more.
Once designed, I coded them up on a custom documentation website, and created a task runner that would auto-compile and minimize everything into a single CSS stylesheet. This would eventually hook directly into the new website, and would auto-update any time we made a change to the system.
Now we had a solid primary user flow and a thoughtful UI base to put it on – but a corporate website is much more than that. Our job wasn't done yet.
Creating a Design system
The Small Things
04
The corporate website would need to feature a lot more than just product information – we needed to include information about the company itself, its Sustainability initiatives, news, job information, and more.
This was a huge effort to collect all of this information, input it into our CMS system, and flesh out the designs for each template type. We relied heavily on a great cast of junior designers and college interns – and while I was ultimately responsible for making sure all of these tasks were completed on time, I couldn't have done it without them. I loved the opportunity I got to identify the strengths of these designers, match them with tasks that I knew they could accomplish with success, and keep the project moving forward.
leading Junior Designers
Implement
05
Michelman's ecosystem surrounding the website consisted of four main pillars – The Design System (providing the UI for the website), Processwire (our PHP-based CMS), Salesforce (where our lead forms would ultimately route to), and Product Center (a home-brewed database application that housed all of the data related to the thousands of Michelman products, as well as their properties and characteristics). Creating a successful website would ultimately mean marrying all of these systems together, navigating their requirements, and creating a seamless experience.
Since Processwire – our CMS – was written in PHP, we decided the website should also be written in PHP. Problem being – I didn't know any PHP. So over the next several months I took a few PHP crash courses, leaned on the expertise of Jason (my supervisor), and learned by trial and error. At the end of those few months, I had coded the entire website from scratch – and it was good!
Not to pat myself on the back too hard, but I think this is still the most impressed I've ever been with myself. It's one thing to believe that you're up to any challenge, but it's another to take a challenge that came seemingly from left field and handle it completely.
Pulling it all together
Outcomes
Key Results included:
- Increased Page Views and Inquiries with our newly enhanced user paths
- Improved Lead Routing with a new contact form
- Evolving Design System, which continues to expand and support Michelman experiences today
Result
- Planned and executed user interviews
- Designed user experience journeys
- Designed and developed a UI based on a brand new design system
- Managed a team of junior designers
- Learned an entirely new coding language (while on a strict deadline!)
Skills & GroWth
