Cht-core: Improve UI for profile page

[abbyad]

We now have the person's details hidden by default:

and expanded:

@Lesterng, it would be good to revisit this page with some UI input.

[abbyad]

Moving to current iteration for design work only.

[sglangevin]

@abbyad should this design work include thinking on where in the profile we could indicate that a woman is pregnant and show her EDD?

[abbyad]

Yes @sglangevin, I think that falls in here too.

[diannakane]

-- formatting as shown in mockups.
-- Updates to tasks, e.g. show “1 week / 2 week / View all”
-- Place and people cards
-- Add task notification bubbles to family members in list view

@Lesterng add mockups

[ghost]

Completed
https://invis.io/XA7CTCBGU#/163504603_Area-person

[sglangevin]

@diannakane @Lesterng what about the History section? Will that just be a list of everything that grows longer and longer? Or is there a plan to show the history by time period, similar to Tasks?

[diannakane]

For now, the list will grow, but this is another issue that we will be
addressing as the profiles continue to evolve.

On Fri, Jun 10, 2016 at 10:08 AM, Sharon Langevin [email protected]
wrote:

@diannakane https://github.com/diannakane @Lesterng
https://github.com/Lesterng what about the History section? Will that
just be a list of everything that grows longer and longer? Or is there a
plan to show the history by time period, similar to Tasks?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/medic/medic-webapp/issues/1572#issuecomment-225239998,
or mute the thread
https://github.com/notifications/unsubscribe/ABmSXgEqd6hVG9_IzW3XET9LedMO3h5Qks5qKZn3gaJpZM4GilYY
.

P.S. Join our community. Sign up for Medic Mobile's newsletter
http://medicmobile.us8.list-manage.com/track/click?u=e5b07d2afb4b273eaff8e3c53&id=a3129fc799&e=c511575255
.

Dianna Kane | Senior Designer
Medic Mobile http://www.medicmobile.org/ [phone]
@_M_edic http://www.twitter.com/medic Facebook
https://www.facebook.com/MedicMobile @diannakane

[sglangevin]

Ok, I figured that would get updated along with the tasks. We've gotten a couple of feedback points that the list gets very long pretty quickly and it seemed like that update would fit well within the profile UI update.

[diannakane]

I think we could apply the 1 week / 2 week / view all filters to the
history tab in this update without doing any additional design work on it.
The reason I said it was for a future update is because there are other
issues related to the profile that we need to look at, like highlighting
critical information (danger signs, EDD), showing personal targets, etc.
and I had grouped revisiting the utility and functions of the history tab
within that. However, I agree that managing the history list can fall
within this update since we're solving a similar problem for Tasks.

On Fri, Jun 10, 2016 at 10:48 AM, Sharon Langevin [email protected]
wrote:

Ok, I figured that would get updated along with the tasks. We've gotten a
couple of feedback points that the list gets very long pretty quickly and
it seemed like that update would fit well within the profile UI update.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/medic/medic-webapp/issues/1572#issuecomment-225249521,
or mute the thread
https://github.com/notifications/unsubscribe/ABmSXha0YTaQzND9rE-r6xUrCLXMpJL9ks5qKaNvgaJpZM4GilYY
.

P.S. Join our community. Sign up for Medic Mobile's newsletter
http://medicmobile.us8.list-manage.com/track/click?u=e5b07d2afb4b273eaff8e3c53&id=a3129fc799&e=c511575255
.

Dianna Kane | Senior Designer
Medic Mobile http://www.medicmobile.org/ [phone]
@_M_edic http://www.twitter.com/medic Facebook
https://www.facebook.com/MedicMobile @diannakane

[sglangevin]

That makes a lot of sense and would be a great interim update as you continue working on the other updates you mentioned. Can that be added to the mock-up easily?

[diannakane]

I will add it to the list of changes in the issue. The mockups are
supporting documentation. @lesterng, if you are doing other updates to the
mockups, you could add this in, but calling it out in the list should also
work.

On Fri, Jun 10, 2016 at 12:32 PM, Sharon Langevin [email protected]
wrote:

That makes a lot of sense and would be a great interim update as you
continue working on the other updates you mentioned. Can that be added to
the mock-up easily?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/medic/medic-webapp/issues/1572#issuecomment-225274935,
or mute the thread
https://github.com/notifications/unsubscribe/ABmSXivSgQJvrCiuLmrfxGeZwkHDeslVks5qKbu9gaJpZM4GilYY
.

P.S. Join our community. Sign up for Medic Mobile's newsletter
http://medicmobile.us8.list-manage.com/track/click?u=e5b07d2afb4b273eaff8e3c53&id=a3129fc799&e=c511575255
.

