Infor UX Design System Launch

2
Karen VanHouten
Product Manager, Principal IA
Joel McClure
Design Director
Tim McConechy
Senior Architect
Mallory Lindsley-Cicek
Senior Designer
Erik Hageman
Director of Creative
Jamie Norman
Senior Usability Analyst
The crew
Introducing

3
From 10x to Xi
Strategic principles
The competitive environment
Resources
Adoption
Q&A
What’s on tap

6
Visual cohesion Design certiﬁcationAccommodate
legacy patterns
SoHo 10x objectives
Simplify and unify the visual
design language across all
Infor products
Review and advise on
implementation of standards
Move the visual design of
products in the direction of
modern web UI, within the
constraints of existing UX
From 10x to Xi Strategic principles Competitive environment Resources Adoption Questions

7
Unify the experience
LN EAM M3 Financials Lawson •••

8
SoHo 10x
Common Controls | Usage Guidelines | Consistent Nav Patterns
Unify the experience

10
Creating great UX is a moving target
and requires continuous effort
SoHo 10x
A unified visual style with
common components for
legacy systems
2013
SoHo Xi
A modern design system
rooted in user needs, built
with flexibility for the future
2015

12
User-centered
design process
Ensure we’re solving the
right problems in the most
eﬀective way
Design with
mobile in mind
Create responsive and
adaptive experiences across
devices and environments
Accessible
& inclusive
Ensure applications are usable
by all people of all abilities
Strategic principles
1 2 3

13
User-centered design
1

14
User research
Interviews, user testing,
usability testing, etc.
Customer site visits
Clarifying roles, observing
workﬂow, exploring the real
world environments in which
our users work
Conferences
& user groups
Sharing our strategy, listening
to concerns, fostering our
user-focused design
philosophy
Leverage contact with
end-users to drive change

15
Without
user-centered design:
A single, identical
experience
for every user.

16
With user-centered design:
Tailor-made experience
for speciﬁc roles and tasks.

User-centered approach
What is?
Assess the
current reality
What if?
Imagine what
could be
What wows?
Explore multiple
hypotheses
What works?
Test hypotheses
with users

18
Meeting users in the ﬁeld
First-hand observation

19
Sales Hub Home

20
Sales Hub Orders

21
Sales Hub Checkout

22
Hearing directly from the users
User interviews
Thoughts and reactions from
users to build user stories
User testing
Task-based tests and surveys to
validate hypotheses

23
Mobile in mind
2

24
Responsive
Consistency across devices,
well-considered break points,
and rules around what sizes
will work for speciﬁc content
and nav patterns
Touch-ready
Controls are optimized for
more seamless input on tablets
and phones
Changing contexts
Elevated user expectations
about how their software will
respond in any situation,
factoring in time of day,
geographical location, history,
and AI
Bridge constantly evolving needs and
expectations across all devices

How mobile powers our thinking
Make it clear
Clarity forces
decisions around
hierarchy
Streamline
Eliminate
unnecessary
steps
Consistent
& beautiful
Mobile
experiences are
more controlled

26

27

28
Accessible & inclusive
3

29
Addressing many
kinds of needs
Universal and
regulated compliance
standards
Controls are validated to
conform to industry and
governmental standards
Theming and
personalization
Making applications usable
by as many people as possible
Users with various physical
& cognitive challenges can
perform their work eﬀectively
Users gain greater control
to optimize the interface for
their needs

30
Business drivers
Minimize legal risk /
eliminate employee
discrimination
Conform to the lawAvoid revenue loss Optimize risk and cost
Right thing to doProfessionalism / quality

31
SECTION
508
A federal law that requires (among other
things) that all websites and applications
used by the federal government be
accessible to people with special needs.
(Other countries have similar accessibility
requirements).
USAInternational
WCAG
AA
Web Content Accessibility Guidelines
(WCAG) are part of a series of web
accessibility guidelines published by the
Web Accessibility Initiative (WAI) of the
World Wide Web Consortium (W3C), the
main international standards organization
for the internet.

32
Addressing many kinds of needs
Visual Auditory Mobility
& dexterity
Cognitive

33
Support for assistive technologies
To support accessibility, all important functionality must be available so that assistive
technology can understand and process the content, adapting it for the user.
These tools include:
Screen readers Braille terminals
Screen magniﬁcation
tools
Speech recognition
software
Keyboard overlays
Subtitled or sign-
language audio content

How we approached accessibility
Keyboard
support
All controls
use standard
keys
Screen reader
QA
Performing
QA for screen
readers
Third-party
validation
Verifying all
controls with
SSB Bart Group
Themes and
personalization
Theming
capability in the
controls

35
Light theme

36
Dark theme

37
High contrast theme

38
SoHo Xi base themes
Light Dark High contrast
User preference or optimized for environmental conditions

39
Personalization
Customer-deﬁned themes for branding or distinction between environments

41
Oracle Alta

42
SAP Fiori

43
Tableau

44
Workday

45
Salesforce.com

47
soho.infor.com

48
Code and
documentation
Code and documentation for
HTML/SASS/JS and component
design guidelines

49
Design articles
User experience educational
resources including: articles,
case studies, videos, demos,
and best practices.

50
Controls
HTML/SASS/JS
controls
optimized for
mobile, theming,
and accessibility
Icons
SVG and markup
icon library
Educational
resources
Articles, tutorials,
and case studies
Engagement
requests
Contact the SoHo
team to collaborate
with us
Forum
Discussion forum
(future)
< / >
soho.infor.com

52
Augment
Add new functions on
top of existing application.
•  Clear Work
•  Home Pages
•  Net New Models
Remodel
UX/UI eﬀort
Taking the current
structure and transforming
it (using SoHo Xi Layout
patterns). UX/UI eﬀort.
Build
UI + Process Patterns
Most disruptive.
Net new application or
complete reinvention of
a module or application.
Adoption paths

53
Spring 2015 release
Guidelines
Code, documentation,
design, and usage
specifications
Layout templates
Page layouts
recommended off-the-shelf
and flexible templates
Controls
Accessible components with
support for touch input and
responsive designs
Themes and
personalization
Enhanced control based
on user or customer
preferences
Visual elements
SVG icon library, color palette, and
data visualization guidelines
< / >

54
What’s
next?
•  Additional features for components
•  More page layout templates
•  Sample application templates
•  More themes
•  More articles and case studies, and tutorials
•  Results of user research and testing
•  Integrations to product platforms

55
As Infor’s internal creative agency we help design its software products and
envision the future of the Infor brand itself. Our mission: change the way
people work and think about work. To do that, we craft a new generation of
enterprise-level user experiences that disrupt preconceived notions of
business software. And along the way, we ﬁnd ways to surprise and delight.

Infor UX Design System Launch

Recommended

Recommended

More Related Content

Similar to Infor UX Design System Launch

Similar to Infor UX Design System Launch (20)

Recently uploaded

Recently uploaded (20)

Infor UX Design System Launch