{"id":1056,"date":"2016-10-11T14:46:28","date_gmt":"2016-10-11T18:46:28","guid":{"rendered":"http:\/\/www.webaward.org\/theblog\/?p=1056"},"modified":"2016-10-11T15:37:41","modified_gmt":"2016-10-11T19:37:41","slug":"redesigning-an-agency-website-trying-to-outsmart-your-older-self","status":"publish","type":"post","link":"https:\/\/www.webaward.org\/theblog\/redesigning-an-agency-website-trying-to-outsmart-your-older-self\/","title":{"rendered":"Redesigning an agency website &#8211; trying to outsmart your older self"},"content":{"rendered":"<div class=\"__blog-text js-blog-text\">\n<div class=\"__summary\">\n<p>If I&#8217;ve learned anything in the past decade of running a software consulting company, it&#8217;s that redesigning your own website is an extremely difficult endeavour, just for the sheer fact that you are your own client with extremely high expectations. This made me cautious to any undertaking that involved a redesign of our website.<\/p>\n<\/div>\n<div class=\"__blog-content-before-break\">\n<p>It\u2019s been 2,5 years since we last redesigned our website. The website we created in the winter of 2013 could still hold it&#8217;s own (even in todays terms of quality), and we were still getting a lot of compliments for it. Also, to be very honest, we could have managed completely fine as a business with the old one.<\/p>\n<\/div>\n<div class=\"__blog-main-text\">\n<p><span class=\"blog-image\"> <img loading=\"lazy\" decoding=\"async\" class=\"alignleft\" src=\"https:\/\/infinum.co\/attachments\/bd8c7094252702e8580ef6b57b6577c1f6bc1c3c\/store\/limit\/1000\/1000\/95f77f934ccf5b1a3e48f2d323b04db6e986efe63f66aaac0818257f2f26\/feature_graphic_2x.jpg\" alt=\"New vs. old Infinum website\" width=\"500\" height=\"304\" \/> <span class=\"__caption\">New vs. old Infinum website.<\/span> <\/span><\/p>\n<p>But, our team wasn&#8217;t happy with the current state of affairs and wanted to\u00a0change things. The designers wanted to create a completely new look and feel. The developers weren&#8217;t happy with the code, mostly because we&#8217;ve increased our development standards so much since then.<\/p>\n<p>Everyone just felt that we\u2019ve improved so much over the past 2,5 years and that our website should show it. We recently <a href=\"https:\/\/www.facebook.com\/media\/set\/?set=a.10153997493977678.1073741841.365466212677&amp;type=3\" target=\"_blank\">celebrated the company&#8217;s 10 year anniversary<\/a> and felt this was a good occasion to do a redesign. So we threw caution to the wind and went for it.<\/p>\n<h2>Who are we doing this for?<\/h2>\n<p>Whenever you approach a major task like a redesign, you need to have a clear idea of why are you doing it, and what are the business goals you want to achieve.<\/p>\n<p>We set out with a simple, but important, process:<\/p>\n<ul>\n<li><strong>Analyzing existing website traffic<\/strong> &#8211; we went into Google Analytics and researched in-depth where our visitors are coming from and what pages are they visiting<\/li>\n<li><strong>Defining personas<\/strong> &#8211; who are our main visitors, why do they come to our website and what do they care about?<\/li>\n<\/ul>\n<p>After that, we defined two primary personas that we&#8217;d be building the site for. All subsequent decisions would be made with these two personas in mind.<\/p>\n<p><span class=\"blog-image\"> <img loading=\"lazy\" decoding=\"async\" class=\"alignleft\" src=\"https:\/\/infinum.co\/attachments\/3018aedde2656c80ccce78eaf568136e48db628e\/store\/limit\/1000\/1000\/802d133d741ba20d15f4eac77ae2ccefeed8fd4ac430d873b6680f427ba8\/blog_graphic_newweb_2x.png\" alt=\"Two different personas\" width=\"500\" height=\"304\" \/> <span class=\"__caption\">Defining personas helped us focus our efforts during the entire redesign process.<\/span> <\/span><\/p>\n<ul>\n<li><strong>The Client<\/strong> &#8211; someone who wants to build a digital product. He\/she may be a manager at an established company, running their own startup or working at an agency. The Client is looking for a quality design\/development shop that can build the product or work in cooperation with his\/her team. The Client has a rough vision of the product and a dedicated budget.<\/li>\n<li><strong>The New Hire<\/strong> &#8211; someone who wants to work on building digital products. He&#8217;s interested in the type of work we do (iOS\/ Android\/ Rails\/ JavaScript\/ UX\/ UI Design). He may have experience, he may be in college or he may work with different technologies and is looking for a career change. He&#8217;s laid back and wants to work with like-minded people.<\/li>\n<\/ul>\n<h2>Presenting the work<\/h2>\n<p>Probably the most important part of our website is presenting the work we do in the form of case studies. It&#8217;s one thing to say we do good work, it&#8217;s another to actually put it up on display.<\/p>\n<p>From a branding perspective, we wanted each case study to be branded according to the clients (or projects) individual brand. If we were to present this work &#8220;inside&#8221; the Infinum website, the brand would be mixed up with the Infinum brand so we wanted to avoid that.<\/p>\n<p>Also, we wanted to make it easy for the visitor to jump in and out of different case studies. We thought the idea of having a case study pop out, and then pop back in after you&#8217;re done viewing the case\u00a0would do the trick.<\/p>\n<p><span class=\"blog-image\"> <video autoplay=\"autoplay\" loop=\"loop\" width=\"300\" height=\"150\"><source data-retina-src=\"\/\/assets.infinum.co\/attachments\/afb6bc065c41c3fe50659e3951b9b83a5cf60592\/store\/e763a75b470d5e7a1036280f06f4c06ab9e5665f4be41bc3db487b4b2201\/03_modal_optim.mp4\" src=\"\/\/assets.infinum.co\/attachments\/afb6bc065c41c3fe50659e3951b9b83a5cf60592\/store\/e763a75b470d5e7a1036280f06f4c06ab9e5665f4be41bc3db487b4b2201\/03_modal_optim.mp4\" type=\"video\/mp4\" \/><\/video> <\/span><\/p>\n<p><span class=\"blog-image\"><span class=\"__caption\">The JavaScript team had their job cut out for them &#8211; to make the Zoomer work as the crazy designers imagine it.<\/span> <\/span><\/p>\n<p>For this, we built a custom case display system we call &#8220;Zoomer&#8221;. We prototyped the interactions and animations for Zoomer in Keynote and Adobe Flash (yes, Flash is still good for something) and we immediately fell in love with the concept. You can see it on our <a href=\"https:\/\/infinum.co\/\">Homepage<\/a> or in the <a href=\"https:\/\/infinum.co\/client-work\">Client work<\/a> sections.<\/p>\n<h2>Our stuff<\/h2>\n<p>We do a lot of stuff internally that\u2019s not billable client work. It&#8217;s either productized software (like <a href=\"https:\/\/productive.io\" target=\"_blank\">Productive<\/a>), education initiatives (like iOS\/Android talks or Infinum Academy) or open source contributions.<\/p>\n<p>We do this for a variety of different reasons:<\/p>\n<ul>\n<li>it improves our internal processes<\/li>\n<li>it improves our skill that we leverage later for Client Work<\/li>\n<li>we use a lot of open source, so it makes sense to give back to the community<\/li>\n<li>it&#8217;s fun to do so it&#8217;s kind of a creative outlet for us<\/li>\n<\/ul>\n<p>Our old website didn&#8217;t talk about this part of Infinum enough, so we needed to change that. We created <a href=\"https:\/\/infinum.co\/our-stuff\">Our stuff<\/a> where we will showcase this aspect of the company.<\/p>\n<h2>Careers<\/h2>\n<p>As we mentioned earlier, one of the most important Personas visiting our website is the New Hire. Our old website had the <a href=\"https:\/\/infinum.co\/careers\">Careers<\/a> section listed as a 2nd tier item, somewhere under the &#8220;About&#8221; section. We wanted to raise the importance of this.<\/p>\n<p>More importantly here was to convey the work atmosphere, and the way we take care of everybody (gym, health checks, ..). So, an imperative here was to use only real photos, no stock photography. No bullshit, just the real stuff.<\/p>\n<h2>Selfies<\/h2>\n<p>And when it comes to real photos, it doesn&#8217;t get more real than this. For the <a href=\"https:\/\/infinum.co\/people\">People<\/a> section, we wanted people to be able to express their own personality, so instead of doing professional photos of the crew, we\u00a0told everyone to take a selfie of themselves.<\/p>\n<p>What we learned from this is that we need to work on educating people what a selfie actually is.<\/p>\n<p><span class=\"blog-image\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/infinum.co\/attachments\/4bb0f4b38636a73bb17f600810d89d395fc902c8\/store\/limit\/1000\/1000\/3ce7f1edfdbca7f70f9b43da3dc5764860fd600d74be243b01296ba04160\/People__Infinum_2015-07-27_04-21-58.jpg\" alt=\"Selfies\" width=\"500\" height=\"304\" \/> <\/span><\/p>\n<p><span class=\"blog-image\"><span class=\"__caption\">Can you spot the selfie imposter?<\/span> <\/span><\/p>\n<h2>There&#8217;s no About page<\/h2>\n<p>Currently, our website doesn&#8217;t have an About page, and this is on purpose.<\/p>\n<p>We figured it&#8217;s kind of stupid to have a special About page, since the whole website is basically about us. The best way to find out &#8220;About&#8221; Infinum is to:<\/p>\n<ul>\n<li>check out our <a href=\"https:\/\/infinum.co\/client-work\">Client work<\/a><\/li>\n<li>see\u00a0the <a href=\"https:\/\/infinum.co\/people\">People<\/a> you&#8217;ll be working with (either as a client or potential employee)<\/li>\n<li>read our <a href=\"https:\/\/infinum.co\/the-capsized-eight\">blog posts<\/a><\/li>\n<\/ul>\n<p>I just hate lengthy mission statements and wanted to avoid talking about how great we are and let our work speak for ourselves.<\/p>\n<h2>Hiring us is now even easier<\/h2>\n<p>We improved our Request For Quote (RFQ) form to make it even easier to <a href=\"https:\/\/infinum.co\/hire-us\">Hire us<\/a> for any projects you might have. We scaled down the number of questions, while staying true to the facts we need to know before engaging in a project:<\/p>\n<ul>\n<li>About you and your business<\/li>\n<li>About your project<\/li>\n<li>Your deadlines<\/li>\n<li>Your budget<\/li>\n<li>Your target audience<\/li>\n<\/ul>\n<h2>The typography<\/h2>\n<p>A lot of thought went into selecting the right typography. This was also a mini rebranding event for us since we&#8217;re changing our base typography set.<\/p>\n<p>We wanted to choose a clean typeset, but also one that has character and that would leave an impact. The idea was to avoid <a href=\"http:\/\/www.typewolf.com\/blog\/most-popular-fonts-of-2014\" target=\"_blank\">trendy and overused fonts<\/a> like Futura, Circular and Proxima. Those are some great fonts but we wanted to try something different.<\/p>\n<p><span class=\"blog-image\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/infinum.co\/attachments\/674d7b99a596a65e7085ff42d75b2a7d087f5bf4\/store\/limit\/1000\/1000\/51c7b2294f5796ab39957cb5458207ad1b3b2b9295c6959a284b339b5f12\/05_2x.jpg\" alt=\"Typography considerations\" width=\"500\" height=\"304\" \/> <\/span><\/p>\n<p><span class=\"blog-image\"><span class=\"__caption\">A couple of typography versions we considered before reaching our goal.<\/span> <\/span><\/p>\n<p>After bouncing around a couple of ideas and testing a number of different fonts, we fell in love with the monolinear geometric grotesque typeface GT Haptik. It has a regular and rotalic style, and includes alternate versions of certain characters (like G, C etc&#8230;) that also have a strong influence on optical legibility.<\/p>\n<p><span class=\"blog-image\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/infinum.co\/attachments\/d6264e36f20434040b6db684492fad30323dd805\/store\/limit\/1000\/1000\/69b358469b9722e26265aefc1179cc012a388070744af8c9d0a085c5e6a5\/alternate.png\" alt=\"Alternate character versions\" width=\"500\" height=\"304\" \/> <\/span><\/p>\n<p><span class=\"blog-image\"><span class=\"__caption\">Alternate versions of certain characters we use.<\/span> <\/span><\/p>\n<h2>A continuing story<\/h2>\n<p>We wanted a feeling of continuation on each page, so after you get to the bottom of a page, you can continue the story by following the prominent links in the page footer. We wanted to emphasize this with extra-snazzy page transitions, and this is the part where the designers really pushed our JavaScript developers to the limits.<\/p>\n<p><span class=\"blog-image\"> <video autoplay=\"autoplay\" loop=\"loop\" width=\"300\" height=\"150\"><source data-retina-src=\"\/\/assets.infinum.co\/attachments\/0eeeba59d210c74b6bcf0353176c2aedb956b888\/store\/c1a4c83f9ad54dc668b2206c0c796adaff08809e14ab69d7a7359ff9ad08\/04_fold_optim.mp4\" src=\"\/\/assets.infinum.co\/attachments\/0eeeba59d210c74b6bcf0353176c2aedb956b888\/store\/c1a4c83f9ad54dc668b2206c0c796adaff08809e14ab69d7a7359ff9ad08\/04_fold_optim.mp4\" type=\"video\/mp4\" \/><\/video> <\/span><\/p>\n<p><span class=\"blog-image\"><span class=\"__caption\">Extra snazzy page footer animations.<\/span> <\/span><\/p>\n<h2>The backend<\/h2>\n<p>For the backend, we use a custom CMS. Apart from serving blog posts, it also handles RFQs, Client surveys, Event signups and a couple of other doo-dads. All the copy editing is done via <a href=\"https:\/\/github.com\/infinum\/phrasing\" target=\"_blank\">Phrasing<\/a>, making it simple to tweak any wording when we feel like it.<\/p>\n<p>We use <a href=\"http:\/\/aws.amazon.com\/cloudfront\/\" target=\"_blank\">Amazon Cloudfront<\/a> to serve our images quickly to visitors and also <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/module\/\" target=\"_blank\">Google PageSpeed Module<\/a> for further optimization.<\/p>\n<p><span class=\"blog-image\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/infinum.co\/attachments\/53d3d7b7b97372b90fc046c9ccee4466cb311d89\/store\/limit\/1000\/1000\/ab864f7bd6403f97a300b044a057f9d79f297cb8754a230344099a285e73\/Truck_Parking_Europe__Infinum_2015-07-27_04-42-17.jpg\" alt=\"Phrasing in use on the Infinum website\" width=\"500\" height=\"304\" \/> <\/span><\/p>\n<p><span class=\"blog-image\"><span class=\"__caption\">Phrasing is an open-source library for live editing copy on websites.<\/span> <\/span><\/p>\n<h2>The frontend<\/h2>\n<p>The old website was built on <a href=\"http:\/\/getbootstrap.com\/\" target=\"_blank\">Bootstrap<\/a> because&#8230;well, everything was built in Bootstrap back then. In the meantime, Bootstrap proved not so great at doing everything, so we ditched it and went with a custom set of frontend technologies that would be more flexible and easier to maintain in the future.<\/p>\n<p>We didn&#8217;t want one big CSS\/JavaScript framework that solves everything, but rather a loosely coupled set of different libraries, each great at its job.<\/p>\n<p>As an example, some of the techniques we used include:<\/p>\n<ul>\n<li><a href=\"http:\/\/susy.oddbird.net\/\" target=\"_blank\">SUSY<\/a> &#8211; the subtext for this project says it all &#8211; &#8220;CSS Libraries are a bloated mess of opinions about how to do your job. Why let the table-saw tell you where to put the kitchen?&#8221;<\/li>\n<li><a href=\"http:\/\/callmecavs.github.io\/layzr.js\/\" target=\"_blank\">Lazyr<\/a> &#8211; Lazy loading of images keeps everything running smoother, especially on mobile<\/li>\n<li><a href=\"https:\/\/en.bem.info\/\" target=\"_blank\">BEM methodology<\/a> &#8211; Block Element Modifier is a methodology, that helps you to achieve reusable components and code sharing in the front-end.<\/li>\n<li>SVG images &#8211; all around we use Scalable Vector Graphics. This especially makes sense on retina displays.<\/li>\n<\/ul>\n<h2>The result<\/h2>\n<p>It took us about 2.5 months of working on the website in tandem with client work to get it out the door. We launched the beta version at our 10-year anniversary party. A couple of our closest friends and partners got a glimpse, gave us feedback, and we improved on that feedback.<\/p>\n<p><span class=\"blog-image\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.infinum.co\/attachments\/62a57863cf4a73a331d6def38fb5ea49e51a8d3f\/store\/limit\/1000\/1000\/0d70dbaaff8482693512f77a827e1dc4ddf4bc9cb196955e400dbe8cf861\/Monosnap_2015-07-22_13-08-42.jpg\" alt=\"The team behind the website\" width=\"500\" height=\"304\" \/> <\/span><\/p>\n<p><span class=\"blog-image\"><span class=\"__caption\">The team behind the new website on stage at the Infinum 10-year party<\/span> <\/span><\/p>\n<p>The devil is in the details, and there is a bunch of special details scattered all around the site for you to find. We don&#8217;t want to give anything away, so browse for yourself and explore.<\/p>\n<p>We hope you like it, and if you have any comments, drop us a line at <a href=\"mailto:hello@infinum.co\">hello@infinum.co<\/a>.<\/p>\n<\/div>\n<\/div>\n<p><span style=\"border-radius: 2px; text-indent: 20px; width: auto; padding: 0px 4px 0px 0px; text-align: center; font: bold 11px\/20px 'Helvetica Neue',Helvetica,sans-serif; color: #ffffff; background: #bd081c no-repeat scroll 3px 50% \/ 14px 14px; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer; top: 268px; left: 20px;\">Save<\/span><\/p>\n<p><span style=\"border-radius: 2px; text-indent: 20px; width: auto; padding: 0px 4px 0px 0px; text-align: center; font: bold 11px\/20px 'Helvetica Neue',Helvetica,sans-serif; color: #ffffff; background: #bd081c no-repeat scroll 3px 50% \/ 14px 14px; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer;\">Save<\/span><\/p>\n<p><span style=\"border-radius: 2px; text-indent: 20px; width: auto; padding: 0px 4px 0px 0px; text-align: center; font: bold 11px\/20px 'Helvetica Neue',Helvetica,sans-serif; color: #ffffff; background: #bd081c no-repeat scroll 3px 50% \/ 14px 14px; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer;\">Save<\/span><\/p>\n<p><span style=\"border-radius: 2px; text-indent: 20px; width: auto; padding: 0px 4px 0px 0px; text-align: center; font: bold 11px\/20px 'Helvetica Neue',Helvetica,sans-serif; color: #ffffff; background: #bd081c  no-repeat scroll 3px 50% \/ 14px 14px; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer;\">Save<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If I&#8217;ve learned anything in the past decade of running a software consulting company, it&#8217;s that redesigning your own website is an extremely difficult endeavour, just for the sheer fact that you are your own client with extremely high expectations. This made me cautious to any undertaking that involved a redesign of our website. It\u2019s [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[12,6,2],"tags":[],"class_list":["post-1056","post","type-post","status-publish","format-standard","hentry","category-award-winning-agencies","category-interactive-briefing","category-web-marketing-association"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.webaward.org\/theblog\/wp-json\/wp\/v2\/posts\/1056","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webaward.org\/theblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webaward.org\/theblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webaward.org\/theblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webaward.org\/theblog\/wp-json\/wp\/v2\/comments?post=1056"}],"version-history":[{"count":6,"href":"https:\/\/www.webaward.org\/theblog\/wp-json\/wp\/v2\/posts\/1056\/revisions"}],"predecessor-version":[{"id":1062,"href":"https:\/\/www.webaward.org\/theblog\/wp-json\/wp\/v2\/posts\/1056\/revisions\/1062"}],"wp:attachment":[{"href":"https:\/\/www.webaward.org\/theblog\/wp-json\/wp\/v2\/media?parent=1056"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webaward.org\/theblog\/wp-json\/wp\/v2\/categories?post=1056"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webaward.org\/theblog\/wp-json\/wp\/v2\/tags?post=1056"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}