Refactor discovery page

[kyyberi]

Problem description

Current discovery page is not really user friendly and usability will get worse when all 300 municipalities (some of them with multiple authentications) will join the service. A few issues found with current discovery page:

• Even at the moment it looks like a Christmas tree and hard to use.
• getting logos for municipalities is manual work and fitting those to buttons is extra manual work (could be automatised though)
• Value of the municipality logos for enduser is minimal
• The amount of options to choose from is huge, enduser frustrates easily
• No method to select/filter previously used options (own device usage most probable use case)
• Social media login displayed, but none of the customers want to use those

Problem has been known for long and solutions have been explored with help of Demola team and hackathon. No luck so far. We would like to offer solution to illiterate users too, but that limits the options too much. Thus it makes sense to drop that requirement and focus on the needs of 80% of users. Proposed solution does not significantly make situation worse for illiterate users, but at the same time increases significantly the usability for 80% users.

Proposed fix

Below is preliminary design for the discovery page. Below the image is explanations of the logic and reasoning.

Preliminary design

All content is centered and design favours mobile devices

Onload page will show no buttons to select from (blue area below the image). Loading 300+ buttons and content is waste of bandwith, makes it slower to load, slower to make decision what to do next.

Below logo is invitation to tell where the student comes from/where the studies take place
In the "search" field student starts to write location, for example "Joe" and then on after the third letter, page will show all options which start with the 3 letters. It will also show options which have offices in location that fits the 3 letters. In the beginning filtering could initiate also with just one letter too.

For example Luovi is not a location, but it has geographical location which is given in metadata by the school when joing MPASSid. If no option is found, user is shown text "Hups! Ei löytynyt vaihtoehtoja. Tarkista hakusi tai ota yhteyttä opettajaan".

Magnifying glass is search click button. It has to be there if user has disabled javascript or it is not in use in environment where user is. Clicking the icon performs the search based on given text in search box and shows available options in the blue area.

Other option is to choose from previously used (max 5) options which are shown if user selects the link " tai valitse viimeksi käytetyistä vaihtoehdoista... ". In that case all possible options in the blue area are cleared and max 5 last used options are shown. Information about last selections are stored in cookie/ or alike.

We need to prepare the UI to be in multiple languages. Most important languages to support are Finnish, Swedish and English. Language selection can be done in two ways:

• with variable when directing users to login discovery page ( eg. ?lang=se)
• in discovery page by selecting desired option from "Suomeksi, På svenska, In English" (not in the design yet)

Pros

• Does not confuse user with hundreds of options to choose from
• Contains shortcut for previously used options (works only on own devices though)
• Clear and stylish feeling - not a Christmas tree
• No need for requesting and formatting of logos from municipalities
• Easier to scale
• Enables faster onboarding for municipalies (no logo requirement)

Cons

• Option requires that user has little skills in reading and writing
• Illiterate users are excluded
• Requires more meta information collecting from municipalities (location) if not requested from OPH organizations API.
• Possible familiarity elements (graphical) are lost. Some users might recognize municipality logo and make a selection based on that.

[kyyberi]

Here's one JS implementation which could be modified to filter options
https://jsfiddle.net/1n7qrjrz/55/

[kyyberi]

I crafted better fitting example: http://jsfiddle.net/kyyberi/4y5cof6g/

Here's clip how it works https://youtu.be/F2sKwBjzD5U

Far from perfect, but a start for someone more talented frontend developer.

[kyyberi]

any comments @hjmikkon @laze76 ?

[kyyberi]

The first version of new disco as mockup looks good.

A few things I would change:

• Items under "Viimeksi valitut kirjautumislähteet" should not contain any buttons. Those boxes are buttons. No need for logo placeholder. Box which is always link, contains the name and type of school at hand eg. "Tampere lyseo" and below that with smaller font "Lukio".
• Input box at the top should be bigger. If needed, drop button below the input field.

In mobile view, there's a few things to change:

• Fix margins between elements such as the boxes of latest selected auth sources.
• "Tunnistaudu" button should be below the input. Now the input is not usable at all.
• All content including logo should be centered
• Also center content in boxes below "Viimeksi valitut kirjautumislähteet"

[kyyberi]

Also, in design somehow enable choosing language for the UI. We need to support at least FI, SE and EN.

Selecting the used language should be available with parameter when opining the discovery, but the enduser must also be able to change language.

[laze76]

First version available in mpass-test environment.