Login

Spring Cleaning: Improvements in the SkillDisplay Frontend

In our Roadmap for 2021 we announced a technical brush up as focus for Q1/2021. As active SkillDisplay user you might already have spotted some of the improvements. Let's have a look at all parts of the SkillDisplay App that have undergone improvements so far:

Searching in the SkillDisplay App

The search is a centerpiece of the SkillDisplay application. We introduced multiple improvements regarding usability and cosmetics. The filters have been changed to take less space and - even more important - can now be applied to the search after displaying the results. Icons in the upper right of all category boxes give a clearer indication for the type of result found. Of course we still show your personal progress with the relevant results.

A filtered result in the SkillDisplay app when searching for the term "managing the own". The result shows two matching skills, as well as one SkillSet, each indicating the users progress in the respective SkillSets. A filter bar indicates that the search was filtered to show Skills and SkillSets only, omitting Verifications and Organisations
A filtered search result in the SkillDisplay app

Skill Detail Page

The first thing that catches the attention when looking at the refurbished Skill detail page are the new verification buttons. We opted for a flat design in the respective stakeholder colors. If you possess a verification the button will be highlighted with a lighter version of the stakeholder color (as seen in the screenshot for each stakeholder). There is also a new animation when hovering over a verification button for a skill you haven't obtained yet. In addition the Skill detail page did receive a small overhaul, optimizing margins between boxes, general alignments, etc.

A single skill view for the skill "Copyright and Data Protection". The view features the description, goals, resources, tags and maintainer, as well as the stakeholder verification buttons.
The details for a single Skill in the respective view.

SkillSet Detail Page

The SkillSet detail page saw many improvements similar to the Skill detail page - most prominent eyecatcher unique to the SkillSet page is the new hover effect on skills within the list.

A single skill entry in the SkillDisplay app showing the skill entry with a gray background color when a user hovers over it in the app.
Showcase of the mouseover state on a skill

Organization View

a list of SkillSets provided by an organization, each entry features a small preview image, the title, the number of skills and the users personal progress within this SkillSet
A list of SkillSets provided by an organization on SkillDisplay

The provided SkillSets list in the organization view has been enhanced with a preview of the SkillSet image. In addition we optimized the styling.

New Loading Indicator

three turquoise dots besides each other which change in size regularely to indicate loading progress

You also might have spotted the new loading indicator. You should have less time than before to appreciate it though, as we also improved response times in the app.

View the updated design directly in the SkillDisplay App

Now that you know what to look out for, check out the updated design directly in the SkillDisplay App.