Website User Flows and Wireflows

[lrchang2]

Dependencies

• Competitive analysis (unmoderated usability testing) of CKAN websites - Userflows  #191
• Benchmarking task flows of data points [by conducting a comparative analysis of CKAN websites] #192

Overview

We need to develop the user flow of the website and align it with the project's user personas and user journey through the website to ensure that the website is designed and organized to support their journey.

Action Items

• PHASE 1: #169
• PHASE 1: Audit and document current high-fi wireframes for sitemap and wireflows
• PHASE 1: Define the what, why, how of the users objectives/goals within the website (that end in a call to action) and if they have barriers or require any an additional information to achieve the goal
• PHASE 1: Develop and diagram user flows within the website based on user goals for each persona
  • Determine entry points/traffic source to the website that align with user motivations and actions
  • Breakdown and diagram user flows into task flows
• PHASE 2: Update website's information architecture based on audit
• PHASE 2: Align and document wireflows with task flows
• PHASE 2: Update wireframe wireflows

Resources/Instructions

• Website Information Architecture  #36
• Refining the "Data Literacy" Journey Designs #90
• User Personas for Website #27
• User Stories for Website #45
• Refining the "Data Literacy" Journey Designs #90
• Article - Personas, journey maps, sitemaps, and user flows — OH MY!
• Wiki 1
• Wiki 2

TEMPLATE FOR PROJECT PROGRESS

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either:

ask for help at your next meeting
put a "Status: Help Wanted" label on your issue and pull request
put up a request for assistance on the #access-the-data channel.

[Eevinjennings]

@lrchang2 I accidentally converted the first action item into an issue and I'm not sure how to undo it 😅

[lrchang2]

@Eevinjennings no worries, ive deleted it

[Aparna1Gopal]

NOTES
(Recorded under Best Practices, Resource Library)

Additional Resources

#80

UX task flows vs. user flows, as demonstrated by pancakes
https://medium.com/erika-harano/ux-task-flows-versus-user-flows-as-demonstrated-by-pancakes-896e78a98026

7 Steps to Benchmark Your Product’s UX
https://www.nngroup.com/articles/product-ux-benchmarks/

[Aparna1Gopal]

@Aparna1Gopal

Notes

• This Issue is distributed into Phases
• Further details provided in the Research Plan.
• Formulate Research Plan for 5-point issue

Resource Library

• Design systems best practices
• Record as slide deck for easy reporting
• User Journey maps
• Map User Flows- best practices
  https://uxcollection.notion.site/Userflows-3562675f3fa747b1bddd325e45adf2ef
• Map Wireflows - best practices
• Accessibility audit & best practices for user flows and wire flows
• Adoption Readiness Scorecard
  https://aws.amazon.com/blogs/publicsector/get-migration-ready-aws-cloud-adoption-readiness-tool/

[Aparna1Gopal]

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Was assigned to this issue recently. Currently working on making the connections and collecting resources from UX/UI leads and reviewing work already completed & available in the databases.

Blockers: "Difficulties or errors encountered."
Newly assigned, so finding my way around and making certain I am managing to review all the resources available

Availability: "How much time will you have this week to work on this issue?"
This Issue is distributed into Phases
Phase 1 : #169
6 hours this week (excluding meetings)

ETA: "When do you expect this issue to be completed?"
Phase 1: Next UXR meeting

Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either:

ask for help at your next meeting
put a "Status: Help Wanted" label on your issue and pull request
put up a request for assistance on the #access-the-data channel.

[Aparna1Gopal]

NOTES
(Recorded under Research Plan)

Overview

Phase 1 focusses on familiarizing oneself with the project's historical work on personas

Action Items

Formulate Research Plan for 5-point issue
Collect resources from UX/UI leads and review (other designers/ researcher/UX writers working on Information Architecture)
Review all databases related to ATD > GitHub, Google Drive, Figma, anything else..
Collect Best Practices
Review Best Practices
Create simple Slide Deck with the primary information

[Aparna1Gopal]

NOTES
(Recorded under Best Practices, Resource Library)

Resource Library
Within ATD

Doing more UI (visual) competitive analysis + competitive flows + design recommendations
https://www.figma.com/file/nS5IqnutUT2FuPwwJObHaY/Access-the-Data-Main-Figma?node-id=9%3A62

Website Design Work

Usability Testing Notes by Version
https://docs.google.com/spreadsheets/d/1LSn9gwVv1VDBNDIgepzHkhBxr-W57RyVXv-jb8u6vDQ/edit?skip_itp2_check=true#gid=0

