skillquest
The Brief
Initially contacted to create a website, the client asked me to design their webapp also. With a one-week time constraint,
The client's product measures and tracks soft skills and needed several different ways to show the data. I helped clarify the features and define the areas of the app.
The client's product measures and tracks soft skills and needed several different ways to show the data. I helped clarify the features and define the areas of the app.
The Deliverable
I designed a series of enormous animated interactive components in Figma that provide several different views of detailed information at the click of a button.
I chose to keep things simple by using the same colors and font I’d used for their website.
I chose to keep things simple by using the same colors and font I’d used for their website.
First of the four areas
soft skills
All skills
There are four areas of the app: Soft skills, Improvement, Match, and Games.
This is the view of all the person's soft skills using a radial graph. When one of the greyed-out buttons is pressed, a detailed view of that group of soft skills comes flying out from one of the corners of the graph.
This is the view of all the person's soft skills using a radial graph. When one of the greyed-out buttons is pressed, a detailed view of that group of soft skills comes flying out from one of the corners of the graph.
A detailed pic is below
Group
This is a global view of the relationship between the four groups of soft skills.
When the buttons above this chart are clicked, the graph animates in and out and detailed look at each of the four groups.
When the buttons above this chart are clicked, the graph animates in and out and detailed look at each of the four groups.
Figma flex
List View
This view shows all the person's soft skills in a line graph.
This chart, too, is interactive and animated. When the buttons above the graph are clicked, the widget gives a detailed view of that group of soft skills.
This chart, too, is interactive and animated. When the buttons above the graph are clicked, the widget gives a detailed view of that group of soft skills.
Also animated
about
This area of the app provides information related to each soft skill and which games the person can play to measure and improve that particular soft skill
Packed with info
A detailed look
The radial graph
The block graph
Design slight of hand
Map Matching
This feature of the tool allows the person to see how their total soft skill map matches one that has been defined as the ideal for a certain profession.
The design
The app was designed with two sides: one side for the individual and another for the coach. Both individuals and coaches can see all of the graphs, but the coach has access to pages that allow them to overlay maps and see results for all the members of their team at once.
Final thoughts
The client used the interactive prototype to successfully pitch to investors.
An MVP of the product is currently being used for pilot projects in Italy.
