{"id":1195,"date":"2024-02-19T18:27:59","date_gmt":"2024-02-19T18:27:59","guid":{"rendered":"https:\/\/goldenboystudios.nl\/?page_id=1195"},"modified":"2025-02-02T12:40:08","modified_gmt":"2025-02-02T12:40:08","slug":"cgi-iamlab-veclab-kpn","status":"publish","type":"page","link":"https:\/\/goldenboystudios.nl\/?page_id=1195","title":{"rendered":"CGI &#8211; iAMLAB &#8211; VecLab KPN"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1195\" class=\"elementor elementor-1195\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d7e6e67 e-flex e-con-boxed wpr-sticky-section-no e-con e-parent\" data-id=\"d7e6e67\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a387dd6 elementor-absolute elementor-widget elementor-widget-html\" data-id=\"a387dd6\" data-element_type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<iframe src='https:\/\/my.spline.design\/bganimation-86b417dfab8734a2a578ee9bf53d1277\/' frameborder='0' width='100%' height='100%'><\/iframe>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-123a066 e-flex e-con-boxed wpr-sticky-section-no e-con e-parent\" data-id=\"123a066\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-ac87e3d e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"ac87e3d\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5ad85fc elementor-widget elementor-widget-heading\" data-id=\"5ad85fc\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">CGI<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ae0ab6b elementor-widget elementor-widget-text-editor\" data-id=\"ae0ab6b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>UX\/UI || Prototyping || Research<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2c2ecc8 e-flex e-con-boxed wpr-sticky-section-no e-con e-parent\" data-id=\"2c2ecc8\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-8a07a16 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"8a07a16\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8e5d765 elementor-widget elementor-widget-heading\" data-id=\"8e5d765\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Case<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a1410f4 elementor-widget elementor-widget-text-editor\" data-id=\"a1410f4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>For CGI I worked on designing a portal for their client KPN. This portal, called VecLab, was designed to assist with, and track the process of digitalizing all the maps of their underground networks.<\/p><p>Together with the people from their iAMLAB I worked on designing this portal.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1ea1b57 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no elementor-invisible e-con e-parent\" data-id=\"1ea1b57\" data-element_type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;fadeInUp&quot;,&quot;animation_delay&quot;:500}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a042ee5 elementor-widget elementor-widget-heading\" data-id=\"a042ee5\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">A look inside VecLab<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0c5d916 elementor-widget elementor-widget-text-editor\" data-id=\"0c5d916\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;none&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Have a look at the final prototype<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7c62231 e-con-full e-flex wpr-sticky-section-no e-con e-parent\" data-id=\"7c62231\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-efb85a3 elementor-widget elementor-widget-image\" data-id=\"efb85a3\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/xd.adobe.com\/view\/7f135634-6463-437f-a426-8e8b24fa269c-2a40\/\">\n\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"2560\" height=\"1440\" src=\"https:\/\/goldenboystudios.nl\/wp-content\/uploads\/2025\/01\/VecLab-Ipad-Showcase@2-1920x1080-1-1-scaled.jpg\" class=\"elementor-animation-shrink attachment-full size-full wp-image-3728\" alt=\"\" srcset=\"https:\/\/goldenboystudios.nl\/wp-content\/uploads\/2025\/01\/VecLab-Ipad-Showcase@2-1920x1080-1-1-scaled.jpg 2560w, https:\/\/goldenboystudios.nl\/wp-content\/uploads\/2025\/01\/VecLab-Ipad-Showcase@2-1920x1080-1-1-300x169.jpg 300w, https:\/\/goldenboystudios.nl\/wp-content\/uploads\/2025\/01\/VecLab-Ipad-Showcase@2-1920x1080-1-1-1024x576.jpg 1024w, https:\/\/goldenboystudios.nl\/wp-content\/uploads\/2025\/01\/VecLab-Ipad-Showcase@2-1920x1080-1-1-768x432.jpg 768w, https:\/\/goldenboystudios.nl\/wp-content\/uploads\/2025\/01\/VecLab-Ipad-Showcase@2-1920x1080-1-1-1536x864.jpg 1536w, https:\/\/goldenboystudios.nl\/wp-content\/uploads\/2025\/01\/VecLab-Ipad-Showcase@2-1920x1080-1-1-2048x1152.jpg 2048w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e27df3c e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no elementor-invisible e-con e-parent\" data-id=\"e27df3c\" data-element_type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;fadeInUp&quot;,&quot;animation_delay&quot;:500}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8300429 elementor-widget elementor-widget-heading\" data-id=\"8300429\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Where do we start?<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-39a3a4b elementor-widget elementor-widget-text-editor\" data-id=\"39a3a4b\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;none&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>First I needed to learn more about the process, the users, the reasons and more. To do so I asked a set of questions.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1ca5abc e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"1ca5abc\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-a9a9bec e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"a9a9bec\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d6a972c elementor-widget elementor-widget-heading\" data-id=\"d6a972c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Who?<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3c20ec8 elementor-widget elementor-widget-text-editor\" data-id=\"3c20ec8\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;none&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"text-align: var(--text-align);\">Who am I building this portal for?<\/span><\/p><p><span style=\"text-align: var(--text-align);\">It&#8217;s going to be used by employees of both KPN and CGI, who are assisting them with the process. Because of this it&#8217;s going to be important to have a way to seperate different users as not all people will have the rights to access sertain information.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d7dc567 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"d7dc567\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d9daea6 elementor-widget elementor-widget-heading\" data-id=\"d9daea6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">What?<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-559234b elementor-widget elementor-widget-text-editor\" data-id=\"559234b\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;none&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>What is the portal supposed to do?<\/p><p>It&#8217;s supposed to give insights on both the big picture and the detailed picture of the process.\u00a0 Things like how far into the process they are, where the bottlenecks are forming and detailed information on each step. Because of this it&#8217;s important to decide on what information to display on the home page.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a5f2db7 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"a5f2db7\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-2092060 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"2092060\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-454df98 elementor-widget elementor-widget-heading\" data-id=\"454df98\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Why?<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7bd9463 elementor-widget elementor-widget-text-editor\" data-id=\"7bd9463\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;none&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"text-align: var(--text-align);\">Why is there a need for this portal to exist?<\/span><\/p><p>The process of vectorizing all the different maps is a long and difficult process. It&#8217;s going to act as a central pilar for this operation.\u00a0 Because of this it&#8217;s going to be important to give an insight into the full process to build off of when thinking about the next steps to take.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b323df1 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"b323df1\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-01a72f9 elementor-widget elementor-widget-heading\" data-id=\"01a72f9\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">How?<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-58ad13d elementor-widget elementor-widget-text-editor\" data-id=\"58ad13d\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;none&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>How will it be used?<\/p><p>It will mainly be used to check up on the processes, update the ongoing maps and it will need to hold a large amount of data from a lot of different batches of information. So it will be important to clearly display this information and give a quick way to access this informaiton.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-020550e e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"020550e\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-cc6e4d0 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"cc6e4d0\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a08f5ad elementor-widget elementor-widget-heading\" data-id=\"a08f5ad\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Designing the portal<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4898de4 elementor-widget elementor-widget-text-editor\" data-id=\"4898de4\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;none&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The designing of the portal was done using the SCRUM method. Because of the general difficulty of the process I had weekly sessions planned with some of the lead data analists and consultants from CGI. They gave me insights into the different protions of the process so I could construct information around that little by little. Whilst gathering this information, I was building the base of the design.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<a class=\"elementor-element elementor-element-9a0b95d e-flex e-con-boxed wpr-sticky-section-no e-con e-parent\" data-id=\"9a0b95d\" data-element_type=\"container\" href=\"https:\/\/xd.adobe.com\/view\/7f135634-6463-437f-a426-8e8b24fa269c-2a40\/\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a3d4ad2 elementor-absolute elementor-widget elementor-widget-html\" data-id=\"a3d4ad2\" data-element_type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<iframe src='https:\/\/my.spline.design\/ipadpro11mockup-4d582b8c166e2449d709fe12bae244cc\/' frameborder='0' width='100%' height='100%'><\/iframe>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/a>\n\t\t<div class=\"elementor-element elementor-element-64c4305 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"64c4305\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-7a15a92 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"7a15a92\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5e0cf28 elementor-widget elementor-widget-heading\" data-id=\"5e0cf28\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Design Document<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-70db8ea elementor-widget elementor-widget-text-editor\" data-id=\"70db8ea\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;none&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"text-align: var(--text-align);\">As a final addition I also created a design document for the development team<\/span><span style=\"text-align: var(--text-align);\">. This document gives insights into the how&#8217;s and why&#8217;s whilst also giving clear instructions on the UX setup for the different states of items within the UI.<\/span><\/p><p><span style=\"text-align: var(--text-align);\">Here are a few insights into that design document.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5460e22 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"5460e22\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e8482c9 elementor-arrows-position-inside elementor-pagination-position-outside elementor-widget elementor-widget-image-carousel\" data-id=\"e8482c9\" data-element_type=\"widget\" data-settings=\"{&quot;navigation&quot;:&quot;both&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;pause_on_hover&quot;:&quot;yes&quot;,&quot;pause_on_interaction&quot;:&quot;yes&quot;,&quot;autoplay_speed&quot;:5000,&quot;infinite&quot;:&quot;yes&quot;,&quot;speed&quot;:500,&quot;image_spacing_custom&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:20,&quot;sizes&quot;:[]},&quot;image_spacing_custom_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;image_spacing_custom_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"image-carousel.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-image-carousel-wrapper swiper\" role=\"region\" aria-roledescription=\"carousel\" aria-label=\"Image Carousel\" dir=\"ltr\">\n\t\t\t<div class=\"elementor-image-carousel swiper-wrapper\" aria-live=\"off\">\n\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"1 of 6\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/goldenboystudios.nl\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-15-213418.png\" alt=\"Screenshot 2025-01-15 213418\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"2 of 6\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/goldenboystudios.nl\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-15-213431.png\" alt=\"Screenshot 2025-01-15 213431\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"3 of 6\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/goldenboystudios.nl\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-15-213447.png\" alt=\"Screenshot 2025-01-15 213447\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"4 of 6\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/goldenboystudios.nl\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-15-213500.png\" alt=\"Screenshot 2025-01-15 213500\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"5 of 6\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/goldenboystudios.nl\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-15-213512.png\" alt=\"Screenshot 2025-01-15 213512\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"6 of 6\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/goldenboystudios.nl\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-15-213528.png\" alt=\"Screenshot 2025-01-15 213528\" \/><\/figure><\/div>\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-prev\" role=\"button\" tabindex=\"0\">\n\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-eicon-chevron-left\" viewBox=\"0 0 1000 1000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M646 125C629 125 613 133 604 142L308 442C296 454 292 471 292 487 292 504 296 521 308 533L604 854C617 867 629 875 646 875 663 875 679 871 692 858 704 846 713 829 713 812 713 796 708 779 692 767L438 487 692 225C700 217 708 204 708 187 708 171 704 154 692 142 675 129 663 125 646 125Z\"><\/path><\/svg>\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-next\" role=\"button\" tabindex=\"0\">\n\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-eicon-chevron-right\" viewBox=\"0 0 1000 1000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M696 533C708 521 713 504 713 487 713 471 708 454 696 446L400 146C388 133 375 125 354 125 338 125 325 129 313 142 300 154 292 171 292 187 292 204 296 221 308 233L563 492 304 771C292 783 288 800 288 817 288 833 296 850 308 863 321 871 338 875 354 875 371 875 388 867 400 854L696 533Z\"><\/path><\/svg>\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<div class=\"swiper-pagination\"><\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-319579b e-flex e-con-boxed wpr-sticky-section-no e-con e-parent\" data-id=\"319579b\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-99ac998 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"99ac998\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b865ba2 elementor-widget elementor-widget-spacer\" data-id=\"b865ba2\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fcfd3db elementor-widget elementor-widget-heading\" data-id=\"fcfd3db\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Want to know more?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-255038c elementor-widget elementor-widget-text-editor\" data-id=\"255038c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><a href=\"https:\/\/goldenboystudios.nl\/?page_id=177\"><b>Contact me.<\/b><\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b86a14c e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"b86a14c\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c9c6eca elementor-widget elementor-widget-spacer\" data-id=\"c9c6eca\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8f6e0df e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"8f6e0df\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-44c6480 elementor-widget elementor-widget-text-editor\" data-id=\"44c6480\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Go back to the top<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7085617 wpr-stt-btn-align-inline elementor-widget elementor-widget-wpr-back-to-top\" data-id=\"7085617\" data-element_type=\"widget\" data-widget_type=\"wpr-back-to-top.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"wpr-stt-wrapper\"><div class='wpr-stt-btn' data-settings='{&quot;animation&quot;:&quot;fade&quot;,&quot;animationOffset&quot;:&quot;0&quot;,&quot;animationDuration&quot;:&quot;200&quot;,&quot;fixed&quot;:&quot;inline&quot;,&quot;scrolAnim&quot;:&quot;800&quot;}'><span class=\"wpr-stt-icon\"><svg class=\"e-font-icon-svg e-fas-arrow-circle-up\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M8 256C8 119 119 8 256 8s248 111 248 248-111 248-248 248S8 393 8 256zm143.6 28.9l72.4-75.5V392c0 13.3 10.7 24 24 24h16c13.3 0 24-10.7 24-24V209.4l72.4 75.5c9.3 9.7 24.8 9.9 34.3.4l10.9-11c9.4-9.4 9.4-24.6 0-33.9L273 107.7c-9.4-9.4-24.6-9.4-33.9 0L106.3 240.4c-9.4 9.4-9.4 24.6 0 33.9l10.9 11c9.6 9.5 25.1 9.3 34.4-.4z\"><\/path><\/svg><\/span><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d5c847c e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"d5c847c\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f9b600b elementor-widget elementor-widget-text-editor\" data-id=\"f9b600b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Go back to the <span style=\"text-decoration: underline;\"><a href=\"https:\/\/goldenboystudios.nl\">landing page<\/a><\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>CGI UX\/UI || Prototyping || Research Case For CGI I worked on designing a portal for their client KPN. This portal, called VecLab, was designed to assist with, and track the process of digitalizing all the maps of their underground networks. Together with the people from their iAMLAB I worked on designing this portal. A look inside VecLab Have a look at the final prototype Where do we start? First I needed to learn more about the process, the users, the reasons and more. To do so I asked a set of questions. Who? Who am I building this portal for? It&#8217;s going to be used by employees of both KPN and CGI, who are assisting them with the process. Because of this it&#8217;s going to be important to have a way to seperate different users as not all people will have the rights to access sertain information. What? What is the portal supposed to do? It&#8217;s supposed to give insights on both the big picture and the detailed picture of the process.\u00a0 Things like how far into the process they are, where the bottlenecks are forming and detailed information on each step. Because of this it&#8217;s important to decide on what information to display on the home page.\u00a0 Why? Why is there a need for this portal to exist? The process of vectorizing all the different maps is a long and difficult process. It&#8217;s going to act as a central pilar for this operation.\u00a0 Because of this it&#8217;s going to be important to give an insight into the full process to build off of when thinking about the next steps to take. How? How will it be used? It will mainly be used to check up on the processes, update the ongoing maps and it will need to hold a large amount of data from a lot of different batches of information. So it will be important to clearly display this information and give a quick way to access this informaiton. Designing the portal The designing of the portal was done using the SCRUM method. Because of the general difficulty of the process I had weekly sessions planned with some of the lead data analists and consultants from CGI. They gave me insights into the different protions of the process so I could construct information around that little by little. Whilst gathering this information, I was building the base of the design. Design Document As a final addition I also created a design document for the development team. This document gives insights into the how&#8217;s and why&#8217;s whilst also giving clear instructions on the UX setup for the different states of items within the UI. Here are a few insights into that design document. Want to know more? Contact me. Go back to the top Go back to the landing page<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1195","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/goldenboystudios.nl\/index.php?rest_route=\/wp\/v2\/pages\/1195","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/goldenboystudios.nl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/goldenboystudios.nl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/goldenboystudios.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/goldenboystudios.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1195"}],"version-history":[{"count":145,"href":"https:\/\/goldenboystudios.nl\/index.php?rest_route=\/wp\/v2\/pages\/1195\/revisions"}],"predecessor-version":[{"id":4054,"href":"https:\/\/goldenboystudios.nl\/index.php?rest_route=\/wp\/v2\/pages\/1195\/revisions\/4054"}],"wp:attachment":[{"href":"https:\/\/goldenboystudios.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}