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 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.
Why’d We Decide to Rebuild MO?
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.
- Create a mobile friendly version of ManualsOnline (using responsive design techniques).
- Build an agile back end system (recreate the current ManualsOnline on a cleaner code base).
- Improve the user experience of MO by updating the site’s design (measured by bounce rate, time on site, heat maps, etc).
- 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.
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)
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 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.
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.
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
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.
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?
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.
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.