When we set out to redesign Standex Meder Electronics’ (SME) website, the core task to was to end up with a design that was simple and clean. Yet SME is the designer and maker of electronics parts that are quite complex. They have a big, worthy story to tell, and thus it lends itself to complexity. Yet our goal remained: make a clean and simple website.
“Simplicity is complexity resolved.” – Constantin Brancusi
Through months of collaboration with a smart team of professionals and leadership within SME, and by providing guidance on the best possible design for any person on any device, we ended with a new website that accomplished our core task of a clean and simple website. Here’s how we did it.
We started by re-imagining a product-focused navigation where the normal navigation environment (logo + top level pages) is there, but also a unique product group selector. Since SME customers usually come to the website with a product need in mind, we wanted to greet their expectations right away with an intuitive way to find their product without scrolling down the page.
There was but one challenge: If our product selection bar used photography, it would require someone at SME to update the product photo every time the product was changed in color or labeling, etc. Who has time for that? Our solution was to use custom illustrations for each product category. This gave SME two advantages: It removed the need to update photography any time a product changed, and it also gave them a set of product illustrations that can be used on any number of branded collateral pieces to promote products. Our approach benefited SME’s website, and also gave thought to the long-term use of these valuable product assets.
The top-level page section of the navigation bar was a collaboration effort between our entire team, where we worked to remove the unnecessary parts to encourage visitors to get to the page they sought as fast as possible.
The next area of focus was the home page of the website, where most visitors began their SME website experience. The old website had too many options for visitors to choose from. There was no clear identity of the SME brand, no call to action, and with so many options on where to click, the homepage was too complex.
Our approach was simple: With a product-focused navigation at the top in place, begin by telling people who SME is, then lower on the page provide the 4 main areas where SME sees a lot of traffic. We then end the page with blocks of information regarding interaction – a newsletter sign-up, news about SME, upcoming trade shows and events, and social media.
The result is homepage that encourages visitors to continue making their way through the website, which will hopefully keep SME’s bounce rate low for this page. The homepage is more like a hub than a destination, which is good for improving SME’s search engine optimization.
An area we spent a lot of time on was creating an intuitive approach to product discovery. On previous Standex Meder, as well as the standalone Meder websites the path to a product involved a lot of clicks and pages. We wanted to remove unnecessary pages so that people could get to their desired product as fast as possible.
The solution started with the aforementioned product selection bar at the top of every page. This puts products front-and-center. This bar, as well as the Product page and drop-down menu on the navigation bar, takes a visitor to the product category page.
From the product category page visitors can select the sub-category (where applicable), and then the specific product they are looking for.
Each product page features an immediate overview of the product, a large photo, followed by a series of drop-down accordion menus, each containing a lot of information about the product. Those menus contain everything from product detail PDFs, a video library, training resources, and more. A great deal of complexity is simplified with each product page.
To get from any page on the website to a specific SME product takes no more than 3 clicks/taps, and this is a fine example of how we designed for simplicity while not compromising anything in the integrity of the content.
Take a look…
When we started redesigning this website Google had not yet announced their mobile-friendly search changes, but it did not matter because unless our clients say otherwise, every website we create is mobile ready, including the SME website.
As part of the design process, our focus for each page was not only in how content was displayed and discovered but also in what the experience was like for the visitor on a smartphone or tablet. We designed each page template for desktop and mobile use so that the SME website was easily accessible regardless of the technology a person used to access it.
By the time Google made their change to mobile search, SME was already prepared and required no additional work to meet Google’s new criteria.
As said at the beginning, this website has a lot of complex aspects to it, which we successfully simplified without diminishing the quality or integrity of the content. There is so much more we could write and show, but the best suggestion we can make is simply to go explore the SME website yourself: Go now.