Design-iteration: resize-avatar-flow

[faffydee]

Problem:

I think a couple of things feel wrong with the flow to upload a new avatar.

• Visually the page is not inviting, the elements feel unorganised on the page.
• The textlink is "choose another file" is unneccessary, because you already initiated that you want to change the avatar. (If you just want the cropping done different you should upload the picture again).

Current state of /resize-avatar/:

Solution:

I made a new userflow (ànd a new design) which I think fixes these things. The userflow includes a little bit of new logic. It is described below:

• 1: the user taps the upload-icon because he wants to upload a new avatar
• 2: the user sees (still on route /myprofile/) the file-browser input thingy presented by the browser and selects the new img he wants to upload
• 3: the view now changes to /resize-avatar/ where the new uploaded picture is presented (NEW DESIGN). The user is now able to resize or rotate the img. When he taps the black X-mark, the action is aborted and the view changes back to where the action was initiated. When the white button with blue Vmark is tapped, the user confirms his new avatar and the view changes to /my-profile/ with the new avatar.

NEW DESIGN /resize-avatar/ mobile:

NEW DESIGN /resize-avatar/ desktop:

Important!
Zoomlevels:

• the minimum zoom is the height of the crop-circle for landscape-images, and the width of the crop-circle for portrait-images
• the maximum zoom is 2x the original size of the img

---

Check the links below to see the right sizes/distances:
Invisionlinks with login (for inspect mode!):
mobile: https://projects.invisionapp.com/d/main#/console/13838256/299369714/inspect
desktop: https://projects.invisionapp.com/d/main#/console/14147648/299371095/inspect

[BvL13]

Why is this on hold? Please comment. Thanks

[kikipluche]

Well, it is an iteration, the question is, do we put time in that right now, or later. It is not a blocking issue at all, so basically, if a confident polymer designer shows up, he/she can take this one, without any dependencies.