search

benetech / MathShare

MIT License
9 stars 3 forks source link

Tablet: Problem Sets Card: Profile Image (Tablet > Dashboard) #1454

Open sidmundhra opened 4 years ago

sidmundhra commented 4 years ago

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:

Mockup of new dashboard, showing the Your Sets page, with rounded pastel problem cards in a single row and Example Sets in another row. Along the top of the page is a Mathshare logo and a profile image. Underneath is the heading, Your Sets, next to a search icon and a dropdown showing the words, Most Recent. Each problem card shows a profile image, the designation Algebra 101, a three dot drop down, the problem set title, and the word Progress, followed by 02 of 06 Problems, and a progress bar beneath. Underneath the Your Sets cards section is the heading Example Sets. In the Example Sets section, Example problems cards have similar card styles like that of Your Sets with each problem card showing a profile image, the designation Algebra 101, a three dot drop down, the problem set title, and the word Progress, followed by 02 of 06 Problems, and a progress bar beneath.

The above mockup shows the full dashboard in context (Tablet 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 Siddharth Mundhra"

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."

Benetech logo showing a red circle with small handwritten-style 0s and 1s drawn over the top

Reference

Style Guide + Official Mockups: https://projects.invisionapp.com/share/FKYLJNJGRMB#/screens/430773140

Tablet Mockups: https://projects.invisionapp.com/share/FKYLJNJGRMB#/screens/430773140?browse

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.

abaranowska1 commented 3 years ago

Tested with success As a user with sets available, when I view any given problem set, I see the profile image (or initials) of the individual who created the problem set.

image image

Verified on: