UI/UX
![](https://static.wixstatic.com/media/7a49f3_8270fc74888849b6b7bfc284da3b37d2~mv2.jpg/v1/fill/w_66,h_70,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/7a49f3_8270fc74888849b6b7bfc284da3b37d2~mv2.jpg)
Interaction
Design
Course
About:
During the spring of 2019 I got the opportunity to take the course Interaction design at Berghs. The course was incredibly valuable and I learned a lot about designing good user experiences with interaction design.
Valtech
– UX Research, konceptutveckling och interaktionsdesign för en ny taxi-tjänst
Please contact me if you want to know more
Material
Selection
playbook
About:
At consultant agency Knightec there is a specialist team working with Sustainable Plastic Design. I believe sustainable plastic is a very interesting subject and wanted to learn more. My question was, how can I add value to the team and also learn more in the process? I joined an internal project about making a material selection playbook, complementing their plastic expertise by helping to make the playbook user friendly.
![solutions_business_units_additives_waxes](https://static.wixstatic.com/media/7a49f3_09313caf277d4201aed3bfbcb1bd7a57~mv2.jpg/v1/crop/x_0,y_241,w_1157,h_142/fill/w_248,h_30,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/solutions_business_units_additives_waxes.jpg)
Problem:
Making a complicated process easy to understand.
Design Process:
![define2_button.jpg](https://static.wixstatic.com/media/7a49f3_3fe6e3a816514566b8deb3bde9122c47~mv2.jpg/v1/fill/w_150,h_150,al_c,q_80,usm_0.66_1.00_0.01,blur_3,enc_auto/define2_button.jpg)
![ideate_button.jpg](https://static.wixstatic.com/media/7a49f3_b9b1357c70ce4bf6be635a76a011dd0f~mv2.jpg/v1/crop/x_0,y_1,w_291,h_289/fill/w_152,h_151,al_c,q_80,usm_0.66_1.00_0.01,blur_3,enc_auto/ideate_button.jpg)
![test_button.jpg](https://static.wixstatic.com/media/7a49f3_03400ce84d414d44b915df3a53c1ee8a~mv2.jpg/v1/crop/x_0,y_1,w_291,h_289/fill/w_150,h_149,al_c,q_80,usm_0.66_1.00_0.01,blur_3,enc_auto/test_button.jpg)
![prototype_button.jpg](https://static.wixstatic.com/media/7a49f3_af837596907849078dbcb65c5b3b56d6~mv2.jpg/v1/crop/x_0,y_2,w_291,h_287/fill/w_153,h_151,al_c,q_80,usm_0.66_1.00_0.01,blur_3,enc_auto/prototype_button.jpg)
![test_button.jpg](https://static.wixstatic.com/media/7a49f3_03400ce84d414d44b915df3a53c1ee8a~mv2.jpg/v1/crop/x_0,y_1,w_291,h_289/fill/w_152,h_151,al_c,q_80,usm_0.66_1.00_0.01,blur_3,enc_auto/test_button.jpg)
DEFINE
IDEATE
Early
TESTING
PROTOTYPING
TESTING
![define2_button.jpg](https://static.wixstatic.com/media/7a49f3_3fe6e3a816514566b8deb3bde9122c47~mv2.jpg/v1/crop/x_1,y_0,w_289,h_291/fill/w_152,h_153,al_c,q_80,usm_0.66_1.00_0.01,blur_3,enc_auto/define2_button.jpg)
DEFINE:
Research:
To understand the flow of the material selection process I studied all the text material the plastic team had gathered. In order for me to understand the process correctly I presented the process how I interpreted it. Then they could interject where I had missunderstood and then explain. This way we could early detect unclear parts what was not communicated in the existing material.
Purpose:
The specialist team have extensive knowledge about plastic material selection. The purpose of the playbook is to share that knowledge with the rest of the consultant company.
TARGET GROUP:
Knightec consultants who do not have a lot of experience working with plastic. A common factor is that they are all educated engineers.
![alla_ritare_s2.jpg](https://static.wixstatic.com/media/7a49f3_86990c9a72f2483f902605dab2ac06e8~mv2_d_4288_2848_s_4_2.jpg/v1/crop/x_590,y_1160,w_3698,h_1135/fill/w_152,h_47,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/alla_ritare_s2.jpg)
IDEATE:
Brainstorming:
The brainstorming session was centered around previously identified problems such as:
How can the process be structured in an understandable way?
How can we put emphasis on the critical steps?
Sketching:
Sketching of process images, overall playbook structure and key elements were made generate a lot of ideas.
![ideate_button.jpg](https://static.wixstatic.com/media/7a49f3_b9b1357c70ce4bf6be635a76a011dd0f~mv2.jpg/v1/crop/x_0,y_1,w_291,h_289/fill/w_152,h_151,al_c,q_80,usm_0.66_1.00_0.01,blur_3,enc_auto/ideate_button.jpg)
Ideas:
Scan:
Visualization of process to help scanning the playbook.
Focus:
Reorganizing grouping of steps of the process in order to put focus on important steps.
![Skärmavbild 2019-03-03 kl. 18.27.30.png](https://static.wixstatic.com/media/7a49f3_33c3249571f7412093391642dd3650b8~mv2.png/v1/fill/w_63,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Sk%C3%A4rmavbild%202019-03-03%20kl_%2018_27_30.png)
![Skärmavbild 2019-03-03 kl. 18.32.39.png](https://static.wixstatic.com/media/7a49f3_568d8c09f82c415382fa2f65e388186c~mv2.png/v1/fill/w_58,h_12,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Sk%C3%A4rmavbild%202019-03-03%20kl_%2018_32_39.png)
Simplify headlines:
Reducing the thinking process and ease understanding.
Specification of properties
Scoring
Navigation:
Clear conventional structure and color coded sections.
![navigation.jpeg](https://static.wixstatic.com/media/7a49f3_10259b313e4d4e9a9a12a94e8875b0f6~mv2.jpeg/v1/fill/w_50,h_37,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/navigation.jpeg)
Homepage:
Remove happy talk from homepage.
![test_button.jpg](https://static.wixstatic.com/media/7a49f3_03400ce84d414d44b915df3a53c1ee8a~mv2.jpg/v1/crop/x_0,y_1,w_291,h_289/fill/w_152,h_151,al_c,q_80,usm_0.66_1.00_0.01,blur_3,enc_auto/test_button.jpg)
![EF9ADECE-D469-488C-9DE6-54864C83945A_edi](https://static.wixstatic.com/media/7a49f3_89520928556142a3b8f2f887cd4f46a2~mv2_d_2250_2250_s_2.jpg/v1/fill/w_90,h_90,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/EF9ADECE-D469-488C-9DE6-54864C83945A_edi.jpg)
Early TESTING:
Wireframing:
Testing ideas early before having committing a lot of development hours steers the project in the right direction and makes it more efficient.
The wireframing included the front page and the overall navigation.
Think-aloud protocolS:
Making short tests with two persons in the target group gave a lot of valuable input on existing ideas.
Development:
Simplifying process:
Prioritizing user understanding over visualising all detailed options.
Reducing sections:
For the user to get a better grasp of the process the division of sections were updated to be 4 or less.
Verbalizing Headlines:
Changing the headlines to verbs to make it clear what is to be done in each step.
![prototype_button.jpg](https://static.wixstatic.com/media/7a49f3_af837596907849078dbcb65c5b3b56d6~mv2.jpg/v1/crop/x_0,y_2,w_291,h_287/fill/w_151,h_149,al_c,q_80,usm_0.66_1.00_0.01,blur_3,enc_auto/prototype_button.jpg)
PROTOTYPING:
MOCK-UP:
Working in Adobe XD I put together a mock up to be to do initial user testing.
Development:
You are here indicators:
Add visualizations to indicate where on the site you are.
About:
Adding a clear About-page without fluff text.
![test_button.jpg](https://static.wixstatic.com/media/7a49f3_03400ce84d414d44b915df3a53c1ee8a~mv2.jpg/v1/crop/x_0,y_1,w_291,h_289/fill/w_150,h_149,al_c,q_80,usm_0.66_1.00_0.01,blur_3,enc_auto/test_button.jpg)
TESTING:
MORE Think-aloud protocolS:
Making tests with three persons in the target group gave input on the prototype.
Development:
Clarify texts:
Based in the user input some paragraphs needed updating.
Adjusting sections:
Some issues with the division of the sections were observed.
HELP-INFo:
Added easily found info on who to ask for help if the user gets stuck. The feedback from the help-info will also result in great feedback for future updates of the playbook.
![ECE12974-EBC2-4117-B7E2-FABF04A493A5.JPG](https://static.wixstatic.com/media/7a49f3_689efa07cab3421ea343394d4e258853~mv2_d_1643_3024_s_2.jpg/v1/crop/x_0,y_184,w_1643,h_2840/fill/w_74,h_128,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/ECE12974-EBC2-4117-B7E2-FABF04A493A5_JPG.jpg)
![macbook2.jpg](https://static.wixstatic.com/media/7a49f3_adc98b4921c7422db64c92b1c19e9ce1~mv2.jpg/v1/fill/w_108,h_61,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/macbook2.jpg)
![solutions_business_units_additives_waxes](https://static.wixstatic.com/media/7a49f3_09313caf277d4201aed3bfbcb1bd7a57~mv2.jpg/v1/crop/x_0,y_241,w_1157,h_142/fill/w_244,h_30,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/solutions_business_units_additives_waxes.jpg)
A step-by-step guide designed to help
the user.
Material
Selection
playbook
Project: MAthem
User experience project.
Work in progress
Updates coming in the next weeks
![Poster_JohannaLinger_2.jpg](https://static.wixstatic.com/media/7a49f3_066e06ac647d4ab7b2e8b02e95e9c82a~mv2_d_4677_3307_s_4_2.jpg/v1/fill/w_144,h_102,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/Poster_JohannaLinger_2.jpg)
Building
Website
In 2014 I was starting up my company Mönsteriet. When creating the website and webshop I immersed myself into learning about usability and search engine optimization. Favorite books were Don´t make me think and Convert . It was here I really found the interest in interaction design.
![grid2.jpg](https://static.wixstatic.com/media/7a49f3_901a257afd234b67a3e98e309003207a~mv2_d_1999_1261_s_2.jpg/v1/fill/w_100,h_63,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/grid2.jpg)
![portfolio3_edited.jpg](https://static.wixstatic.com/media/7a49f3_9790c092b40d4b44bdfa106ec8adeb42~mv2.jpg/v1/crop/x_106,y_0,w_868,h_864/fill/w_63,h_62,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/portfolio3_edited.jpg)