factn / resilience-design Goto Github PK

The connected / available services (right now only Google) are oddly displayed right now. Ashley suggests "Make the logo smaller and use Google Text next to logo. Move buttons to the other side of the grid vs. off center?"

As a volunteer, I want to be able to adjust the time that I can spent volunteering, so that I can fit my involvement to my free time.

Right now we only ask for hours when signing up as a volunteer. It is very likely to happen, that a volunteers available time will change in the future. This should be an option in the profile.

When designing this, please also see / claim issue #30 as it handles another change to the availability.

As a volunteer, I want to be able to conveniently choose the amount of hours I can volunteer, without running into a problem when selecting the number.

Right now this is a short text field. Another option might be a dropdown but the best would be a stepper.
Please note that whatever is decided for this issue needs to be reflected in issue #28 as well.

The following was written in the UX Audit: "SUV & Truck is americanised language - recommend saying how many seats 4 seater, 6 seater, large boot/trunk space."

As a user, I want to be able to see if I can get my foobox delivered before I enter information and select a box, so that I don't get frustrated when I read a notice about the organisation not being able to deliver to my adress at this time.

Right now the notice appears right before the Continue button but after all other information (adress & drop off instructions).
It would probably be best to have this notice under the heading "Delivery / Pickup details" once the checkbox ("I can pick up from curbside location") is unchecked.

As either a person in need or a volunteer, I want to clearly see where I can do something, so I don't have to search the main landing page for it.

Right now the main CTAs are differentiated between the two main audiences but not clearly enough.

As a volunteer, I want to be able to see all instructions from the organization and people in need, so that I always know where to pick up and drop off a box.

Right now the volunteer has the ability to edit the pick up and delivery instructions which might lead to confusion. This either is not necessary, as these informations are provided by the organisation and the person who ordered the box or the feature is just named wrong.
This might need some input from someone who was around when the feature was designed and should be reviewed before deleting.

As a volunteer, I want to know which missions I can start and which I can't and why, so that I can plan my work accordingly.

Right now, the screen only states that the mission is not ready to start yet. What reasons can there be? Maybe they could be shown with the help of an info icon?

As a new user, I want to be able to sign up directly from the landing page, so I don't need to guess where I can sign up.

Right now, the sign up option only appears on the sign in screen

Note: All main functions (Intro, Sign In/Sign Up, Delivery, Volunteer and Donate) should be visible above the fold.

As a user, I want to be able to conveniently choose the amount of foodboxes, without running into a problem when selecting the number.

Right now we have dropdowns that might be problematic on a smaller mobile device. A stepper is also more accessible for older users and provides the ability to input the amount through the keyboard.

As a volunteer, I want to get an overview over all available missions for me, so that I can choose the one that fits me best.

Right now there is very little spacing, the font size is rather small and the colors seem a bit overwhelming.
Maybe push the fontsize from 12 to 14 pt in the cards?

