Check out my CodePen!
Designing in a corporate environment has given me a unique ability to manage complex projects and continually improve the user experience and accessibility of a brand. When I joined Midmark in 2015 the site had not been updated in the better part of a decade, which meant it not only looked sorely outdated, but was also broken and simply inaccessible in many places.
I am creating their first digital style guide, which will be the basis of a full pattern library when a new site launches next year. See below for examples of how I was able to create new page templates and fix multiple accessibility issues to help bring the site to a better standard until it’s rebuilt.
Designing based on facts vs assumptions and hopes
In 2016 I won an Innovative Technology Team award for transforming our site’s basic lead forms into logical forms that allowed us to vastly better understand and cater to our customers. An unexpected result was learning that some customers were incorrectly using lead forms on promotional pages to redeem, causing wasted time and frustration for both the customer and sales rep. My investigation into the issue showed redemptions far outweighed lead form submissions, which meant hundreds of people were using this page differently than assumed.
My redesigned promotional landing page template has eliminated erroneous lead form submissions and saved our customers and sales reps wasted time. Before I started, the lead form was always on the landing page, and the only link to redeem was a small button hidden at the very bottom of the page. I created a new layout that removed the lead form from the landing page altogether, moved the redemption button to the very top to prevent unnecessary scrolling, and asked the customer to choose whether they were expressing interest in purchase (which would navigate to the promotion form) or attempting to redeem on a previous purchase (which would navigate to the redemption form).
Creating a smoother user journey
The technical support section of the site was extremely difficult to navigate as it was separated into three separate divisions and each division had multiple tabs for navigation in addition to a sidebar navigation. Copy was inconsistent and outdated, links were broken, and scary stock imagery prevailed. I was asked to redesign this section into an easily navigable (on any device), modern page that prioritizes the most frequently trafficked areas and illustrates our “Because We Care” motto.
While working within the confines of the site’s fixed-width space, I created a single page design that uses anchor links to quickly navigate to the specified division. I put faces to voices on the page by organizing a photoshoot of the tech service teams in Ohio, Florida and California, which I then put into a GIF within their respective division. It’s so powerful to see who you’ll be talking to! As this page has a lot of links, I utilized the divisions’ respective colors to create an ombre effect in the new “navigation” area, and created larger call-outs with images to the prioritized content.
A landing page with a goal
I noticed that our cabinetry product line landing page had such a poor/confusing UX and there wasn’t even a single CTA or link to express interest in purchasing - bad for the customer and bad for us! The product manager asked if I would recreate the page from the ground up, and design something that didn’t show off individual products but instead illustrated that with us, it’s the total solution. The new page should show the confidence a Midmark remodel will exude to customers, and the ease of which we can get it done.
This project required a bit of rebranding in the standard banner that had been used for everything. I designed an entirely new banner that immediately showcased what the product is and that Midmark is about the process, too! We had only one case study with minimal information at the time, but I went ahead with the page because I think it’s important to have a project 90% there than have either nothing, or something so poor that you might as well have nothing!