Download presentation to watch embedded GIFs! Practical guide to creating great UI for digital workplace solutions: best practices, design fuck ups, usability research tools and more!

1. Anna Kravets
CEO, ANROM Social Business
525 px
40 px
Digital Workplace Design
is more than a picture

2. # digital workplace
# interactive intranet
# UI/UX
akravets@anromsocial.com
Cell-phone, Telegram,
WhatsApp:
+ 38 068 908 25 33
About ANROM Social Business
Tech Telecom Retail & FMCG Other
About me
Anna Kravets
CEO
ANROM Social Business

3. Navigation
Availability
Content
Search
Page load time
Functionality
Beauty
or
usability?
Brandbook, latest trends
Icons, Images, Fonts
Headers, Footers, Backgrounds

4. Beauty
or
Usability?
Showing off on conferences
Easy to sell to executives
Faster processes
Faster learning
Easier support
Higher user adoption
Greater ROI

5. When “beauty”
is a priority

6. Stylish look from design agency

7. After 1.5 months of reviews by executives
UI on launch date

8. …in 9months after launch

9. Aesthetic-Usability Effect
Paradox, when users
consider more pleasing
design more usable than
it actually is

10. Our design
fuck-up’s

11. In a red mood…

12. “designed in London” effect

13. Branded to the fullest

14. Eggs & Blossoms

15. Operation “Navigation”

16. Ideal example (not ours, unfortunately)
http://www.theworldsworstwebsiteever.com

17. Best
practices

18. Homepage

19. Homepage

20. Department’s page

21. Department’s page

22. Workgroup page

23. Workgroup page

24. Mobile version

25. Mobile version

26. Creative
life hacks

27. Funny progress bar
https://codepen.io/Errec/pen/RQYPXz

28. Playful login page

29. Forms, which don’t push away

30. How to assess
design?

31. Data-driven approach. What users do?
• Usability Hub
• Chalkmark
• Helio
• Яндекс Метрика
Click-tests
• Usabiity Hub
Navigation tests
• TeamViewer
• Zoom.us
• Screencast-o-Matic
Moderated remote usability studies
• EyesDeside
• Inspectlet
• EyeSee
Eyetracking

32. Data-driven approach. What users say?
• Google Forms
• Survey Monkey
• Jot Forms
A/B testing, Surveys
• Usabiity Hub
5-second test

33. How to make
cool UI design?

34. What are the inputs?
Business goals
UI/UX principles
User feedback
Budget
Platform limitations
Environment limitations (browsers, devices, etc.)
Legal staff (personal data, labor legislation, etc.)
1
2
3
4
5
6
7

35. Gather requirements
Define limitations
Manage expectations
– communicate
limitations
Create spec for UI
designer
Together with
integrator/IT!
Communicate
limitations to UI
designer
Assess designer’s work
according to
requirements
Assess
implementability
Test
with users
Agree with
stakeholders
Launch
for everybody

36. Photos
Icons Infographics
https://www.pexels.com
DIY design tools
GIF animations
https://www.iconfinder.com https://piktochart.com http://www.screentogif.com

37. AnnaKravets
CEO
ANROM Social Business
akravets@anromsocial.com
+ 38 068 908 25 33
twitter: @AnnaKravets
Thanks for attention :)