If I’ve learned anything in the past decade of running a software consulting company, it’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’s been 2,5 years since we last redesigned our website. The website we created in the winter of 2013 could still hold it’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.

New vs. old Infinum website.

But, our team wasn’t happy with the current state of affairs and wanted to change things. The designers wanted to create a completely new look and feel. The developers weren’t happy with the code, mostly because we’ve increased our development standards so much since then.

Everyone just felt that we’ve improved so much over the past 2,5 years and that our website should show it. We recently celebrated the company’s 10 year anniversary and felt this was a good occasion to do a redesign. So we threw caution to the wind and went for it.

Who are we doing this for?

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.

We set out with a simple, but important, process:

Analyzing existing website traffic – we went into Google Analytics and researched in-depth where our visitors are coming from and what pages are they visiting

Defining personas – who are our main visitors, why do they come to our website and what do they care about?

After that, we defined two primary personas that we’d be building the site for. All subsequent decisions would be made with these two personas in mind.

The Client – 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.

The New Hire – someone who wants to work on building digital products. He’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’s laid back and wants to work with like-minded people.

Presenting the work

Probably the most important part of our website is presenting the work we do in the form of case studies. It’s one thing to say we do good work, it’s another to actually put it up on display.

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 “inside” the Infinum website, the brand would be mixed up with the Infinum brand so we wanted to avoid that.

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’re done viewing the case would do the trick.

The JavaScript team had their job cut out for them – to make the Zoomer work as the crazy designers imagine it.

For this, we built a custom case display system we call “Zoomer”. 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 Homepage or in the Client work sections.

Our stuff

We do a lot of stuff internally that’s not billable client work. It’s either productized software (like Productive), education initiatives (like iOS/Android talks or Infinum Academy) or open source contributions.

We do this for a variety of different reasons:

it improves our internal processes

it improves our skill that we leverage later for Client Work

we use a lot of open source, so it makes sense to give back to the community

it’s fun to do so it’s kind of a creative outlet for us

Our old website didn’t talk about this part of Infinum enough, so we needed to change that. We created Our stuff where we will showcase this aspect of the company.

Careers

As we mentioned earlier, one of the most important Personas visiting our website is the New Hire. Our old website had the Careers section listed as a 2nd tier item, somewhere under the “About” section. We wanted to raise the importance of this.

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.

Selfies

And when it comes to real photos, it doesn’t get more real than this. For the People section, we wanted people to be able to express their own personality, so instead of doing professional photos of the crew, we told everyone to take a selfie of themselves.

What we learned from this is that we need to work on educating people what a selfie actually is.

Can you spot the selfie imposter?

There’s no About page

Currently, our website doesn’t have an About page, and this is on purpose.

We figured it’s kind of stupid to have a special About page, since the whole website is basically about us. The best way to find out “About” Infinum is to:

I just hate lengthy mission statements and wanted to avoid talking about how great we are and let our work speak for ourselves.

Hiring us is now even easier

We improved our Request For Quote (RFQ) form to make it even easier to Hire us 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:

About you and your business

About your project

Your deadlines

Your budget

Your target audience

The typography

A lot of thought went into selecting the right typography. This was also a mini rebranding event for us since we’re changing our base typography set.

We wanted to choose a clean typeset, but also one that has character and that would leave an impact. The idea was to avoid trendy and overused fonts like Futura, Circular and Proxima. Those are some great fonts but we wanted to try something different.

A couple of typography versions we considered before reaching our goal.

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…) that also have a strong influence on optical legibility.

Alternate versions of certain characters we use.

A continuing story

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.

Extra snazzy page footer animations.

The backend

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 Phrasing, making it simple to tweak any wording when we feel like it.

The frontend

The old website was built on Bootstrap because…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.

We didn’t want one big CSS/JavaScript framework that solves everything, but rather a loosely coupled set of different libraries, each great at its job.

As an example, some of the techniques we used include:

SUSY – the subtext for this project says it all – “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?”

BEM methodology – Block Element Modifier is a methodology, that helps you to achieve reusable components and code sharing in the front-end.

SVG images – all around we use Scalable Vector Graphics. This especially makes sense on retina displays.

The result

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.

The team behind the new website on stage at the Infinum 10-year party

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’t want to give anything away, so browse for yourself and explore.

We hope you like it, and if you have any comments, drop us a line at hello@infinum.co.

Enter to win a copy of Domains 360, A new book about the Fundamentals of Buying & Selling Domain Names by Peter Prestipino, Editor-in-Chief of Website Magazine.

Domains 360 provides a road map for success, offering not just an explanation of why domain names are so important to the digital ecosystem or how anyone can profit from an investment in them, but also incredibly practical guidance on how to choose them and powerful insights on ways in which you can make the most of domain name assets while they are under your control. The domain name space is an exciting one – full of potential and opportunity, and Domains 360 provides the insights necessary to accelerate success when it comes to buying and selling domain names for profit.