Dianna Kane | Senior Designer
Medic Mobile http://www.medicmobile.org/ [phone]
@_M_edic http://www.twitter.com/medic Facebook
https://www.facebook.com/MedicMobile @diannakane

[ghost]

@diannakane @sglangevin Working on the mobile versions. I will add date filters to the History in mobile views. Should the time frames be months??? Having to adjust things for mobile. I'll back track to the web view once I got the mobile views working.

[diannakane]

I support the "months" suggestion! How about "last month," "last 3 months,"
and all?

On Fri, Jun 10, 2016 at 1:45 PM, Lester NG [email protected] wrote:

@diannakane https://github.com/diannakane @sglangevin
https://github.com/sglangevin Working on the mobile versions. I will
add date filters to the History in mobile views. Should the time frames be
months??? Having to adjust things for mobile. I'll back track to the web
view once I got the mobile views working.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/medic/medic-webapp/issues/1572#issuecomment-225291141,
or mute the thread
https://github.com/notifications/unsubscribe/ABmSXkafoUSv_9rbtkiky0mOLcvLP9mVks5qKcz9gaJpZM4GilYY
.

P.S. Join our community. Sign up for Medic Mobile's newsletter
http://medicmobile.us8.list-manage.com/track/click?u=e5b07d2afb4b273eaff8e3c53&id=a3129fc799&e=c511575255
.

Dianna Kane | Senior Designer
Medic Mobile http://www.medicmobile.org/ [phone]
@_M_edic http://www.twitter.com/medic Facebook
https://www.facebook.com/MedicMobile @diannakane

[sglangevin]

That sounds great!

[ghost]

@diannakane @sglangevin
Mobile mockups for person tabs.
District:
https://invis.io/QD7ML6T7C#/166036779_MContacts-District
Branch:
https://invis.io/QD7ML6T7C#/166037295_MContacts-Branch
Area:
https://invis.io/QD7ML6T7C#/166037415_MContacts-Area

Added history date filters in months

[ghost]

@diannakane @sglangevin updated history screen.
Used: 1 month | 3 months | View all
Last month refers to the previous month. So if you are in June, last month would be May. History refers to entries dating back from present date back 1 month. Let me know if this makes sense.
https://invis.io/XA7CTCBGU#/163504603_Area-person

[abbyad]

Can we start listing out all of the desired changes explicitly for the mobile version too? Eg It appears that the headers are a different colour for each level of the hierarchy

[ghost]

@diannakane

1. Removed phone numbers from all Places: Branches, Areas, Households.
2. Made bar at top of all places and people the same color, Rose.
3. Increased font size on everything for mobile view
4. Removed Edit from FAB
5. Added 3-dot menu icon the top header right with drop down for "Edit" and "Delete" global actions
6. Made all list items 100% width of mobile screen. This differentiates "Card" from list items on mobile view.
7. Added person icon to "Person" card
   https://invis.io/QD7ML6T7C#/166036779_MContacts-District

Usability observations:

1. District and Branch level screens only shows locations when on the "Peoples" tab. This is confusing.
2. When Drilled into a Branch, Area or Household, "Search" is no longer available. Hard to know where to find a person.
3. Drilling down from Branch > Area > Household > person > task of far to many steps. Going back to the top level with the back arrow takes the same amount of steps.
4. Making the top header the same color makes it harder to distinguish between places and people.
5. No animations for routing makes it hard to know where you are at in the application.

Although this mirrors the Web app views with responsive logic, the mobile usability falls short of an application.

[diannakane]

Creating a design issue for updates top-level header and app navigation from @Lesterng's observations above

[SCdF]

So is this still blocked on requiring design work? Or is there something for a developer here?

[diannakane]

This is done, as shown in these mockups:
https://projects.invisionapp.com/share/QD7ML6T7C#/screens/166340657

Detailed specs for many of the elements are attached below.

@lesterng is there another file that contains detailed specs for the family
and individual profile pages, that includes Tasks?

[garethbowen]

Split off the Tasks and Reports filters so they can be done separately: https://github.com/medic/medic-webapp/issues/2721

[estellecomment]

This is a design issue, please don't add implementation details or commits to it.

@Lesterng, can you give the status on mocks? Are they done?
For all types of logged in users, and all levels, both desktop and mobile?

Is there a place where we can either list the mockups to have them all together, or maybe an invision shared folder? Right now we're relying on links to invision scattered among the github issues (when you lose the link you lose the mockup!)

[estellecomment]

(LGTM @garethbowen)

[sglangevin]

What is the status of this issue? It's not clear what needs to be done (if anything). I would suggest opening a new issue or editing the title of this one to clarify what is needed.

[abbyad]

This had been kept open as an overarching issue but now makes sense to close in favour of the newly spawned issues. If further design work is needed for the profile page it can be opened in medic-design.