Summary: Rebuilding and redesigning the main corporate site over the course year+. Made the site responsive, performant, and more usability. Traffic and other success metrics have all improved.
Problem
During the time of development, the site (call it 1.0) was built in 2010, and did not receive any major updates or upgrades until the time of the rebuild. During that time, it was not yet common for B2B enterprise companies to employ what is today is part of standard web development, such as responsive design. The design also lacked focus, often copying common design patterns from competitors which were in themselves not focused. To add to the need for change, the company’s headcount ballooned year after year, and making sure the corporate website attracted good talent was a must.
Key Issues
- Not Responsive
- Design cluttered
- Messaging stale
- Many technical issues
- SEO and SEM problems
Solutions and Goals
Build a new modern site (call it 2.0) with a committed focus on web as a platform to better market, educate, and engage customers. Redoing the site 1.0 was not meant to simply be a simple reskin project or even a slight enhancement, but an overhaul. Site 2.0 had all content, graphics, and code redone from scratch. A large multi-department project formed to complete this 1+ year project.
For this project important change in mindset needed to be adopted for many stakeholders that core pages were no longer independent of each other. The user’s journey on a website is just as much a part of the sales journey as anything else. A whole new approach needed to be adopted. New content and education material needed to be made.
Target Users
Researcher: Often the first contact in the sales chain, important in passing information to decision makers. Spends a lot of time reading about solutions. Does not make final say in purchase.
Directors+: Normally decision makers. Directors and above are involved near the ends of the sales cycle. Spends a lot of time reading through additional offerings
Customer: Already using the solution. Looks for documentation and trainings on the solutions they are using
Before any content or code was written, it was made clear that business solution pages were no longer just text on a screen. ‘Glorified whitepapers’ as product marketer once said to me in describing the 1.0 solution pages. Having solution pages in 2.0 become consumable and bite sized was a proven strategy to use. It was decided that content be written in sections with the concept that it would be plugged into other pages as needed. Resources, such as data sheets and white papers would help breakup sections of written content, given call to action items for users.
As with many large and long term projects, there’s a thousand and one details, and I’ll cover my focus of design and development.
Design/dev output
- Modern development
- Modular based design
- Analytics and marketing automation
- Reusable content
- Knowledge center and resources
Design
Two primary design goals achieved, tell a better more cohesive story on the homepage, and simplify the design templates to more easily produce new pages as needed.
Homepage
Company homepages are often the first page a new or returning user lands on. 2.0’s homepage uses a concept 100% sections. It is often difficult deliver a direct message when a large B2B company often offers many solutions. By using the 100% method, only one direct message is used per section. Scrolling slides the user into the next or previous section. Content and messaging don’t have to fight one another. There is also added benefit to content creation, as product owners can confidently know what is being presented to the user.
Animations
As part of the initiative to design a unique homepage within the healthcare IT space, we employed the use of svg animations and interaction. The step is seemingly bold in an industry where you still have users using IE7, and limitations step in the way of many design ideas. A large part of development time was spent creating fallback methods for things that were more “experimental”.
Solution and Resources
The product solution pages are the key pages on edifecs.com because of the information they deliver. For companies like edifecs, where sales cycles happen over many months or even years depending on the deals at hand, users often come back to these solution pages for information. Selling products is not as good a strategy as selling solutions, and the pages were designed with that in mind.
Content Modules
By better standardizing page layouts, the product owners and other stakeholders could more easily produce consistent content. Many rules were setup to keep the content limited but meaningful.
- Word count ranges
- Stricter body copy
- Graphics and diagram guidelines
Although there was flexibility within the design, template breaking requests were disallowed. This also reduced code bloat as unique one-off designs would no longer be implemented. The 1.0 site had numerous custom styles, and scripts per page to accommodate a variety of request.
When the solution page designs were done, a modifiable powerpoint and word template was given to those writing content. This way they could ‘build’ their pages, and then the dev team would quickly stage them for broader review.
Resources
The 1.0 site listed and showed resources mainly on the resources page. Links to resources were often added into the body copy, however, there was very little to distinguish it from other links.
The 2.0 site revamps the way resources are handled in the site overall. Firstly, a color coded labeling was added to each resource type. Secondly, a Resource Band was added to most solution pages that worked to visually separate sections and clearly show off resources. A dedicated resource page was designed and built to allow users to filter through the 100+ documents and videos that are offered.
Trainings
A large new offering within 2.0 is a stronger education section. Solutions like edifecs’ are like many industry tools, a level of mastery can be achieved through training and practice. Enterprise software purchasers know this, and when vetting solutions look to the complete support cycle offered. Edifecs created a training and certificate program.
An entire microsite was designed to allow users to get the training they needed.
Development
Both the front and backend were overhauled during development. Because all the content was being rewritten, very little needed to be ported over to the 2.0 site. Overall there was a development focus on speed, performance, and ease of use. Reducing overhead and shortening the time to commit new code and content were crucial moving forward. “You have to be up at 6am to publish a press release” a content director said to me early on. Scheduling publications was one of the first things I had setup after I heard this.
Technology Used
- ExpressionEngine CMS (LAMP)
- Hosted Linux Servers
- Bootstrap framework
- Marketo tracking and forms
Many other frameworks, apis, and tools were used in the development of the current edifecs.com site.
Frontend
Responsive design became part of standard practice with the redesign. All the more interactive elements were chosen with compatibility with existing design pattern.
Development set limitations on designs to not use performance heavy modules too often on a single page. Using many best practices to attempt a consistent 60fps and overall fast rendering.
With the 2.0, there was focus on best practices rather than simply getting out the door.
Backend
Complementing the frontend, we built our backend to expedite and automate many previously manual tasks.
In 1.0, page entries contained content. 2.0 changed this so page entries only reference content modules. By separating all the content into separate entry types, overall control and reusability was easily achieved. This way of structuring the backend in 2.0 allowed for greater permission management, as content creators could work more safely on content chunks rather than the whole page.
A slew of new automation came forward as well. Mentioned earlier, previous content owners would have to be up at the hour they needed to make a page or piece of written go live. Something that seems standard in an time where CMS like wordpress has had strong publishing features for years, was simply overlooked in the 1.0 site.
Blog - A wordpress blog with a simple theme was also setup in conjunction with the main corporate site. It is primarily used as a thought leadership publishing platform. It was awarded a best healthcare it blog after the first year. It is mostly self-maintained by a separate team.
Integrations
As we moved into 2014, more successful marketing automation was needed. Solutions such as Marketo are heavily used. The front and backend had these integrations in mind when being written. Especially with how taxing performance-wise some analytics, it was important to both support the company’s business without degrading the user experience for site visitors.
Success
Since launch, the 2.0 site has continued evolve and grow. Traffic has increased while bounce rates have dropped. Leads have been generated, and trainings sold.
Completion
Completing design and development of both the corporate website and internal sites did not mean they were finished. With the new processes created, these web properties continue to receive updates, and new developments which provide more to the users’ experience almost every day. Hopefully no major overhauls for years to come.