Usability Test: Wiki's Information Architecture
#168

A/B Testing Information Architecture Labels
#164

[Aparna1Gopal]

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Formulating end-to-end Research Plan: including timelines, methods to use, data collection & data analysis strategies for this issue

• Collecting existing work completed/in progress at ATD relevant to this issue
• Reviewed Wiki with all relevant resources on this issue
• Created Wiki for this issue
• Collecting Best Practices for this issues
• Cleaning up all the resources I have been collecting relating to this issue on this GitHub page
• Distributing this issue into phases, with each phase's end-to-end completion lasting 1-2 weeks each (More details in the research plan)

Blockers: "Difficulties or errors encountered."
Nothing in particular. Just identifying all the resources & players working on the various design and research components which would be relevant to this issue. Have already slacked the UXR and UXD leads. Will be asking for this additional information during this week's meeting.

Availability: "How much time will you have this week to work on this issue?"
Phase 1: 6 hours
ETA: "When do you expect this issue to be completed?"
Phase 1: By next week's meeting (first week of June)

Pictures: "Add any pictures of the visual changes made to the site so far."
Will add link to the Research Plans, etc

Google Drive Folder: https://drive.google.com/drive/folders/1NICDxn54gv1uYYFsDY2A0EDBwjDpR_jK?usp=sharing

If you need help, be sure to either:

ask for help at your next meeting
put a "Status: Help Wanted" label on your issue and pull request
put up a request for assistance on the #access-the-data channel.

[Aparna1Gopal]

**RESOURCE LIBRARY ---- BEST PRACTICES

User Journey maps
Personas, journey maps, sitemaps, and user flows — OH MY!
https://uxdesign.cc/personas-journey-maps-site-maps-and-user-flows-oh-my-e71d044b4bcb

Map User Flows- best practices
https://uxcollection.notion.site/Userflows-3562675f3fa747b1bddd325e45adf2ef
UX task flows vs. user flows, as demonstrated by pancakes
https://medium.com/erika-harano/ux-task-flows-versus-user-flows-as-demonstrated-by-pancakes-896e78a98026
7 Steps to Benchmark Your Product’s UX
https://www.nngroup.com/articles/product-ux-benchmarks/
Complete guide to user flows – your map to UX success
https://www.justinmind.com/blog/user-flow/
How To Create A User Flow: A Step-By-Step Guide
https://careerfoundry.com/en/blog/ux-design/how-to-create-a-user-flow/
How to Design a User Flow Diagram for Your Website
https://optinmonster.com/how-to-design-a-user-flow-diagram-for-your-website/
Consider Website User Flow: a Guide to Understanding Your Site User’s Journey
https://www.uxpin.com/studio/blog/website-user-flow/
What is a User Flow – Everything You need to Know
https://uxmisfit.com/2020/08/17/what-is-a-user-flow-everything-you-need-to-know/
UX Flows, and Why They’re So Confusing
https://blog.prototypr.io/ux-flows-and-why-theyre-so-confusing-26670b9089d4

Map Wireflows - best practices
Wireflows: A UX Deliverable for Workflows and Apps
https://www.nngroup.com/articles/wireflows/
User Flows vs. Wireframes: What’s the Difference?
https://careerfoundry.com/en/blog/ux-design/user-flows-vs-wireframes/
UX Glossary: Task Flows, User Flows, Flowcharts and some new-ish stuff
https://uxplanet.org/ux-glossary-task-flows-user-flows-flowcharts-and-some-new-ish-stuff-2321044d837d
Wireframing User Flow with Wireflows
https://balsamiq.com/learn/articles/wireflows/
User flow is the new wireframe
https://uxdesign.cc/when-to-use-user-flows-guide-8b26ca9aa36a
The biggest WTF in design right now
https://uxdesign.cc/the-biggest-wtf-in-design-right-now-87139f367d66
Wireframing User Flow with Wireflows
https://balsamiq.com/learn/articles/wireflows/
What are Wireflows?
https://app.uxcel.com/courses/designing-wireframes/what-are-wireflows-804
References
https://www.usability.gov/how-to-and-tools/methods/task-analysis.html
https://www.nngroup.com/articles/wireflows/
https://balsamiq.com/learn/articles/wireflows/

Testing User Flows
Enhance User Flow – A Guide to UX Analysis
https://www.toptal.com/designers/ux/guide-to-ux-analysis
Quality Assurance Testing Perfected: A User Flow Tutorial
https://www.toptal.com/qa/quality-assurance-testing-user-flow-design

