An interactive lab developed for Episerver Ascend 2017 demonstrating the concept of component libraries, and how they can be executed within Episerver CMS. Uses MazdaUSA.com, a replatform project I helped architect, as a case study.

1. Episerver

2. Episerver
LAB: How to focus your
digital strategy on UX
JACOB KHAN › EPISERVER
JARED WOODEN › MIRUM

3. Episerver
• MIRUM AGENCY
• Global marketing agency with 46 offices in 20 countries
• 2016 Gartner Magic Quadrant Visionary
• Primarily focused on business transformation, experience design, and
commerce activation
• MAZDA NORTH AMERICA
• Global automotive manufacturer headquartered in Japan/Irvine, CA.
• Transitioning from economy to premium brand
• Recently migrated to Episerver as their global CMS solution
Who We Are

4. Episerver
What is
Digital Strategy
Digital is the application of information and
technology to raise human performance.
Strategy is setting a direction, sequencing
resources and making commitments.
We use strategy to make the intersection of
creativity and technology meaningful.

5. Episerver
or, in one word…
Enablement

6. Episerver
Design and maintain a data-driven, modern
digital platform that builds brand, improves
service and sales loyalty, and positively
serves customers at any stage of their
relationship with Mazda.
Strategic Vision

7. Strategic
Framework

8. Episerver

9. Episerver
Then & Now

10. Building a
Component
Library

11. Episerver
Epi as
a UX tool
Component library made
available as Blocks in
Episerver.
UX designs the content
hierarchy and page structure
directly in the CMS.
Allows for multiple variations, so
testing is a breeze.

12. Episerver
In Episerver
Terms
Block: Flexible components and
reusable content parts

13. Episerver
In Episerver
Terms
Block: Flexible components and
reusable content parts
Content Area: Blocks are drag
and dropped into content areas
to build pages

14. Episerver
In Episerver
Terms
Block: Flexible components and
reusable content parts
Content Area: Blocks are drag
and dropped into Content Areas
to build pages
Display Option: Configurations
for a specific instance of a Block
to control the way it is presented
on a page

15. Episerver
Understand how a content editor at Mazda
can leverage existing media/content parts to
quickly and easily stand up a marketing
landing page.
Today’s Focus

16. Episerver
Mazda wishes to create a landing page to
support an upcoming new vehicle launch.
The Challenge

17. Episerver
Attract, engage and convert the end user
through a visually appealing and informative
design.
The Goal

18. Episerver
Head to the
Demo URL
mazda.demo.na.episerver.com/l
abs

19. Episerver
Follow the instructions on your screen, and
create a new landing page for Mazda. Use
existing media from the library to make your
page unique and visually appealing.
The Exercise

20. Episerver
• With great flexibility comes great responsibility.
Approval workflows and roles can be used to
limit content editors accordingly.
• With the employment of Display Options,
blocks are extremely powerful and can be
combined for a virtually unlimited number of
variations.
• Whenever possible, content should be built as
HTML text in your blocks, avoid using copy in
imagery as this has SEO and responsive
design implications
What We Learned

21. Episerver
Contact Us
Jacob Khan, Episerver
jacob.khan@episerver.com
Jared Wooden, Mirum
Agency
jared.wooden@mirumagency.com

22. Episerver