suicidesafetyplan / safetyplan-ios

Suicide Safety Plan is a free mobile application for suicide prevention.
MIT License
23 stars 10 forks source link

Create Updated App Design #20

Open mvnd06 opened 3 years ago

mvnd06 commented 3 years ago

Hello!

I think we should update the app's design to be more modern and have a content first approach. I brainstormed some changes that could be made earlier today and would love some feedback. Please let me know what you think!

https://www.figma.com/file/4jKqQ9V2n0iN3seNA2Ux9v/Suicide-Safety-Plan?node-id=0%3A1

mvnd06 commented 3 years ago

(I'm a developer not a designer so if anyone has more experience in this area, please feel free to suggest changes)

eddielement commented 3 years ago

I think this looks really great! I agree that the app could definitely be more modern.

Navigation Bar - Love it! that it looks much more 2020 Apple Design instead of 2015.

Bottom Bar - I think that the expanding is an improvement, but it also has the side effect of making it less clear what the different tabs do. Wonder if there are better icons, perhaps in the blue accent color?

Safety Plan Page - I think the > arrows make things look much more self explanatory compared to the way it currently is! Without the icons, I do worry it looks a little bland? Maybe icons could fit in on the left side?

Guide Page - Combining top and bottom navigation bars is a bit confusing to me.

Crisis Page - I like the concept, but it could be a bit difficult to pull off. They can add up to 10 friends / families, so the page needs to be a scroll view. But then you can't really scroll on the Google Maps part of the page. So they could only scroll at the top and then if they scroll too far down they get trapped in Maps because they can't scroll up?

mvnd06 commented 3 years ago

Hey Eddie, thanks for the feedback! I updated the figma file with your feedback incorporated. Let me know what you think!

https://www.figma.com/file/4jKqQ9V2n0iN3seNA2Ux9v/Suicide-Safety-Plan?node-id=0%3A1

eddielement commented 3 years ago

I like it! Great new icons :)

Minor note on the Detail / Edit Views - I imagine that with the arrows indicating >, it wouldn't be a modal with the screen beneath it visible on the top, but rather a push segue to correspond with the arrow on the safety plan / crisis info pages that takes up the full screen.

Guide - I'm still unsure about the combination of top tabs and bottom tabs. I'm confused as to what happens when I swipe to the right. Will it swipe me from Overview -> Coping or will it swipe me to anther section in Overview?

Crisis Info - I think that looks great!

Instead of having the contacts under 'Contact A Professional' -> 'Call Emergency Number', we should probably have a 'Contacts' section on that TableView too. I think it's good to have one button to call 911 or the corresponding emergency number in their country.

The current UX in the app is a little odd - users have to go to the Guide page to add Contacts and then go to the Crisis page to contact those contacts. I wonder if there could be a way to notify users that this feature exists from the Crisis page and perhaps a shortcut to get there?

A quick and easy way of doing that is maybe if they don't have any contacts there could be a message saying 'Add Contacts In the Plan to see them here' or something.