Upstream Design features / UX from Cofinity to the FOSS Portal

[MaximilianHauer]

Overview

We would like to upstream the developments of the cofinity team in regards of the enhancements in the user experience.

This integration will bring an intuitive, and modern feel to our portal, enhancing the overall user experience for our community.

The key objectives of this implementation are:

Improved Usability: Leverage Cofinity's proven UX expertise to optimize the portal's layout, navigation, and information architecture, making it easier for users to find and access the resources they need.

Enhanced Engagement: Implement design elements and interactive features that foster increased user engagement, encouraging more active participation and contribution within the FOSS community.

Seamless Transition: Aligning the UI on the behavior level to be identical eases up the contribution from both sides.

Accessibility and Responsiveness: Ensure the new UX design adheres to accessibility standards and is optimized for various devices and screen sizes, providing an inclusive and responsive experience for all users.

Explain the topic in 2 sentences

Upstream certain design features from Cofinity into the FOSS Portal.
To enable a better Userexperience based on a productive proven design.

What's the benefit?

• Userexperience improvement
• less adjustments needed on the design between cofinity/foss

What are the Risks/Dependencies ?

• no dependencies

Detailed explanation

Current implementation

The current implementation of the design needs to be reworked.
Before we implement a new variant we aligned with Cofinity to use the basic developments on their side to leverage ressources.

Proposed improvements

more user friendly behavior

Feature Team

Contributor

• @Cofinity-UX
• @ybidois

Committer

• @oyo
• @evegufy

User Stories

• Upstream the Menu Design / UX
• Upstream the nomenclature of menus/buttons ...
• Homepage

Acceptance Criteria

• Criteria 1
• Criteria 2
• Criteria 3

Test cases

TestCase 1

Steps

1. Do something
2. Click something
3. Add something

Expected Result

1. Expectation
2. Expectation
3. Expectation

Architectural Relevance

The following items are ensured (answer: yes) after this issue is implemented:

• This feature aligns with our current architectural guidelines
  • Data Sovereignty: All data sharing activities across company boundaries follow the Catena-X Regulatory Framework, in particular the Data Exchange Governance, and the Dataspace Protocol via a compliant Connector (like the tractusx-edc or similar, see Connector KIT)
    • CX-0010 Business Partner Number
    • CX-0013 Identity of Member Companies
    • CX-0018 Data Space Connectivity (EDC)
    • CX-0049 DID Document Schema
    • CX-0050 Framework Agreement Credential
    • CX-0149 Verified Company Identity
  • Interoperability: Digital Twins are used (compliant to the Digital Twin KIT and the Industry Core KIT)
    • CX-0001 EDC Discovery API
    • CX-0002 Digital Twins in Catena-X
    • CX-0018 Data Space Connectivity (EDC)
  • Data Format:
    • The data model is based on a published Semantic Model
• The impact on the overall system architecture has been assessed? The feature does not require changes to the architecture or any existing standard? Please have a look here on the overarching architecture
• Potential risks or conflicts with existing architecture has been assessed

Justification: (Fill this out, if at least one of the checkboxes above cannot be ticked. Contact the Architecture Management Committee to get an approval for the justification)

Additional information

• [] I am aware that my request may not be developed if no developer can be found for it. I'll try to contribute a developer (bring your own developer)

[MaximilianHauer]

@ybidois could you add the user-stories that i can add them into the feature ?

[stephanbcbauer]

@MaximilianHauer just replaced the additional information section

[MaximilianHauer]

@stephanbcbauer adjusted design based on new template

[stephanbcbauer]

@MaximilianHauer Backlog means it is fully refined, but in this case, acceptance criteria are missing, also testcases? So i think the status should be Inbox? Thx

[Cofinity-UX]

@MaximilianHauer find here the user stories + ACs:

Portal Navigation + Nomenclature

User Story 1 (Navigation):
As a user* I want the navigation to be streamlined with my most frequent Portal interactions*, so I can quickly access the core functionalities without having to dig through multiple menus. This will improve my efficiency and satisfaction with the product.

User Story 2 (Nomenclature)

As a user, I want the navigation menu items to have precise and action-oriented wording, so I can be confident in selecting the correct feature without confusion. This will help reduce navigation errors and streamline my user journey.

*Definition user-groups + most frequent Portal interactions:

• Data Provider & Consumer → Company pages, Dataspace Participation, Marketplace
• App Provider → App Management, Marketplace
• Service Provider → Service Managment, Marketplace
• OSP → idP Configuration + Technical User
• CX Operator → Marketplace Management
• Additional: Technical user (IT Admins) → Technical User, Connector Registration, idP Configuration

AC:

• The navigation menu prominently displays the features that each user interacts with most frequently, based on user behavior insights
• Navigation menu items should have clear, action-oriented labels that accurately reflect the functionality
• Access paths to core functionalities should be minimized to no more than two clicks from the homepage
• User testing (minimum against old setup) should confirm an increase in satisfaction and efficiency as measured by time on task and user feedback
• The wording across all navigation items should be consistent and adhere to established terminology

Portal Homepage

User Story 1 (Onboarding)
As a new portal user, I want to see key navigation items and recommended steps directly on the homepage, so I can easily identify and access the actions needed to successfully complete initial tasks.

User Story 2 (Visual Hierarchy)
As a user navigating the portal, I want a homepage with a clear visual hierarchy and well-placed quicklinks/CTAs, so I can quickly find and engage with the main features, improving my overall experience and efficiency.

User Story 3 (Personalization)
As a user with a specific role in my company, I want personalized content blocks on my homepage, so I can spend more time engaging with relevant information and functionalities that suit my role, enhancing my effectiveness and satisfaction.

AC:

• The homepage should display key navigation items that are intuitive and relevant to the user journeys (for onboarding + revisiting users)
• Visual hierarchy of the homepage prioritizes the most important content and features
• Quicklinks/CTAs are strategically placed for easy access
• The homepage layout should be tested at least against the old setup. Scope 2: for readability and scan-ability (confirmation that majority of users can identify and use quicklinks/CTAs)
• The system should identify the user's role and display relevant content blocks on the homepage.
• User feedback and analytics should document increased engagement and time spent on the portal

cc: @ybidois

[stephanbcbauer]

Some hints from Release Management (@ther3sa) and Tractus-X Project Lead (@stephanbcbauer)

• Please add missing sections from the feature template, or fill them out
• Please add assignee (overall responsible person who drives the feature)

[evegufy]

Committers:
@oyo
@ntruchsess
@Phil91
@evegufy

[matbmoser]

I would like to have a different design for our applications:

I find that this circle is not much aesthetic. I could also contribute with code if you say where to change, then I can do a proposal.