website
website copied to clipboard
hackforla
Images of zooms for homepage
Overview
We need to preference test the hero section of the homepage in order to learn whether the in-person selfie that Bonnie provided in the hfla-site-ux Slack channel on 2/10 or the newly created image of stitched together Zoom meeting screenshots appeals most to potential and actual users of our site. We then can use these learnings to make a data-informed decision about which to move forward with when the new homepage is launched.
Action Items
- [x] Review existing research findings and document in this issue a summary of the findings and the issues of concern, such as small sample size
- [x] Read this article in order to get a refresher/primer/good overview of how best to utilize preference testing.
- [ ] Sign up for a free account on Usability Hub.
- [ ] Obtain the Zoom screenshots from Bonnie (unless told otherwise).
- [ ] Determine if Bonnie prefers us to test between the "serious" selfie or the silly selfie
- [ ] If the screenshots are not yet stitched together to create the final image for testing, stich the screenshots together.
- [ ] Set up a preference test that asks participants to compare the two versions. Use versions that shows the hero in the context of the whole page, since that is the procedure that the research team decided to use in the first preference test of this series.
- [ ] Present findings to Product and together decide on which version should be developed and launched with the redesigned homepage. Also note findings on this from donor interviews.
Resources/Instructions
Usability Hub: An introduction to preference testing Usability Hub: Sign Up Figma - Homepage Redesign Existing donor research Folder with Zoom Images
Tests Conducted Pref test 1: Original homepage image Vs. New stock image Pref test 2: Goofy selfie (w/ tongues sticking out) Vs. Happy/professional selfie (w/out tongues sticking out) Pref test 3: Happy/professional selfie (w/out tongues sticking out) Vs. Zoom compilation Pref test 4: Happy/professional selfie (w/out tongues sticking out) Vs. Original homepage image The happy/professional selfie tested best in Tests 2, 3 and 4 and out performed the Zoom compilation.
Images Tested
Happy/professional selfie
Goofy selfie (w/ tongues sticking out)
Zoom compilation
Hi @ExperimentsInHonesty.
Please don't forget to add the proper labels to this issue. Currently, the labels for the following are missing: Size, Role, Feature
To add a label, take a look at Github's documentation here.
Also, don't forget to remove the "missing labels" afterwards. To remove a label, the process is similar to adding a label, but you select a currently added label to remove it.
After the proper labels are added, the merge team will review the issue and add a "Ready for Milestone" label once it is ready for prioritization.
Additional Resources:
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Progress: decided in design meeting on 2/10 that we'll prep materials for and subsequently run another preference test.
@ExperimentsInHonesty, am I recalling correctly that this next preference test will use an image you already have from pre-COVID? If so, can you please share that image? I'm not seeing it from our 2/10 meeting. And, I know the second image will be created of stitched together screenshots of zoom meetings, and you mentioned you'd be taking screenshots at all your meetings. If there isn't already anyone in charge of stitching together those zoom images, I can figure out how to do so if you share the screenshots with me. thank you!
Blockers: 1) obtaining the existing image. 2) obtaining the individual screenshots and stitching to create the new image.
Next steps: same as blockers above.
Availability: 2 hours Thurs, Fri, and Sat.
@summerharveyux I believe the images are posted in the hfla-site-ux slack channel.
you're right @sacamp, thank you! I noticed that earlier too and felt silly for asking.
@ExperimentsInHonesty please let me know if I'm correct that you'll be either 1) taking screenshots and stitching them together or 2) taking screenshots with me and sharing them with me so I can stitch them together, or neither! I have the first image for the preference test (the seflies you shared - please let me know if you prefer we test the "goofy" image with everyone making silly faces or the regular selfie), so can run this preference test as soon as we create the second image. thanks so much!!
Blockers: 1) obtaining the individual screenshots and potentially stitching to create the new image, if that needs to be done
Next steps: same as blockers above.
Availability: 2 hours Thurs, Fri, and Sat.
@summerharveyux can you fill out the issue template at the top of this page so that we know what goal you are working toward? You can use this document to help. Thanks!
Yes, thank you! Will do that today or tomorrow, as soon as I have time. Thanks!
On Tue, Feb 22, 2022 at 1:39 PM Simone Campbell @.***> wrote:
@summerharveyux https://github.com/summerharveyux can you fill out the issue template at the top of this page so that we know what goal you are working toward? You can use this document https://docs.google.com/document/d/1wYWr7uJ7dZeBwAAgksP-50_GXtCBQIywiqq5F5wQA6U/edit to help. Thanks!
— Reply to this email directly, view it on GitHub https://github.com/hackforla/website/issues/2763#issuecomment-1048098607, or unsubscribe https://github.com/notifications/unsubscribe-auth/AWOKBSAKI7SO2D6GOYBR633U4PJ6HANCNFSM5OCWSEBA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.
You are receiving this because you were mentioned.Message ID: @.***>
Progress: filled out the issue template.
Blockers: 1) Confirming that @ExperimentsInHonesty is taking the individual screenshots. 2) Determining which of the 2 selfies linked above Bonnie would like us to test between. 3) Obtaining the individual screenshots from Bonnie and 4) potentially stitching to create the new image, if that needs to be done.
Next steps: same as blockers above.
Availability: 2 hours Thurs, Fri, and Sat.
Summary of existing research findings and issues of concern as found in the Google drive:
Everything relevant extracted from Google Drive Folder ‘UX Research:’ Given Issue prompt of “Review existing research findings and document in this issue a summary of the findings and the issues of concern, such as small sample size:”
- It is relevant that what is most important for volunteers to see on page are (in order): 1) What is HfLA (12/13 ranked this first); 2) Project descriptions; 3) Positive impact of projects; 4) Project social causes; 5) How to join; 6) Open roles; 7) Communities of practice; 8) News; 9) Newsletter
- Users liked the old header image: it gave them a sense of community
- Users preferred to not have the mission in the header
- HfLA mission/description needs to be on top of page: volunteers ranked ‘What is HfLA’ as most important to see on page, and all 9 other nonprofit sites in C&C analysis featured mission statement on top of page
- Users preferred photos over icons to illustrate the program areas: they might also prefer photos over icons (or images that seem similar to icons) for the hero image
- It is important to: legitimize the organization; draw people in; improve brand image
- Volunteers like when there is plenty of white space on page, says that it gives them “room to breathe.” Potentially relevant if 1 of the 2 hero images has more or less white space than the other image.
- Several volunteers have mentioned homepage shouldn’t be too long, and that they wouldn’t scroll very far: keep both hero images the same size.
- Previous (2, I believe) users said ”The hero image doesn’t really give me an impression of what HFLA is about,” and “It’s just that the picture doesn’t really do anything for me.”
- Previous user said “-”Looking at the hero image, I would expect to read the word volunteer. Like maybe instead of saying ‘you can help’ saying ‘you can volunteer’.”
- Previous user liked the (hero) photo, thought it gave a sense of community, and thought the homepage matched their expectations
- Previous user wanted to know whether the photo was of actual people from Hack for LA, and liked the picture, but thought it could be more interactive (she’s a fan of websites with animations)
Recommendations from first preference test (Issue #2537):
- If selecting a new Hero Image:
- Include greater gender variety
- Select a picture of people working together on technology
- Essentially, aim for a mix of both Current and New Hero Images
- Select a less standard, expected picture
- Center the headline placement
after speaking with @sacamp, who recently spoke with @ExperimentsInHonesty about this issue, I was instructed to create a flier with some background information and instructions for taking the Zoom screenshot images. I've created that slide, and saved it in the Homepage Redesign Research folder, nested in the UX/UI folder, nested in the HackforLA.org Website folder.
the aim of this slide is so @ExperimentsInHonesty can add it to all of the different team meeting agendas, and ask the teams to take a screenshot and send it directly to me. I'd appreciate some input on how many different images I can expect to receive, so I can know when I've received them all, or at least enough to piece together the image for the preference test :)
Progress: created the flier, saved it on the drive, tagging @ExperimentsInHonesty in this comment
Blockers: 1) Determining which of the 2 selfies linked above Bonnie would like us to test between. 2) learning how many Zoom screenshots I can expect to receive. 3) Obtaining the individual screenshots.
Next steps: stitch together screenshots to create the new image, once I've received enough and/or all the images.
Availability: 2 hours Thurs, Fri, and Sat.
@summerharveyux - I showed your flyer to product and they had a couple of minor suggestions:
- use one of the screenshots posted above in the slide
- adjust the slide to match the HfLA design system
- include the HfLA logo which can be downloaded here
- instead of an email, have people submit their screenshots to this form, some of the wording will need to be adjusted before it's used. The color scheme of the form should also match what is on the HfLA website
Progress: updated the flier I previously made by 1) using one of the screenshots posted above in the slide, 2) adjusting the slide to match the HfLA design system, and including the HfLA logo; and 3) adding the link to the Google Form, after adjusting the wording and color scheme on the form. here is the updated flier! Blockers: 1) Hanging tight while @ExperimentsInHonesty shares the flier at team meetings, so that folks can take and upload Zoom screenshots to the google form. 2) Determining which of the 2 selfies linked above Bonnie would like us to test between. 3) Determining how many Zoom screenshots I should be expecting and waiting for before 4) stitching together the uploaded screenshots, once enough are uploaded.
Next steps: same as blockers above.
Availability: 2 hours Thurs, Fri, and Sat.
@summerharveyux great job updating the flyer. For the google form, please add a header image with a logo such as the one used in this form
The logo can be found in the following issue: https://github.com/hackforla/product-management/issues/23
I am checking off the teams as I add it to their agenda Using the Agenda Tracker https://github.com/orgs/hackforla/projects/5
Projects to check
- [ ] 100 Automations
- [x] 311 Data
- [x] Access the Data
- [ ] BallotNav
- [ ] Brigade Organizer's Playbook
- [x] Civic Tech Index
- [ ] Civic Tech Jobs
- [ ] ~Civic Tech Structure~
- [ ] Data Science Projects
- [x] Design Systems
- [ ] Engage
- [ ] Expunge-Assist (formerly known as Record Clearance)
- [ ] Food Oasis
- [x] GreenEarthOS
- [ ] Guides
- [ ] HomeUniteUs
- [x] Internship project
- [x] Lucky Parking
- [x] Open Community Survey
- [x] ops
- [ ] People Depot
- [ ] TDM Calculator
- [ ] VRMS
- [x] Hack for LA's Website
- [ ] Youth Justice Nav
Sent them the following Please add to our next agenda Let's discuss you adding this CTA to your team agenda
@summerharveyux lets discuss next week what we got after I reach out to all the teams.
incredible! thank you so much for all of this, @ExperimentsInHonesty ! that checklist is especially helpful.
yes, looking forward to obtaining images as you reach out to teams! thank you!
i'll of course take care of the "Hack for LA Website" team, so I just checked that one off your list.
Progress: updated the google form I previously made by adding a header with the HfLA logo.
Blockers: 1) Hanging tight while @ExperimentsInHonesty shares the flier at team meetings, so that folks can take and upload Zoom screenshots to the google form. 2) Determining which of the 2 selfies linked above Bonnie would like us to test between. 3) Determining how many Zoom screenshots I should be expecting and waiting for before 4) stitching together the uploaded screenshots, once enough are uploaded.
Next steps: same as blockers above.
Availability: 2 hours Thurs, Fri, and Sat.
Progress: Bonnie has shared the flyer with 8 teams, and 3 teams have uploaded images as of 3.23. There are 16 teams left for Bonnie to reach out to. I just (3.23 UX meeting) discussed with @sacamp that I don't need all the screenshots from all the teams in order to run the preference test. We discussed that I can potentially run the preference test with as many screenshots as I have at the time when I get back in town on 4.7 (going out of town 3.31-4.7), which leaves just over 2 weeks to get more than 3 screenshots, and up to 25 screenshots total.
Blockers: 1) Hanging tight while @ExperimentsInHonesty shares the flier at team meetings, so that folks can take and upload Zoom screenshots to the google form. 2) Determining which of the 2 selfies linked above Bonnie would like us to test between. 3) Stitching together the uploaded screenshots, once enough are uploaded.
Next steps: same as blockers above.
Availability: 2 hours Thurs, Fri, and Sat.
Progress: Bonnie has shared the flyer with 8 teams, and 3 teams have uploaded images as of 3.30 ( the same # of teams and uploaded images as of last week). There are 16 teams left for Bonnie to reach out to. Last week, (3.23 UX meeting) discussed with @sacamp that I don't need all the screenshots from all the teams in order to run the preference test. We discussed that I can potentially run the preference test with as many screenshots as I have at the time when I get back in town on 4.7 (going out of town 3.31-4.7), which leaves just over 2 weeks to get more than 3 screenshots, and up to 25 screenshots total.
Blockers: 1) Hanging tight while @ExperimentsInHonesty shares the flier at team meetings, so that folks can take and upload Zoom screenshots to the google form. 2) Determining which of the 2 selfies linked above Bonnie would like us to test between. 3) Stitching together the uploaded screenshots, once enough are uploaded.
I'm unsure what to make of the fact, and/or do about the fact, that the # of teams the flier has been shared with and the # of uploaded images hasn't changed in a week. Unsure how many more images I'll have in one more week, when I get back from going out of town and would really like to run this second preference test.
Next steps: same as blockers above.
Availability: 2 hours Thurs, Fri, and Sat.
@summerharveyux
Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.
- 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: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.
You are receiving this comment because your last comment was before Tuesday, April 5, 2022 at 12:20 AM PST.
@summerharveyux - I discussed this with Bonnie and she suggested do a quick test between both of the images in the above comment and then test the preferred image against the stitched zoom image.
@summerharveyux
Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.
- 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: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.
You are receiving this comment because your last comment was before Tuesday, April 12, 2022 at 12:20 AM PST.
@sacamp @summerharveyux I have reached out again to all the teams and added a note (hopefully a little clearer this time). If we don't have enough responses for a test by the time I get back on the 28th. I'll go do it myself in every meeting.
Please add this to this week's agenda and get it done during the meeting
- [ ] Taking a picture of the team CTA Instructions
Progress: Simone reached out to Bonnie to determine which of the 2 selfies she recommends, and Bonnie logically suggested we do a preference test to determine which selfie we should then compare against the stitched Zoom screenshots. Bonnie then reshared the selfie images with me (since all I had was a screenshot) and I launched the preference test between the 2 selfies. I'll compile quant and qual results once we hit N=115 (enough to determine a 10% difference between the images, given a within subjects design, with statistical significance). Once the selfie is selected, I'm hoping we'll have enough Zoom screenshot images. Bonnie commented above that if we don't have enough responses for the test by the time she gets back on the 28th, she'll collect images herself in every meeting. As of 4.20, we have 7 screenshots. I think that's enough to at least run the preference test, especially since I can supplement it with extra screenshots from the internet if needed, but if the Zoom screenshot image does win in the preference test I'll need all the images to create the final image for website use anyway.
Blockers: 1) Hanging tight while @ExperimentsInHonesty shares the flier at team meetings, so that folks can take and upload Zoom screenshots to the google form.
Next steps: 1) Reposting the survey until we get 115 responses. 2) compiling the quant and qual results. 3) Stitching together the uploaded screenshots, once enough are uploaded. 4) launching the preference test between the selfie and the Zoom image.
Availability: 2 hours Thurs, Fri, and Sat.
Progress: Finished the preference test (was aiming for N=115, achieved N=121. The quant finding is that Selfie #1 was the clear winner! Already finished analyzing the qual findings for Selfie #2, and in progress on analyzing the qual findings for Selfie #1 and creating the final slide deck as I go. Once all the qual data is analyzed and the slide deck is final, use however many Zoom screenshots we have by then (we have 8 as of 4.27, so that's definitely enough for the preference test), stitch them together, and compare that to Selfie #1 for a 3rd preference test. After that, do a 4th and final preference test comparing the original hero image and the "winner" of the 3rd preference test, to quantify how much better the final image is than the new image.
Blockers: None
Next steps: 2) Compiling the quant and qual results and finishing the slide deck. 3) Stitching together the uploaded screenshots. 4) launching the preference test between selfie #1 and the Zoom image. 4) launching the preference test between the "winner" of preference test #3 and the original image to quantify impact.
Availability: 2 hours Thurs, Fri, and Sat.
@summerharveyux
Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.
- 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: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.
You are receiving this comment because your last comment was before Tuesday, May 3, 2022 at 12:20 AM PST.
Progress: Finished analyzing the qual findings for Selfie #1 and creating the final slide deck. shared that slide deck with @sacamp , since I cannot attend the 5.11 UX meeting because of a UX interview
Blockers: None
Next steps:
Use however many Zoom screenshots we have by then (we have 8 as of 4.27, so that's definitely enough for the preference test), stitch them together, and compare that to Selfie One for a 3rd preference test. After that, do a 4th and final preference test comparing the original hero image and the "winner" of the 3rd preference test, to quantify how much better the final image is than the new image.
- Stitching together the uploaded screenshots. 2) launching the preference test between selfie One and the Zoom image. 3) launching the preference test between the "winner" of preference test and the original image to quantify impact.
Availability: 2 hours Thurs, Fri, and Sat.