Ixd & ui

SkillsMatch project. Duration: June 2018 – August 2020

hard skills

Soft skills

  • Sketch
  • Zeplin
  • Invision
  • Prototyping
  • Assets library
  • Visual communication
  • Information architecture
  • Content strategy
  • Creativity
  • Curiosity
  • Problem-solving
  • Empathy
  • Communication
  • Initiative
  • Accountability
  • Adaptability
Home 5 Portfolio 5 SkillsMatch 5 SkillsMatch IxD & UI

my role in brief

I was the solo UXer in the project and my place was under the technical work package. My involvement was from concept to closure and my goal was to deliver a product that would be usable, useful and aesthetically pleasing. I combined the process of three areas;  User Experience (UX) research and design, Interaction Design (IxD) and User Interface (UI) design

Those three dimensions were applied from the initial steps of the project to reinforce the user-centric process, allowing the technical team to frame the users’ needs vis-a-vis the technical solution and the project’s objectives.

I was well aware from the beginning that this task was demanding for a single person but being the solo UXer/IxDer/UIer is something that I have done in the past and I have the experience to structure my work. However, every project has its own unique characteristics and challenges, my approach is to bring my experience on board but at the same time grab the opportunity to explore, apply and test new methods and techniques.

You can find the live resources by following the below links:

Live websites
Desktop platform
Informational website

Prototypes in Invision
Desktop prototype
App prototype

3 main challenges

1st Challenge: Soft skills table matrix

The partner’s research led them to conclude using 36 soft skills which they mapped in the ESCO framework. Although the 36 soft skills were clustered in wider categories using those clusters we would have created further complexities in the system design and logic and since we were limited with time we decided not to use any categorization. Therefore I had to present to the user 36 concepts that they would need to comprehend and make further choices. On top of that, each cell needed to have pieces of information such as the title of the soft skill and the user’s level once they would have taken an assessment.

The initial solution I came up with was to create a table and use gradient colour in the same tonal range in order to distinguish the soft skills between them. As shown in the last 2 right images below, in one version I used 3 icons of badges to represent their level and in the other stars. However, once the partners concluded that the level of an assessment would be shown using a percentage I had to remove the icons. To tackle as many issues as possible I came up with a drastic solution of using an icon to represent each soft skill. I removed the cell colour and added a progress bar at the bottom of each cell to show the level. Since everybody loved the selected colours, I didn’t remove them completely instead I used them for the soft skills icons.


2nd Challenge: Soft skills are interconnected

The 2nd challenge was to explain in visual language how soft skills are interconnected with each other. The assessment questions could apply to more than one soft skill, for example, the question ‘I believe that when one door closes another opens’, applies both to adaptability and to resilience. So when the user is taking the adaptability assessment their answer to the example question would apply and be completed to the resilience assessment as well. Once the user reaches the result’s page they would need to be informed about the specific result of the current assessment they took but also they would need to be able to see which other soft skills got affected by that same assessment.

As shown in the example below my first two approaches were to use some kind of a filler, either a ring as shown in the third example or a background colour that would fill gradually depending on how many questions had been answered. Once the partners concluded that we will use 10 questions for each assessment questionnaire I came up with my final suggestion. As shown in the 1st image below, I used a ring in 10 increments, the colour, if it is solid or faded indicates how many answers are replied.

3rd Challenge: ePortfolio

ePortfolio is a section that some data is partially provided automatically by the system but the core information the user will need to add. In this section, they have the opportunity to showcase both their professional experience and their education, add their soft skills in each but also ask someone they know to validate their soft skills. Adding that information required, depending on one’s experience. can be a repetitive process.  My challenge was to make the process as clear, easy and intuitive as possible. Also providing the appropriate text information, especially for the validation and recommender’s section, was crucial since it needed to be clear and to the point.

The first image below is showing the portfolio once the user has added one experience and one education. The information on the left of the page is provided by the system, and information on the right is added by the user. The next image is showing the add education screen, a clear form loading in a modal window. The third image is the form where the user has to fill in and send to a recommender and the final image is the page the recommender will see once they will click on the link provided in the email they will have received.



the app prototype

Further to the desktop prototype I also created an app prototype which was based on the research done by our Italian partners. Since that was an idea that landed on our table later in the process it did not get to be developed but still, it was good creating a proof of concept in that matter. The basic idea behind the app prototype was to create a supporting app to the desktop project that would have the characteristics of a motivational/behavioural app. You can view the SkillsMatch prototype in Invision or you can flip through the selected screens below.


The platform inherited its generic style from the brand’s guidelines but additionally, I produced the technical style guide, which covered the demands of the platform. The developers had access to the technical style guide from the early stages of the front-end development.

Styleguide from Zeplin

I exported the style guide from Sketch to Zeplin and I organized it for the developers’ ease of use.

Generic styleguide

I also produced a more visual and generic style guide.


I used Sketch to create the designs of the prototype, from wireframes to final screens. Primarily Sketch offered me control over the overall style, I used extensively the utility of the symbol to create instances and several good-to-have plugins.  But what I appreciated the most was that I could easily export the prototype screens with their navigation to both Zeplin and Invision which was great for collaborating with the developers and the project participants. I added the developers as collaborators in Zeplin which from there they were able to grab code snippets, design specifications, and assets. In Invision I added the project participants to collaborate in the designs.

SKM My collaboration process

Considering that all the project’s teams work remotely, even before the COVID-19 situation, the specific setup was ideal with exceptional benefits. On the one hand, the developers were able to get what they needed, whenever they needed it, work faster and more efficiently and on the other hand, the participants were able to leave their comments on any part of the screen they wanted and provide me with much valuable feedback. I do admit that I was very pleased with the outcome of this set up of collaboration. In the beginning, I was a bit skeptical that there might be some sort of confusion or discomfort but on the contrary, everybody adapted quickly and they did appreciate that they were able to be involved and engaged in the process..

Developers and me

Working together with the developer since the initial phase of the product design gave the advantage that we were able to drive decisions and also learn from each other. From building the system requirements to the actual design and development it was a journey that made me feel like I had a good team to rely on. Although design needs to be a step ahead we created a good working flow between us by practicing the SCRUM framework. Technically speaking we started off by using the Trello board but soon after I introduced them to the Backlog since it had the advantage of being more structured as well as easy to use.

“The contribution to the State of the Art in NC skills work is high in two main areas: the creation of the Style Guide and the development of the Platform with subsequent validation of functionality. This work has not been completed before and its contribution to the common goal across the European Community of tackling the complexity, and eventual resolution, of problems related to skills assessment, matching and learned improvement, for all Member States is significant.”

Final Review comments, DG Connect

Icons are great!!! Love 'em all! Honestly, in the flipping card game, I was just flipping cards without really reading through them.

Pilot participant's comment, 2nd Pilot Testing in Action

- Easy to navigate
- Happy to move from one section to another
- Clear and understandable
- ePortfolio meets my goals because I will be able to show my soft skills ranking, I can have peers to validate me and also recommendations
- I enjoyed the awareness section because I learned more but it was also fun to use.

Pilot participant's comment, Personal interview 2nd pilot

I appreciate your work on SkillsMatch it's an amazing and constructive system. I believe it could be the basic set when building your CV and it should be done before moving to LinkedIn.

Pilot participant's comment, Personal interview 2nd pilot