For the past couple of months, our marketing team has been working on a new website that we launched today. Our company has been growing and evolving over the past few years, and we decided it was time for a website refresh to ensure that the site communicates our current brand, products, and overall direction. Plus, we wanted a site that was flexible, scalable, and easy to update and maintain. From a design perspective, I’ll outline some of the key elements of the new website and give some insight into the process of creating it.
One of our main priorities in designing this site was to ensure that our products, and the value they create for our customers, are the center of attention. We are creating exciting products that are shaping the future of television, so we wanted to show them off in the best way possible. We decided on a clean layout that incorporates a lot of white space and large, bright images. When it comes to our products we like to take a “show, don’t tell” approach.
Product Images and Videos
With our products front and center, we made sure that every image is high quality and accurately represents the most important features of our products. On several of the product pages we also created short videos that demonstrate how the products work.
For the new site, we chose to use Open Sans Light for both the body text and the main headings. Open Sans is a modern, sophisticated typeface that is optimized for print, web, and mobile interfaces. The font’s polished and elegant look represents our brand and the sophistication of our many solutions.
Spark Diagram and Mega Menu
One of the biggest design challenges we faced was figuring out a way to help visitors understand the structure of the Spark platform. Our solution was to create an interactive diagram that links to each of Spark’s suite pages. Then, from the suite pages, visitors get an overview of each product within that suite where they can click through for more information. We went through several iterations of the diagram in order to get it right. Here is an overview of how it evolved.
In addition to this diagram, we created a mega menu for site navigation that further clarifies our product structure. We decided to use a mega menu because it shows our different product lines, and how they relate to each other, while also providing a simple user experience that allows visitors to quickly navigate the site and jump to specific pages they may be looking for.
The blog is an important feature of our new site. We will be adding content regularly, so we wanted a straightforward way for visitors to find our most recent posts and locate content that interests them. Our new blog is styled in a way that is more visual than our previous blog design. Each post has a featured image that represents the topic of the blog.
Icons and Graphics
We also updated the style of our icons and illustrations for the new site. In the beginning, we tried using a few different stock icon sets, but none of them quite captured the crisp, elegant look that we were after. Ultimately we decided to create a completely custom set of thin-line icons to use throughout the site.
We are extremely happy with how the website has come together. It’s been an exciting project to work on and one that benefited from the expertise of our entire team. However, the website is never really done. We have big plans for the site and will continue to add new pages, videos, and interactive features, so be sure to visit again soon!