GEL Doc

Transcript

1. GEL Doc
2. Along the new capability of PuPDoc, we need to shape a visual language for it that should be consistent with GEL, scalable and accessible. So we gave it a name GEL Doc, aims to provide a robust UI solution for Next Gen PD, Next Gen, Job Card etc. GEL Doc considers common page level layout across PageUp products, such as
3. What we consider
4. Job card PD
5. Apply Form
6. Onboarding
7. Offer card
8. Perf Review
9. Common Attributes Areas Navigation (configurable) CTA Print Many sections (dynamic add, configured) Revision History Sub Pages Approval Collaboration Edit/Read mode Position Des Job Card Offer card Perf Review Apply Form Onboarding Form
10. Other products
14. First Design Spike
15. Design Iteration Two
16. Name convention PUPDoc GELDoc
17. Design Principles Flexible Layout handles well with features on/off, with arbitrary dynamic data Friendly Maximize the view area for important content, keep the document centered, reduce cognitive load. Reusable Page template can be leveraged by most of the form pages Desktop First Ensure desktop have best experience, mobile optimized. Accessible Keyboard navigation, user has the control of the UI on any devices Printable/Exportable Print version and export of the document is nice formatted
20. Hide header and footer when scrolling up and down
21. Section focus state
22. iPad landscape
24. Demo
25. What the Next GEN X looks like
26. Job card Collaboration ToC
27. Offer card ToC
28. Apply form Stepper over Breadcrumb
29. Performance Review context List Group over Breadcrumb
30. OB Form
31. Ultimate Form Page Template? Next Gen PD will be the first testing candidate of GELDoc Testing the template usability along with PD UX experiment Before we implement sophisticated collaborative doc
32. What is coming next? Form best practices • Form layouts • Keyboard navigation • Screen reader • Error validation workflow Approval Printability/Exportability Print forms like the physical document, PDF Broader workflow The entering page and exiting page
33. Design As A System
34. GEL Templates
35. Questions & Feedback