Behind the Scenes of Sorenson Media’s New Website

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.

New website:

Blog images_Spark and home

Old website:

Blog images_Old website layouts

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.

New website:

Blog images_Typography

Old website:

Blog images_Old website Typography

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.

Blog images_Spark Diagram

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.

Blog images_Mega menu


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.

New website:


Old website:


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.

New icons:


Old icons:



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!

Stacy Beatty
Stacy Beatty
Creative Designer
Stacy has worked in marketing and design for over three years. She's passionate about web design, motion graphics, and branding. She also enjoys reading, running, and oil painting.