Creating Engaging SAP User Interfaces with Adobe Flex
•Télécharger en tant que PPTX, PDF•
5 j'aime•2,095 vues
A presentation from SAP TechEd 2010. It covers different ways of integrating Flex applications with SAP and discusses how Adobe internally has developed a Flex based frontend on top of SAP CRM to make call center agents more efficient.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Creating Engaging SAP User Interfaces with Adobe Flex
Similaire à Creating Engaging SAP User Interfaces with Adobe Flex (20)
Plus de Matthias Zeller
Plus de Matthias Zeller (9)
Dernier
Dernier (20)
Creating Engaging SAP User Interfaces with Adobe Flex
- 1. 2010 Adobe Systems Incorporated. All Rights Reserved. CD209 - Creating Engaging SAP User Interfaces with Adobe Flex Andreas Tan | Senior Enterprise Architect, Adobe Systems Matthias Zeller | Group Product Manager, Adobe Systems
- 2. 2010 Adobe Systems Incorporated. All Rights Reserved. 2 Adobe revolutionizes how the world engages with ideas and information 2
- 3. 2010 Adobe Systems Incorporated. All Rights Reserved. Our Customers Enterprise IT & Line of Business Creative Professionals Application Developers Marketers, Publishers and Advertisers Knowledge Workers Create and optimize media assets and online ROI Design rich, meaningful customer engagements Maximize creative breakthrough and impact Build engaging, effective applications across screens Enhance cross-team productivity and collaboration 3
- 4. 2010 Adobe Systems Incorporated. All Rights Reserved. Enterprises Face a User-Centric Moment of Truth
- 5. 2010 Adobe Systems Incorporated. All Rights Reserved. What Are Intuitive User Experiences? Effective, Efficient, Engaging, Easy to learn, Error free Personalized, responsive experiences across devices and channels Communication & collaboration in context Harmonization of backend processes and services
- 6. 2010 Adobe Systems Incorporated. All Rights Reserved. Why Do Intuitive User Experiences Matter? Forrester August 7, 2010 The State Of Enterprise IT Budgets: 2010 by Heidi Lo and Andrew Bartels
- 7. 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe LiveCycle ES2 RIA SERVICES DOCUMENT SERVICES PROCESS MANAGEMENT
- 8. 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Project Hendrix A new user experience for Adobe call center representatives Built on SAP CRM, Genesys CTI and custom applications Mission: Reduce average handling time Increase first call resolution Increase customer satisfaction 8
- 9. 2010 Adobe Systems Incorporated. All Rights Reserved. The Discovery phase
- 10. 2010 Adobe Systems Incorporated. All Rights Reserved. The Discovery phase
- 11. 2010 Adobe Systems Incorporated. All Rights Reserved. The Discovery phase
- 12. 2010 Adobe Systems Incorporated. All Rights Reserved. The Discovery phase
- 13. 2010 Adobe Systems Incorporated. All Rights Reserved. The Discovery phase Unnecessary steps Too much room for error Too many steps, processes too long Process was tied to the systems Too many different systems Too many band-aids
- 14. 2010 Adobe Systems Incorporated. All Rights Reserved. The Discovery phase
- 15. 2010 Adobe Systems Incorporated. All Rights Reserved. The Discovery phase No progressive disclosure No data visualization Poor information architecture Tiny buttons, no keyboard shortcuts
- 16. 2010 Adobe Systems Incorporated. All Rights Reserved. What we found The tools The processes SNS CSUI CTI/Genesys LWS Unlocking UPS 1. Find SKU 2. Enter payment details 3. Check billing address 4. Check delivery address 5. Order confirmation 1. Check elligibility, register previous product, if purchase is from reseller, POP needs to be sent 2. Find upgrade SKU 3. Order new product 4. Check billing address 5. Check delivery address 6. Escalate for validation by tier 1 senior 7. Order confirmation 1. Check elligibility 2. Find product 3. Order new product 4. Check billing address 5. Check delivery address 6. Take payment details 7. Order confirmation 1. Find the original order 2. Register orginal PSN 3. Enter serial number in serial number issuer 4. Give reason for reserialisation and register PSN 5. Cancel old PSN and remove from contracts 6. Adds SN to DNR server 1. Send TOL form to customer 2. Status “Pending Customer Action”, awaiting the TOL form to be returned. 3. When CS receives the completed TOL form: 4. Attaches it to the case 5. Transfer from original owner to the new owner 6. Email sent to original and new owner that TOL has been completed ESD returns 1. Register serial number 2. Check elligibility (within 30 days, purchase from direct) 3. Create RMA number (returns number) 4. Send LOD by email 5. Customer sends back digitally signed LOD 6. Case delegated to a Tier 1 CS agent 7. Agent checks LOD, disables serial number and escalates to Senior 8. Senior releases RMA to trigger payment 1. Find CRM Delivery N° 2. Find UPS Shipping Tracking N° 3. Enter N° in UPS website Shrink Wrap returns 1. Register serial number 2. Check elligibility (within 30 days, purchase from direct) 3. Create RMA number (returns number) 4. Disable serial number 5. For free uplift: Uplift arranged 6. Customer sends software with RMA to warehouse 7. Warehouse receives product, releases RMA and funds automatically sent to customer Fedex Notepad Outlook Kana Knova CRM
- 17. 2010 Adobe Systems Incorporated. All Rights Reserved. Multitude of slow, cumbersome tools. Overly complicated processes. Frustrated agents. Dissatisfied customers. What we found
- 18. 2010 Adobe Systems Incorporated. All Rights Reserved. Our vision Provide an all-in-one, process-driven solution.
- 19. 2010 Adobe Systems Incorporated. All Rights Reserved. Turning the vision into reality
- 20. 2010 Adobe Systems Incorporated. All Rights Reserved. Turning the vision into reality
- 21. 2010 Adobe Systems Incorporated. All Rights Reserved. Turning the vision into reality
- 22. 2010 Adobe Systems Incorporated. All Rights Reserved. Before and after
- 23. 2010 Adobe Systems Incorporated. All Rights Reserved. Buying products
- 24. 2010 Adobe Systems Incorporated. All Rights Reserved. Buying products
- 25. 2010 Adobe Systems Incorporated. All Rights Reserved. Documenting a call
- 26. 2010 Adobe Systems Incorporated. All Rights Reserved. Documenting a call
- 27. 2010 Adobe Systems Incorporated. All Rights Reserved. CTI
- 28. 2010 Adobe Systems Incorporated. All Rights Reserved. CTI
- 29. 2010 Adobe Systems Incorporated. All Rights Reserved. Demo 29
- 30. 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe LiveCycle RIA Services LiveCycle Mosaic ES Assemble intuitive, personalized and highly productive applications through a composite RIA framework LiveCycle Collaboration Service Build real-time, multi-user collaboration into existing or new rich Internet applications LiveCycle Data Services ES Improve the performance and simplify the development and integration of your RIA application with backend systems
- 31. 2010 Adobe Systems Incorporated. All Rights Reserved. Options to Integrate Flash/Flex with SAP applications Web Dynpro Rich Islands for Flash Flex apps connecting to SAP via SOAP or REST Flex apps connecting to SAP via LiveCycle Data Services 31
- 32. 2010 Adobe Systems Incorporated. All Rights Reserved. Embedded Flex in SAP: Web Dynpro Rich Islands for Flash Rich UI components Mashups like Google maps Dashboards Flash Video and Adobe Connect http://wiki.sdn.sap.com/wiki/display/EmTech/SAP+Rich+Islands+for+Adobe+Flash
- 33. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Direct connections between SAP and Flex/Air Adobe Flex Client Adobe Flex/AIR applications in Flash Player SAP ERP Existing Functions of SAP systems HTTP SOAP connection REST connection
- 34. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Direct connections between SAP and Flex/Air Development effort can be reduced Missing Functionality Data Management Real-time Messaging Possible performance issues Rendering of XML in flash player Network traffic and SAP system load High volume of users Adobe Flex Client Adobe Flex/AIR applications in Flash Player SAP ERP Existing Functions of SAP systems Why is XML/SOAP not always the best solution?
- 35. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. LiveCycle Data Services Improved Data Management Most efficient framework for data handling between RIA Client, RIA Server and backend SAP system Based on CRUD, as is the SAP Enterprise Services approach Increased Performance Optimized protocol between RIA Client and RIA Server Lazy Loading and Paging reduce requests on SAP server and network Integration with Enterprise security infrastructure Real-time messaging based on push mechanism PDF generation and WSRP portal support
- 36. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 36 What is LiveCycle Data Services ES Client Client Client Web Server J2EE Server Live Cycle Data Services Client application is typically an Adobe Flex or AIR application. Flex and AIR applications use Flex components to communicate with the LiveCycle Data Services ES server The LiveCycle Data Services ES server is a combination of a J2EE web application and a highly scalable network socket server. LCDS ES application consists of two parts • Client-side application • Server-side Java web application
- 37. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 37 LiveCycle Data Services ES Features Web Service Live Cycle Data Services ES RPC Services HTTP Service Remoting Service Publish & Subscribe Messaging Services Collaboration Real Time Data Push Data Syncronization Data Mgmt Services Off-line Applications Data Paging Service Adapters Live Cycle Hibernate Cold Fusion Java or SAP JCO JMS Custom Proxy Service Portal Deployment RIA PDF Generation SQL
- 38. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 38 RPC Services Diagram (Authentication for SAP sample) • Enable asynchronous requests to remote services • Process the requests and then return data directly to the client • Access data through client-side RPC components that include: • HTTP GET or POST (HTTP services) • SOAP (web services) • Java objects (remote object services) Use Remoting (remote object services) where possible due to the significant gains in response time!
- 39. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 39 Data Management Service • Supports automatic and manual synchronization of a common set of data • On multiple clients • On server-side data resources • The client automatically tracks changes made to the objects • Can apply those changes on the server objects • The server can update any clients viewing these objects
- 40. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Physical Architecture of Flex, LCDS and SAP Integration LoadBalancer ECC (cluster/group) Server 2.1 Server 2.2 Server 2.3 … Server 1.m CRM (cluster/group) Server 1.1 Server 1.2 Server 1.3 … Server 1.n SAP Your Application JBoss LCDS Cluster Server 1.2 ... User Desktop Internet Browser Flash Player Your Flash Application JCO - JNI – TCP/ IP Server 1.3 ... Server 1.n AMF / HTTPS FIREWALL FIREWALL
- 41. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. LiveCycle Data Services ES client architecture 41
- 42. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Configuration between LCDS and JCO / Backend APIs 42 Sample MXML codes to make connection from Flex to the backend thru LCDS • For Manage Data Services <mx:DataService id="customerService" destination="CustomerService" autoCommit="false" autoSyncEnabled="true"/> • For Remote Object Services <mx:RemoteObject id="loginRO" destination="LoginService"/>
- 43. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Data-management-config.xml 43 <destination id="CustomerService"> <adapter ref="java-dao" /> <properties> <!-- <use-transactions>true</use-transactions> --> <source>com.adobe.itapps.demo.service.CustomerService</source> <scope>application</scope> <metadata> <identity property="customer"/> </metadata> …. </properties> </destination>
- 44. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Remoting-config.xml 44 <destination id="LoginService"> <properties> <source>com.adobe.isapps.sparta.ds.LoginService</source> </properties> </destination>
- 45. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. JCO Connection considerations 45 Depending how your application works, you need to decide whether to you use Stateful or Stateless JCO connection; Example: CRM call center locks customer record while a user is working on a transaction for the customer. In this case, Stateful maybe appropriate to use
- 46. 2010 Adobe Systems Incorporated. All Rights Reserved. Future Roadmap: SAP Connector for LiveCycle Data Services 46
- 47. 2010 Adobe Systems Incorporated. All Rights Reserved. SAP Adapter for LCDS Overview 47 Connector to SAP to ease development of RIA on top of SAP applications Flash developers can find and invoke an RFC function as a Flex remote service Flash Builder plug-in provides model driven development for SAP RIA development
- 48. 2010 Adobe Systems Incorporated. All Rights Reserved. SAP Flash Builder Integration 48 Connect to one or more SAP systems Introspect and find RFC modules and functions
- 49. 2010 Adobe Systems Incorporated. All Rights Reserved. Data model view with relationships 49 Map SAP RFC functions to Flex remote functions Customize functions in Flex - Modify function names, parameters, inputs and outputs Generate ActionScript facades to communicate with SAP
- 50. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Questions? Andreas Tan – atan@adobe.com Matthias Zeller – mzeller@adobe.com 50
- 51. 2010 Adobe Systems Incorporated. All Rights Reserved.
Notes de l'éditeur
- MISSION Adobe’s mission is to revolutionize how the world engages with ideas and information. We are virtually everywhere you look, from TV and movies to magazines, to websites to enterprise applications. Adobe has always been at the heart of making engaging experiences happen, and we fuel the content creation and delivery ecosystem in a way no other technology company can. Over the past 27 years, we have enabled businesses to reach consumers regardless of what computer they have, what browser they like, or what device suits their needs, as technology and the web have evolved. I would like to spend a few minutes walking you through how we see the current technology landscape; what challenges that landscape is creating; and how we make a difference. Let me start with the major trends we’re seeing . . .
- OUR CUSTOMERS We serve one of the most diverse customer bases in the industry, ranging from marketers and publishers through enterprises, creatives, developers and knowledge workers in every geography around the world. [CLICK TO BUILD] And while our fundamental approach to helping companies create, deliver and optimize content remains consistent, we also tailor our solutions to best meet customer needs: For marketers, publishers and advertisers, we provide end-to-end solutions that extract greater value from media and online marketing assets by providing greater reach, better customer insight and deeper engagement For enterprise IT and line of business, we provide solutions that effectively reach and engage customers in critical tasks and automate the internal and external processes behind them For creative professionals, we provide a comprehensive suite of tools and services to create and deliver compelling experiences across print, digital media, and multiple screens, maximizing the value and impact of content For application developers using web technologies, we provide tools and services to build the most engaging, effective applications on the Internet across major operating systems, browsers, and devices And for knowledge workers, we provide solutions to enhance productivity and collaboration across teams working in heterogeneous environments
- At Adobe experience innovation starts with how we view the user. Vendors have talked for a long time about “users” as the core of their development. But they work out from the system to the user. And of necessity their view of users is really about a community of one - one user, and if actual people don’t fit this description than they operate at their own peril. At Adobe, we work out from the end user to the various systems that must be brought into play. And it is clear that the interaction models that customers experience in the consumer world – starting with the social networks as destinations and now infiltrating every web application transaction we initiate or participate in, are defining their expectations for enterprise applications as well.
- When you break it down, an intuitive user experience has a variety of characteristics: Effective. Supports goal accomplishment with minimum effort. Efficient. Allows rapid task completion Engaging. Offers enjoyable day-to-day operation. Easy to learn. Supports rapid initial skill acquisition &expanded skill development with experience. Error free. Prevents errors and supports error recovery. And to support these five E’s, it has to be personalized, enable the user to collaborate with others in the context of the task at hand, all while completely abstracting and automating all backend processes.
- In a recent survey done by Forrester, LOB people were asked about their top priorities. Looking at their top priorities, you can quickly see how our RIA solutions help them achieve their goals. Intuitive RIA driven self service applications reduce the cost of servicing customers by streamlining and simplifying the user interaction reducing the number of calls to the call center Intuitive applications for employees increase people’s capabilities allowing them to quickly respond to customers and increase the number of customers they can service. RIA self service also increases customers satisfaction and retention by empowering users to help themselves anytime and anywhere. And RIAs introduce new customer interaction paradigms opening new markets and innovating services not possible in the past (offline, complex processing, real time, collaboration … )
- To set context for our roadmap, it is important to understand what LiveCycle is today. We released LiveCycle ES2 in November of 2009. It is based on three key pillars: RIA Services, Process Management, and Document Services.
- So we went away and conducted some research. This is the first phase of our 3D methodology called Discovery.
- First of all we went off to the call centers and we took a lot of video of agents receiving calls from customers We weren’t just interested in what was happening on their screens We were also interested in what was going on on their desks, in their cubicles, how they were reacting to different customer questions etc. We noticed that they were using a notepad and postits a lot – apparently the CRM system crashed a lot, so they were having to write things down We noticed that there was a cheat sheet of the most common process pinned to their wall We noticed the “meercat” effect: heads popping up frantically above cubicle walls looking for help answering a question We noticed that weighty training manuals were hidden in a drawer beneath their desk
- From there, we went and interviewed many more people: trainers, call center managers, Adobe managers, Adobe executive team and the project sponsors to get their view on pain points and where improvements could be made
- We took a good look at the different tasks that the agents had to perform on a daily basis
- We noticed that there was much room for improvment in some of these processes. Typically, most processes were tied to the systems, meaning that a process would have to adapt itself to how a system worked and not the other way round The steps in the processes were often too long and too complicated, demanding the agent to switch between different systems and different user interfaces There was too much room for error between all of the systems that the agents were having to use- they were having to manually copy and paste data from one system to another There were band aids. By band aids, I mean there were processes conceived years ago, and to adapt an old process to new requirements, additional steps were included, making it even more complex. These processes had not been entirely re-thought.
- And finally we looked at the systems themselves. An agent had to typically use a dozen different systems throughout their daily work schedule. This is a screenshot of one of them: CRM
- Agents had many complaints about the systems they had to use, but the system they disliked the most was CRM CRM was slow, it crashed a lot and there were regular time out issues, meaning that agents would often lose work There was no progressive disclosure- all of the functionality was displayed and was not filtered depending on an agent’s role or step within a particular process There was little information hierarchy- data was presented at the same visual level, meaning that quickly scanning a screen to find something was very difficult There was no data visualization to help agents quickly understand a given situation- just text and forms And call-to-action items: buttons, drop down lists, navigation links etc. were very small, hard to detect and dotted all around the interface.
- Our conclusion therefore was that agents had too many tools and were having to memorize too many processes
- And if you have a multitude of slow, cumbersome tools and a bunch of overly complicated processes you will get frustrated agents. And this has a direct impact on customer satisfaction. Call center management told us that they had a real problem with agent churn rate and in their view, this was directly related to the processes and tools they were having to use. We discovered that to train an agent on the tools and processes would typically take about a month, getting them up to speed would take 2-3 months and the churn rate was 6 months.
- It therefore became apparent that we should be providing agents with an all-in-one, process-driven solution.
- First thing we had to address was the processes. We took data from the process documents and training manuals, and plotted it out into a huge process map, so that we could take a global look at all of the different steps, actions and systems that the agents were having to use
- Once we had gained a better picture about how we were going to improve processes, we could then start to create the user interface. The first step in creating an interface is the wireframing phase This is an essential phase as it allows a designer to rapidly create a multitude of different scenarios and user paths without thinking about the visual design (these are often in monochrome) Very early on, designers will then test these different scenarios on real users. The fact that the wireframes are basic monochrome mock-ups means that users will concentrate on functionality rather than aesthetic appeal and this will glean important feedback about the functionality before the visual design stage
- Once the wireframes have been approved by users, business and project stake holders, they are then transformed into a visual design A visual designer will use colour, iconography, layout and choreography to create visual hierarchy and visual cues within an interface, bringing to the forefront the elements that the user needs at any given moment. A prototype was also produced, allowing for a real sense of how the application would appear under a set of different scenarios. The visual design mock-ups were approved by users, business and project stake holders before passing off to the development team.
- To end the presentation, I’d like to provide a few examples on how we were able to maximise productivity through improving the interface.
- Selling in CRM isn’t easy. Firstly, a sales agent would have to go the Adobe website to relay information about products, upgrades, cross sells, upsells to the customer. Then, to process an order for a customer, an agent would have to go into our knowledge base to download the latest price list spreadsheet. They would then open the spreadsheet and trawl through the 2000 rows to find the SKU code to enter into CRM Once entered into CRM, a price would be returned and the agent would collect the customer’s contact and payment details and process the order For an extremely simple purchase, an experience agent would take about 4 minutes
- In Hendrix, we aggregated all of that selling functionality An agent can quickly locate the required product in an easy to use catalogue-style interface Clicking on a product will expand to give more information and this can also be used for training purposes Adding the product to the customer’s cart will first involve configuring it (ie selecting the language, platform, version etc.) and at this stage the agent will be proposed with an upsell product that they can try to convince the customer to purchase instead From the cart, a number of cross sell products are also proposed When the customer is ready to purchase, the agent identifies the customer, finding or creating a customer record and then processes the order This entire process takes a minute. This is a 75% reduction compared to the same process before.
- For all interactions with the customer, an agent will have to document these within case notes. In CRM this requires having to configure a bunch of different drop down menus, and typing out the details of the interaction in the case notes field. Aswell as this being very time consuming, there are other problems too. As the majority of the captured data is hand typed, this is problematic for data mining, as no two agents will use exactly the same phrase to describe a similar problem. As CRM is prone to regular crashes, an agent will note down the details of the interaction first in a notepad and then transcribe all of that information after the call is finished into CRM An agent can spend up to 5 minutes wrapping up a case in CRM after they’ve finished the call with the customer
- Hendrix allows the agent to complete case notes during the call with the customer A process wizard allows the agent to quickly configure the case depending on the customer’s issue Case notes are then automatically pre-populated the case pod (functionality to be implemented in future release) This will mean that for the majority of cases, agents will no longer have to type out notes. As these notes are system generated, they can easily be data mined aswell. Wrap up time is therefore greatly reduced, allowing agents to get on the next call.
- Using the softphone feature in CRM is not easy A dozen buttons are displayed to the agent The buttons are small and there are no icons to distinguish between the different functionality. Mistakes happen often.
- In Hendrix we designed the softphone feature using progressive disclosure. When an agent is not on a call, they have to select a state (I’m on a break, I’m taking a training course, I’m ready to take a call, etc). We therefore display only the state selector and no other buttons When an agent is on a call, we’ve managed to reduce the dozen CRM buttons into only five here. When an agent clicks on a button such as “Hold”, all other buttons disappear until the agent comes off of hold. Simple. And fewer mistakes.