Accessibility audit & best practices for user flows and wire flows

Adoption Readiness Scorecard
https://aws.amazon.com/blogs/publicsector/get-migration-ready-aws-cloud-adoption-readiness-tool/

HeatMaps
https://www.userinterviews.com/ux-research-field-guide-chapter/first-click-testing
https://www.hotjar.com/blog/improve-website-ux-with-heatmaps/
https://vwo.com/blog/heatmap-and-ux/

Click Tests
https://usabilityhub.com/guides/first-click-testing
https://www.userzoom.com/click-testing/what-is-a-click-test-and-why-should-it-be-part-of-your/
https://www.usability.gov/how-to-and-tools/methods/first-click-testing.html

Design systems best practices

Record as slide deck for easy reporting
Guide: How to Present Your Work (UX Research) #24
UX Research Report Template https://docs.google.com/presentation/d/13_yzoKw0t6328pQQoYScRGg9KYNSriN3_fTFDIpb1tk/edit#slide=id.ge5d5edad8b_0_82

Guides for Best Practices
https://github.com/hackforla/UI-UX/projects/1

[Aparna1Gopal]

**RESOURCE LIBRARY ---- REFERENCE MATERIALS_WORK COMPLETED WITHIN ATD

User Journey
https://docs.google.com/presentation/d/1pvd1c_z1spS_8tARF1LpKonCfdUTiNk6teiri2EI7xA/edit#slide=id.p

Journey Map_Website Copy
https://docs.google.com/document/d/1EM1u0aECTVjalYmnRys7ZNHdiZlm1jeItqwkxYvuGpw/edit

Usability Test: Wiki's Information Architecture #168

ATD Tree Test Research Findings Summary
https://docs.google.com/document/d/1KuT9qGVelrBj5ecqJnJkSlS-xRuzOnKhnYAqT77_ctk/edit#

Information Architecture ATD
https://docs.google.com/forms/d/1qZOTisi8cpL-kVTfZt09fywpTpTO-Lap3Q4sBpnoqw8/closedform
https://docs.google.com/forms/d/1qZOTisi8cpL-kVTfZt09fywpTpTO-Lap3Q4sBpnoqw8/viewanalytics

Research Papers Using 311Data
https://github.com/hackforla/access-the-data/wiki/Research-Papers-Using-311Data

A/B Testing Information Architecture Labels #164

Evaluating the Content Among Wiki, Website, and Workshop Slides #149

A/B Testing and Usability Testing of Components #135

Tree Testing Information Architecture #143

UX Writing Collab #177

UX Writing for Wireflows & User Flows #161

Empathy Map #165

Website Prototype Usability Test #166

UX Field Study #80

Competitive/Comparative Analysis Access the Data Website
https://docs.google.com/spreadsheets/d/1_cx15yObwAl3KZYJjDgqjXd7Njw2D05BfcSc1eGZDtU/edit#gid=1172277014

UX Writing for Website Desktop Prototype #167

Create Design System for Website #81

Workshop Materials https://github.com/hackforla/access-the-data/wiki/Workshop-Materials

311 Data Slides: Get ALPHA Tool Feedback #151

Provisional Storyboard for Website User #74

Research plan for website #62

Comparative Analysis customer requirements and UAT #13

All User Personas - Currently, Community Activist, Data Expert, Data Enthusiast
Create Wiki for Community Persona Activist #179
ATD Team Research Plans https://github.com/hackforla/access-the-data/wiki/ATD-Team-Research-Plans
Research: Data Expert https://github.com/hackforla/access-the-data/wiki/Research:-Data-Expert
Research: Data Enthusiast https://github.com/hackforla/access-the-data/wiki/Research:-Data-Enthusiast
Research: Community Activist https://github.com/hackforla/access-the-data/wiki/Research:-Community-Activist
ATD Team Research Plans https://github.com/hackforla/access-the-data/wiki/ATD-Team-Research-Plans

https://www.lacounts.org
https://know-your-community-lahub.hub.arcgis.com

[Aparna1Gopal]

**RESOURCE LIBRARY ---- RESEARCH PLAN
https://drive.google.com/drive/folders/1NICDxn54gv1uYYFsDY2A0EDBwjDpR_jK?usp=sharing

Research Plan Examples & Best Practices
Create a Guide/Template: Research Plan hackforla/UI-UX#120
Research Starter Kit #121
Create a Guide/Template: Interviews #159
HOW TO WRITE A RESEARCH PLAN https://docs.google.com/document/d/1ovSBNVkuizZD2EMOE2w522_x-sOAzQBEheMqfPWmQKk/edit?usp=sharing

