Article

Plus16 Webinar Transcript “Is It Time to Refresh Your Enterprise CMS Website”

Plus16, a monthly webinar program connecting attendees with 2Plus2 developers, designers and implementers.

By Cathy Dew

Good morning / afternoon. Welcome to the third installment of our monthly Plus16 webinar series. Thank you for taking the time to join us. We know that you are busy – so our goal is to be focused and to pack meaningful data into an efficient 30-minute window.

Watch the Video replay

So let’s get started. My name is Cathy Dew and I am CEO & Information Architect for 2Plus2 Partners. I’ve also got Sally Dew our Creative Director here.

 Today we’re talking about refreshing your enterprise CMS website…

What do we really mean when we say “Refresh” or “Upgrade” or “Redesign”?

Refresh vs Redesign vs. UpgradeWell,… a website redesign involves overhauling all, or nearly all, of the code as well as the look-and-feel of the website. This effort is BIG and more comprehensive than a refresh project. It might even involve complete replacement of an outdated CMS system or the integration of advanced marketing features or other third party tools. A redesign is NOT what we’re talking about today.

So, an upgrade is a more technical project and refers specifically to the process of replacing hardware, software or firmware with a newer version. This is done to keep technology current and to improve performance. While an upgrade may coincide with a redesign or refresh project, it is not always the case. An upgrade is also NOT what we’re talking about today.

So, what we ARE talking about today is a refresh

A website refresh involves modifying outdated elements while leaving others intact. Typically a refresh involves "re-skinning" a website to give it a new look-and-feel. Also, a refresh project can include adding or updating structural elements of your system. You can think of this as infrastructure. A refresh can be implemented in specific areas of a website or a site-wide effort. In all cases, a refresh breathes new life into your current website and acts to bridge the interim between full redesign efforts.

Why refresh your enterprise CMS website system?

#1 Your site is not responsive (enough)

Your enterprise CMS website is not responsiveThe number one reason to refresh is to make your site responsive or more responsive.

Responsive Web Design (RWD) involves crafting your site to provide an optimal visitor experience across a wide range of devices (from desktop to tablet to smart phone). If your website is not yet responsive, then your site is definitely an excellent candidate for a refresh. Simply put, mobile-friendly websites are mandatory in today’s business world. Half of the world’s population now has a mobile phone. By 2020, that number is estimated to be 60 percent. Ten years ago it was just one person in five.

#2 Your website is visually dated

Your enterprise CMS website is visually datedThe second reason for a refresh is if your site is visually dated.

Immediate graphic cues signal the visitor that a website is old and in need of a refresh. One of the most obvious signs is narrow page widths where the content and graphics don't take advantage of the full width of the browser window. Another obvious sign of an outdated website are small images that are bound by the content and unable to break free of the layout area and resize to full width. Dense blocks of text with small point sizes are another indicator that a website is outdated.

Just by refreshing the visuals to take full advantage of the luxurious space afforded to modern day websites , you can bring your company brand to current times.

#3 Your messaging is off target

Your enterprise CMS website messaging is off targetThe third reason for a refresh is if your messaging is off target.

Remember a refresh project provides a great opportunity to review your content and messaging to be sure you are speaking directly to your target customers and prospects.

If your content is lacking, consider developing personas for each of your primary target audiences. Make sure your brand voice is consistent with your look-and-feel and use language your audience understands. Speak to your audience’s pain points and how you can help them. Be sure you are using clear calls-to-action and track your metrics to learn what works best.

Trends change quickly and it is critical to keep messaging and calls to action clear and relevant at all times.

The ROI proposition

So by now I hope we’ve convinced you that with relatively minor effort, your UI framework can be refreshed to support a new user experience without the investment of a full-on redesign effort.

The goal of the refresh is to establish a framework of premier UI templates, widgets and controls that is flexible, extensible and maintains the integrity of your brand across all platforms.

Step 1 – Clarify and agree on scope

Determine what's working and what's noyFirst, ask key stakeholders what’s working and what’s not on your current enterprise CMS website. In the spirit of a “refresh”, you will want to do this efficiently.

For public websites, Sales & Marketing has probably already got a running list of improvements they’d like to see. Start with this and build a short survey to send to other employees and select customers (especially if you have a collaborative relationship with a few of them).

For internal intranets, you can easily post a predefined list of possible features and content challenges and then have a fill in the blank option.

Whether your audience is internal or external, talk to your content providers and editors – they will definitely have ideas on what’s limiting or is a challenge with your current site.

