Interested to work on this after I finish up the landing page... From outreachy

@duffy I am interested assign it to me, Outreachy2020

Interested to work on this task. Can it be assigned to me? @riecatnor
Outreachy.

@duffy @riecatnor I would love to contribute to this Project.

Hey everyone! @ejirooghenekome1998 @saralatif @sabahat @emem all of you are welcome to create designs for this task. Be aware there are multiple people working here and we will need to choose one design to implement, though your contribution will count towards your Outreachy application whether chosen or not :)

@riecatnor
Here is my Design Submission
https://www.figma.com/file/WlN1lTBAOXoJyPVzXzDiw5/Fedora-Badge-Profile-Page?node-id=0%3A1

Hi @emem I like the design on the right hand side more. Take a look at these other Fedora web apps for some inspiration:

https://bodhi.fedoraproject.org/
https://elections.fedoraproject.org/
https://apps.fedoraproject.org/datagrepper/

Can you update the design on the right hand side to incorporate some of the common themes from the other Fedora sites?

Thanks!

@riecatnor Thanks for the review.
However, I have been able to update the design to the Fedora sites theme.
Please have a look again.
https://www.figma.com/file/WlN1lTBAOXoJyPVzXzDiw5/Fedora-Badge-Profile-Page?node-id=0%3A1

The designs to the left are just wireframes.

Hello @emem ! That looks great! Thank you so much for the update.

A question I would like you to consider now - how does your design solve the issues listed in the usability report mentioned in the ticket description?
Those issues being:
- confusing libravatar UI
- confusing notifications redirect

The profile page itself as it is set up right now does not pose many usability problems and, in fact, is set up pretty nicely. The first thing people can see is the total number of badges earned, as well as all their badges at once.
Maybe you could make that a priority over the user info and latest badges earned?

Hey @mleonova , although my outreachy application period is just about over, I'd like to give this task a shot. Emem did a great job, especially visually. I just made a quick rough draft focusing on the usability aspect: https://docs.google.com/document/d/1ZyShmAlpeN0p2BPChyuK77LOskDZA0aFkOC5UrIyxSw/edit?usp=sharing

Hey!
i would like to redesign the profile page, can I contribute to this?

Hi, I would love to contribute to this project. Can I be assigned to this please? @riecatnor . #outreachy2021

@riyajawandhiya & @pearlnwashili since we have a couple folks who want to work on this I will leave it unassigned but you are both welcome to submit drafts :)

Looking forward to what you come up with!

Hi @riecatnor I wanted to confirm the task at hand, are we to focus on redesigning the profile page visually or we are to focus on solving the usability issues discussed above.

Kindly advise, Thank you.

Hi @riecatnor, below is a link to the draft you requested for the profile page redesign.
I'd appreciate it if you can take a look and give feedback. Thank you in advance.
https://www.figma.com/file/4a2QngmmlvOce9TTlLtFKy/Draft-Fedora-Badge-Profile-Pg?node-id=0%3A1

Hello @riecatnor I have been able to solve the issues listed in the usability report mentioned in the ticket description. https://www.figma.com/file/WlN1lTBAOXoJyPVzXzDiw5/Fedora-Badge-Profile-Page?node-id=0%3A1

Those issues being:
- confusing libravatar UI

• confusing notifications redirect

@riecatnor done for the confusing notifications redirect. Please review

Hey @riecatnor ! Came up with a draft for this issue. Here's the link: https://www.figma.com/file/jxJkQA3qkTqZXvQX2FrSiW/Profile-Page?node-id=0%3A1

I have included 3 screens: the main profile page, a page for managing notifications, and one for editing the profile. I've tried to not stray a lot from the previous design and apparent information architecture. I'll quickly sum up my changes here as well.

Profile Page:

1. I felt the buttons in the 'User Info' section were kinda crowded and didn't fit in that well with each other. The non-uniform spacing to create distinction looked strange to me.
2. For example, I think grouping the disable profile option with the rest of the regular options is not a good idea, so I changed the color to red and decreased the size because it would be a rarely used option.
3. Similarly, I felt edit profile could be shifted closer up top as didn't mix in that well with the other options. So, I used the little pencil icon near the profile picture for that.
4. The places where the text was crossing over to two lines in history looked somewhat awkward, so I tried to structure that differently.
5. Tried adding a visual representation of the progress with the badges.
6. The 'show more' option with the history felt kind of self-explanatory, so I removed that bit.
7. I tried to move towards the lighter blue throughout.

I tried to follow the information architecture from the original page, I've just presented it as a part of the badges website to solve the issue with the external links. I have also removed information and instead included some information buttons that one can hover over and see the info if they are confused.

I've shifted the option to change the profile picture to this page. Apart from that, this also follows the same information architecture, just a slightly different design visually.

Hello @riecatnor I have been able to solve the issues listed in the usability report mentioned in the ticket description. https://www.figma.com/file/WlN1lTBAOXoJyPVzXzDiw5/Fedora-Badge-Profile-Page?node-id=0%3A1

Those issues being:
- confusing libravatar UI

• confusing notifications redirect

Hello @duffy and @riecatnor just a gentle reminder on this improvement