Dan

A Web Development Professional with experience in entrepreneurship, web applications and digital marketing.

Re-Platforming ManualsOnline

mologochange

Background

As a Web Operations Manager at OwnerIQ, I am a part of the 6 man “Support Solutions” team. We deal with everything related to OIQ’s child website – ManualsOnline.com. I work with the website’s front end (HTML/CSS/JS), database (SQL), strategic growth, technical marketing of the product PSE (Product Support for E-Commerce), and other tasks that come about when working on a small team like ours. About a year after I joined the team, we decided it was time to give ManualsOnline a major upgrade for both the design and data manipulation of the website.

OwnerIQ was incepted from ManualsOnline when the founders determined that if they could figure out what manuals their users were looking at, then they could assume the users owned that product or a related one and market to them based on those parameters. They started the company in 2006, and eventually grew into what OIQ is today. However, they still own ManualsOnline and need a team to run it.

The original ManualsOnline.

The original ManualsOnline from 2006.

The Support Solutions Team

Where most websites with several million pageviews a month require a team of 10+ devs to maintain, we were limited to 3: Chris Parker as team manager and project lead, Hai Nguyen as the back end developer, and myself as the front end developer. Also playing huge indirect roles were Pete Breslin as the content manager, updating and tracking manuals on the site, Sam Ninh the PSE and MO account manager, and Dave Walsh our one man sales team.

Chris, Dan and Hai.

Chris, Dan and Hai.

Why’d We Decide to Rebuild MO?

Mobile Traffic

MO’s traffic had been dipping ever since the Google Panda search algorithm update was released in 2012. Traffic hit its lowest viewership at around 2.5 million users per month in 2013, previously around 5 million. During that time, we noticed a fascinating trend in the analytics. Mobile users, people accessing the website via phones or tablets, had gone from 10% in 2005 all the way to 40% as of 2014, and showed no sign of stopping. This was a problem because our web content was not “mobile friendly”, which would lead to a terrible user experience, higher bounce rates, and an outdated website. We needed to make MO mobile.

mobile

Development Agility

Developing an agile back end system for ManualsOnline was another major priority. The old website was living off code written by a mix of outsourced and in-house devs who worked in a mess of Pearl, php, and javascript. It limited our ability to scale MO, making it a massive time-sink to consider growing the functionality of the website (ex: create new monetization strategies, add user reviews, update the design, fix bugs, build in email campaigns, etc.). So we set our goals and associated Key Performance Indicators (KPIs).

Project Goals:

  1. Create a mobile friendly version of ManualsOnline (using responsive design techniques).
  2. Build an agile back end system (recreate the current ManualsOnline on a cleaner code base).
  3. Improve the user experience of MO by updating the site’s design (measured by bounce rate, time on site, heat maps, etc).
  4. Connect our white labeled product – Product Support for E-Commerce – to ManualsOnline’s back end structure.

We stayed on top of our goals and timeline using a Project Management interface called TeamGantt. We broke the project out into a series of micro projects and tasks, then assigned timelines for each of them. Chris mostly maintained this, but taught me a lot about how to logically categorize tasks and projects.

Snapshot of our Gantt tasks running from April to May 2015

An example of our Gantt tasks.

The Clean Up (Step 1 of 4)

First step, clean up ManualsOnline – add subtle design changes and fix some structural issues to prepare the users for its full conversion. For example, we added a new header to give a more modern feel to the navigation and get it closer to what it would look like in the future.

The most notable clean up was removing Shell pages. ManualsOnline, for early SEO purposes, was spitting out pages for products without associated manuals. A user would land on a page like this and see “Sorry we are searching for Blender Brand XYZ’s user manual”. These pages, though keyword rich for Google’s search algorithm, would frustrate our users and make them immediately leave the website (creating a high bounce rate). Since one of our goals was to create a greater user experience, removing Shell pages (which made up 40% of MO) was a huge step forward towards our end goal before the real work even began.

Determining the Design (Step 2 of 4)

There are 3 to 4 positions needed to design a professional website. The user experience director. An experienced veteran of web-usage who knows the psychology of certain actions and reactions between users and web functions. This person will usually draft a wireframe of the base functionality of a website. The designer. An artist who literally draws up designs based on the wireframes in Photoshop or another similar tool. The front end developer. A coder who works in HTML/CSS and ideally javascript (though a js dev could be your 4th position). The front end dev takes the designer’s images and converts them into what people see in web browsers.

Good artists copy, but great artists steal. (Picasso)

The design of ManualsOnline was more of a large refresh from what it had been, with some influence from websites we found with similar content – FindtheBest.com, ManualsLib, and a few others. As Chris loved to point out – when re-designing a massive site like MO, best practice is to keep variables at a minimum. When things go awry, too many variables makes it impossible to track down what is causing a problem. Traffic dipping significantly? Bounce rate through the roof? Ad impressions nonexistent? All possibilities after a large website launch. Instead of a complete redesign just ‘refresh the brand’. Update what we have instead of scrapping it for a new one. This way, when we flip the switch to the new design, our users won’t feel completely lost, making it easier to measure how certain new elements affect user behaviors.

Chris' wireframe of the MO Homepage

Chris’ original LucidChart wireframe of the MO Homepage.

