Images of zooms for homepage

[ExperimentsInHonesty]

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

• Review existing research findings and document in this issue a summary of the findings and the issues of concern, such as small sample size
• 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.

• Look at the results at usability hub: https://app.usabilityhub.com/tests/f317c83b986/results/28c61adf70ef

screen capture of the usability hub test in case the url is no longer available

Images Tested
Happy/professional selfie

Goofy selfie (w/ tongues sticking out)

Zoom compilation

[ExperimentsInHonesty]

[ExperimentsInHonesty]

[summerharveyux]

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.

[sacamp]

@summerharveyux I believe the images are posted in the hfla-site-ux slack channel.

[summerharveyux]

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.

[sacamp]

@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!

[summerharveyux]

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 <#2763 (comment)>, 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: ***@***.***>

[summerharveyux]

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.

[summerharveyux]

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

[summerharveyux]

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.

[sacamp]

@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

[summerharveyux]

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.

[sacamp]

@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: hackforla/knowledgebase-content#58

[ExperimentsInHonesty]

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
• 311 Data
• Access the Data
• BallotNav
• Brigade Organizer's Playbook
• Civic Tech Index
• Civic Tech Jobs
• Civic Tech Structure
• Data Science Projects
• Design Systems
• Engage
• Expunge-Assist (formerly known as Record Clearance)
• Food Oasis
• GreenEarthOS
• Guides
• HomeUniteUs
• Internship project
• Lucky Parking
• Open Community Survey
• ops
• People Depot
• TDM Calculator
• VRMS
• 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

[ExperimentsInHonesty]

@summerharveyux lets discuss next week what we got after I reach out to all the teams.

[kpmunnelly]

Progress: Assigned this task to myself on Wed, Aug 10.
Blockers: Need to obtain Zoom shots from Bonnie and access to Usability Hub.
Availability: I should have about 2-3 hours this coming week and the following week...Weeks of Aug 15 and 22 will be busy as semester starts.

[kpmunnelly]

Progress: Was able to connect with Summer Harvey on this issue b/c some info was missing from drive and it was unclear if this issue was complete. Summer confirmed that the following 4 preference tests were 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.

I have added these images to the top of the issue b/c they were not saved there.

Blockers: Unclear if this issue is complete. Have messaged Phuong and will check-in with Bonnie

Availability: I should have about 5 hours this week split between Mon, Wed, Fri. This is dependent on what happens with Tropical Storm Ian. It’s currently expected to be a direct hit for me.

[kpmunnelly]

Progress: Was able to connect with Phuong. She was not sure if this issue is complete or not. Mentioned that maybe we could possibly make a design homepage mockup of the selfie and the research team could do tests on the design mockups of the selfie and the original hero image to users. However, she is stepping down and is not sure if anyone will be working on these mockups.

Blockers: Unclear if issue is complete or if design team will develop additional mockups. Because it doesn't seem like this issue is going to move forward quickly, I may remove myself so I can work on something else that is more urgent like the interviews for personas since I believe we need more people on those due to some team members exiting.

Availability: I should have 5 hours split between Mon, Wed, Fri

[kpmunnelly]

Progress: I am removing myself from this issue for now b/c after talking with Bonnie it has been realized there are a few next steps that need to be taken care of by design before more research is conducted
Next steps:

• Design will collect Zoom images from missing teams and create a new stitched image.
• Design will incorporate the new Zoom image into the homepage, so research can test it
• When new designs of homepage are ready, research will conduct a survey to learn what users believe the image conveys.

[ExperimentsInHonesty]

Teams that need to provide their images
How to identify which teams: see the response url for HfLA website: Upload Zoom image

• 311
• 100 Automations
• Access the Data
• BallotNav
• Brigade Organizer's Playbook
• Civic Tech Index
• Civic Tech Jobs
• Design Systems
• Expunge-Assist
• Food Oasis
• GreenEarthOS
• Guides
• HackforLA.org
• HomeUniteUs
• Internship project / Tech Work Experience
• LA TDM
• Lucky Parking
• Open Community Survey
• People Depot
• VRMS
• Write for All
• Youth Justice Nav