How to Write a User Research Plan That Sets Your Project Up for Success
https://dscout.com/people-nerds/how-to-write-a-user-research-plan-that-sets-your-project-up-for-success

Other Guides for referencing
Guide: How to Present Your Work (UX Research) #24
Guide: Effective Practices for working with developers #26
Guide: UX/UI Accessibility #16
Guide: Giving qualitative feedback on design #21
Guide: How to Present Your Work (UX Research) #24
Create a Guide: Research Participant Recruitment #45
Guide: Researcher Toolkit #22
Create a Guide: Synthesizing Research #46
Create a Guide: Diary Study #57
Create a Guide: Card Sorting #58
Guide: How To Choose a Survey Platform for Your Surveys/User Testing #182
Guide: Creating a UX survey template #6
Guide: Effective practices for user testing #29
Create a Guide: Tree Testing #59

All Guides Project Board: https://github.com/hackforla/UI-UX/projects/1
All Guides Google Drive: https://drive.google.com/drive/u/0/folders/1r4w8hGumkApwniIWJ6T8FhsXpuWqMJLe

User flows
[Referenced from: User flow is the new wireframe
https://uxdesign.cc/when-to-use-user-flows-guide-8b26ca9aa36a]
QUESTIONS TO INCLUDE WHILE TESTING USER FLOWS:
The goal at this stage is have a user flow that both your users and developers will understand—otherwise you end up with a solution that neither understands.
think about all of the information required to create the flow:
🤔 What happens when things don’t follow the ‘happy path’?
🤔 What logic or case leads to an alternate path?
🤔 Is there any data being moved around? (And am I accidentally 😉 using it to chase my users around the internet with ads)
🤔 Any state changes in your interfaces? What triggered them?

[Aparna1Gopal]

PROJECT PROGRESS

Progress: "What is the current status of your project? What have you completed and what is left to do?"

Completed the following:

• Research Plan (Ongoing)
  https://docs.google.com/document/d/1vG7y9eJvD9K08O7qDp3_U1KRswgc2qj-MJLOlbrfozg/edit
• Identified resources pertaining to this issue and documented it under the various RESOURCE LIBRARIES
  REFER: Website User Flows and Wireflows #145 (comment)
  REFER: Website User Flows and Wireflows #145 (comment)
  REFER: Website User Flows and Wireflows #145 (comment)
• Contacted the internal stakeholders [UX Designers, UX Writers, UX Researchers, Design and Research Leads of ATD] to collate all information and adjacent topics/resources related to this issue
• Contacted via Slack: ATD Design and Research Leads to collate information
• Contacted via Video chat (during working meeting on June 1, 2022): ATD UX Writers (Aubrey S) and UXR (Hannah S) working on adjacent issues
• Contacted via short Google Survey: ATD UX Writer (Eevin J) and UX Designers
  https://docs.google.com/document/d/1vAKP2ifr2GRFW6BE-rKiaXkZRFUntEG98pV9-Hd7y7s/edit?usp=sharing
  https://docs.google.com/forms/d/1qkx4TSQlrdG2C7tNb5CFl6FdLLSyqBsTJT8K9pTixC4/edit
• Collated all the information
• Created and updated Wiki for this issue

To complete:

• Review collected Best Practices
• Identify appropriate methods to deploy next steps
• Research Plan (Ongoing)
• Create appropriate interview scripts for each method

Blockers: "Difficulties or errors encountered."
Nothing in particular. Just the time constraints and reaching out to the multiple internal stakeholders (UX Writers, Researchers and Designers) working on this issue. Contacted the Design Lead and PM to work around this by identifying alternate times/days

Availability: "How much time will you have this week to work on this issue?"
6 hours

ETA: "When do you expect this issue to be completed?"
Please refer Research Plan

Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either:

ask for help at your next meeting
put a "Status: Help Wanted" label on your issue and pull request
put up a request for assistance on the #access-the-data channel.

[Aparna1Gopal]

Progress: "What is the current status of your project? What have you completed and what is left to do?"

• Review collected Best Practices
• Identify appropriate methods to deploy next steps
• Research Plan (Ongoing)
• Create appropriate interview scripts for each method
• Contacted UX Writers and Designers on the project. Conducting short internal stakeholder interviews to assess current status of design https://docs.google.com/document/d/1vAKP2ifr2GRFW6BE-rKiaXkZRFUntEG98pV9-Hd7y7s/edit

Blockers: "Difficulties or errors encountered."
Coordinating times across different teams. Should be meeting with design team this week.

Availability: "How much time will you have this week to work on this issue?"
6 hours

ETA: "When do you expect this issue to be completed?"
Please refer Research Plan

Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either:

ask for help at your next meeting
put a "Status: Help Wanted" label on your issue and pull request
put up a request for assistance on the #access-the-data channel.

[Aparna1Gopal]

Notes

Access the Data Figma Files

https://www.figma.com/proto/nS5IqnutUT2FuPwwJObHaY/Access-the-Data-Main-Figma?node-id=4665%3A19504&scaling=contain&page-id=2%3A16&starting-point-node-id=4665%3A19504&show-proto-sidebar=1

https://www.figma.com/files/project/29582752/Access-The-Data?fuid=1100942504337383164

Figma Prototype
https://www.figma.com/file/nS5IqnutUT2FuPwwJObHaY/Access-the-Data-Main-Figma?node-id=2%3A16

https://www.figma.com/proto/nS5IqnutUT2FuPwwJObHaY/Access-the-Data-Main-Figma?node-id=4328%3A18544&scaling=scale-down&page-id=2%3A14&starting-point-node-id=4328%3A18544

[Aparna1Gopal]

Notes

Attended and met with Lucy C, PM and Even J during Design Meeting on June 16, 2022

Key Takeaways:

• For current pain points/motivations from internal stakeholders (related to this survey https://docs.google.com/forms/d/1qkx4TSQlrdG2C7tNb5CFl6FdLLSyqBsTJT8K9pTixC4/edit), I can make executive decisions and move ahead.
• Lucy, PM explained the pivot and vision of the product moving forward with CKAN. This deep dive explanation was definitely helpful moving forward.
• Next steps: Will be conducting usability competitive analysis of existing CKAN websites so as to benchmark and incorporate into our own ATD website, moving forward. I will be updating the Research Plan for this issue accordingly. Will be co-ordinating with Eevin J as a live working mid-fi prototype for website is developed for testing.

Next Steps:

• Since the current product vision is changing/evolving from providing instructional modules to data sources on the website, the phases of the user flows issue (Website User Flows and Wireflows #145) were updated to reflect the current roadmap. Now, Phase 1 comprises of auditing user flows and Phase 2 comprises of designing the user flows (this phase 2 will coincide with design team's progress on updating the existing website)
  (Additional details provided in the Research Plan)

Relevant Resources/Issues:

Identifying and Optimizing Data Sources
#183

Make testable live website
https://github.com/hackforla/access-the-data/issues/187

[Aparna1Gopal]

Progress:
Progress on this issue via:
#191
#192

[Aparna1Gopal]

Progress: "What is the current status of your project? What have you completed and what is left to do?"

Working on the following related Issues: (Research resources and progress are interconnected)
#191
#192
Website User Flows and Wireflows #145
Currently set up GitHub issues and relevant resources to start on the Research Plan and proceed.

Blockers: "Difficulties or errors encountered."
None, as have met with PMs last week to streamline steps related to the product pivot

Availability: "How much time will you have this week to work on this issue?"
6-10 hours

ETA: "When do you expect this issue to be completed?"
Ongoing
Plan on completing Research Plans for all three above issues this week and create the survey design draft copy for #191

Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either:

ask for help at your next meeting
put a "Status: Help Wanted" label on your issue and pull request
put up a request for assistance on the #access-the-data channel.

[Aparna1Gopal]

Notes:

• The product (ATD website) is currently undergoing a redesign with the incorporation of CKAN type Data Cataloguing. Design team is updating the information architecture and low-fi/hi-fi wireframes on the website.
  Update Current HiFi Wireframes and Info Architecture #206
  Usability Test: Wiki's Information Architecture  #168

• The user personas are also being developed further into a second iteration: the two personas being data expert and data novice (also called community activist)
  Data Expert Persona Synthesis: Empathy Map #204
  Data Expert Persona Synthesis: Detailed Persona #205
  Data Expert Persona Synthesis: Affinity Map #201
  Recruitment/outreach of community advocate and expanding the database #193

• This issue is on hold as the design team updates the information architecture and wireframes of the website.

• It is best to pick-up and work on this issue once there has been some more progress and detailing with the website redesign and user personas. Hence, unassigning from this issue.

Additionally, it might be worth exploring this Issue from the point of view of Service Design.
Service design has standard benchmarks and templates to explore varied user types and touchpoints to create service design blueprints. This will align well with the goals of this issue.

[mxajPrice]

This was created for the educational modules, which we are no longer doing.