Once you’ve collected all input, finalize and prioritize all refresh tasks with the project team. This will drive the direction of the project and give you a mechanism for keeping the project on track. It is very easy for things to expand into a complete redesign that misses the entire point of a “refresh” project.

Step 2 – Analyze your framework

Analyze you enterorise CMS website structureReview all templates for overall page layout – focus on header footer, max width, grid system. Pay special attention to mobile and ensure that clickable targets are at least 40 pixels by 40 pixels.

Take a look at the navigation and rework as needed; certain items may have increased importance and should be highlighted. This is an opportunity to change labels of sections (just be sure that it is makes sense and won’t confuse your audience. Also if the file name actually changes be sure to add a redirect from the old URL. You don’t want unnecessary 404’s)

Review container and styles and look for opportunities to update existing containers as well as add new ones. This is one of the biggest areas for changing the experience of your site.

Finally if you don’t already have it, you might consider implementing a HTML, CSS, and JS framework. The most popular by far is Bootstrap. Bootstrap saves time – it makes front-end web development faster and easier. It has a great grid system that helps ensure consistency and sets your site up to deliver a great UX from desktop to mobile. Bootstrap is open source and more than 7M websites use it.

Note that there are other frameworks, Foundation is probably the next most popular. The point is to leverage a tool that can help create an optimized user experience.

Step 3 – Review your content

Review your enterprise CMS website contentAnalyze your content. Any refresh project is a great opportunity to review your content and refine your messaging as needed. Shed any stale, unused content and put energy into new content.

One of the most important messages are your CTAs, or calls-to-action

  • Sign-up / subscribe – provide minimal info to stay informed
  • Register – login / password to access restricted content, order, etc.
  • Get started – walk through a deliberate flow to understand the process of engagement
  • See a demo – teaser of your product or service
  • Download something FREE
  • Contact us / talk to an expert
  • Search

Step 4 – Explore the look-and-feel

Approach the refresh project component-by-component so you can understand the impact of visual changes you are making across the site. The notion here is to think of your design as a system.

Atomic design is a methodology made famous by Brad Frost and includes five stages working together to create an interface design systems. The five stages of atomic design are:

  • Explore the look and feel of you enterpriese CMS websiteAtoms include basic tags like form labels, inputs, buttons.
  • Molecules are simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button combine to create a search form molecule.
  • Organisms are more complex UI components. Organisms form distinct elements of an interface, like a header element, for example.
  • Templates are page-level objects that place components into a layout. So for example, we take the header organism and apply it to a homepage template.
  • Finally, Pages are specific instances of templates used throughout your site.

So, one of the biggest opportunities is to rework the header and footer elements. Don’t forget to review options for visual changes and get approval before committing to the HTML and CSS changes.

Approach the refresh project component-by-component so you can understand the impact of visual changes you are making across the site. The notion here is to think of your design as a system.

Atomic design is a methodology made famous by Brad Frost and includes five stages working together to create an interface design systems. The five stages of atomic design are:

  • Atoms include basic tags like form labels, inputs, buttons.
  • Molecules are simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button combine to create a search form molecule.
  • Organisms are more complex UI components. Organisms form distinct elements of an interface, like a header element, for example.
  • Templates are page-level objects that place components into a layout. So for example, we take the header organism and apply it to a homepage template.
  • Finally, Pages are specific instances of templates used throughout your site.

So, one of the biggest opportunities is to rework the header and footer elements. Don’t forget to review options for visual changes and get approval before committing to the HTML and CSS changes.

Review the plan for your entreprise CMS website with the entire teamStep 5 – Review + finalize the plan

There will be revisions and you will need to get approvals. Make sure you include decision-makers in at every level of the refresh project so that when the time comes to “go live” everyone is on board and invested.

Again, I can’t stress enough how important it is to involve the editors and content creators of your site. Involving them in the design process not only results in a better thought out design but also let’s them get on board and even get trained on the new framework before launch.

Step 6 – Develop a plan to implement

Develop the plan for a successful implementation of your enterprise CMS websiteDepending on how the existing site was built, you may need to do more or less UI development work to realize your vision.  UI coding standards change frequently and a website that has not been updated to current industry will lag.

If your site is primarily a content site then you may be able to build the new site in a stage or test environment and them move it all at once to production. If your site is very active in terms of database features, for example people signing up or making orders, then you will need to coordinate the implementation differently. In this case you may need to do some clever renaming of files to pull off a smooth go live.

Now let’s talk about an in-progress refresh project with one of our clients. The Dairy Council of California is all about nutrition education in the schools.

CASE STUDY: HealthyEating.org

