New Streng Site Set for Lift-Off

It was 1998 when we took our fledgling steps onto the interwebs with our very first website. Fifteen years and five iterations later, we’re doing it again. This sixth version of our website has replaced one that served us well since 2009, a site we loved, but a site that needed to be retired.

In the past all of our sites were nicely designed but not striking, they didn’t have the umpff, the X factor, the je ne se qua, that we as a firm desired. We had always treated our website as a side project, something to get to when business was slow, but this time around we were going to try something different.

Sometimes it can be hard for designers to design for themselves because we are always questioning… “is this the best that I can do?” This website redesign is a result of months of hard work from a strong, creative group. But don’t be fooled into thinking it was easy. Just because we have great work to show and the talent to build such a site, doesn’t mean we didn’t hit some roadblocks.

“A camel is a horse designed by a committee.” – Sir Alec Issigonis

Ain’t that the truth! Streng is made up of ten team members. That’s ten different creative minds coming together and agreeing on a final product. You see the impossibility in this, right? It’s ok, you can laugh.

How did we overcome? We argued, did the silent treatment, huffed and puffed, rolled our eyes… the usual. What? You thought I would sugar coat it and say it was all fun and games? HA! No.

In all seriousness, we are professionals but still human. Our group had to find a way to come together…

So how did we do it?

We decided we were going to hire ourselves to build our website and treat this not as a side project, but like we’d treat any project that came in the door.

Define

Our process began with completing a kickoff questionnaire that helped us dial into exactly what we were looking for. From compiling a list of sites we liked and sites we didn’t like, to generating a list of keywords that described what style we wanted our site to feel like or convey, we were able to develop a clear picture of what we wanted to accomplish.

The questionnaire compiled everyone’s input and allowed us to develop a project plan that incorporated everything we all wanted. This plan laid out the entire project from start to finish, with all of the requirements and a timeline, giving us a clear map of what we were going to build and how we were going to get there.

Design

Design wasn’t just about Streng this time. We wanted to highlight our strength with this site, and that is our work. We weren’t just working on branding Streng here, but representing the brands and projects we help to build and create, so our design needed to be simple and easy to use with large impactful images to really make our work stand out. We wanted to tell our story not through words but through the images and the quality work we do.

We began to sketch wireframes and create moodboards. The wireframes were a basic representation of the layout and content, while the moodboards helped us establish a design direction with color, typography and visual styles.

The mood board created a clear visual direction that everyone could agree on.

We then defined a grid structure and translated the wireframes into a functioning prototype to refine the layout, decide on the size of elements and understand the responsive nature of the site.

Once everyone was in agreement on the visual and structural direction of the site, we started meshing the moodboard with the prototype to create the final design. Some of our designers and developers have been itching to experiment with designing in the browser, and this seemed like a great opportunity to have at it. While the imagery was designed in Photoshop, the overall design of the site was cooked up with code.

Develop

Since much of the site was designed in the browser, this drastically shortened our front-end development time. We just needed to wrap up writing our media queries to make the site responsive, which provides an optimal viewing experience across a wide range of screen sizes. Go ahead, shrink your browser window, or pull this site up on your smartphone or tablet to check it out. We’ll wait. You’re back? Great – let’s keep going!

Before we knew it, it was time to jump into back-end development. We started by installing the shiny new v6 of Umbraco, our content management system of choice, and integrating our HTML templates, CSS, JavaScript, and image assets. The architecture of the site was laid out in the CMS and the code crunching began. Since Umbraco is an ASP.NET application, we write the majority of our code in Razor views using C#.

Even though this is our site, we went to great lengths to make everything very easy to update and maintain in the CMS so everyone in the office can contribute content without needing to know any HTML or CSS.

Deploy

Deployment isn’t just putting a site out on the interwebs and walking away. We launch it! What this means is we stay back on the ground in our command center and maintain the website. We’ll be updating with new content regularly in the blog, highlighting new projects, and being more active in social media. As time goes on we’ll go back in and tweak the site as we see fit by adding features or changing functionality as the needs arise.

It’s been a long road but a rewarding one. Building this site has not only given us insight into ourselves as a businessbut into how we can better work with our clients as they come to us with similar projects. It’s been an interesting experience to be our own client, and we are very proud of the results.