Flat Design: Behind the scenes of Jama’s Website Redesign

Emily Down | June 26, 2013

With Apple’s recent preview of iOS 7, flat design philosophy has been all over the web. After all the time spent on our recent web redesign, it’s fun to see everyone from Forbes to Co.Design talking about flat design.

As UX Magazine notes, there are two objectives of flat design. The first is “embracing the limits of the screen and working within those parameters rather than trying to disguise them.” In other words, revolting against skeuomorphism. Skeuomorphism is not a very friendly word, but it’s a common one in web & UI design. Gizmodo explains it best – skeuomorphism “boils down to visual trickery, or the use of details and ornamentation to make one thing look like another…Skeuomorphism in UI design usually refers to a digital element designed to look like something from the physical world.” Think of the leather stitching and green felt of Apple’s Game Center. The second objective, as explained by UX Magazine, is “Using this newfound simplicity as a starting point for streamlining designs, and making websites faster and more functional.”

Simplicity is one of our primary product goals. Products today are more complex than ever, so we built Jama to simplify the R&D process and ultimately empower all stakeholders with instant and comprehensive insight. Although we loved our old website, we realized that it was difficult to navigate and maintain. It didn’t reflect our goal of simplicity. We also wanted to make our new site responsive, as our web traffic from mobile was steadily increasing. But as text and objects move around the screen, it’s tough to manage fixed images. So, when we decided to redesign our site in April, we tried to recognize where we could streamline design, speed up the site and increase its function. How could we simplify our story so that users could get to the information they wanted faster?

As an example, let’s look at how you would find the “How to Buy” page using the old navigation. Here’s the homepage:

To get to the How to Buy page, you had to first click on “Contour”:

And then look for the “How to Buy” link below:

So with the new site, we wanted to simplify that flow. Today we have a flat drop-down menu, where you can get to the How to Buy page in one click.

One common use of skeuomorphic design across the web is through buttons. Designers add drop shadows, gradients and textures to make the web buttons you click look like the physical-world versions you push. But, as I mentioned, when you’re trying to build a responsive site, it’s difficult to create and maintain fixed images, which is how you create a skeuomorphic button. Here’s a look at our old vs. new buttons:

What do you think of our site redesign? We’d love your feedback, as we’re continually trying to improve. We’ll be sure to keep you posted as we include updates.