Problem Set Cards: Profile image (Mobile > Dashboard)
This tasks defines the sourcing and surfacing of the user profile image displayed on the problem set card.
Full Mockup
The above mockup shows the full dashboard in context (Mobile version).
Notable changes from mockups:
We are not using the "Algebra 101" or similar class/topic designation in this initial mobile release
Profile Image
The profile image here is surfaced from the portrait used for the associated Google or Microsoft login. This also includes their default fallback, which is the initials of the name associated with the account on a given colored background which the user may be able to change through their Google / Microsoft account settings.
Alt text: "Profile image of [user name]" where [user name] is the name associated with the account.
e.g.: "Profile image of Alex Cabral"
For example sets, this profile image should be the "Benetech meatball" -- the red and yellow binary circle displayed with the existing logo.
Alt text: "Profile image of Mathshare."
Given that I'm a logged-in user with sets available, when I view any given problem set, I should see the profile image (or initials) of the individual who created the problem set.
Problem Set Cards: Profile image (Mobile > Dashboard)
This tasks defines the sourcing and surfacing of the user profile image displayed on the problem set card.
Full Mockup
The above mockup shows the full dashboard in context (Mobile version).
Notable changes from mockups:
Profile Image
The profile image here is surfaced from the portrait used for the associated Google or Microsoft login. This also includes their default fallback, which is the initials of the name associated with the account on a given colored background which the user may be able to change through their Google / Microsoft account settings.
Alt text: "Profile image of [user name]" where [user name] is the name associated with the account. e.g.: "Profile image of Alex Cabral"
For example sets, this profile image should be the "Benetech meatball" -- the red and yellow binary circle displayed with the existing logo. Alt text: "Profile image of Mathshare."
Reference
Style Guides: https://invis.io/CQYLLW8J49U Mobile Mockups: https://invis.io/5HYLLW1G4BD Fonts: https://www.dropbox.com/sh/c12m6ufweyds20d/AAAdXNPOt8e52DkSAr9pd-a-a/Fonts?dl=0
Acceptance criteria:
Given that I'm a logged-in user with sets available, when I view any given problem set, I should see the profile image (or initials) of the individual who created the problem set.