Usability: Redesigning a Services Page

A severely outdated website presented unique challenges in accessibility, information architecture and usability. The Tech Service section of Midmark’s site was one of the most confusing places for users because it boasted multiple pages, links, tabs, multiple navigation menus and text that failed basic accessibility standards. I researched, designed and developed this section of the site.

Before the Redesign

This image shows the medical support section with its stock imagery, navigation menus, tabs and links. The dental and animal health divisions each had a similar section of the site.

screenshot of old medical support menus

After the Redesign

The redesign focused on clarity and highlighting several key points for each division, all on one responsive page, while staying within divisional branding. Additionally, because Midmark’s motto was “Because We Care,” I wanted to show who “we” were, and that we’re right here in Ohio.

I replaced the scary stock images with photos of our people in the banner and in rotating galleries within each section. Each section had anchor links for smooth scrolling or direct linking from other pages.

mockup of new support landing page

Architecture & wireframe

I met with different departments several times to get an understanding of what their customers were asking for and what issues they’d had with poor user experience complaints.

The complexity of years of additions was somewhat baffling, but once I nailed down the intended user journey and integrated that with the essential information for the page, it was much easier to whiteboard a hierarchy and translate to a wireframe. This was before Adobe Xd, so I used Photoshop for wireframes & mockups.

Approvals & Development

I organized photoshoots in three of our locations across the country to personalize the page.

Although this wasn’t in the realm of requiring regulatory approval, I still utilized Proof HQ at the end to document approvals from key stakeholders.

I used CSS and HTML within SiteFinity to build the page. Between approvals I was building and testing along the way to ensure there were no major issues once the build was complete.

Lessons Learned

After I was finished, the team tested again on various devices and browsers.

In the weeks and months after launch, I continued to check Google Analytics as well as communicate with the team to see if we needed to make any tweaks to the design. Happily, all continued to be good and it was a highly successful project!

Solid communication was the biggest takeaway. OK, so I already knew this was vital. But this project really cemented just how important it is to do your research and talk to as many people as possible. There is a big difference between “too many hands in the pot” and getting feedback from a variety of people involved, and this project gave me a better understanding of how to manage the needs of multiple stakeholders.

Looking back on this page I can’t help thinking how much easier it would have been with the magic of CSS Grid!