search

hackforla / access-the-data

The Access the Data project was created to address the growing gaps between new technology development and decisions impacting our communities with the underlying systems and data that drive those initiatives
GNU General Public License v2.0
18 stars 2 forks source link

Website User Flows and Wireflows #145

Closed lrchang2 closed 1 year ago

lrchang2 commented 2 years ago

Dependencies

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

Resources/Instructions

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 commented 2 years ago

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

lrchang2 commented 2 years ago

@Eevinjennings no worries, ive deleted it

Aparna1Gopal commented 2 years ago

NOTES (Recorded under Best Practices, Resource Library)

Additional Resources

https://github.com/hackforla/access-the-data/issues/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 commented 2 years ago

@Aparna1Gopal

Notes

Resource Library

Aparna1Gopal commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 https://github.com/hackforla/access-the-data/issues/168

A/B Testing Information Architecture Labels https://github.com/hackforla/access-the-data/issues/164

Aparna1Gopal commented 2 years ago

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

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 commented 2 years ago

**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 commented 2 years ago

**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 commented 2 years ago

**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 https://github.com/hackforla/UI-UX/issues/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 commented 2 years ago

PROJECT PROGRESS

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

Completed the following:

To complete:

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 commented 2 years ago

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

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 commented 2 years ago

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 commented 2 years ago

Notes

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

Key Takeaways:

Next Steps:

Relevant Resources/Issues:

Identifying and Optimizing Data Sources https://github.com/hackforla/access-the-data/issues/183

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

Aparna1Gopal commented 2 years ago

Progress: Progress on this issue via: https://github.com/hackforla/access-the-data/issues/191 https://github.com/hackforla/access-the-data/issues/192

Aparna1Gopal commented 2 years ago

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) https://github.com/hackforla/access-the-data/issues/191 https://github.com/hackforla/access-the-data/issues/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 commented 2 years ago

Notes:

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 commented 1 year ago

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