Badges Front End UI

Project Discussion
,
1

Hi everyone! As you may know, Fedora Badges is looking at a revamp. Below, I have prepared a document with a look into the potential UI changes. The purpose of this document is to give everyone an idea of the direction I am thinking of taking this. Since it is the early stages, there is room for change, so please feel free to let me know what you think.

Problem Statement

A problem statement is a concise description of the problem that needs to be solved.

Problem:
The Fedora Badges application is currently outdated, which may discourage new users and contributors from using the service. The outdated workflows involved in the user experience, which might have been convenient in the past, are no longer suitable. This has resulted in potential inconsistencies in the overall look and feel of the community’s web presence. Additionally, the current frontend interface does not work well on devices with varied viewports, such as mobile phones and tablets, which has made it difficult for users to access the service on these devices.

Therefore, it is recommended to update the frontend design to align with other Fedora-branded websites and applications, making the service more user-friendly and accessible to a wider audience. This update would also resolve the issues with the outdated workflows and provide a seamless user experience for all users, regardless of the device they are using.

Solution:
Create a unique and revamped front-end of the Fedora Badges application that incentivizes users to use the application more often and motives contributors to contribute more. Keywords are fun, friendly and accessible.

Use cases

A use case is a written description of how users will perform tasks on your website. Each use case is represented as a sequence of simple steps, beginning with a user’s goal and ending when that goal is fulfilled.

The following are the current use cases of the frontend of Fedora Badges. If additional use cases are needed or if there is a need to reduce the number of existing ones, it is possible to do so.

User use cases

  • View your badges or your profile
    • Home > Profile
  • View the badges that a particular user has
    • Home > Search > User
  • View the leaderboard of badges
    • Home > Leaderboard
  • View the details of a specific badge
    • Home > Search > Badge
  • Get granted a badge (via a link or QR code)
    • Link > Badge

Admin use cases

  • Award a badge to another user (if I have permissions on that badge)
  • Add a new badge to the database
  • Give grant permissions to a user for a specific badge
  • Create an invitation, so users can get a badge via a QR code / link
  • Create a group of relevant badges

Userflow

A user flow is a visual representation of how the user moves through a website or application and shows what happens at each step along the way. These steps are called user flows because they reflect the path a user takes while navigating a website or app.

Below is an illustration / diagram of the userflow for the Fedora Badges application. This is to help visualize all the pages of a website and the path to get there. I used this map to find out how many pages were within the site.

I have the Admin pages in white. Not everyone will have access to these pages, and I wanted them differentiated from the rest.

1351Ă—2116 139 KB

Style Guide

When creating the wireframes, I wanted to make sure that I was sticking to the theme that the Badges application wants to portray. We have two guides to refer to, the new Badges Style guide and the newly revamped Fedora website.

  • Badges Style Guide WIP ⇾ Link
  • Fedora Website ⇾ Link

Lo-fi Wireframes

Low-fidelity wireframes are basic wireframes that outline blueprints for web pages or app screens.

I created these to give a general look and feel for what the Fedora Badges website could look like. I did not make any major changes to the architecture of the website. The only thing different in that sense is the Admin pages. I think this would be better as a dashboard with a sub navigation bar dropping when requested.

The purpose of this is to gather feedback from the community regarding the current direction. Are we satisfied with the current direction? Is there anything major that needs attention? Please provide your comments.

You can view the flows in more details following the PenPot link below. I believe you have to be logged into your PenPot account to do so.

  • Penpot Flows ⇾ Link

badges-lofi
badges-lofi2328Ă—2041 585 KB

Next Steps

If the community and team are happy with the general look and feel of the above proposed changes, I can begin to work on the high fidelity wireframe.

A high-fidelity wireframe is a more complete visual representation of the framework. It has more technical detail, and it’s usually clickable and responsive to user actions. This gives designers a feel for how the final design will work for real users, making it helpful for user testing.

The process will probably be similar to the approach I took with the Fedora Editions Front Pages. I will post a page mock-up when complete and work with the community until we are happy with it.

Reference list

5 Likes
2

First of all, your low-fi screens are so beautiful, I love them!

I am looking forward to seeing more detail-oriented user paths for the rest of the pages too.

I have worked on the badges design enough to understand that the pandas, badgers and other characters that exist in the badges design are not in sync with the general design of Fedora’s mascots. On the landing page I see the updated Badger mascot, when in fact, it will not be seen in any of the badges. I feel that while it is okay for badges to have it’s own unique style, it is also important to reflect this on the UI.

But most importantly, this is some great work and I love this discussion!

3 Likes
3

Hey @ekidney, thank you for this detailed, thorough outline of the Fedora Badges front-end[1]. And my bad for taking so long to follow up on it.

Does a use case have to exist in the current system? The current system does not allow editing of badges, but I want the new system to support editing badges in the database from the UI.

Before I give unsolicited opinions[2], are you looking for feedback on the new system or is your goal just to lay out how the current system works?

I looooooove the wireframes. Some fast feedback:

  • Landing page should feature user profiles better. What would a live feed look like of people recently earning badges? E.g. “ekidney earned F39 Party 10 seconds ago, nekonya3 earned Flock 2023 9 minutes ago” etc. I like the idea of showing the activity of Fedora Badges on the very front page.
  • Paginating the admin dashboard into multiple pages makes so much more sense.
  • Explore Fedora Badges: This is one of the most unique pages in the current system, where you see all the badges across the defined categories. It is hard to do right though, especially as our number of badges grows larger. I would love to see a wireframe for that badge specifically because it is a tough one.
  • The revamped user profiles look fantastic. In the 2.0 system, I want the Badge profile to really stand out. This is something that I would want people to feel empowered to use when promoting their activity and engagement in Fedora. If someone wanted to highlight their Fedora Badges in a work interview, I would want someone to have a profile that really shows off all they do. The revamped profile looks like a step in that direction.

This is a good point!

Yes, + :100: !

  1. Also, your graphics you made even for the userflow and low-fi wireframes are gorgeous. You have great attention to detail! ↩︎

  2. Note to future self: Paginating admin page, dropping some functionalities, adding others. ↩︎

1 Like
4

Are there any “admin” actions available to all users? Such as, for instance, awarding a badge?

Not that this has to be the case of course, just wondering how this works in cases where, for instance, a special interest group wants to award a badge for a specific accomplishment.

5

Well, SIG badges can be, and for a great many SIGs currently are,
awarded by a script. Some SIGs still hand them out manually. Usually the
SIG sponsors are authorized to award the SIG badge.

I could imagine that with Badges 2.0 and a propper message bus
integration this could be further improved by looking at group
membership changes and attaching badges to those.

Back to your question, the awarding a badge admin action will still be
needed, since some badges are so specific, that they only can be awarded
manually by an authorized person. I’m thinking “Blessing of the FPL” and
similar badges.

1 Like
6

I am not sure I understand the question. If there is admin action available to all users, doesn’t this make it a user action and not an admin action?

I am curious if there was somewhere specific you were driving to with this question, or if there was a specific feature/function you had in mind.

7

The actions “Award a badge” and “Invitations” I’m assuming would be something that regular users may use/perform - so I was just wondering if these are available to everyone or only to admins (I can see a reason for both, btw - was just curious).