The header element represents one of the biggest opportunities for impact site wide.

  • Reworked header for wider max. width (1366px from 980px)
  • Moved social icons out of header to air things out
  • Increased the point size for the navigation menu
  • Increased the logo size
  • Gave more presence to the food block branding element
  • Grouped functional items (login, order, search) together into an “organism” inside the header

Re-envision top content and main slider area.

  • Pulled out and styled an “announcement” content type for when DCC has big releases to make (i.e., new Dietary Guidelines). During times there is no big announcement, the element collapses and real estate is reclaimed
  • Redesigned the slider with better usability… seeing the edges of the next and previous slider image quickly communicates to the visitor that more content is available. Also, the wider max. width allows for larger headlines and images

Re-envision content to be more engaging to your audience.

  • “tile” (also called “card”) design is more appealing than a bulleted list
  • images add life
  • items are clearly clickable making it clear to do
  • lots of information choices without appearing overwhelming or confusing

Re-envision content for variety in your page layouts.

  • 2-column format for related information (in this case, school curriculum and school wellness go together)
  • offers variety and breaks up the monotony of using the same container over and over again.
  • by juxtaposing images and copy (that is, by avoiding side-by-side headers) you can display dense content in a visually appealing way

Re-envision content to be more engaging to your audience.

  • use full width color “banners” to highlight important content
  • large images for interest
  • clear calls-to-action

Re-envision content to be more engaging to your audience.

  • another example of the “tile” design (definitely more appealing than a bulleted list)
  • if images are not available consider solid colors and easy numbered lists
  • items are clearly clickable making it clear to do
  • lots of information choices while still engaging the audience

Finally, the footer element...

  • reworked header for wider max. width (1366px from 980px)
  • feature social icon bar above footer
  • clean up any clutter

When you’re ready to refresh

Keep your enterprise CMS website project in scopeIt is easy for your project to creep out of scope, way out of scope. This is probably your biggest challenge. You will likely have more ideas than you can implement in the timeframe and budget of a refresh. Remember the whole premise of the refresh is that you can strategically implement a small number of changes to the framework and to the visual implementation of that framework that will great enhance the user experience of your web property.

  • Keep track of all the things you want to do but prioritize what is critical for launch
  • Target the most important pages from a communication perspective and based on usage / traffic
  • Focus on the design system to establish your content toolset moving forward

blogRefresh_20160602__0013_14.pngCommit to keeping your site refreshed

Once you have the mechanics completed, the actual generation of new content using the amazing new widgets and gorgeous containers you have developed can be done in an ongoing continuous improvement manner.

Make the point that this sets you up for future changes that will be easier to implement.

Call To Action

Tell us about your project.

Click for a free consultation
Thank you for your time today.

Any questions. Are your ready to refresh your website? Tell us about your project.

We hope you will join us next month for the next Plus 16 webinar, on Tuesday, July 5th at 10 am PT, 1 pm ET when we talk about How to select the right CMS for your organization.

Cathy Dew
Cathy Dew – CEO + Information Architect
Cathy focuses the company on our mission – Real results. Every time. Information architect and strategist, Cathy is passionate about making software work well – the function, the feel, the result.
0100011001101001011100100111001101110100001011000010000001101000011000010111011001100101001000000110000100100000011001000110010101100110011010010110111001101001011101000110010100101100001000000110001101101100011001010110000101110010001000000111000001110010011000010110001101110100011010010110001101100001011011000010000001101001011001000110010101100001011011000011101100100000011000010010000001100111011011110110000101101100001011000010000001100001011011100010000001101111011000100110101001100101011000110111010001101001011101100110010100101110001000000101001101100101011000110110111101101110011001000010110000100000011010000110000101110110011001010010000001110100011010000110010100100000011011100110010101100011011001010111001101110011011000010111001001111001001000000110110101100101011000010110111001110011001000000111010001101111001000000110000101100011011010000110100101100101011101100110010100100000011110010110111101110101011100100010000001100101011011100110010001110011001110110010000001110111011010010111001101100100011011110110110100101100001000000110110101101111011011100110010101111001001011000010000001101101011000010111010001100101011100100110100101100001011011000111001100101100001000000110000101101110011001000010000001101101011001010111010001101000011011110110010001110011001011100010000001010100011010000110100101110010011001000010110000100000011000010110010001101010011101010111001101110100001000000110000101101100011011000010000001111001011011110111010101110010001000000110110101100101011000010110111001110011001000000111010001101111001000000111010001101000011000010111010000100000011001010110111001100100001011100010000000001101000010100000110100001010010000010111001001101001011100110111010001101111011101000110110001100101
Decode