11/16/2016 ui design template review - gwpc ux brief.pdf · ui design template review 11/16/2016....
TRANSCRIPT
![Page 1: 11/16/2016 UI Design Template Review - GWPC UX Brief.pdf · UI Design Template Review 11/16/2016. Agenda 2 •Welcome & Agenda •Overview •Research •High Fidelity UI Templates](https://reader030.vdocument.in/reader030/viewer/2022040717/5e2218a5c558327bb9241418/html5/thumbnails/1.jpg)
UI Design Template Review
11/16/2016
![Page 2: 11/16/2016 UI Design Template Review - GWPC UX Brief.pdf · UI Design Template Review 11/16/2016. Agenda 2 •Welcome & Agenda •Overview •Research •High Fidelity UI Templates](https://reader030.vdocument.in/reader030/viewer/2022040717/5e2218a5c558327bb9241418/html5/thumbnails/2.jpg)
Agenda
2
• Welcome & Agenda
• Overview
• Research
• High Fidelity UI Templates
• Questions?
![Page 3: 11/16/2016 UI Design Template Review - GWPC UX Brief.pdf · UI Design Template Review 11/16/2016. Agenda 2 •Welcome & Agenda •Overview •Research •High Fidelity UI Templates](https://reader030.vdocument.in/reader030/viewer/2022040717/5e2218a5c558327bb9241418/html5/thumbnails/3.jpg)
Key Activities
1. Conduct research for WellSTAR
Templates and UIS Documentation
a. Day-in-the-life Contextual
Interviews
b. User Journey Mapping
Exercises
c. Persona Development
2. Develop Wireframes & Designing for
key UI Templates/Patterns
3. Complete User Interface Standards
and ADA Compliance Guidelines
Deliverables
• User Interface Standards Doc
• ADA/508 Checklist
• Wireframes – for purpose of UI
patterns only
• High Fidelity UI Templates
DOGGR’s WellSTAR Scope:
1. WellSTAR Information Architecture
2. General Software Design activities
3. Front-end UI Template Development
Key Input to…
User Experience-led design; must-have activities: Wireframing, User Interface Standards Documentation and
Hi-Fi UI Templates.Overview
90 d
ays
User Interface Standards Activities
![Page 4: 11/16/2016 UI Design Template Review - GWPC UX Brief.pdf · UI Design Template Review 11/16/2016. Agenda 2 •Welcome & Agenda •Overview •Research •High Fidelity UI Templates](https://reader030.vdocument.in/reader030/viewer/2022040717/5e2218a5c558327bb9241418/html5/thumbnails/4.jpg)
RESEARCH
4
![Page 5: 11/16/2016 UI Design Template Review - GWPC UX Brief.pdf · UI Design Template Review 11/16/2016. Agenda 2 •Welcome & Agenda •Overview •Research •High Fidelity UI Templates](https://reader030.vdocument.in/reader030/viewer/2022040717/5e2218a5c558327bb9241418/html5/thumbnails/5.jpg)
Research Objectives
Conduct a contextual inquiry in order to understand on how users do it today, with a focus on what works well and
what does not, and how they want to be able to operate differently.Overview
1. Understand what users have for key stages/phases and more granular tasks over time.
2. Understand what questions users are trying answer.
3. Understand what touchpoints users rely on to find the information they need or need to share. *This can be applications, devices, paper documents, people etc.
4. Understand what pain-points exist today for engineers / field inspectors .
5. Understand what opportunities for improvement of the user journey / user experience there are for a future system design.
![Page 6: 11/16/2016 UI Design Template Review - GWPC UX Brief.pdf · UI Design Template Review 11/16/2016. Agenda 2 •Welcome & Agenda •Overview •Research •High Fidelity UI Templates](https://reader030.vdocument.in/reader030/viewer/2022040717/5e2218a5c558327bb9241418/html5/thumbnails/6.jpg)
Day-in-the-life: Who we talked to
6
Subject Matter SME/POParticipatio
n
Department of Conservation –
DOGGR/CA
Chris Jones (BFD)
Henry Iwuh (BFD)
Dean Kahler (BFDi)
Gene Mullenmeister (BFDi)
John Huff (CYPRESS)
Hafiz Ali (CYPRESS)
GWPC (RBDMS)
Tom Kerr
Paul Jehn
Jim Milne
Legend
Full participation
Participated offline via individual review of materials
No participation
![Page 7: 11/16/2016 UI Design Template Review - GWPC UX Brief.pdf · UI Design Template Review 11/16/2016. Agenda 2 •Welcome & Agenda •Overview •Research •High Fidelity UI Templates](https://reader030.vdocument.in/reader030/viewer/2022040717/5e2218a5c558327bb9241418/html5/thumbnails/7.jpg)
Persona Example
7
![Page 8: 11/16/2016 UI Design Template Review - GWPC UX Brief.pdf · UI Design Template Review 11/16/2016. Agenda 2 •Welcome & Agenda •Overview •Research •High Fidelity UI Templates](https://reader030.vdocument.in/reader030/viewer/2022040717/5e2218a5c558327bb9241418/html5/thumbnails/8.jpg)
Additional Persona Considerations
8
• RBDMS Core Users
• Management
• Administrative
• Geologist & Engineers
• Data Entry
• Application Admin
• RBDMS Data Miner Users
• Management
• Other Agency Users
• Public
• Academia/Researchers
• Data Vendors
• State Agencies & Officials
• Federal Government Agencies & Officials
• Industry
• RBDMS Environmental Users
• Same as Core and Data Miner
• RBDMS eForm Users
• Application Admin
• Managers
• Reviewers
• Industry
• Data Miner Users
• RBDMS FormBuilder Users
• Same as eForms Users
• Application Admin
• RBDMS Inspection App Users
• Managers
• Inspectors
• RBDMS WellBore Users
• Agency Geologist & Engineers
• External Geologist & Engineers
![Page 9: 11/16/2016 UI Design Template Review - GWPC UX Brief.pdf · UI Design Template Review 11/16/2016. Agenda 2 •Welcome & Agenda •Overview •Research •High Fidelity UI Templates](https://reader030.vdocument.in/reader030/viewer/2022040717/5e2218a5c558327bb9241418/html5/thumbnails/9.jpg)
Journey Map Example
9
![Page 10: 11/16/2016 UI Design Template Review - GWPC UX Brief.pdf · UI Design Template Review 11/16/2016. Agenda 2 •Welcome & Agenda •Overview •Research •High Fidelity UI Templates](https://reader030.vdocument.in/reader030/viewer/2022040717/5e2218a5c558327bb9241418/html5/thumbnails/10.jpg)
H IGH F IDELITY UI TEMPLATES
10
![Page 11: 11/16/2016 UI Design Template Review - GWPC UX Brief.pdf · UI Design Template Review 11/16/2016. Agenda 2 •Welcome & Agenda •Overview •Research •High Fidelity UI Templates](https://reader030.vdocument.in/reader030/viewer/2022040717/5e2218a5c558327bb9241418/html5/thumbnails/11.jpg)
Bootstrap + Kendo UI Frameworks
The State Template v4 is based on the Bootstrap Framework. Bootstrap is for any device, medium, and accessibility. Bootstrap is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Bootstrap is semantic, readable, flexible, and completely customizable.
Key Features
• HTML5/JS
• 1 Styleguide
• 100% responsive
• 100% accessible/508/ADA
Complaint
• No inline styles
![Page 12: 11/16/2016 UI Design Template Review - GWPC UX Brief.pdf · UI Design Template Review 11/16/2016. Agenda 2 •Welcome & Agenda •Overview •Research •High Fidelity UI Templates](https://reader030.vdocument.in/reader030/viewer/2022040717/5e2218a5c558327bb9241418/html5/thumbnails/12.jpg)
UI Design Standards – Page Templates
12
• Reviewing the following pages & patterns for the UIS Guidelines that contain, detailed usage of colors, fonts, logo, common UI patterns (i.e. Tables, search, article pages etc.)
![Page 13: 11/16/2016 UI Design Template Review - GWPC UX Brief.pdf · UI Design Template Review 11/16/2016. Agenda 2 •Welcome & Agenda •Overview •Research •High Fidelity UI Templates](https://reader030.vdocument.in/reader030/viewer/2022040717/5e2218a5c558327bb9241418/html5/thumbnails/13.jpg)
Design Process
13
Wireframes -> High Fidelity Design (State Template v4)
![Page 14: 11/16/2016 UI Design Template Review - GWPC UX Brief.pdf · UI Design Template Review 11/16/2016. Agenda 2 •Welcome & Agenda •Overview •Research •High Fidelity UI Templates](https://reader030.vdocument.in/reader030/viewer/2022040717/5e2218a5c558327bb9241418/html5/thumbnails/14.jpg)
Template 1 (Global Nav, Content Area)
14
![Page 15: 11/16/2016 UI Design Template Review - GWPC UX Brief.pdf · UI Design Template Review 11/16/2016. Agenda 2 •Welcome & Agenda •Overview •Research •High Fidelity UI Templates](https://reader030.vdocument.in/reader030/viewer/2022040717/5e2218a5c558327bb9241418/html5/thumbnails/15.jpg)
Template 2 (1-Column, Tab Navigation, Table/Grid)
15
![Page 16: 11/16/2016 UI Design Template Review - GWPC UX Brief.pdf · UI Design Template Review 11/16/2016. Agenda 2 •Welcome & Agenda •Overview •Research •High Fidelity UI Templates](https://reader030.vdocument.in/reader030/viewer/2022040717/5e2218a5c558327bb9241418/html5/thumbnails/16.jpg)
Template 3 (1-Column, Search Form)
16
![Page 17: 11/16/2016 UI Design Template Review - GWPC UX Brief.pdf · UI Design Template Review 11/16/2016. Agenda 2 •Welcome & Agenda •Overview •Research •High Fidelity UI Templates](https://reader030.vdocument.in/reader030/viewer/2022040717/5e2218a5c558327bb9241418/html5/thumbnails/17.jpg)
Template 4 (2-Column, Search Results)
17
![Page 18: 11/16/2016 UI Design Template Review - GWPC UX Brief.pdf · UI Design Template Review 11/16/2016. Agenda 2 •Welcome & Agenda •Overview •Research •High Fidelity UI Templates](https://reader030.vdocument.in/reader030/viewer/2022040717/5e2218a5c558327bb9241418/html5/thumbnails/18.jpg)
Template 5 (1-Column, Well Detail Page)
18
![Page 19: 11/16/2016 UI Design Template Review - GWPC UX Brief.pdf · UI Design Template Review 11/16/2016. Agenda 2 •Welcome & Agenda •Overview •Research •High Fidelity UI Templates](https://reader030.vdocument.in/reader030/viewer/2022040717/5e2218a5c558327bb9241418/html5/thumbnails/19.jpg)
Template 6 (2-Column, Form Wizard)
19
![Page 20: 11/16/2016 UI Design Template Review - GWPC UX Brief.pdf · UI Design Template Review 11/16/2016. Agenda 2 •Welcome & Agenda •Overview •Research •High Fidelity UI Templates](https://reader030.vdocument.in/reader030/viewer/2022040717/5e2218a5c558327bb9241418/html5/thumbnails/20.jpg)
Breakpoints / Responsive Grid
20
![Page 21: 11/16/2016 UI Design Template Review - GWPC UX Brief.pdf · UI Design Template Review 11/16/2016. Agenda 2 •Welcome & Agenda •Overview •Research •High Fidelity UI Templates](https://reader030.vdocument.in/reader030/viewer/2022040717/5e2218a5c558327bb9241418/html5/thumbnails/21.jpg)
Mobile Ready
21
![Page 22: 11/16/2016 UI Design Template Review - GWPC UX Brief.pdf · UI Design Template Review 11/16/2016. Agenda 2 •Welcome & Agenda •Overview •Research •High Fidelity UI Templates](https://reader030.vdocument.in/reader030/viewer/2022040717/5e2218a5c558327bb9241418/html5/thumbnails/22.jpg)
UI Design Standards – Documentation
22
The WellSTAR User Interface Standards (UIS) document describes standards and guidelines for creating a usable interface for all users, including those with diverse skills, experience, knowledge and abilities.
• General Presentation
• Navigation
• Forms
• Accessibility and Standards Compliance
![Page 23: 11/16/2016 UI Design Template Review - GWPC UX Brief.pdf · UI Design Template Review 11/16/2016. Agenda 2 •Welcome & Agenda •Overview •Research •High Fidelity UI Templates](https://reader030.vdocument.in/reader030/viewer/2022040717/5e2218a5c558327bb9241418/html5/thumbnails/23.jpg)
QUESTIONS?
23
![Page 24: 11/16/2016 UI Design Template Review - GWPC UX Brief.pdf · UI Design Template Review 11/16/2016. Agenda 2 •Welcome & Agenda •Overview •Research •High Fidelity UI Templates](https://reader030.vdocument.in/reader030/viewer/2022040717/5e2218a5c558327bb9241418/html5/thumbnails/24.jpg)
APPENDIX
24
![Page 25: 11/16/2016 UI Design Template Review - GWPC UX Brief.pdf · UI Design Template Review 11/16/2016. Agenda 2 •Welcome & Agenda •Overview •Research •High Fidelity UI Templates](https://reader030.vdocument.in/reader030/viewer/2022040717/5e2218a5c558327bb9241418/html5/thumbnails/25.jpg)
What is a user journey map
25
• A user journey map tells the story of the customer’s experience. It may focus on a particular part of the story or give an overview of the entire experience. What it always does is identify key interactions that the customer has with the organization. It talks about the user’s feelings, motivations and questions for each of these touchpoints.
• It often provides a sense of the user’s greater motivation. What do they wish to achieve, and what are their expectations of the organization?
![Page 26: 11/16/2016 UI Design Template Review - GWPC UX Brief.pdf · UI Design Template Review 11/16/2016. Agenda 2 •Welcome & Agenda •Overview •Research •High Fidelity UI Templates](https://reader030.vdocument.in/reader030/viewer/2022040717/5e2218a5c558327bb9241418/html5/thumbnails/26.jpg)
Project Timeline
26
UI Design
Timeline
Wireframes High Fidelity Templates
User Interface Standards
Infrastructure
AUGUST SEPTEMBER OCTOBER
Research / Journey Mapping
Future
Software Design