, ,

Customer logo in Interact City

This feature is completed on May 2020. I played a role as a UX designer.

Requirements

We received the requirement that some of the customers would like to upload their own logo in the system. They are proud of their city and want to add more their own city characters to the system. Before this, users have been able to upload their own city avatars. It seemed not enough and the simplest way and the first step is to allow them to add their own logos.

Customer branding

Before starting the design in the product, we want to know what level of customization should be achieved this time based on the rules and levels on how to have a “joint” brand.

Below are the basic guidance. There are 4 possible scenarios.

Scenario 1: Interact Branding (default)

When to use: for businesses in which Interact is very well known and as such it is the leading proposition. Another use-case is a very small collaborations when Interact is in the lead and there is a need to accommodate the desire of the partner to add their branding (i.e. small municipalities etc.).

Scenario 2: Co-branding with (Interact leading)

When to use: for businesses in which Interact is very well known and as such it is the leading proposition. Often used for very small collaborations where there is a need to accommodate the desire of the partner to add their branding (i.e. small municipalities etc.).

Scenario 3: Co-branding with (partner brand leading)

When to use: In the majority of cases in which soft customization of an app is needed to accomodate to the desire of a partner branding.

The customer has not big requests in terms of customizations. Interact should still recognizable as the brand behind the software application.

Scenario 4: White labeled

When to use: For big customers that require 100% (or close to 100%) customization of the software/app.

The Interact brand is not known by the audience using the application.

Possible Points of branding

  • Login: Splash screen, Login page, Signup page
  • Workspace: Titlebar, Illustrations, Components
  • Legal: About pages, privacy & legal acceptance
Exploration on Interact City

A lot of discussions happened with the PM and the branding desk. The answer was blurry in the beginning. It could be scenario 2 or above, between 2 and 3. Therefore, many proposals were provided to trigger the discussion and make the customer needs clearer.

When we presented the proposals to the stakeholders, we prepared a list of items. These are the items required from both the customer side and our side if we want to go the approach.

Final flow and hi-fi mockups

As a result of the explorations and discussions, we made an agreement to achieve scenario 2 this time. Interact logo would appear on the left end of the top bar. We specified how a custom brand logo can be set for a specific project, basic guidance for the logo images, logo positions, etc. It is applicable for all the projects in the system.

Below are the details.

Operations enable customizability

In the project’s settings (admin UI), operations can enable the customizability of the brand logo. By default: disabled. 

  • When disabled, the project is fully Interact branded. 
  • When enabled, the project remains fully Interact branded as long as no custom logo is set. 

When changing from enabled to disabled, confirmation prompts:

  • Setting the logo

When option is enabled, project admin finds a control to set a new logo for the project. When custom logo is set, it is going to be displayed on the right end of the top bar – after the user and help icons. Since logo is per project, it is only visible while user is in the project. Therefore the project list level never shows any custom logo. 

Step 1: User clicks Set on project settings page.

Step 2: It triggers the dialog and user clicks Browse to select the logo file.

Step 3: If the logo is in a valid format, it appears in the preview part of the dialog. User clicks Apply.

Step 4: The logo shows on the right end of the top bar, and Set is replaced with Remove. Since the custom logo is part of project settings, user still has to Save changes.

  • Logo file requirements
    • Height: 88 pixels minimum
    • Width: Up to 5 times the height
    • File format: PNG, JPG, SVG. File picker filters out files with other extensions.
    • Error messages:
      • The image is too small. Minimum height: 88 pixels
      • The image format is invalid. Supported formats: PNG, JPG, SVG
      • The image size is invalid. Width: Up to 5 times the height

The logo on the preview part (at the bottom) should always be consistent with the latest upload result. For example, if user uploads a valid logo and sees it in the preview part, then he tries to replace it and this time he uploads an invalid one. The image size is too small. In this situation, he will see an error message and in the preview part, the logo area is going back to the placeholder. 

Rescaling and removing

If the logo meets the requirements, before it’s shown in the bar it is rescaled proportionally (aspect ratio locked) so that its height equals the height of the bar.

  • Removing the logo

Step 1: User clicks Remove.

Step 2: Custom logo is removed from the top bar immediately. Remove button replaced with Set. Since custom logo is part of project settings, user still has to Save changes.

  • Logo is never interactive

Ensure that the brand logo is never clickable. This is because in the general case we wouldn’t know how to define the target of the link.