Exploring Our Process: Zymetis Redesign from Start to Finish

Samantha Warren, ON THE TOPIC OF Behind the Scenes

Sep17 12

One of my favorite aspects of being a web designer is the opportunity to learn about a wide variety of interesting clients. Zymetis, a company that is as passionate about biotechnology and the environment as I am about design, has been no exception. Every meeting with them was an enthusiastic adventure into the world of science and sustainable fossil fuel alternatives. The project gave me new insight into the world of bio-fuels.

From the very beginning, Zymetis was an active participant in our process; every member of the team played a role. In the early stages of our process, our project manager (April), design director (Tom), and we designers all collaborated intensely through brainstorming and planning sessions before creating inspiration boards as a first step in our design process. We turned to offline sources for ideas, and I all tore into environmental and science magazines to better understand the audiences for this site. We assembled a collage of interesting artifacts and displayed them in our "Inspiration Room," to help guide our process and to stimulate more ideas. April said:

I don’t always have the opportunity to see the behind-the-scenes part of the creative process. That space between me asking "please do this" at the beginning and saying "that’s fantastic, thank you" at the end is where all the cool design magic happens. I have been really excited to see how our design team is working to bring PMs and clients into that process by breaking it up into several steps with different things to look at along the way. — April Mohr, Project Manager

The next step in our process was to create mood boards based on adjectives and themes found consistently exhibited in the "inspiration board." Mindy, Tom and I divvied up the adjectives and feelings, went away for a little while, and came back to the table with mood boards. Having three separate designers participating in the mood boards helps to diversify the styles exhibited between each board. In this case, Mindy took a wonderfully soft and soothing approach, Tom used shapes and graphics, and I used a lot of texture.

We ended up with a composition that used elements of all three and reflected the mission and values of Zymetis as determined by our point of contact there, Scott Laughlin.

April, Samantha and I had a lot of fun exploring design options using a very practical and guided process. Within a week, we had a look and feel that really captured the essence of the company. This made the rest of the project easy. We all knew what we were after and what it would take to get there.
— Scott Laughlin, Client (Zymetis CEO)

By this time, I had learned a lot about the science behind making bio-ethenol. Accurately reflecting the science behind the product through my choices in imagery was imperative. I wanted to show the marriage of nature and science as the focal point on the homepage, so after a bit of a treasure hunt and several Viget employees checking their yards, we found poplar leaves. Why Poplar leaves? The tulip poplar is an otherwise-untapped source of biomass fuel that can now be efficiently harvested using Zymetis’ unique process.

Below is a before-and-after comparison. Please check out the final site here, which was built-out by Keith using mad ninja HTML/CSS skills running smoothly on the Expression Engine CMS.

[VS.]

Michael Espinosa said on 09/18 at 11:22 AM

Site looks great! Good work.

Patrick Haney said on 09/18 at 11:29 AM

It’s great to see not only your process of getting to the final design (which is really attractive, by the way), but also how much you invested in learning about the client and the goals of the client in order to deliver the right solution. Design isn’t just about making things pretty and sometimes I think people forget to tailor the website to the client/product it belongs to.

Qui Diaz said on 09/18 at 12:01 PM

Great work (as always). I really appreciate how, when you’ve got the time, design seems like writing a poem. You have to take time to discover, bring in others, filter, and then finalize. Great design cannot be undertaken overnight or outside of the strategic process. Your results are the case in point!

José Mota said on 09/18 at 12:30 PM

I’m actually not used to that kind of mood boards and inspiration process at all. Again, your brilliance outstands! Great job!

Jessica Avison said on 09/18 at 02:59 PM

Hey, this looks familiar. :)

I really love Viget’s design/inspiration process, and learning about it has helped me make changes to the way I work. Love the new site!

matthijs said on 09/22 at 06:28 AM

The url gets me to some placeholder page, also trying to throw a popup at me?

Nice to read about the process though!

ed said on 09/22 at 10:14 AM

The title says “start to finish” but it looks like you only covered the start portion. You outlined how you can up with your initial theme and tone, but to me i would think that a lot of sketching, discussions and even rejections came in between the mood boards and the final design.

How did that particular grid come about, what about the type explorations? What design challenges did you guys have to overcome? I know of a lot of design students that visit this blog and I’m sure they would love to hear about the rest of your process’s.

Samantha Warren said on 09/22 at 11:44 AM

@ed

Thanks for all the questions, it is true that there are a lot of other details that I could have included in this post, including type explorations, UX work, and client parameters and challenges. Some of those details we look to expose over time in more specialized posts addressing those topics on future projects. I, for one, could probably write an entire post on just how I chose the type for this project. This post was written to give a more overarching synopsis of the team efforts from start to finish. As I explained in the post there was a lot of collaboration between the client and the designers on this project, we had several rounds of revisions, but for the sake of brevity I spared the readers many of those details. Every aspect of this site redesign was goal-oriented, taking very specific needs of this client and fulfilling them to tell their story.

Some challenges that we faced for this project included:

Revamping this client’s brand rather than reinventing it. We needed to work with their current logo and integrate it seamlessly into the design.

The time-line was 10 weeks. From start to finish we needed to have this site built and ready in that period of time, with any project time is a factor.

Understanding the science behind the technology and what visuals accurately represented it. Just choosing any “sciency” or “bio-friendly” imagery from a stock site would not cut it for this project. Everything had to accurately reflect their business, which required us getting to know their business through very detailed conversation and photographs of their laboratory.

Thanks for your comment, we hope to reveal other aspects of our process in the future.

Ann Edwards said on 09/26 at 03:19 PM

A few more questions:

On average, how many hours would you say a full design process (not including any development time) takes using this method?

I’m under the impression that the mood/inspiration boards decrease the number of hours spent on design. Any idea by how much it decreases?

Thanks for all the wonderful insight!

arn-E said on 10/12 at 07:00 PM

Great post, thx!

PS: wouldn’t mind that whole ‘other’ one on the choice of typeface. ;)

David Gortler said on 12/31 at 05:10 AM

Very inspiring post and I really loved that inspiration board.
You really are a good web designer…

Viren Naroola said on 12/31 at 05:19 AM

I live in Dubai and was going thru some sites for a client, interested in alternative energy. Zymetis was one of the site I visited, and was extremely pleased and impressed the way the site is designed and presented.

Samantha although we are far away from each other, but I promised to take your advice on a new venture, which I am planning to start soon.

What a difference between old and new site, amazing, congratulations.