September 17, 2013

Building the New 2Checkout Website

Posted by Simon Paul Category Icon2Checkout Category IconConversions & UX

As companies and technology evolve, so do the demands of their corresponding websites. Industry trends such as responsive design enhanced interaction and engaging content strategies help drive website evolution. At the same time company business goals, architectural shifts, and product improvements change the character of a website. At 2Checkout, these were the elements that brought us to the decision to rebuild our website based on three main goals: 1) Embrace mobile with Responsive Design 2) Facilitate constant change and reduce road blocks in implementation and 3) Fine tune content and enhance content delivery.

While there were many layers involved in the process of rebuilding our website, in this post I will focus on the three primary goals and how we reached them.

1. The Design - Responsive or bust!

The past few years we have seen a revolution in how we look at the web. Mobile devices and the overall dynamic use of the web have forced the industry to re-examine how websites are designed. Designers have had to accept the inherently flexible environment of the web and do away with previous techniques. Web 2.0 brought on the influence of traditional typography design. Along with it came the standard 960px grid, which was developed so designers could effectively implement a more traditional design technique. However, that rigid grid is no longer effective with the varying screen sizes and proportions used today. To address the dilemma of varying screen sizes, in 2010, Ethan Marcotte coined the term Responsive Web Design (RWD) describing a practice of fluid layouts and navigation. The web community has since embraced the concept and has been re-energized by creating mobile friendly websites.

The Process

When our team began working on a site redesign in the spring of 2013, it was clear that RWD had to be a key part of the project. Every day, our company interacts with thousands of customers across the globe. In many countries, mobile phones and tablets have become primary tools to access the internet. Our website needed to be optimized for these devices. But what exactly did that involve for the design process? Think mobile first.

Even if you already have a standard desktop based website or design starting out, your team always needs to focus on how it will be represented on mobile. This will expose areas in your design that are unnecessarily complex, as they will become increasingly difficult to address as you shrink the layout. This is also a great opportunity to trim the fat. As we designed each page on our site, we went through the motions (adjusted layout, images, element styles, etc.) to adapt it to mobile, tablet, and desktop. In many cases we were able to develop a design pattern for how certain blocks of content fell into place. Unlike projects in the past, the design mockups were never really finalized. Instead, they were an ongoing part of the development process. Building code as you go along helps you discover issues in the design and adapt to it accordingly.

Our website with responsive layout for mobile and desktop.

The Code

Developing a responsive website may sound like a lot of extra work. But in many cases it’s only about 15-20% more code. Media queries and a fluid grid system are the key elements needed in your code. They create a structure allowing your content to flow within the layout. Your team then needs to develop a navigation system for the header and footer that adjusts according to the screen size. Keep in mind that most mobile devices (even desktops) are touch enabled. So your menus should be easy to navigate with a finger. A minimum area of 40x40 pixels is usually required to have a safe contact area for fingers. On mobile devices, JavaScript or other methods may be used to show or hide elements of the menu as long as they will work with touch. Stay away from menu elements dependent on hover events or your users will become very frustrated as they keep touching their screen with no results.

Once we began developing the code for our website, we focused on the navigation first. It was very important to have the navigation optimized and tested. Users are quick to leave a website if they find the navigation difficult to use or broken. Our page templates consisted of three main elements, the header, footer, and content. The content section was usually broken up in rows which define styles based upon their background color, etc. On our website, a lot of our content just naturally fell into place as it was placed in the grid system. Some minor tweaks were needed on a page by page basis. Some simple tricks using float right vs. float left can change what order various content blocks appear in at different screen sizes. Overall, the responsive nature of the website did not add a significant amount of time to the process.

There are various tools like Chrome’s inspector tool that can really help your team troubleshoot layout issues as the size of the view-port changes. Testing involved various teams checking for functional issues as well as layout problems on various devices. It is very important you test on different devices as some mobile browsers have odd bugs or issues rendering different elements. It’s also a good way to make sure the design actually works from a user’s perspective. Maybe a button is too small or a menu section too hard to find. Once finalized, a responsive website is quite rewarding. Users now have complete and optimized access to your website regardless of what device they are using.

2. Technology - Speeding up the process

