- added Google Analytics

- fixed spacings on mobile - changed to top button position - minor fixes
uxkolip · Sep 28, 2023 · 36f013a · 36f013a
1 parent 4f16868
commit 36f013a
Show file tree

Hide file tree

Showing 15 changed files with 166 additions and 83 deletions.
diff --git a/dist/css/styles.css b/dist/css/styles.css
diff --git a/dist/css/styles.css.map b/dist/css/styles.css.map
diff --git a/dist/index.html b/dist/index.html
diff --git a/dist/meta.html b/dist/meta.html
diff --git a/dist/microsoft.html b/dist/microsoft.html
diff --git a/dist/profile.html b/dist/profile.html
diff --git a/dist/voicemod.html b/dist/voicemod.html
diff --git a/src/css/styles.css b/src/css/styles.css
diff --git a/src/css/styles.css.map b/src/css/styles.css.map
diff --git a/src/index.html b/src/index.html
@@ -37,6 +37,17 @@
     <title>Vasilis Kolip - Portfolio
     </title>
   </head>
+
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-00CVF9DH83"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'G-00CVF9DH83');
+  </script>
+
   <body class="opacity-0">
   <section class="container" id="pageTop">
 
@@ -151,8 +162,8 @@ <h2 class="section-title">Selected work</h2>
             <div class="col-12 bg-secondary large-shadow border-radius the-border position-relative mb-5" style="min-height: 400px;">
               <div class="row p-5">
                 <div class="col-12 col-lg-6">
-                  <img src="img/misc/logos/voicemod-logo-card.svg" alt="Voicemod logo" class="img-fluid mb-2 mb-lg-0" style="height: 26px;">
-                  <p class="font-weight-bold pt-2">Senior staff product designer (full-time) <span class="badge bg-accent font-weight-normal smaller-4 ms-1">2022</span> <span class="badge bg-accent font-weight-normal smaller-4">2023</span>
+                  <img src="img/misc/logos/voicemod-logo-card.svg" alt="Voicemod logo" class="img-fluid mb-2 mb-lg-0" style="height: 20px;">
+                  <p class="font-weight-bold pt-2 smaller-1">Senior staff product designer (full-time) <span class="badge bg-accent font-weight-normal smaller-4 ms-1">2022</span> <span class="badge bg-accent font-weight-normal smaller-4">2023</span>
                   </p>
                   <p class="mt-4">Voicemod is a B2C MacOS and Windows real-time voice changing app.</p>
                   <p class="d-none d-lg-block">Discover how I successfully reduced the app's uninstall rate by revamping the onboarding experience and conducting user testing with individuals who encountered difficulties during setup.</p>
@@ -168,8 +179,8 @@ <h2 class="section-title">Selected work</h2>
             <div class="col-12 bg-secondary large-shadow border-radius the-border position-relative mb-5" style="min-height: 400px;">
               <div class="row p-5">
                 <div class="col-12 col-lg-6">
-                  <img src="img/misc/logos/meta-logo-card.svg" alt="Meta logo" class="img-fluid" style="height: 24px;">
-                  <p class="font-weight-bold pt-2">Senior UX designer (full-time) <span class="badge bg-accent font-weight-normal smaller-4 ms-1">2021</span> <span class="badge bg-accent font-weight-normal smaller-4">2022</span>
+                  <img src="img/misc/logos/meta-logo-card.svg" alt="Meta logo" class="img-fluid" style="height: 20px;">
+                  <p class="font-weight-bold pt-2 smaller-1">Senior UX designer (full-time) <span class="badge bg-accent font-weight-normal smaller-4 ms-1">2021</span> <span class="badge bg-accent font-weight-normal smaller-4">2022</span>
                   </p>
                   <p class="mt-4">Ennely app was a B2C MacOS video editor assistant that enabled content creators to create a first cut within minutes.</p>
                   <p class="d-none d-lg-block">Find out how a unique app with no pre-established rules came to life and how along with a small team I created magic.</p>
@@ -185,8 +196,8 @@ <h2 class="section-title">Selected work</h2>
             <div class="col-12 bg-secondary large-shadow border-radius the-border position-relative mb-5" style="min-height: 400px;">
               <div class="row p-5">
                 <div class="col-12 col-lg-6">
-                  <img src="img/misc/logos/msft-logo-card.svg" alt="Microsoft logo" class="img-fluid" style="height: 34px;">
-                  <p class="font-weight-bold pt-2">Senior designer (full-time) <span class="badge bg-accent font-weight-normal smaller-4 ms-1">2019</span> <span class="badge bg-accent font-weight-normal smaller-4">2020</span>  <span class="badge bg-accent font-weight-normal smaller-4">2021</span>
+                  <img src="img/misc/logos/msft-logo-card.svg" alt="Microsoft logo" class="img-fluid" style="height: 28px;">
+                  <p class="font-weight-bold pt-2 smaller-1">Senior designer (full-time) <span class="badge bg-accent font-weight-normal smaller-4 ms-1">2019</span> <span class="badge bg-accent font-weight-normal smaller-4">2020</span>  <span class="badge bg-accent font-weight-normal smaller-4">2021</span>
                   </p>
                   <p class="mt-4">Power Automate desktop is a B2B Windows app that saves its users  time from doing repetitive tasks on their computers.</p>
                   <p class="d-none d-lg-block">Join me in the world of desktop automation and let's explore how an app created by a small company, became part of Windows 11.</p>
@@ -432,36 +443,36 @@ <h2 class="display-1 font-weight-bold">My design process</h2>
 
           <h2 class="section-title font-weight-bold section-title mb-5">My design process</h2>
 
-          <div class="d-flex col-12 p-5 mb-4 large-shadow border-radius flex-wrap bg-accent">
-            <img src="img/misc/illustrations/research-and-discovery.svg" alt="Resarch and discovery illustration" class="img-fluid align-self-start" style="height: 24vh" />
+          <div class="d-flex col-12 p-5 mb-5 large-shadow border-radius flex-wrap bg-accent">
+            <img src="img/misc/illustrations/research-and-discovery.svg" alt="Resarch and discovery illustration" class="img-fluid align-self-start pb-3" style="height: 120px" />
             <h3 class="bigger-6 mb-0 font-weight-bold mt-4 align-self-end w-100">
               Research and discovery
             </h3>
           </div>
 
-          <div class="d-flex col-12 p-5 mb-4 large-shadow border-radius flex-wrap" style="background: #33D3B6;">
-            <img src="img/misc/illustrations/wireframing-and-prototyping.svg" alt="Wireframing and prototyping illustration" class="img-fluid align-self-start" style="height: 24vh"/>
+          <div class="d-flex col-12 p-5 mb-5 large-shadow border-radius flex-wrap" style="background: #33D3B6;">
+            <img src="img/misc/illustrations/wireframing-and-prototyping.svg" alt="Wireframing and prototyping illustration" class="img-fluid align-self-start pb-3" style="height: 120px"/>
             <h3 class="bigger-6 mb-0 font-weight-bold mt-4 align-self-end w-100">
               Wireframing and prototyping
             </h3>
           </div>
 
-          <div class="d-flex col-12 p-5 mb-4 large-shadow border-radius flex-wrap" style="background: #4FEACE;">
-            <img src="img/misc/illustrations/user-interviews-and-iteration.svg" alt="User interviews and iteration illustration" class="img-fluid align-self-start" style="height: 24vh"/>
+          <div class="d-flex col-12 p-5 mb-5 large-shadow border-radius flex-wrap" style="background: #4FEACE;">
+            <img src="img/misc/illustrations/user-interviews-and-iteration.svg" alt="User interviews and iteration illustration" class="img-fluid align-self-start pb-3" style="height: 120px"/>
             <h3 class="bigger-6 mb-0 font-weight-bold mt-4 align-self-end w-100">
               User interviews and iteration
             </h3>
           </div>
 
-          <div class="d-flex col-12 p-5 mb-4 large-shadow border-radius flex-wrap" style="background: #86EEDC;">
-            <img src="img/misc/illustrations/hifi-mockup-design.svg" alt="Hi-fi mockup design illustration" class="img-fluid align-self-start" style="height: 24vh"/>
+          <div class="d-flex col-12 p-5 mb-5 large-shadow border-radius flex-wrap" style="background: #86EEDC;">
+            <img src="img/misc/illustrations/hifi-mockup-design.svg" alt="Hi-fi mockup design illustration" class="img-fluid align-self-start pb-3" style="height: 120px"/>
             <h3 class="bigger-6 mb-0 font-weight-bold mt-4 align-self-end w-100">
               Hi-fi mockup design
             </h3>
           </div>
 
-          <div class="d-flex col-12 p-5 mb-4 large-shadow border-radius flex-wrap bg-background">
-            <img src="img/misc/illustrations/ship-celebrate-and-measure.svg" alt="Ship, celebrate and measure illustration" class="img-fluid align-self-start" style="height: 24vh"/>
+          <div class="d-flex col-12 p-5 mb-5 large-shadow border-radius flex-wrap bg-background">
+            <img src="img/misc/illustrations/ship-celebrate-and-measure.svg" alt="Ship, celebrate and measure illustration" class="img-fluid align-self-start pb-3" style="height: 120px"/>
             <h3 class="bigger-6 mb-0 font-weight-bold mt-4 align-self-end w-100">
               Ship, celebrate and measure
             </h3>

diff --git a/src/meta.html b/src/meta.html
@@ -43,6 +43,17 @@
     <script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
 
   </head>
+
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-00CVF9DH83"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'G-00CVF9DH83');
+  </script>
+
   <body class="opacity-0">
       <section class="container" id="pageTop">
 
@@ -265,7 +276,7 @@ <h2 class="section-title mt-2">Summary</h2>
                   </div>
                 </div>
 
-                <div id="overview" class="row">
+                <div id="overview" class="row mt-lg-5 pt-lg-5">
                   <div class="col-12">
                     <h2 class="section-title">Overview</h2>
                     <p class="mt-4">Ennely was a video editor assistant that enabled content creators to create a first cut within minutes.</p>
@@ -332,7 +343,7 @@ <h2 class="section-title">Overview</h2>
 
               <div class="minHeight10vh"></div>
 
-              <div id="problem" class="row mt-5 pt-5">
+              <div id="problem" class="row mt-lg-5 pt-lg-5">
                   <div class="col-12">
                     <h2 class="section-title">Problems</h2>
                     <p class="mt-4">As a company closely collaborating with content creators in the sound engineering industry, our team created a survey which identified three key challenges commonly encountered by many YouTubers publishing scripted videos.</p>
@@ -383,7 +394,8 @@ <h2 class="section-title">Problems</h2>
 
               </div>
 
-              <div class="minHeight45vh"></div>
+              <div class="minHeight40vh d-none d-lg-block"></div>
+              <div class="minHeight15vh d-block d-lg-none"></div>
 
 
               <div id="opportunity" class="row">
@@ -401,9 +413,10 @@ <h2 class="section-title text-background">Opportunity</h2>
                 </div>            
               </div>
 
-              <div class="minHeight30vh"></div>
+              <div class="minHeight30vh d-none d-lg-block"></div>
+              <div class="minHeight20vh d-block d-lg-none"></div>
 
-              <div id="analysis" class="row mt-4 pt-4">
+              <div id="analysis" class="row mt-lg-4 pt-lg-4">
                 <div class="col-12">
                   <h2 class="section-title">Competitive analysis</h2>
                   <p class="mt-4">Despite the absence of comparable tools, I dedicated time to analyze different UI’s to identify the best ways to onboard users and import footage from different cameras, microphones, drives and (online) folders.</p>
@@ -443,7 +456,7 @@ <h2 class="section-title">Competitive analysis</h2>
               <div class="minHeight10vh"></div>
 
 
-              <div id="persona" class="row mt-5 pt-5">
+              <div id="persona" class="row mt-lg-5 pt-lg-5">
                 <div class="col-12 mt-5">
                   <h2 class="section-title">User persona</h2>
                   <p class="mt-4">To develop Ennely, we collaborated with renowned content creators, drawing inspiration from their experiences and insights to shape our persona.</p>
@@ -510,7 +523,9 @@ <h2 class="section-title">User persona</h2>
 
 
 
-              <div class="minHeight30vh"></div>
+              <div class="minHeight30vh d-none d-lg-block"></div>
+
+              <div class="minHeight15vh d-block d-lg-none"></div>
 
 
               <div id="journey" class="row">
@@ -532,7 +547,7 @@ <h2 class="section-title">User journey</h2>
 
             <div class="minHeight15vh"></div>
 
-            <div id="goals" class="row my-5 py-5">
+            <div id="goals" class="row my-lg-5 py-lg-5">
               <div class="col-12">
                 <h2 class="section-title">Design goals</h2>
                 <p class="mt-4">Our design goals for this tool focused on maximizing efficiency and ensuring user-friendliness.</p>
@@ -826,7 +841,7 @@ <h2 class="section-title">Prototype</h2>
 
 
 
-            <div class="minHeight10vh"></div>
+            <div class="minHeight15vh"></div>
 
 
             <div id="research" class="row my-5 py-5">
@@ -849,7 +864,7 @@ <h2 class="section-title">Research plan & (un)moderated user tests</h2>
             <div class="minHeight10vh"></div>
 
 
-            <div id="iteration" class="row mt-5">
+            <div id="iteration" class="row mt-lg-5">
               <div class="col-12">
                 <h2 class="section-title">Iteration based on user feedback</h2>
                 <p class="mt-4">The moderated (conducted internally) and unmoderated user tests yielded insights that shaped the app's further improvement.</p>
@@ -877,7 +892,7 @@ <h2 class="section-title">Iteration based on user feedback</h2>
             <div class="minHeight15vh"></div>
 
 
-             <div id="conclusions" class="row my-5 py-5">
+             <div id="conclusions" class="row my-lg-5 py-lg-5">
               <div class="col-12 ">
                 <h2 class="section-title">Final version and conclusions</h2>
                 <p class="mt-4">Embarking on the journey of developing a tool like this alongside its target audience, content creators and a highly skilled team was an incredibly fulfilling experience.</p>
@@ -886,7 +901,7 @@ <h2 class="section-title">Final version and conclusions</h2>
 
                 <p>...Just as we were preparing for production, an unexpected twist occurred—the company was acquired by Meta.</p>
 
-                <div class="row lottieRow">
+                <div class="row lottieRow d-none d-lg-block">
                       <div class="col-12 placeholder-glow" style="min-height:300;"></div>
 
                 </div>

diff --git a/src/microsoft.html b/src/microsoft.html
@@ -40,6 +40,17 @@
     <script src="https://fast.wistia.com/embed/medias/tw1xsv3dxv.jsonp" async></script>
     <script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
   </head>
+
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-00CVF9DH83"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'G-00CVF9DH83');
+  </script>
+
   <body class="opacity-0">
     <section class="container" id="pageTop">
 
@@ -265,7 +276,7 @@ <h2 class="section-title mt-2">Summary</h2>
                   </div>
                 </div>
 
-                <div id="overview" class="row">
+                <div id="overview" class="row mt-lg-5 pt-lg-5">
                   <div class="col-12">
                     <h2 class="section-title">Overview</h2>
                     <p class="mt-4">One of the products I'm most proud of designing is a desktop app initially called WinAutomation from Softomotive.</p>
@@ -317,7 +328,7 @@ <h2 class="section-title">Overview</h2>
 
               <div class="minHeight10vh"></div>
 
-              <div id="problems" class="row mt-5 pt-5">
+              <div id="problems" class="row mt-lg-5 pt-lg-5">
                   <div class="col-12">
                     <h2 class="section-title">Problems</h2>
                     <p class="mt-4">Prior to its transformation into PAD, the product was known as WinAutomation and was under the ownership of Softomotive.</p>
@@ -361,7 +372,8 @@ <h2 class="section-title">Problems</h2>
 
               </div>
 
-              <div class="minHeight40vh"></div>
+              <div class="minHeight30vh d-none d-lg-block"></div>
+              <div class="minHeight20vh d-block d-lg-none"></div>
 
 
               <div id="opportunity" class="row">
@@ -382,10 +394,10 @@ <h2 class="section-title text-background">Opportunity</h2>
 
 
 
-              <div class="minHeight20vh"></div>
+              <div class="minHeight15vh"></div>
 
 
-              <div id="persona" class="row my-5 py-5">
+              <div id="persona" class="row my-lg-5 py-lg-5">
                 <div class="col-12 mt-5">
                   <h2 class="section-title">User persona</h2>
                   <p class="mt-4">To gain a deeper understanding of our users, I crafted a persona to empathize and connect with their needs on a personal level.</p>
@@ -577,9 +589,9 @@ <h2 class="section-title">Design goals</h2>
 
 
 
-              <div class="minHeight5vh"></div>
+
 
-              <div id="uiRedesign" class="row mt-4 pt-4">
+              <div id="uiRedesign" class="row mt-lg-4 pt-lg-4">
                 <div class="col-12">
                   <h2 class="section-title">UI redesign</h2>
                   <p class="mt-4">When I undertook the UI facelift of the app (in 2019), it was still sporting a skeuomorphic design style reminiscent of the mid-2000s.</p>
@@ -622,7 +634,7 @@ <h2 class="section-title">UI redesign</h2>
                   </div>
                 </div>
 
-                <div class="minHeight20vh"></div>
+                <div class="minHeight5vh"></div>
 
                 <div id="beforeAfter" class="row d-none">
 
@@ -717,10 +729,10 @@ <h2 class="section-title">UI redesign</h2>
               </div>
 
 
-              <div class="minHeight15vh"></div>
+              <div class="minHeight5vh"></div>
 
 
-              <div id="uxImprovements" class="row">
+              <div id="uxImprovements" class="row mt-5 pt-5">
 
                 <div class="col-12 position-relative pb-5 scrollableAreaParent">
 
@@ -897,7 +909,7 @@ <h2 class="section-title">Design system</h2>
             <div class="minHeight10vh"></div>
 
 
-            <div id="results" class="row my-5 py-5">
+            <div id="results" class="row my-lg-5 py-5">
               <div class="col-12 col-lg-6 mb-4">
                 <h2 class="section-title">Project launch results</h2>
                 <p class="mt-4">Starting with a closed circle of beta testers, we verified that we had successfully achieved all the project goals.</p>
@@ -1022,7 +1034,7 @@ <h2 class="section-title">Project launch results</h2>
             <div class="minHeight5vh"></div>
 
 
-             <div id="conclusions" class="row my-5 py-5">
+             <div id="conclusions" class="row my-lg-5 py-lg-5">
               <div class="col-12">
                 <h2 class="section-title">Conclusions</h2>