Working with UX, Design and Front End Developers
-
Upload
scott-reed -
Category
Technology
-
view
148 -
download
0
Transcript of Working with UX, Design and Front End Developers
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?