The usability test (https://maze.design/r/jwxm11bufkgchwedq) found that the dashboard had a high drop-off and misclick rate. Many users were not able to find the drop-off instructions. This might need more work than just spacings and realigning.

The following other remarks were made about the structure of the dashboard:

• Suggested for you...based on what criteria? location? profile info?

• Time estimate for mission would be helpfuls so 'Two fruit box deliveries from home to point A to point B and then point c will likely take 40 mins driving. This is key info for volunteers to accept missions and also for organisations to be able to meet quotes of donations.

• I think the expand/collapse isn't really needed. Perhaps a 'save for later' Typically a vol organisation will need to call a volunteer before they actually 'take on a task' its to absolutely ensure it will happen!

• An image of the food box size is useful

• Preferred volunteer is a bit odd and kind of makes me feel weird as a volunteer, is it a competition?

• What is the function of the map vs the list. Users tend to click map pins by default but this visual area is too small to add value to a pin click. Advise making maps per mission card or making map an alternative viewing mission process via tapping, scrolling and going into mission 'pages'

• Filter list link/button is missing or unclear how you toggle this on/off

• Menu nav should be tested in non-english languages I think the titles will liking go very long in languages like German and Portugese.

• Consider labels like 'Mission 1' Mission 2' or even allocating a number code like mission #1297 that way tracking for orgs and volunteers can be done.

• What do you click to see 'mission detail' page? is it the (i)?

• Add photo of delivery very good feature but needs a good example re. privacy so not having a recievers face or house number in photo shot.

• The user clicks accept and then a second accept button - consider changing the first 'accept' to see mission details or similar.

• The differences between available, schdeuled and in progress as titles is easy to miss. I suggest a way to show the content has changed from one state to another by chaning either typography size, colour or transition animation to a new page. Some kind of icon system for available, scheduled and in pogress might also be worthwhile investigating.

• Do we really need drop shadows on the cards? Do we even need cards at all? re. material Ui says that's a component but why not just page content.

• Noticing that the slide global menu nav and the tab nav have different options. Consider investigation having the slide global nav having all nav options.

• Re-Label the button to accept a mission on the dashboard as the button label on the detail page for the mission is also labeled "accept" and it might be confusing for the user to click an accept button twice to actually accept.

As a volunteer, I want to receive suggestions which missions would fit me based on my location, so that I can work as efficiently as possible.

The user story doesn't mention it but right now the app is pre-assigning people for missions that are near them. They still have to accept the mission resulting in a confusing combination of the "Unassign me" and "Accept" button right next to each other. The suggestion was, to stop pre-assigning people and just suggest missions for people to accept eliminating the "Unassign me" button from the left screen. While not tested with the latest usability test, the current state might cause frustration.

The latest user testing uncovered a lot of problems with the screens in this flow and it was decided that the screens need a rework.
This epic additionally gathers all remarks that were made for these screens in the audit.

• An inporgress bar might help with visual comprehension of where you are in the mission

• Very little visual difference between the 1and 1 steps. 3 is different because of the photo taking function

• Take photo guidance is good for drop offs but we need to be sure that no senstitive info is captured in a photo like house number or peoples faces. Privacy and security & GDPR stuff.

• Pick up instructions should only be editable by the org offering the food box and not by the mission volunteer - don't need the 'done' text button/link

• Delivery details is useful for the recipient of the food box but what kind of editing will happen here? I'm wondering what happens when a volunteer is stuck in traffic or running late etc?

• Act of taking photo is well done. What if the photo is at a weird angle and also what kind of text can be added alongside for people that are blind/sight impaired who cannot see photos.

• Love this but also consider giving the vols a number of missions completed :) we also tested some nice 'quotes' in a previous projject like from books, poems, famouse people and these tested really, really well with users.

Right now its not clear whether to only enter a street, city or both. The example in the field could be modified to an exemplary adress in the correct format "e.g. 123 Lakefield Drive, LA, 90000".

This is actually the way it is in the Figma file. Might only need an update from development?

As a possible volunteer, I want to get a good picture about what I will be doing when volunteering in this project, so that I can be sure what I sign up for.

Right now we only have placeholder copy that even states that it is placeholder copy.

As a user, I want to give my precise address, so that no problems can occur during delivery.

Right now the address field in the profile is a short text field with no format demanded. That might lead to users failing to give a piece of important information about their address resulting in problems with the delivery.

Clicking the empty field/map pin also asks the user for a location to be enabled on their device to locate them which is not clear as a CTA.

The following was suggested in the audit:
"Considering it is used in the US only, just a placeholder text would solve it. When it is designed for other countries, using different fields for each information (street, number, zip code) might work better."

As a volunteer, I want to understand the process behind the volunteer registration completely, so that I know that the organization needs to approve my registration first.

Right now the button at the end of the registration says "Go to Volunteer Dashboard" even though the volunteer needs to be approved first and shouldn't have access to the dashboard at this point. "Go back to Landing Page" or something like this would probably be better to align the messages send here.

Might be confusing. Think about a replacement or removal.

