Surviving Mold is website devoted to offering diagnosis, treatment, and online resources for those with symptoms or suffering from exposure to mold. Dr. Shoemaker has dedicated his life to mold research and provides answers for people with questions or concerns on all things mold related. The portal offers a good amount of content to users for free, but there is also a eCommerce subscription component for Subscriber Only access to content. Behind a secure account login, subscribers to the site have access to tools, resources, content, etc. that non-subscribers to not.
SurvivingMold.com was venturing into year 5 of existence and doing well, but new subscriptions and VCS Test sales were starting to level off a bit. The website design wasn't what you would call out of date, but there was opportunity to shift some of the branding. Analytics was showing a subtle shift towards a mobile user base so we also needed to look into a responsive website design.
The were 4 primary objectives going into this website redesign project:
Since we were moving from a pretty standard site layout to a portal website, there was a good amount of discover needed on this project:
Going into the website design process, we had a pretty good idea of what needed to be incorporated into this functionality loaded redesign.
A responsive web design presents challenges that do not exist in non-responsive websites, especially when dealing with a portal website that has considerably more content than your traditional site. Having laid out the requirements in the discovery stage made the process a bit smoother as we knew major needs would not fall between the cracks.
There are many great responsive themes in the theme library for purchase, but we decided to pull in our team of graphic designers on this one. We knew we had a unique challenge in having to get a lot of content in a relatively confined amount of space. Our graphic design team went to work and churned out a pretty good set of design mocks for mobile, tablet and desktop views.
Upon completion and sign-off of the home page mocks, it was time to move to the interior pages. These mocks are produced much faster as the home page provides the overall design motif needed. As part of the design process, we mocked up all unique page templates that would be needed to build the site. We usually have the option to customize some page templates on the fly (i.e. programmers adjust based on a similar template layout), but with a content heavy site such as this one we didn't want to take any chances.
We now had design mock-ups for all the primary page templates, including home page, portal page, contact form, user dashboard, eCommerce preview, eCommerce details, subscription process, payment process, physician profile, and content item details pages. At this point we were able to review them all with the client so they could get a good feel to how the site was going to look as well as flow.
We now had sign-off on the designs, well laid out process documents from the discovery phase, and it was time to pull in the web developers and software engineers.
The first step in the implementation process was to slice the designs. The design team provides photoshop files that are essentially a photograph of what the site will be and we need to convert that photograph into HTML and CSS code.
This website was being built on a powerful CMS, so once we had the page template code we could start building out templates in the CMS. With page templates, you build one and re-use it many times for all pages that will use the same layout. The web developers went to work on all the page templates and got them as far as their skillset could get them. The web developer will then document the functionality needs that require an engineer to code, and they pass this list on for implementation.
Software engineers are low level programmers that write code for complex functionality. On the SurvivingMold.com project there was a lot of that. Processes like showing featured content on home page until it was replaced with newer, the subscription process and integration with credit card processing, the user dashboards and easy access to user associated content (i.e. VCS tests, past purchases, bookmarked content, etc.), and the administration dashboard that allowed non-technical users to publish a variety of content types (articles, white papers, events, faqs, new pages, blog posts, physician profiles, etc.)
After a couple of months of the project being in the developers hands they had produced a functional website that was ready for quality assurance. The QA team got to work and started trying to break the site. They navigated the site on different devices (computer, tablet, mini tablet, phone), with different operating systems (Mac OS, Windows, iOS, Droid), using different browsers and browser versions (Chrome, IE, Mozilla, Safari), all to track down hiccups in the display or functionality bugs.
As the QA team was working to break the site, the SEO team was also in there optimizing the site for the search engines. There are several SEO "on site" tasks that occur during the build out of a site, so this team needs to get all these completed so that the search engines can effectively index content on the site.
When everything checks out with the QA team and the SEO team getting through all their tasks, it's time to go through a go live process. We have a 25+ item checklist that we run through for every site that we send live. This one was a bit unique in that we had to pull live content from the old site at the time of go live. The engineers had written a script to do this during the implementation phase so we just had to run that and do a quick review.
Upon completion of the Go Live! list, SurvivingMold.com had a brand new functioning portal responsive website design.
One thing 95% of people looking for a portal or online publication website don't realize until they get one is the amount of work involved to keep them current. Now that SurvivingMold.com had a fresh look and a fully functional administration console that allowed non-technical users to publish content, how did the transition go? Let's take a look at the objectives to see how we did.
Surviving Mold Brand. This was one of the objectives that didn't need a lot of analyzing as we knew from the minute the designs came out that we had achieved our goal on this one. The new site had the SurvivingMold.com brand in the logo and within the content, but Dr Shoemaker was also a big part of the new site and it was obvious he was the brains behind the operation. Verdict: Success!
Optimize for Mobile. The implementation of a responsive website design was a direct result of the growing mobile crowd. Mobile users will surpass all user types very soon, and SurvivingMold.com is now prepared for that transition. Mobile users are presented with the same content as the desktop user, but with a responsive design the layout is optimized for the mobile screen. Verdict: Success!
Portal Website with Non-technical Publishers. Now that we had a fully functional administration console for non-technical users, there was 30 years of Shoemaker research that needed to be published. Of all the objectives, this was and is the toughest on to overcome. There was a learning curve as to what the content types were, where to put them on the site, how to convert them from their original document, etc. SurvivingMold.com is now publishing new and fresh content every day, and do not require web developers to do so. Verdict: Success!
Increase Traffic, More Conversions. With fresh content rotating through the home page, the goal was to gain more organic incoming traffic from the search engines. As more users find the site there should be more subscribers, more tests purchased, and longer visits to the site. Two months of analytics showed great traffic results, but the conversions or revenue was staying about the same. We needed to find out where we were losing people in the process and if it was an on site issue that was causing it. Some tweaks to the purchase and subscribe process have been made and things are looking up. Verdict: Trending