health non-profit

Personalization & Component Framework

As the Creative Director for an LA-based digital consultancy, I had the pleasure of working with a national non-profit organization on the re-envisioning of their web experience. This solution was to deliver a deep and personalized experience using context marketing and dynamic components.


scope of work

  • Creative Direction

  • UX Strategy

  • Content Strategy

  • Context Marketing and Personalization


Sitemap for new site solution.

Sitemap for new site solution.

My Approach

Equipped with a great team of talent, we aimed to provide a fresh and modern web experience that flexed the power of Sitecore’s context marketing capabilities. My team conducted numerous on-site working sessions to discuss the UX and content strategy. From there we built a game plan on how to approach the team’s goals from a UX design perspective.

Challenges

  • Wealth of information, how to streamline and deliver the site’s content in relevant ways.

  • Explore deep and meaningful personalization with Sitecore context marketing.

  • Architecting the transition from an older version of the CMS to the latest and how it impacts existing content.

  • New branding underway, how to coordinate BOTH initiatives for launch.

  • Designing a component-based layout

  • WCAG 2.0 accessibility compliance - tested and validated

  • Define the content editor workflow

Outcome

Working in close collaboration with key stakeholders, we delivered a powerful and flexible solution for our client. Sitecore personalization rules and progressive profiling via ‘snack-able’ components provided a truly unique experience for each visitor.

Accessibility and extensibility was the theme for this engagement. I ensured we approached this as the number one priority during ideation. Design and development adhered to WCAG standards and was validated with accessibility specialists. Extensibility was achieved by creating a suite of reusable and interactive components designed to add engagement and feed the personalization engine.

From left to right: Recipes Landing Page, Editorial Page, Encyclopedia

From left to right: Recipes Landing Page, Editorial Page, Encyclopedia

Diagram illustrating the relationship of a user’s actions and context marketing.

Diagram illustrating the relationship of a user’s actions and context marketing.

personalization / context marketing

We approached this redesign with the goal to offer a more personalized experience to the user. Utilizing Sitecore’s personalization rules and smart components, we created ‘snack-sized’ interactions for users to input information that the CMS can use to tailor the overall experience.

We accomplished this by creating personalization rules based on the client’s requirements. Then we applied tags to pieces of content and ranked them for the CMS to weigh. From there, we strategically placed these ‘snack-sized’ components to engage with the users and gain more meaningful information.

Not only can the page layout be drastically different by serving personalized and relevant content, but the CMS can also leverage marketing tools based on this attained information.



building for extensibility

I’m a big proponent for component-based design. Approaching a solution as layouts comprising of component types have lead to more efficient and extensible results. We approached this by creating a suite of diverse components that can be applied to any content type.

My team worked closely with stakeholders from the various business units to identify their unique needs so we can architect the right approach. Among the numerous component types, the most popular and flexible component we leveraged is what I call the ‘magic module’. This component generally consists of 6 parts:

  • Main Image

  • Title

  • Description

  • Button / Link

  • Additional Metadata (optional)

  • Background Image / Color

This ‘magic module’ can be customized to hide or show each of the above to customize a section as needed. Grid layout can be specified as per content needs.

This component is an example of how extensibility can be approached from a component level.

The ‘Magic Module’, the hardest working component around

The ‘Magic Module’, the hardest working component around


The Takeaway

Aside from the emphasis on personalization and context marketing, taking on a project of this size from a content perspective was a challenge. Migration was a huge undertaking that needed all hands on deck. Communication, attainable milestones, and clear goals are KEY.

Things to note:

  • Accessibility is #1. ALL projects on the web should consider reaching everyone.

  • Stay on top of that content audit document & gap analysis

  • Loop in content creators/editors early so they can plan accordingly

  • Media selection cannot be pushed off for later -- this becomes a monster when nearing the finish line.

  • Remain diligent on maintaining the UI kit & component sheet

  • When collaborating with other vendors/agencies, consider their contribution and how it can alter your expected results -- aim for the best possible result.


Find this interesting? Let’s collaborate!