Ixd & ui

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.

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.

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.

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.

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..

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.