CMS to Service Portal

Transcription

1 CMS to Service Portal

2 Introduction

3 Interested in today s presentation? Text

4 Introduction ServiceNow Partner since 2011 Executed more than 400+ ServiceNow Implementations (small to large scale projects) (ex. Phase1 ITSM (IPCC), ESM (HRSM, CSM, Facilities, Legal, Marketing, and more), Service Portal, PPS, GRC, Custom Apps, etc.) More than 180+ clients and many long-term customers Well-Known partner for creating User Experience. Designing and building End-User portals since 2011 Have hundred's of designs and implemented CMS and SP successfully Have a team of people who knows this space very well and have the passion to deliver the best Some of the ServiceNow PS and Solution Consultants use our Portal design and work / User experience as we are the leaders in the space

5 Agenda

6 Agenda Design Best Practice Kloves Design Principles Kloves Implementation Objectives Kloves End-User Experience Approach CMS vs. Service Portal Next Steps

7 Service Portal Design & Development Best Practices

8 Web Design Best Practice 2018 Service Portal 1. Use of Flat Icons and return to (subtle) visual affordances in UI across the board Semi Flat 2. Subtle Scrolling effects Parallax effect 3. Sticky Navigation 4. Inventive Typograhy 5. Data Storytelling 6. Asymmetric Layouts 7. Curves remove square edges 8. Mobile animation 9. Unusual / Adventurous color combinations 10. Full screen background 11. Cinemagraphs 12. Adding Depth Mobile Devices 1. Include feedback touch movement 2. No carousel 3. Build for the future 4. Less is MORE 5. Easy and simple interface 6. Stay consistent on the assets 7. Compare with the best and Listen

9 Service Management Design Best Practice Incorporate common UI/UX design patterns, up to date web development and coding practices Keep clicks at minimum standard is 3 clicks Use client approved design as a blueprint for development All Content widgets must have dynamic functionality to allow clients to configure only in the backend versus development on the front end

10 Our Implementation Objectives Provide prescriptive guidance Drive value realization targets in an Agile Approach and Timeline Build incrementally with fast, integrated learning cycles Recommend OOB and best practice configuration principals - steer away from customization as much as possible Deliver transparently: enablement and knowledge transfer Effectively train to maximize platform and UI adoption Provide realistic expectations and realistic solutions Minimize Risk for Successful Implementation

11 Our Design Principles Simplicity Visual Hierarchy Navigation Consistency Accessibility Conventional Credibility User Centric Scalable

12 End-User Experience Approach

13 LEARN THINK DISCOVER IMAGINE INVENT EXPLORE CONSTRUCT BUILD DESIGN ITERATE TEST VALIDATE Examine Ideate Create Approval Interview and get a good understanding of your business and learn from users to uncover breakthrough insights Imagine and look for inspiration. Explore insights to form and prioritize a strategic plan to impact objects Build the plan and features through interactive digital and physical design / development solutions Gather user feedback to test the effectiveness of solutions, iterate, validate and get approvals

14 CMS vs Service Portal

15 Why upgrade to Service Portal? CMS Jelly Not Mobile Friendly Unstructured iframes Not the best experience Provide your own JS/ JQuery, Bootstrap, Html/CSS have a high risk and tendencies to break after upgrade SERVICE PORTAL Angular JS Responsive Design Development Improved Structure ServiceNow Out of Box Library Usage Overview - Reporting Out of box Portal can be configured using Drag and Drop capabilities on out of box widgets Form sizing issues due to client scripts or UI policies on the form Customizable and Re-usable Widgets What s a widget? Called Dynamic Blocks

16 Content Management System

17 CMS- Content Management System Contents Headers Navigation Menu Dynamic Blocks Lists iframes Layout CSS UI Scripts UI Scripts Configuration Configuration Page Page Detail Settings Content types List Definitions Login Rules Bootstrap Other JS codes

18 Service Portal Portals Announcements Themes Widgets CSS Menu Header and Footer Angular Providers Usage Overview

19 Service Portal

20 Kloves Service Portal Themes Semiconductor Company

21 Kloves Service Portal Themes Human Resources

22 Kloves Service Portal Themes Global Asset Management Firm

23 Service Portal Innovation

24 Kloves Service Portal Widgets

25 Tech Lounge / Kiosk Self Service automated check-in application to make simple transactions 1 2 3

26 Additional Information Youtube Channel: Kloves Service Portal: Kloves CMS designs:

27 Next Steps LIVE DEMO

28 Thank You