The Web Marketing Association is offering two chances for you to improve your knowledge and understanding of web marketing. You can register to win either a free conference pass to a major industry leading event, or an insightful book written by the Editor-in-Chief of Website Magazine, or both! Deadline to enter is July 7th. Visit our drawing page to enter.

eTail

August 10 – 13, 2015
Boston, MA

eTail launched in 1999, and have been dedicated to supporting the growth of the retail industry ever since. What started off as 100 people in a room discussing where this sector is headed, has lead to 2000 senior-level eCommerce executives being inspired whilst learning and developing their company as well as their careers. Learn more here.

Web 360: The Fundamentals of Web Success

Win a free copy of the book “Web 360: The Fundamentals of Web Success” the first book to examine every discipline required for building and sustaining online success.

Today is the final day to enter to win a free full conference pass to ad:tech San Francisco (May 20-21, 2015) from the Web Marketing Association. ad:tech brings together the digital marketing industry’s brightest minds to share tactics, strategies and insights to apply as soon as you’re back in the office. With tracks covering all of the hottest topics, you’re sure to leave the show with relevant and practical tools to help propel your business. 2015 IAC Award Best of Show winners will also be announced at this event!

Win a free full conference pass to ad:tech San Francisco (May 20-21, 2015) from the Web Marketing Association. ad:tech brings together the digital marketing industry’s brightest minds to share tactics, strategies and insights to apply as soon as you’re back in the office. With tracks covering all of the hottest topics, you’re sure to leave the show with relevant and practical tools to help propel your business. 2015 IAC Award Best of Show winners will also be announced at this event!

Win a free full conference pass to ad:tech San Francisco (May 20-21, 2015) from the Web Marketing Association. ad:tech brings together the digital marketing industry’s brightest minds to share tactics, strategies and insights to apply as soon as you’re back in the office. With tracks covering all of the hottest topics, you’re sure to leave the show with relevant and practical tools to help propel your business. 2015 IAC Award Best of Show winners will also be announced at this event!

In today’s selling climate, clients demand superior customer service and a one-to-one dialog with your brand. To meet clients’ growing expectations, reps must monitor customer data to understand each client’s pain points and sell to them more effectively. The amount of data available can be overwhelming. Luckily, technology is the game changer to collect all that disparate data and contextualize it for reps, so it is actionable and useful. Whereoware’s Spotlight Sales App, winner of the Web Marketing Association’s Best B2B Mobile Application at the 2014 MobileWebAwards, bundles the data, tools, and targeted training reps need to succeed into an intuitive mobile app.

Sales reps juggle meetings, clients, and deadlines and are rarely in a single place for long. We developed Spotlight to help reps be as effective on the road and from a hotel as they are from their home base. With this in mind, Spotlight is designed to be extremely agile – reps can browse products in a sales meeting and then place the order from the cab ride home, even with spotty WiFi.

Allowing reps to go about their daily activities uninterrupted, Spotlight’s engine syncs records and captures reps actions in an offline queue that fires in batches once service is available. Reps experience the sync as automatic, with no interruption to their day-to-day work or waiting for the app to catch up. The Spotlight sync is unobtrusive, but effective, transmitting everything reps need to work offline. The sync engine means that product data and product imagery is always up-to-date.

Mobility is awesome, but actionable and accessible data is often the missing puzzle piece for sales apps. Giving reps access to all the leads in the database (not limiting to leads they manually entered) was a priority. We integrated Spotlight with marketing automation tool Silverpop, giving reps access to all their leads. The sync engine is universal, so transmitting Silverpop’s lead information was simple, but with so many leads, how could reps effectively focus their attention?

A customized scoring model incorporates leads’ online behavior from Silverpop (emails opened, webpages visited, items purchased, etc.) and offline behavior (interactions in meetings). When a lead becomes hot, we push a notification to their reps’ iPad. This allows the rep to focus their attention on the right leads at the right time. We added a “sales rep grade” column in Spotlight, allowing reps to manually adjust lead scores to reflect positive or negative in-person meetings. This data gives reps a client’s full online and offline history before walking into a sales meeting. Better preparation leads to more successful meetings.

To help reps be more efficient, we also integrated Spotlight with Apple’s Core Location framework. Reps can finish a meeting early and then search for other leads in close proximity to their present location by selecting a search radius. The search results also show the customers’ lead score and profile. Spotlight than calls Apple’s framework to generate and display turn-by-turn directions using GPS.

To save money and time on returned order package (because of incorrect or missing addresses), we built Spotlight with the capability to verify addresses when an order is placed. When a rep is placing an order and filling out the address field, Spotlight calls the UPS API framework to verify whether the address is “good” or if an alternative addresses is a better match. Once an acceptable address is selected, reps can fully submit their order.

