Working with UX / Design& Front End Developers

Project Lifecycle

Waterfall Iterative

Due to the nature of these tasks and project management concerns this often leaves specific disciplines for each phase

• Scoping & Definition is done multi discipline

• Specifications are written and defined by developers

• Design/UX is done by designers & UX practitioners

• Build is done by developers & front end developers

Lifecycle Responsibilities

Each discipline focused on their own tasks with different levels of understanding on each others disciplines.

• Design – Brand, Colour, Perception, Identity

• UX – Interaction, KPIs, Ease of use,

accessibility

• Development – Build, Integration, CMS,

Architecture, Testing

Responsibility Issues

A key to aligning the development of a CMS project with design and UX is platform education• Reusability

• Better understanding of features/limitations of the platform

• Limitation of scope creep from design

• Knowledge of the features to aid Design and UX

• Working with FEDs to reduce unnecessary complexity

Solutions

Episerver has a number of key features which are great to educate design and UX around • Blocks – (Design/UX)

• A/B testing for (UX)

• Personalisation (UX)

• Episerver Forms (Design/UX)

• CMS – Branding, Icons, Previews (Design)

• But also a lack some limitation to be aware of

Episerver –Design/UX

Episerver also has some things that your front end developers need to be area of which can give great benefits.• Rendering of blocks/sizes (TBC)

• Icons/Previews

• CMS editor stylesheets

• Editor previews

• Modules such as forms

Episerver - FED

Blocks are the cornerstone of component separation in Episerver with some nifty features• Reusability across the website

• Ability to display in multiple sizes

• Renders wrapping divs for the CMS support

and Dojo

• Blocks previews need special attention

• Structure can easily be tailored

FED - Blocks

Blocks are complicated and so it’s better to define all these up front as part of the requirements the following can help• Creation of a master block matrix

• Creation of an blocks design document

• Agreement between all disciplines on block definitions

• Requirements split down based on block

Defining Blocks

One thing that allows all of these ideas to converge is reuse such as the following • Creation of a set of master block Design/UX templates for use across

projects

• Creation of a base build with common functionality/previewing/features

• Separation of blocks in to Nuget packages

• Separation of blocks on the front end (Angular controllers/sass/BEM)

• Test scripting and tests can be done once and re-used

Reusability

Throughout all of these points the key moral is communication across disciplines• Communicate early

• Work on reusable areas across Design/UX/Dev and get

buy in

• Set up slack channels for easy communication

• Use collaborative systems such a Invision to allow

comments

• KEEP TALKING!

Communication

Thank you

Questions?