Enterprise Applications are typically no more than a User Interface to a set of complex back-end systems. They allow Systems of Record to become Systems of Interaction by putting the records and the ability to interact with them in the palm of your hand. A good User Experience with such a Mobile App requires designing the entire end-to-end architecture with the User Interaction in mind. What is your enterprise mobile apps’ back-end? Is it a single ‘black-box’ serving up data via REST calls? Or is it a set of back-ends, communicating with your app’s UI via multiple APIs. Does your back-end include services that require you to change your app’s UI every time it gets updated? Does the nature of your back-end impact how you build your app, impact the UI design decisions you need to take? How do you test all your back-end(s) for functionality and performance? How do you integrate all these pieces together? How do you provide a good User Experience? As you build complex mobile apps, the architecture of your complete end-to-end system – Backend to UI – becomes critical to your application’s success. This presentation will help attendees identify key architectural decisions that they need to take early in their mobile app development lifecycle to help address these challenges, reduce risk and cost and enhance the User Experience. It will do so by presenting examples of successful architectures of mobile apps and explore key decisions they took and why.

1. © 2013 IBM Corporation
IBM Internal Use Only
1
Enterprise Mobile App UX
Designing from UI to Backend
Sanjeev Sharma
Executive IT Specialist
Rational Software
IBM Software Group

2. © 2013 IBM Corporation
#whoami
20 year in the software industry
17+ years as a solution architect with IBM
Areas of work:
–DevOps
–Agile Transformation
–Mobile Development
–Software Delivery Platforms
–Enterprise Architecture
Blog @ sdarchitect.wordpress.com
Twitter: @sd_architect
Sanjeev Sharma
sanjeev.sharma@us.ibm.com
IBM Software Group

3. © 2013 IBM Corporation3
Elements of Mobile UXElements of Mobile UX
Source: http://mobile.smashingmagazine.com/2012/07/12/elements-mobile-user-
experience/

4. © 2013 IBM Corporation
You Are Not Making Angry Birds (or Bad Piggies)
4

5. © 2013 IBM Corporation
It’s all about the Backend(s)
Source: http://www.flickr.com/photos/doug88888/8689222557/sizes/z/in/photostream/

6. © 2013 IBM Corporation
It’s all about the Enterprise Backend(s)
Mobile Apps are the
front-end to a complex
(enterprise) back-end
system
–Mobile Apps are rapidly
becoming a critical user
interface to enterprise systems
Heterogeneous Environments
Public Cloud
Private Cloud
Data Warehouse Mainframe
Enterprise
Service Bus
Directory
Identity
File
systems
Collaboration
Mobile App
Routing
Service
Third-party
Services
Portals
Content
Providers
EJB
Shared
ServicesArchives
Business
Partners
Messaging
Services

7. © 2013 IBM Corporation
Fragmented Platforms
 Native
 Mobile Web (HTML5)
 Hybrid

8. © 2013 IBM Corporation
Mobile Application Architecture: LinkedIn
Source: http://engineering.linkedin.com/testing/continuous-integration-mobile

9. © 2013 IBM Corporation
Architectural Decisions determine your UX
I. UI Technology
II. Backend Architecture
III.UX Flow
9

10. © 2013 IBM Corporation
I. UI Technology: HTML5 v Native v Hybrid
• UI is different between iOS, Android and BB
–Style guides are different
• Common code still needs to be branched
• Performance of Cordova is an issue
• Hardware SDKs require native
–Samsung Pen
–NFC
• Data Needs
–Connectivity or not
–Free data or not
10

11. © 2013 IBM Corporation11
App v. Mobile web: Content v Biz logic

12. © 2013 IBM Corporation
Know thy audience
• What platforms?
– BlackBerry is still huge in Asia and Africa
• <10% of paid apps are on Android
• Cultural content consumption is almost 100% on
iPhone
12

13. © 2013 IBM Corporation
II. Backend Architecture: Separation of
architectural components
• Build a platform
• Minimize the
impact of change
• UI and Backend
13
Source: http://econsultancy.com/us/blog/10072-what-every-executive-needs-to-know-about-api-technology

