Transforming UX with Fluid UI
Nick Goupinets
Lead Developer, UTS
McMaster University
My Background
• Building enterprise systems for over 10 years
• McMaster University, eHealth, Intelliware and
RIM
• SCJP, SCJD, SCWCD, SCEA, ScrumMaster,
TOGAF, SEI, CITA, Cloud+, ITIL …
Agenda
• Fluid UI
– what / why / responsive design / dev experience
• Agile Process
– manifesto / values / terminology
• McMaster Story
– requirements / lessons learned / demo / results
FLUID UI
What
•
•
•
•
Enhancement of the PS “classic” UI
Moves away from the pixel-perfect design and layout
Leverages existing PeopleSoft development skillset
Use of mainstream web technologies:
Why
• Delivers new integrated experience:
– more than mobile and responsive designs
– provide efficient and intuitive UI
• Adapts user interface for different formfactors
• Designed around roles and is personalizable
• Future of PeopleSoft UI - Default UI in 8.55
Responsive Design
• Fluid UI pages can appear differently
depending on the device form factor
Responsive Design – Single Page
PIA WYSIWIG
PIA WYSIWIG
Fluid
Fluid
AGILE PROCESS
BDUF
Agile Manifesto
Agile Principles
• Customer satisfaction by early and continuous
delivery of valuable software
• Welcome changing requirements, even in late
development
• Working software is delivered frequently
• Close, daily cooperation between business
people and developers
Agile Principles
• Projects are built around motivated
individuals, who should be trusted
• Face-to-face conversation is the best form of
communication (co-location)
• Working software is the principal measure of
progress
• Sustainable development, able to maintain a
constant pace
Agile Principles
• Continuous attention to technical excellence
and good design
• Simplicity—the art of maximizing the amount
of work not done—is essential
• Best architectures, requirements, and designs
emerge from self-organizing teams
• Regularly, the team reflects on how to become
more effective, and adjusts accordingly
SCRUM
• Simple agile framework
• Iterative and incremental
SCRUM
•
•
•
•
•
•
Delivers ROI frequently
Embraces change
Avoids waste
Transparency
Productivity
Continuous improvement
OUR STORY
What
• Maintenance Management
• McMaster PeopleSoft stack – all key PS
modules
– CS, FS (9.2 last year), HR
• Prior used AiM iDesk from AssetWorks
Project kickoff
• Two page requirements document
• Two epics – Work Orders and Service Requests
• Interviewed user to create the backlog
– Built a list of stories
– Mocked user interface
custom Primary Forms
Welcome, %MacID%
My Work Orders
Task Details
Today
Work Order Task List
My Service Requests (50)
My Work Order Tasks (15)
For a complete list of
fields see the
corresponding use case.
Work Order ID
Description
«navigate»
«navigate»
Start / End Date
Attachments
Priority
Tomorrow
Attachments
Work Order List
...
Status
Checklists
«navigate»
Checklist
Attachments
Time
Notes
Step
«navigate»
Type
Add
«navigate»
Completed
Description
...
Change
Time
There can be multiple
checklist steps.
Work Order ID
«navigate»
Notes
Notes
Task Number
Craft
Resource Line Number
Hours Worked
Date
Add
First iterations
• Non-functional DEV environment
– Broken after applying an upgrade
• Fluid documentation is hard to locate
– Late 2015 – Fluid is cutting edge
PeopleSoft Update Manager
• A VM provided by Oracle for CS, HR, FS
• A complete copy of the environment
• Includes test users/data
Peoplesofttutorial.com
• Dan Sticka
– ERP Consultant / owner at DannyTech.net
• PeopleSoft Fluid
– A tutorial for PeopleSoft Fluid development
• Hands-on, detailed
• In 2015 – the only useful
Fluid resource
Lessons learned
• Complex layouts for Fluid do not work well
• The main message: Keep Design Simple
Second attempt
• Use of best practices
– Put all code into application packages
– Apply MVC design pattern
• Keep It Simple
System Design
DEMO
Summary
• Rollout was successful – very positive user
feedback
• Fluid UI is a valuable new paradigm to have in
the toolset
– Yet not without issues (keep it simple!)
Waterfall would have failed
Resources
• Peoplesofttutorial.com
• Blogs
– Jim Marion - http://jjmpsj.blogspot.ca
– Sasank Vemana - http://pe0ples0ft.blogspot.ca
• PeopleSoft Spotlight Series
• Oracle University
Q&A