Sales reps managing territories can oftentimes end up with a lone wolf mentality. They are responsible for bringing in new clients and orders, but are working predominantly without day-to-day supervision and training. Leadership can feel powerless, as sales reps interact with customers and represent their brand without direct management oversight, and reps can feel frustrated by the lack of relevant feedback.

While, Spotlight always captured sales rep activity – products ordered, GPS location of the app, customers searched and visited etc., there wasn’t an easy way to analyze this information. In our iOS Developer’s Arrash’s words, “Data is just data until its useful, and then it’s information.” To make the data actionable, we built custom pages to deliver graphs and reporting functionality. In near real time, leadership can review reps’ sales activity (the customers visited and products shown at each visit) to pinpoint areas of weaknesses and develop solutions to improve performance. Training can be tailored to a rep’s unique needs, improving the sales team overall and increasing sales.

We joke that Spotlight lets management attend every sales meeting. Between the tools ability to please clients, empower and train sales teams, and let leadership sleep easy, Spotlight is no joke. When reps can consistently place orders and give clients a seamless, reliable buying experience, they are more productive in their day-to-day role and can focus on building positive relationships and increasing brand credibility.

Jim Rothey is Partner and CTO at digital agency Whereoware, located in the Washington D.C. metro region. With over 21 years specializing in mobile and data management systems, Jim heads up the mobile team. He has 4 software patents.

The WMA is holding a drawing for 10 copies of the book “The Language of Content Strategy” Co-produced by long-time WebAward judge Scott Abel and Rahel Anne Bailie, this collection of terms forms the core of an emerging profession and, as a result, helps shape the profession.

To enter and receive a chance to win a free copy of this book, go to the WMA Contest page

The Web Marketing Association is pleased to announce the call for entries for its 18thannual international WebAward competition.The WebAwards are the standards-defining competition that sets industry benchmarks based on the seven criteria of a successful Web site.It recognizes the individual and team achievements of Web professionals all over the world who create and maintain outstanding Web sites.The deadline for entry for the 2014 WebAwards is May 30, 2014.

A complete list of past winners and this year’s entry form can be found at www.webaward.org.

This year’s top awards will include:

·A “Best of Industry” WebAward will be given in each of the 96 industry categories, including financial services, medical, small business, travel, advertising, transportation and government.

·The competition’s highest honor, the 2014 WebAward “Best of Show,” will be given to the one site that the judges believe represents the pinnacle of outstanding achievement in Web development. Last year’s Best of Show winner was BETC Parisfor their exceptional work on Peugeot RCZ Test Driver.The site was also recognized as Best Automobile Website.

·The Web Marketing Association will also recognize the interactive agency winning the most awards in the competition with the “Top Interactive Agency” WebAward. For the second time, the Top Agency award was awarded to Risdall Marketing Group taking home 37 WebAwards.

·Interactive and advertising agencies that win a 2014 WebAward will automatically be included in the Award Winning Agency Database with a free premium listing.

Each year, many agencies and some corporations win multiple awards and deserve additional recognition. This year, we will recognize each organization that wins 6 or more WebAwards with an Outstanding Interactive Developer trophy. In 2013, there were 19 agencies recognized with this prestigious award.

Websites are judged on seven criteria, including design, innovation, content, technology, interactivity, copy writing and ease of use and receive a numeric score.Each WebAwardentry is judged against other entries in its industry category and then against an overall standard of excellence.Entrants also benefit from receiving valuable feedback from the WebAwards professional judging panel on their Web site development efforts.

Judging for the 2014 WebAwards will take place in June through August and winners will be announced in September. Judges will consist of a select group of Internet professionals who have direct experience designing and managing Web sites,–includingmembers of the media, interactive creative directors, site designers, content providers and webmasters – with an in-depth understanding of the current state-of-the-art in Web site development and technology. Past judges have included top executives from leading organizations such as Universal McCann, SapientNitro, T Rowe Price, Bridge Worldwide, Disney, Euro RSCG, Boeing, Huge, ING Direct, VML, Facebook, J. Walter Thompson, Gartner, Possible Worldwide, YUM!, Cuker Interactive, PayPal, Razorfish, Munich Re, Refinery, Ernst & Young, Magellan Health Service, R/GA, Family Cookbook Project, Saatchi & Saatchi, SAP, Starwood Hotel, and Website Magazine.

Check out our Web Marketing Association Facebook Pageand be sure to like us as we will be providing hints and tips on how to improve your chances on winning a top award though out the award program entry period.

The 2014 WebAwards are sponsored by the following leading organizations: Burst Media, EContent Magazine, ExactTarget, ad:tech conferences, Webmaster Radio, and Website Magazine. The Web Marketing Association thanks these companies for their commitment to the entire online marketing community.