Currently the 'Missions' page in the Figma file (in the volunteer exp in 0. MVP v.0 (for dev delivery)) has a small 'play' icon next to 'start'. Some of us were concerned about what a play button might suggest to a user. e.g. is there a timer? is there monitoring? Can I pause my mission? etc.

We may need to either change the icon, remove or build out further experience that 'makes sense' with a play button.

This is an epic which collects the issues which are around improving the main 'landing page' once a user hits the Mutual Aid World web app.

In both mobile views, tablet and desktop.

https://mutualaid-757f6.web.app/

This epic collects issues around the logged-in user flow and any pages or functions that users perform around logging in or post-login

"Donate" looks different from other areas.
All other actions have a picture related to it. User might be more attracted to visuals than just text.
Adding a picture to this area as well, e.g. showing where donations would go to.

As a volunteer, I want to receive precise information on how to accept a mission, so that I can start working.

Right now the empty states only contain information on what would be on this screen as soon as the volunteer has any missions. Some info on how to start / pick up a mission could be added to give more clear directions. It was also mentioned that a video / GIF might help to clarify. Maybe a picture would be suitable as well.

The label for volunteers to sign up is not very clear. The sign up options are to be reworked anyway (issue #3 ). These could be done done in one go.
Suggestions: Just "Sign up" and every option on the next screen. Another option would be to have all sign up options on this screen. If this option stays it could ne named "Sign up with Phone Number".

This issue is to ascertain if the MVP 1.0 still meets the needs of key users and make sense as a process to users.

Mutual Aid design team will take turns reviewing the live app and also the Figma prototype screens in this google spreadsheet: https://docs.google.com/spreadsheets/d/1dX37Az3G0NLzthpISJz7A_5JdYOq3tGJcU17yBrfJn4/edit#gid=0

• Registration and onboarding
• Volunteer screens
• Organisation screens
• Public,
• Recipient request
• Any user
• Recipient logged in

Later we can look at a review of our website

Right now the label says "Displayname" which is unusual and does not line up with the sign up form. The sign up form asks for "Full Name" which could be used here as well. Ashley suggested "Username" as it is more common than displayname.

Also at least in a bigger browser, the field for the name is smaller than the other field and might have a bigger margin then every other element on this screen. The designs in Figma are correctly spaced though. Note this when handing this over to development.

As a user, I want to know how long I will approximately have to wait for my box to be delivered, so that I can plan meals accordingly.

This would be an addition to the notice from issue #10
While this is a static notice a general notice should be given on the estimated time it takes the organisation to deliver the box.

As a user, I want to have a good overview over the boxes that are available, so I can select the one that fits me best.

Right now the spacing is quite narrow. Please also see Issue #14 for this as these changes will affect each other.

As a user, I want to be able to login with a bigger number of services, so that I can use my prefered service of choice.

Right now users are able to sign in with either their phone number or Google.
Additional services could be Facebook, Apple or Email.

This also true for the volunteer sign up. There is an existing issue to change the label of the button for this sign up under issue #22.

As a user, I want to see where additional information can be shown, so that I know that I can access the information by clicking on the associated icon.

Right now the arrow for "Show more" is present with all descriptions (on the food body delivery page) even when the description doesn't have additional lines. In these cases they shouldn't be there.

As a new volunteer, I want to see who is handling my approval and how long it will approximately take them to approve me, so that I know when I can start volunteering.

We have a sentence "You will be notified when the organizer approves your volunteer registration." on the confirmation screen after the sign up but no information on the dashboard afterwards. It might be good to have some information like that there as well because confirmation screens are only looked at for a short time and some users might not read that sentence at all.

The audit states:
"If I needed a donation, I would be a bit confused in the first steps. The text at first reads "What do you need help with?", then changes to "Help out local farms..." when I select Food Box Delivery. Seeing all the prices for the boxes would make me feel I would have to pay and maybe make me leave. If I could state from the beginning that I don't have the means to pay for a box, I would feel more confident moving ahead in the process."

When accepting more than one mission the button shows a double check icon and a (AMOUNT) behind the text which are two indicators for one information. Change the icon to a single check icon and keep the number.

As a volunteer, I want to receive precise information on the safety measures and precautions I have to take while delivering a box, so that I do not endanger anyone else or myself.

As an organizer, I want to be able to give volunteers precise information on the safety measures and interaction guidelines, so that we can follow the most recent local / national guidelines for a safe interaction.

This epic spans two flows right now - they might need to be divided into two epics later on.

As a volunteer, I want to be able to communicate that I am available for volunteer work right now, so that the organization can assign me e.g. urgent deliveries.

Currently we have no availability feature whatsoever. It needs to be discussed if this makes sense from the organizations point of view (would they be able to prioritize volunteers like that?) and would also need to be reflected in the organizer flow.

We'd like to see a design treatment where the headings for Need help? and Want to help? have the navigation icons next to them similar to the donate section of the main page.

As a user, I want to see what each box contains as quickly as possible, so that I can decide which box is the right one for me.

Right now we have plain text. While this is quite accessible, a combination of a small picture of the ingredients and the name as text below would be preferable, especially for older users. As an alternative, pictures of the boxes could be used that display all ingredients as one and the description text could be kept as is.
Please also see Issue #13 for this as these changes will affect each other.

This epic collects issues that are part of the flow of 'Need help?' and improves UX from the need help section through the subsequent pages:

Please note that epic #43 covers the design of the main page.

From https://mutualaid-757f6.web.app/request/foodbox page onwards.

As a user, I want to see if I put the right information or right format into a field right away, so I get immediate feedback and don't have to scan the screen for errors once I try to proceed to the next screen.

If e.g. a phone number is provided in the wrong format, the form will not respond directly but rather when the user tries to proceed to the next page. The input field should respond to this right after the user finished the input. This is marked a general issue as it will most likely appear in other flows as well.

As a volunteer, I want to know which information is needed from me, so that the organisation knows how to plan my missions accordingly.

Right now the text field asks two questions of which one would better be designed as a checkbox. The large text box should only say "Tell us a bit about yourself", while there should be another checkbox selection underneath the checkbox with the label "I have a vehicle that can be used for deliveries" that has the answers "Compact", "SUV", "Truck and maybe "Other" with the option to fill in something into a short text field.

Find out the details that will be needed for the footer:

• parent website
• registered legal text
• logos to include
• etc...

Text over image could have more contrast.
The image is already darkened, but it could have a higher contrast to ensure it is legible/readable.
First image has no shape background under text, unlike other images below.

As a user, I want to be reminded that I can also order additional boxes for my neighbours, so that they don't have to order themselves.

Right now, the CTA is unclear in terms of what the organisation wants the user to do. Does it want the user to make an additional order for them? Does it want them to order one more box for their own delivery?
Depending on the change of the copy it might also be good to change the position of this CTA.

Input from Rosanne: It could have a tick box/option to flag the order as an order for a neighbor with a different delivery option - to have it delivered to a specific neighbor or add to a pool of donated food boxes.

The input fields for the phone number is not the same for these two instances. These should be unified. The initial designs in Figma don't even suggest a phone number input for the profile page so this might need to double checked. Also check if a decision was already made regarding the phone number as a sign up option.

Profile:

Sign Up:

The prices for "Produce Box #3" large and small should be swapped.

Changing the "foodbox" label to "request" might be more aligned to what the user will be doing in the screen.

Could be mistaken for confirmation.
If there is time for that, research could be done on what users associate with the icon.

This issue is to ascertain if the MVP v.0 still meets the needs of key users and make sense as a process to users.

Mutual Aid design team will take turns reviewing the live app in this google spreadsheet: https://docs.google.com/spreadsheets/d/1dX37Az3G0NLzthpISJz7A_5JdYOq3tGJcU17yBrfJn4/edit#gid=0

• Registration and onboarding