As the nature of the internet continues to progress quickly, it can be very easy to fall behind. Your website must continue to be updated to stay current and engage users. Adding progressive enhancement through HTML5 and CSS3 or other technology grabs the attention of users and keeps them interested. Your business may also have new needs that will impact the design of your website. Added products, changes in features, and copy edits will need implemented occasionally. Usually these factors are implemented through a Content Management System (CMS). WordPress is by far one of the most popular CMS platforms and it’s free. However, the CMS your team selects should also be effective for what your business needs are. Does your team always include developers that can modify the code? Or is your team usually constrained to business users without coding knowledge? Keep those types of factors in mind when you choose a CMS.

Accessible Code

Our company has been using WordPress as our CMS for several years. It’s a great platform and has many plug-ins available. However, our implementation of WordPress limited us from having full control of the content on our website. Many of our pages were hard-coded and required a roll out process to update them. In addition WordPress formatting can be problematic when dealing with HTML code or trying to manage CSS. As our team began to prepare for the rebuild, we took a step back and looked for an alternative CMS. At 2Checkout, the team in charge of the website now has several members who can actively code and manage code resources. This opens up the possibilities for more advanced changes and layout flexibility on the website. The ability to edit and manage code quickly was a key factor in selecting a CMS for our new website.

ExpressionEngine, PHP based CMS tool.

The development team’s research led us to a product called ExpressionEngine (EE) built by the same group that built CodeIgniter, EllisLab. EE is a PHP based CMS much like WordPress, but it offers a more customizable environment. Our implementation of EE allowed our team to manage code directly in EE’s administration panel. The CSS and JavaScript files are accessible and editable through the EE interface, a simple include on any page template will add those elements to the page render. Building our website on this platform has given us the ability to make changes quickly both in development and in production. With the variety of devices available today, we can now make quick adjustments if we discover issues on a particular device. And perhaps the greatest advantage, our marketing department is now capable of making quick changes to copy or overall layout changes without going through a roll-out process.

3. Content - Bringing it to life

With over half a billion websites on the internet, it’s very important that your website’s content grabs the user’s attention and engages them. If your website’s goal is to convert visitors into customers, then the content of your website should guide them towards that decision. Conversion techniques such as call to actions, simple navigation and clear product descriptions are very effective ways to maximize conversion. However, those techniques have become common place and your website needs to have a differentiators that draws customers in. The key is in your content. Bringing your content to life through conversational tones, quick & readable points, and enhanced interaction will attract your visitors to keep reading. Even if they don’t convert right away, content that engages your visitors could bring those same visitors back to your website again and again hopefully to become potential leads later.

Icing on the cake

When we began working on the site rebuild, our focus was on the layout and the technology used to deliver the content. Use of white space needed improved (See our blog post Content Delivery Part 1: The Value of White Space) and a better CMS was required. However, as the project moved forward we began to review our content and analyze its effectiveness. In some cases we found the content overly complex, so we merged it and simplified the message. We refined the content organization and focused on our most powerful differentiators. Our team ran through with an axe and removed unnecessary periods and grammar that cluttered the content. As we fine-tuned the copy, our team also improved the visual aids that supported that copy.

Home Page has content revealed on rollover (or press with touch device).
Recurring Billing page has calendar graphics that show recurring dates.

Visual aids are extremely important in communicating the function or meaning in your copy. They are also the quickest way to grab a user’s attention. We added graphical elements to illustrate our message such as a calendar with recurring events on our Recurring Billing page. Whenever possible, our team used actual screenshots of our product to provide a tangible impression of our service. New methods in HTML5 and CSS3 such as transitions have also enabled us to enhance our content with visual effects and interaction. Our home page uses CSS transitions for the rollover blocks in the blue section and we added a video that describes our product. These elements enriched our content and provide a level of polish that can help engage and convert users. Progressive enhancement will be a core factor as we continue to improve our website.

Conclusion: A website that empowers our content

When we began working on our site redesign our team’s objective was to improve how we delivered content. We focused on three core factors that expanded our website’s impact to users and enabled our team to continue improvements. With Responsive Web Design a CMS that best fits our needs and enhanced content delivery, we’ve refined our website and solidified a foundation to build upon. Content is now accessible across many different devices, quickly editable, and brought to life with interaction and visual aids. Our new website is a great tool to actively engage with users and express our brand’s value.

Recommended Reads: