---
# System prepended metadata

title: Badges Front End UI Research WIP

---

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.

![](https://hackmd.io/_uploads/B19IOZi_n.png)


## 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](https://discussion.fedoraproject.org/t/updates-to-fedora-badges/40158)
* **Fedora Website** ⇾ [Link](https://fedoraproject.org/)

## 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](https://design.penpot.app/#/view/7bde5548-9bcb-8041-8002-a9b219abbb44?page-id=7bde5548-9bcb-8041-8002-a9b219abbb45&section=interactions&index=0&share-id=7bde5548-9bcb-8041-8002-a9d3ea3f5738&zoom=fit)


![](https://hackmd.io/_uploads/Sy3yCZsu3.png)



## 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
- Siddharth, V. (2022). Fedora Badges: long term maintenance discussion🙇. [online] Fedora Discussion. Available at: https://discussion.fedoraproject.org/t/fedora-badges-long-term-maintenance-discussion/41109 [Accessed 23 May 2023].
- Tripathi, N. (2022). Updates to Fedora Badges. [online] Fedora Discussion. Available at: https://discussion.fedoraproject.org/t/updates-to-fedora-badges/40158 [Accessed 23 May 2023].
- Dhar, A. (n.d.). Badges frontend — ARC notes documentation. [online] fedora-arc.readthedocs.io. Available at: https://fedora-arc.readthedocs.io/en/latest/badges/current_implementation_frontend.html [Accessed 23 May 2023].
- https://miro.com/. (n.d.). Low Fidelity Wireframe Template & Example for Teams | Miro. [online] Available at: https://miro.com/templates/low-fidelity-wireframes/ [Accessed 3 Jul. 2023].
- Usability.gov (2019). Use Cases | Usability.gov. [online] Usability.gov. Available at: https://www.usability.gov/how-to-and-tools/methods/use-cases.html [Accessed 4 Jul. 2023].
- Simplilearn (2022). What are User Flows in UX? | Simplilearn. [online] Simplilearn.com. Available at: https://www.simplilearn.com/tutorials/ui-ux-career-resources/user-flows-in-ux [Accessed 4 Jul. 2023].
‌
‌
‌

‌
