Description

• • What we currently have
  • Updated proposal
    • Where would the UI be?
    • Logo affecting current location
      •  
      • Initial look (as the user enters the page)
      • All sections expanded
  •  
  • Initial proposal
    • Proposal #1: From where to enter the logo management page
      • Version 1
      • Version 2
    • Proposal #2: Logo management Page
    • Settings for logo
      • Logo priority
  •  
  • What to do with the old UI?

Issue #1: Users find it hard to identify from where to change the logo.

Proposal #1: Change the location of this UI to make it easier to reach.

Issue #2: We do not have a global UI for changing skin logos and theme logos.

Proposal #2: Have a single source of truth for logos (where you can upload, view, change, edit

What we currently have

The user's flow to get to change a logo in xwiki is:

Global Admin > 1) Look & Feel > 2) Themes > 3) Customize theme > 4) Choose an attachment > 5) Actions around logo (at least 6 clicks)

The success of the journey depends on:

• the user reading the description of Themes (to see that Themes is the lace to change the logo)
• the user thinking that in Themes he may find something related to logos (even if he didn't read the section's description)

From our previous UI/UX designer Ecaterina's usabilty session:

Average time for "Change Logo" task, for beginner users, during our Scenario #6 usability session was 7 minutes. This period is very high, especially for such a common task. This length causes abandonment and frustration.

Updated proposal

Where would the UI be?

Logo affecting current location

The UI is just a series of 3 LiveData tables with 4 columns:

• Location affected - indicates at which level is the logo set (space level, page level, user level, if we had that)
• Theme used - indicates with which theme is this logo paired, as the 2 concepts of logo and theme are closely linked together
• Logo used - has the logo image on a light gray background (same color variable as the menu buttons' background). This is to allow white logos (or logos the same color as the wiki background color) to still be seen
• Actions - gives the options of Changing the logo or Deleting the logo (forever delete).
  • Clicking on Change will open a modal from where you can change the settings of the logo or change its file.
    • Change the file will make the previous logo file go to Unused logos.

Initial look (as the user enters the page)

• Only the logo for the current location is shown, the other sections would be collapsed

All sections expanded

Initial proposal

A logo space where each Logo added has different properties.

These properties reflect where the logo should be used (which skins, which themes, if default logo or not).

Proposal #1: From where to enter the logo management page

This UI should be:

1. in the Themes section, right at the beginning before customizing themes. 
   • Pro: less changes to documentation
   • Con: less improvement - the journey to the logo changing UI is slightly longer and depends on the user's belief that in Themes he will find the functionality of changing the logo.  (GA > Look & Feel > Themes> Change logo)
      
2. a sub-section of Look and feel, before Themes
   • Pro: simplifies the journey (3 clicks: GA > Look & Feel > Change logo)
   • Con: more changes to documentation

Version 1

Version 2

In this version, we'd have a new section in Look & feel, named Change logo.

Clicking the Change logo link will lead to the page in the next section (the only mention is that it will be part of the Change logo section, not the Themes section).

Proposal #2: Logo management Page

Regardless of where and how we access it, the following management page will be shown:

• an upload button for a new logo
  • this would open the file explorer, letting the user choose a logo from their computer
• a list of all uploaded logos with all their properties
  • If the logo is NOT enabled as a default logo, that checkbox and its label are NOT shown
• clicking the edit icon would open a modal (see next section)

Settings for logo

Clicking the edit icon of a logo would open a modal with all the configurations made.

•  The user can see a preview of the logo file
•  The user can rename the logo file
• The Usage on themes and Usage in skins field use the multi-select component (example of look somewhere else in XS: selecting multiple users in an AWM). The user can choose from a dropdown with all possible items, the themes/skins that he wants.
• The user can check if he wants to have the logo as default.

Logo priority

• Theme logo > Skin logo > Default logo
• If the theme logo is defined, it replaces the skin or default logo.
• If the skin logo is defined, it replaces the default logo.

What to do with the old UI?

I think that once we implement this new proposal, the old UI shouldn't exist anymore, keeping one single "source of truth" for this functionality.