Chris and I used a service called LucidChart to create wireframes for every page template on ManualsOnline. Then, Chris asked a designer he had worked with in the past through 99designs.com to re-design ManualsOnline with a similar focus as his prior designs. We sent the designer, Milan, to use our detailed wireframes to guide the designs and asked that he give us designs for each page in a desktop, tablet and phone version. After a few weeks of back and forth revisions, we finalized a version and received the Photoshop files from Milan.

Finalized homepage design based on the wireframe.

Finalized design based on the wireframe.

In order to get a jump on the front end code, we decided to utilize one of hundreds of companies that converts photoshop files to HTML – Pixel Crayons. The pro to using a company like this, is you quickly get results. The cons are that you have to be extremely specific as to what you want done. Also, as we ended up finding out down the road, you are restricted to the way they set up their code’s structure, which in the long run can cost you a lot of time that may have been better spent just by not outsourcing at all. Regardless, we used Pixel Crayons, a firm based out of India, and received a file with all of our designs working and all coded up in HTML and CSS that I would later rewrite…

Finally Coding (Step 3 of 4)

We chose to build MO 2.0 on two frameworks – Django (back end) and Bootstrap (front end). Frameworks are essentially libraries of preset code structure that allows developers to quickly get started – for example, the Bootstrap framework has pre-styled buttons so I did not have to design them from scratch.

Example of the power of Bootstrap - Predesigned buttons.

Example of the power of Bootstrap – Predesigned buttons.

Hai Time

Initially, the back end and front end work were exclusive from one another. I worked off of a local development environment coding the look and feel from each of our web pages, while Hai worked on the data structures and functionality. We also split the website into two parts – the Support Section and the Manuals Section. Needless to say, Hai had a lot on his plate from a dev perspective. Being able to tackle the back end code all on his own is quite the feat, though he probably wouldn’t see it as much these are just a few of his notable accomplishments.

PDF to HTML

ManualsOnline stores all of its manuals as PDFs, since that is how we import them into the website. Hai was able to adjust a script to go through every single one of our Manuals and convert them into viable HTML versions. That means that instead of containing a pdf in an iframe (its on one web page), we were able to make each page of the manuals its own webpage, boosting the unique content on our website tenfold.

New UGC System

Hai created a completely new UGC (user generated content) web service application for ManualsOnline. He made the system universal so that he could connect the users from Product Support for E-Commerce to the MO database and vice versa.

Recreation of MO Features

Hai then began to recreate MO feature by feature in Python. He took my front end code and began integrating data output into it. For example, he added an actual list of clickable links to manuals on pages where I had dummy data. Each new feature added required tweaks to the design as well, especially when certain elements were too large for their containers. Just a few of Hai’s tasks included user logins, left nav data, right nav data, several list page data outputs, manual optimization for mobile, setting beta environments, and much more

Snippet of Hai's workload recreating old MO features.

Snippet of Hai’s workload recreating old MO features.

The Design Touches

I was tasked with the UI and UX development of ManualsOnline. Once again, this means I took the wireframes, designs, and outsourced code, then rewired it all to be a functional ManualsOnline. This was my first major web development project, so it was quite the learning experience. There are definitely areas of code I wish were a little cleaner, but am amazed at how far I was able to come in my development skills.

Mobile Design

What is the best part about using a framework like Bootstrap? The column system. Columns allow web designers to create a responsive web page rather than a static. Static web design says “this web page will be 980px wide with X content inside”, responsive design (a response to a boom in mobile devices) says “these containers will be X% of the browser’s width, so if it is a smaller size, then the content inside will adjust.” The Bootstrap grid system – scaffolding – is made up of 12 columns. A basic page can be set up in any groups of columns as long as they add up to twelve. Using this system, and some other tricks called media queries, I was able to essentially create 3 versions of every ManualsOnline page – desktop, tablet, and phone. To test this, go to the ManualsOnline.com homepage on your computer and drag the side of the browser to make it small or large. Can you see the grids? Can you see the pieces snapping into place?

Static ManualsOnline

Old ManualsOnline


Responsive ManualsOnline.

ManualsOnline 2.0

Release, Learn, then Put Out the Fires (Step 4 of 4)

On April 13, 2015 we began bug testing, and as of April 20th we released the first version of MO 2.0. Immediately, we ran into issues, as expected, that made Hai go in full alert. Though after about a week of putting out fires… we were able to stabilize the website and get it back on track. As Chris (and the Lean Startup) would say, implement ASAP, test, then adjust. After finalizing the new MO, it was time to find more and more ways to monetize the site. Sponsored listings, PSE improvements, category takeover campaigns are just a few of the techniques we are trying to perfect.

Analyze & Learn

How does one learn from a website? Through analytics and heatmaps. I set up a CrazyEgg heatmap tracker on ManualsOnline in addition to our Google Analytics. Between the two, we can see exactly how our users are reacting to new and old elements on the website. For example, where the majority of people are clicking when landing on the homepage.

CrazyEgg Heatmap

CrazyEgg Heatmap

Conclusion

The purpose of this blog post is to be a personal journal entry so I can look back and appreciate one of the first major projects I was a part of – even though this is a highly condensed version of the whole story. From Hai’s programming to Chris’ project management, it was quite fascinating to see such an endeavor through from start to finish. The rest of our team also helped a ton in their own efforts – Pete Breslin (the content manager of MO), Sam Ninh (account manager of MO partners), and Dave Walsh (sales, since where would anyone be without sales). I will probably add or edit this post in the future, but for now my hands are tired. Good work team, on to the next great thing.

Teammo (1)

Leave a Reply

Your email address will not be published. Required fields are marked *