14. © 2013 IBM Corporation
Mobile Application Architecture: LinkedIn
Source: http://engineering.linkedin.com/testing/continuous-integration-mobile

15. © 2013 IBM Corporation
III. UX Flow: Mobile UX == Backend UX
15
Match your User Interaction with the UI to Interaction
Patterns with Backend Systems

16. © 2013 IBM Corporation
Choose a UI Architecture to match
Interaction Flow
16
Source: http://www.uxbooth.com/articles/designing-for-mobile-part-1-
information-architecture/

17. © 2013 IBM CorporationIBM Confidential
 Mobile Test Automation
− Support for native and hybrid applications running on
Android and iOS
− Natural language test and visual test editing
− Simplified IDE and mobile device clients for test
authoring, execution, and reporting
 Eclipse environment
− Mobile Test Automation
− Support for Selenium web GUI test automation
− Multi-channel test scenarios
− Integration with Rational Quality Manager and the IBM
Worklight mobile development platform
 End-to-end mobile testing
− Virtualization of middle-tier and back-end systems
− Dynamic instrumentation of mobile applications
− Capture and high-fidelity replay of multi-touch events
BETA available
now!
BETA available
now!
IBM Rational Test Workbench
High quality mobile apps built and tested for a rapidly evolving mobile infrastructure
A Word from My Sponsors: Mobile User Interface Automation

18. © 2013 IBM CorporationIBM Confidential
Verification
Points
Localized
string
Command
editor
Instructions
set
Supported Mobile Operating Systems
–Android 2.2+
–IOS 6+
–Android & iOS hybrid apps
• HTML5/CSS3
• JQuery Mobile
Four step-testing approach:
–Recording: play your test first with the recording-
ready app and generate a test script
–Authoring: edit and enhance the test script by
adding verification points and others instructions
–Playback: run the test script on a real device or an
emulator
–Reporting: generate an HTML report
Rational Test Workbench automated mobile
function testing
Visual Object Picker
Execution Report

19. © 2013 IBM Corporation
Parting Words: Steph Hays of FirstCustomer
19
“What the cr*p is this, why
am I here, and is it worth
my time?”
Source: http://www.stephaniehay.com/the-1-ux-failure-of-new-products/
‘I'm great at clarifying
content and UX so users
don't wonder, "What's this
mean?”’

20. © 2013 IBM Corporation2020
www.ibm.com/software/rational

21. © 2013 IBM Corporation
Acknowledgements and Disclaimers:
© Copyright IBM Corporation 2013. All rights reserved.
 U.S. Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule
Contract with IBM Corp.
IBM, the IBM logo, ibm.com,WebSphere, Rational, and IBM Mobile Enterrise are trademarks or registered trademarks of International
Business Machines Corporation in the United States, other countries, or both. If these and other IBM trademarked terms are marked
on their first occurrence in this information with a trademark symbol (® or ™), these symbols indicate U.S. registered or common law
trademarks owned by IBM at the time this information was published. Such trademarks may also be registered or common law
trademarks in other countries. A current list of IBM trademarks is available on the Web at “Copyright and trademark information” at
www.ibm.com/legal/copytrade.shtml
Other company, product, or service names may be trademarks or service marks of others.
Availability. References in this presentation to IBM products, programs, or services do not imply that they will be available in all
countries in which IBM operates.
The workshops, sessions and materials have been prepared by IBM or the session speakers and reflect their own views. They are
provided for informational purposes only, and are neither intended to, nor shall have the effect of being, legal or other guidance or
advice to any participant. While efforts were made to verify the completeness and accuracy of the information contained in this
presentation, it is provided AS-IS without warranty of any kind, express or implied. IBM shall not be responsible for any damages
arising out of the use of, or otherwise related to, this presentation or any other materials. Nothing contained in this presentation is
intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering
the terms and conditions of the applicable license agreement governing the use of IBM software.
All customer examples described are presented as illustrations of how those customers have used IBM products and the results they
may have achieved. Actual environmental costs and performance characteristics may vary by customer. Nothing contained in these
materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific
sales, revenue growth or other results.

22. 22