"),Gt=e("
Introduction"),Rt=e(" Mobility is perhaps one of the most rapidly evolving industry with changes driven by latest technologies, new services and cultural shift of transportation."),Yt=e("
To further understand the latest trends, a mixed team from Fjord, Accenture and Volkswagen has done a series of global research from both market and human points of view, from which merged view analysis was also derived."),Kt=e("
While the result was successfully compiled into a book, the team was not fully satisfied with the format due to the vast amount of information. Thus, the team challenged themselves to make the research more accessible."),Zt=e("
Challenges"),es=e(" When the team reached me out for the first time, the above was obviously my first response. I was not fully convinced with the term data visualisation they used, so I had to make sure we were speaking the same language. We started our discussion by asking below questions to align our requirements."),ts=e("
Approach"),ss=e(" Once above questions were derived, we went through them one by one to align ourselves. This process helped us greatly to kickstart our collaboration."),as=e("
Interactive and navigable data visualisation"),ns=e(" The main benefit of a digital application is in its interactivity to enable users to navigate through relevant information. Unlike quantitative data, our research data could not be displayed in numbers, so it was crucial to sort it by relevance to maximise accessibility."),os=e("
Thus, we defined our data visualisation as an interactive visual representation that allows users to easily navigate through the data. Furthermore, it should encourage users to learn new information by intuitively showing related data."),is=e("
Keywords- and sentence-based parameters"),ls=e(" In order to build our logics for the visualisation, keywords were suggested as the parameter. The team was already well-aware of the necessity and were ready for extracting those. Indeed, such process is already common in design research analysis."),rs=e("
To save their time, I suggested them to use natural words or sentences as keywords rather than spending time to come up with a single word. This allowed them to use, for example, representative user quotes selected from affinity diagrams as parameters."),ds=e("
Making use of online spreadsheet"),ps=e(" The team was already collaborating with an online spreadsheet, which could be exported into xlsx format. I had a quick discussion with another back-end developer to check if it can be directly imported by writing a server-side script and confirmed it possible with ."),cs=e("
As the result, we agreed to onboard another back-end developer to program xlsx importing script to save our time and effort in filling in the data, and the team was able to continue working with their spreadsheet."),hs=e("
To best avoid the risk of structural and logical changes to the data, I carefully prioritised my tasks to give the team as much time as possible to digest their research."),ms=e("
Process"),us=e(" After spending some time to align ourselves, it was time to bring the concept into life. I took the lead developer role and onboarded a back-end developer to support me with processing xlsx data while I develop the main application."),gs=e("
Data-driven visual design"),fs=e(" The collaboration with designers was very unique and interesting as many elements were generated from data. I mostly worked together with a visual designer to build our logics for visual elements, just as shown in below animation."),g=e(""),ws=e("As our concept continued to develop, we needed to design new logics to match our desired visuals, so I also joined ideation sessions to share my knowledge and design together."),bs=e("
Technical setup"),vs=e(" In order to make a highly interactive data visualisation, I needed to find out the best options to generate and animate interactive elements."),ys=e("
During my research, I learnt SVG works very efficiently with CSS animations, and more importantly, React library could handle generating SVG nodes through JSX. Using React would enable me to implement more seamless interactions and animations by making it as a single-page application."),ks=e("
Our data was fairly small, although complex, but I nevertheless decided to save our data into a database rather than hard-coding into JavaScript as JSON. This was mainly to save development time by working with a back-end developer in parallel."),xs=e("
Coping with the uncertainty"),js=e(" In spite of our effort, we could not avoid critical changes in data structure. I tried my best to prioritise works that had less dependencies on data, but as the core logics changed, there was no other option but to restart from scratch."),$s=e("
To make things worse, a manager from Volkswagen requested not to use GPL licensed software. We were using MongoDB for storing our data, and all of sudden we were forced to seek for an alternative."),_s=e("
Fortunate for us, these two issues came up at the same time, so we could deal with them simultaneously. While I was re-working on front-end with visual designer, back-end developer worked on with structuring PostgreSQL database and new data importing scripts."),Ds=e("
Outcome"),Is=e(" After a month delay due to changes in structure, we were finally able to deliver the final application. Also, based on the internal tool we made, was also designed and developed within a short period."),Ws=e("
Controlling SVG"),Ss=e(" As a technical note, I preferred to use CSS transforms rather than inline SVG transformations to fully utilise CSS animations. It significantly saved my development time, but with one downside of not being able export the generated visual into an SVG file. I later wrote a dedicated script with inline styles to share generated assets for designers to use in their documentation."),Cs=e("
I utilised Redux state management to animate SVG, combined with React Router. This combination allowed sharing the desired visualisation through URLs, just like any other website."),Bs=e("
Real-time coding"),Ts=e(" The public website development followed immediately after the visualisation project, with a very tight timeline. Although we already had all assets ready, me and visual designer had to progress very quickly to meet the deadline. Thus, we decided to design and develop in parallel, sitting next to each other."),Ls=e("
For example, the visual designer would suggest visual and interaction ideas like the one above, and once I confirm it, I would develop it quickly to grasp the look and feel. As it was a simple static website, this method worked very well to utilise both of our skills quickly."),Xs=e("
Delivery"),Ms=e(" As there was no other developer from Volkswagen involved in the project, I had to think about how to deliver our application via a non-developer with minimum instructions. The team also did not know about their internal platforms for hosting applications, so I had to think of a universal method."),Os=e("
As the result, we agreed to package the application with Docker. This greatly simplified configuration process of PostgreSQL and Node server – not only for them but also for ourselves to share our outcome internally."),Ps=e("
Learnings"),qs=e(" This was one of the most difficult development projects I have had so far, with challenges coming from various aspects – from coding itself to corporate setup. This process gave me valuable lessons, with some remaining open questions."),Vs=e("
Modes of collaboration"),As=e(" Collaboration process with designers was the core challenge, as the application concept was continuously evolving in parallel with development. I had to quickly figure out which parts could be done independently or had to be done together with designers, just as mentioned earlier."),zs=e("
Especially during the public website production, there was absolutely no time for me to wait for the design confirmation. I and the visual designer agreed to sit together and design and develop at the same time. I literally implemented the design in real-time and this actually worked out great."),Ns=e("
Obviously, this was possible as the design direction was already defined from internal prototype, however, such mode of collaboration would be very useful in many situations in which quick – but fully working – prototypes are needed."),Fs=e("
Double check client's requirements"),Hs=e(" We were lucky (and unlucky) to have two game-over situations happening exactly at the same time, saving us from restarting for another round. While changes in data structure might have been extremely difficult to predict, the license issue could have been definitely avoided."),Js=e("
I learnt that use of open source solutions needs to be discussed thoroughly as a part of technical requirements upon planning. As the use of freely available dependencies are almost non-avoidable in modern web development, developers including me often neglect the importance of licenses associated with them. I took this experience to add such factor into my pre-development checklist for my next projects."),Es=e("
How to best avoid structural changes in data?"),Us=e(" As a Creative Technologist, I often face situations in which prototypes are urgently needed but ideas are not finalised. This always comes with risks of losing all my work due to the last-minute changes. This is usually manageable as they don't always require complex data structure."),Qs=e("
However, in this project, such change was critical and in spite of my effort, I could not avoid starting all over again. As a non-expert in data architecture, it was very difficult for me to predict every scenario and make my code expandable enough to cope with such situations."),Gs=e("
Later, I shared my experience with other developers and Creative Technologists, but we all agreed that in such project setup, the risk cannot be completely removed, and thus it remains an open challenge for all of us."),Rs=e(""),Ys=e("
What exactly do we want to produce? Are we sure we are not talking about another infographic and not trying to make things unnecessarily complicated? Since the term visualisation is so broad, we needed to understand what it means in our context, and what we were trying to achieve by making it."),Ks=e("
In order to generate a visualisation, it is obvious that we need to have a logic behind it. How are we going to parameterise qualitative research data? The team already had a good understanding of the requirement, so our discussion was more about in what format we are going to parameterise the data."),Zs=e("
Qualitative data usually requires more complex input than numbers. Also, the team was in the process of iterating their research, so I needed to come up with a solution in which the team can directly input the data while I develop the application. This also meant potential risks of changes in data structure.");function ea(){const k=r=>{W("mobility-study",r)};return[(()=>{var r=Qt(),t=r.firstChild,n=t.firstChild,i=t.nextSibling;return x(k,t),s(t,a(D,{alt:"The Future of Mobility",get class(){return p.bg},srcset:S}),n),s(i,a(I,{title:"The Future of Mobility",headline:"A development diary on an interactive web visualisation with qualitative data"}),null),s(i,a($,{agency:"Fjord",agencyLink:"https://fjordnet.com/",client:"Volkswagen",clientLink:"https://www.volkswagen.de/",overview:`
+import{f as x,i as s,h as a,c as v,b as m,E as y,j as d,t as e,m as j}from"./template-DEwkplrf.js";import{p,R as $,B as u,I as c,H as h}from"./project.module-EyBcDRJv.js";import{C as _}from"./cards-DXqYv8UG.js";import{P as D}from"./picture-DZcGR_Rp.js";import{T as I,S as l}from"./title-C9g8anI-.js";import{u as W}from"./useInitProject-BYcbynEk.js";import{B as S}from"./mobility_study_bg-I28_J20f.js";const C="/assets/amount-of-data-lg-YQ2PInG0.jpg",B="/assets/amount-of-data-lg-r79osC-P.webp",T="/assets/amount-of-data-md-CkLJlHp2.jpg",L="/assets/amount-of-data-md-DqYc037D.webp",X="/assets/amount-of-data-sm-LivS5PFs.jpg",M="/assets/amount-of-data-sm-jlKeXtK1.webp",O="/assets/amount-of-data-xl-DlYss6kM.jpg",P="/assets/amount-of-data-xl-B8FrxW_d.webp",q="/assets/amount-of-data-xs-IVOAaW8h.jpg",V="/assets/amount-of-data-xs-D6tqADdH.webp",A="/assets/amount-of-data-DK0TSrbQ.jpg",z="/assets/amount-of-data-D_fvZkma.webp",N={xs:q,sm:X,md:T,lg:C,xl:O,default:A},F={xs:V,sm:M,md:L,lg:B,xl:P,default:z},H={jpg:N,webp:F},J="/assets/concept-sketch-lg-CpiPvLol.jpg",E="/assets/concept-sketch-lg-DUtKCjcc.webp",U="/assets/concept-sketch-md-DLGrJaYx.jpg",Q="/assets/concept-sketch-md-Bil7YEnh.webp",G="/assets/concept-sketch-sm-BMXO0i70.jpg",R="/assets/concept-sketch-sm-C3KErfwm.webp",Y="/assets/concept-sketch-xl-BU6o400b.jpg",K="/assets/concept-sketch-xl-DbWDeO5n.webp",Z="/assets/concept-sketch-xs-BBBPUcpT.jpg",ee="/assets/concept-sketch-xs-xuTNLseg.webp",te="/assets/concept-sketch-DRJIvW1I.jpg",se="/assets/concept-sketch-CmKqbHEd.webp",ae={xs:Z,sm:G,md:U,lg:J,xl:Y,default:te},ne={xs:ee,sm:R,md:Q,lg:E,xl:K,default:se},oe={jpg:ae,webp:ne},ie="/assets/definition-of-viz-lg-C0yhKaoX.jpg",le="/assets/definition-of-viz-lg-BQDbQS4M.webp",re="/assets/definition-of-viz-md-vbjrzQoj.jpg",de="/assets/definition-of-viz-md-DevuEnFP.webp",pe="/assets/definition-of-viz-sm-DPMVFnWn.jpg",ce="/assets/definition-of-viz-sm-CUugQ-Ob.webp",he="/assets/definition-of-viz-xl-B0JeTARV.jpg",me="/assets/definition-of-viz-xl-DEpmi9eJ.webp",ue="/assets/definition-of-viz-xs-ZX9kcYB-.jpg",ge="/assets/definition-of-viz-xs-Du5IV3MC.webp",fe="/assets/definition-of-viz-dC32fJaX.jpg",we="/assets/definition-of-viz-BpaeorTQ.webp",be={xs:ue,sm:pe,md:re,lg:ie,xl:he,default:fe},ve={xs:ge,sm:ce,md:de,lg:le,xl:me,default:we},ye={jpg:be,webp:ve},ke="/assets/feeding-data-lg-VSuI8ZEd.jpg",xe="/assets/feeding-data-lg-Diz8Bk3j.webp",je="/assets/feeding-data-md-f2DVJJ2x.jpg",$e="/assets/feeding-data-md-9o3ahHoB.webp",_e="/assets/feeding-data-sm-CbiTnN3B.jpg",De="/assets/feeding-data-sm-Dq_XiAZc.webp",Ie="/assets/feeding-data-xl-CgM2mYXj.jpg",We="/assets/feeding-data-xl-DcWiEmIu.webp",Se="/assets/feeding-data-xs-I4SPQCFX.jpg",Ce="/assets/feeding-data-xs-Bj5HrvU9.webp",Be="/assets/feeding-data-CBoX5c3N.jpg",Te="/assets/feeding-data-B3GN26sI.webp",Le={xs:Se,sm:_e,md:je,lg:ke,xl:Ie,default:Be},Xe={xs:Ce,sm:De,md:$e,lg:xe,xl:We,default:Te},Me={jpg:Le,webp:Xe},Oe="/assets/final-presentation-lg-CsC3ZvwB.jpg",Pe="/assets/final-presentation-lg-CAeUcq50.webp",qe="/assets/final-presentation-md-BLOrpEMg.jpg",Ve="/assets/final-presentation-md-Cne_HU_c.webp",Ae="/assets/final-presentation-sm-9ZrUD6qc.jpg",ze="/assets/final-presentation-sm-DkN-y4rQ.webp",Ne="/assets/final-presentation-xl-Hsj4u1xB.jpg",Fe="/assets/final-presentation-xl-DtRswIUM.webp",He="/assets/final-presentation-xs-BFfjzbYN.jpg",Je="/assets/final-presentation-xs-BTFZZQUv.webp",Ee="/assets/final-presentation-DKGBHe11.jpg",Ue="/assets/final-presentation-BBT590KF.webp",Qe={xs:He,sm:Ae,md:qe,lg:Oe,xl:Ne,default:Ee},Ge={xs:Je,sm:ze,md:Ve,lg:Pe,xl:Fe,default:Ue},Re={jpg:Qe,webp:Ge},Ye="/assets/post-its-lg-DZl4ViCe.jpg",Ke="/assets/post-its-lg-COnHHvB1.webp",Ze="/assets/post-its-md-DAh8h-LD.jpg",et="/assets/post-its-md-s2aRQIIo.webp",tt="/assets/post-its-sm-Qprc4aE4.jpg",st="/assets/post-its-sm-92Juvk9f.webp",at="/assets/post-its-xl-CJeu4s5m.jpg",nt="/assets/post-its-xl-Duv6LrcA.webp",ot="/assets/post-its-xs-C350kfoH.jpg",it="/assets/post-its-xs-DdrSsuHu.webp",lt="/assets/post-its-CElNyUxY.jpg",rt="/assets/post-its-Byq0pUui.webp",dt={xs:ot,sm:tt,md:Ze,lg:Ye,xl:at,default:lt},pt={xs:it,sm:st,md:et,lg:Ke,xl:nt,default:rt},ct={jpg:dt,webp:pt},ht="/assets/spreadsheet-lg-BD5atB2C.jpg",mt="/assets/spreadsheet-lg-UahYuVhN.webp",ut="/assets/spreadsheet-md-oTEdxdpT.jpg",gt="/assets/spreadsheet-md-C3VobxnC.webp",ft="/assets/spreadsheet-sm-BHiIOre0.jpg",wt="/assets/spreadsheet-sm-DyrdvgCS.webp",bt="/assets/spreadsheet-xl-DjyNgFkv.jpg",vt="/assets/spreadsheet-xl-CAyz21vq.webp",yt="/assets/spreadsheet-xs-DvC5PIdK.jpg",kt="/assets/spreadsheet-xs-rNnGVJNM.webp",xt="/assets/spreadsheet--lMe48MH.jpg",jt="/assets/spreadsheet-BpcnnGUA.webp",$t={xs:yt,sm:ft,md:ut,lg:ht,xl:bt,default:xt},_t={xs:kt,sm:wt,md:gt,lg:mt,xl:vt,default:jt},Dt={jpg:$t,webp:_t},It="/assets/we-need-logic-lg-DHMHQ0-e.jpg",Wt="/assets/we-need-logic-lg-C6qG2YBD.webp",St="/assets/we-need-logic-md-BaTBYi-J.jpg",Ct="/assets/we-need-logic-md-BDNUr3Wn.webp",Bt="/assets/we-need-logic-sm-XJF_zVAt.jpg",Tt="/assets/we-need-logic-sm-C92CAtJ1.webp",Lt="/assets/we-need-logic-xl-CHwYJ_eD.jpg",Xt="/assets/we-need-logic-xl-G_Kd5Jpl.webp",Mt="/assets/we-need-logic-xs-BIBgMlWF.jpg",Ot="/assets/we-need-logic-xs-sWBtDRKW.webp",Pt="/assets/we-need-logic-Bz2xw325.jpg",qt="/assets/we-need-logic-D_pn_jwf.webp",Vt={xs:Mt,sm:Bt,md:St,lg:It,xl:Lt,default:Pt},At={xs:Ot,sm:Tt,md:Ct,lg:Wt,xl:Xt,default:qt},zt={jpg:Vt,webp:At},Nt="/assets/animation-demo-C9QrLBel.mp4",Ft="/assets/animation-demo-BmsWG9_Z.webm",Ht="/assets/theme-shape-f3zgbF_8.mp4",Jt="/assets/theme-shape-BaiPb26d.webm",Et="/assets/tool-demo-C66tEYeI.mp4",Ut="/assets/tool-demo-C1Xo5xup.webm";var Qt=e(""),Gt=e("
Introduction"),Rt=e(" Mobility is perhaps one of the most rapidly evolving industry with changes driven by latest technologies, new services and cultural shift of transportation."),Yt=e("
To further understand the latest trends, a mixed team from Fjord, Accenture and Volkswagen has done a series of global research from both market and human points of view, from which merged view analysis was also derived."),Kt=e("
While the result was successfully compiled into a book, the team was not fully satisfied with the format due to the vast amount of information. Thus, the team challenged themselves to make the research more accessible."),Zt=e("
Challenges"),es=e(" When the team reached me out for the first time, the above was obviously my first response. I was not fully convinced with the term data visualisation they used, so I had to make sure we were speaking the same language. We started our discussion by asking below questions to align our requirements."),ts=e("
Approach"),ss=e(" Once above questions were derived, we went through them one by one to align ourselves. This process helped us greatly to kickstart our collaboration."),as=e("
Interactive and navigable data visualisation"),ns=e(" The main benefit of a digital application is in its interactivity to enable users to navigate through relevant information. Unlike quantitative data, our research data could not be displayed in numbers, so it was crucial to sort it by relevance to maximise accessibility."),os=e("
Thus, we defined our data visualisation as an interactive visual representation that allows users to easily navigate through the data. Furthermore, it should encourage users to learn new information by intuitively showing related data."),is=e("
Keywords- and sentence-based parameters"),ls=e(" In order to build our logics for the visualisation, keywords were suggested as the parameter. The team was already well-aware of the necessity and were ready for extracting those. Indeed, such process is already common in design research analysis."),rs=e("
To save their time, I suggested them to use natural words or sentences as keywords rather than spending time to come up with a single word. This allowed them to use, for example, representative user quotes selected from affinity diagrams as parameters."),ds=e("
Making use of online spreadsheet"),ps=e(" The team was already collaborating with an online spreadsheet, which could be exported into xlsx format. I had a quick discussion with another back-end developer to check if it can be directly imported by writing a server-side script and confirmed it possible with ."),cs=e("
As the result, we agreed to onboard another back-end developer to program xlsx importing script to save our time and effort in filling in the data, and the team was able to continue working with their spreadsheet."),hs=e("
To best avoid the risk of structural and logical changes to the data, I carefully prioritised my tasks to give the team as much time as possible to digest their research."),ms=e("
Process"),us=e(" After spending some time to align ourselves, it was time to bring the concept into life. I took the lead developer role and onboarded a back-end developer to support me with processing xlsx data while I develop the main application."),gs=e("
Data-driven visual design"),fs=e(" The collaboration with designers was very unique and interesting as many elements were generated from data. I mostly worked together with a visual designer to build our logics for visual elements, just as shown in below animation."),g=e(""),ws=e("As our concept continued to develop, we needed to design new logics to match our desired visuals, so I also joined ideation sessions to share my knowledge and design together."),bs=e("
Technical setup"),vs=e(" In order to make a highly interactive data visualisation, I needed to find out the best options to generate and animate interactive elements."),ys=e("
During my research, I learnt SVG works very efficiently with CSS animations, and more importantly, React library could handle generating SVG nodes through JSX. Using React would enable me to implement more seamless interactions and animations by making it as a single-page application."),ks=e("
Our data was fairly small, although complex, but I nevertheless decided to save our data into a database rather than hard-coding into JavaScript as JSON. This was mainly to save development time by working with a back-end developer in parallel."),xs=e("
Coping with the uncertainty"),js=e(" In spite of our effort, we could not avoid critical changes in data structure. I tried my best to prioritise works that had less dependencies on data, but as the core logics changed, there was no other option but to restart from scratch."),$s=e("
To make things worse, a manager from Volkswagen requested not to use GPL licensed software. We were using MongoDB for storing our data, and all of sudden we were forced to seek for an alternative."),_s=e("
Fortunate for us, these two issues came up at the same time, so we could deal with them simultaneously. While I was re-working on front-end with visual designer, back-end developer worked on with structuring PostgreSQL database and new data importing scripts."),Ds=e("
Outcome"),Is=e(" After a month delay due to changes in structure, we were finally able to deliver the final application. Also, based on the internal tool we made, was also designed and developed within a short period."),Ws=e("
Controlling SVG"),Ss=e(" As a technical note, I preferred to use CSS transforms rather than inline SVG transformations to fully utilise CSS animations. It significantly saved my development time, but with one downside of not being able export the generated visual into an SVG file. I later wrote a dedicated script with inline styles to share generated assets for designers to use in their documentation."),Cs=e("
I utilised Redux state management to animate SVG, combined with React Router. This combination allowed sharing the desired visualisation through URLs, just like any other website."),Bs=e("
Real-time coding"),Ts=e(" The public website development followed immediately after the visualisation project, with a very tight timeline. Although we already had all assets ready, me and visual designer had to progress very quickly to meet the deadline. Thus, we decided to design and develop in parallel, sitting next to each other."),Ls=e("
For example, the visual designer would suggest visual and interaction ideas like the one above, and once I confirm it, I would develop it quickly to grasp the look and feel. As it was a simple static website, this method worked very well to utilise both of our skills quickly."),Xs=e("
Delivery"),Ms=e(" As there was no other developer from Volkswagen involved in the project, I had to think about how to deliver our application via a non-developer with minimum instructions. The team also did not know about their internal platforms for hosting applications, so I had to think of a universal method."),Os=e("
As the result, we agreed to package the application with Docker. This greatly simplified configuration process of PostgreSQL and Node server – not only for them but also for ourselves to share our outcome internally."),Ps=e("
Learnings"),qs=e(" This was one of the most difficult development projects I have had so far, with challenges coming from various aspects – from coding itself to corporate setup. This process gave me valuable lessons, with some remaining open questions."),Vs=e("
Modes of collaboration"),As=e(" Collaboration process with designers was the core challenge, as the application concept was continuously evolving in parallel with development. I had to quickly figure out which parts could be done independently or had to be done together with designers, just as mentioned earlier."),zs=e("
Especially during the public website production, there was absolutely no time for me to wait for the design confirmation. I and the visual designer agreed to sit together and design and develop at the same time. I literally implemented the design in real-time and this actually worked out great."),Ns=e("
Obviously, this was possible as the design direction was already defined from internal prototype, however, such mode of collaboration would be very useful in many situations in which quick – but fully working – prototypes are needed."),Fs=e("
Double check client's requirements"),Hs=e(" We were lucky (and unlucky) to have two game-over situations happening exactly at the same time, saving us from restarting for another round. While changes in data structure might have been extremely difficult to predict, the license issue could have been definitely avoided."),Js=e("
I learnt that use of open source solutions needs to be discussed thoroughly as a part of technical requirements upon planning. As the use of freely available dependencies are almost non-avoidable in modern web development, developers including me often neglect the importance of licenses associated with them. I took this experience to add such factor into my pre-development checklist for my next projects."),Es=e("
How to best avoid structural changes in data?"),Us=e(" As a Creative Technologist, I often face situations in which prototypes are urgently needed but ideas are not finalised. This always comes with risks of losing all my work due to the last-minute changes. This is usually manageable as they don't always require complex data structure."),Qs=e("
However, in this project, such change was critical and in spite of my effort, I could not avoid starting all over again. As a non-expert in data architecture, it was very difficult for me to predict every scenario and make my code expandable enough to cope with such situations."),Gs=e("
Later, I shared my experience with other developers and Creative Technologists, but we all agreed that in such project setup, the risk cannot be completely removed, and thus it remains an open challenge for all of us."),Rs=e(""),Ys=e("
What exactly do we want to produce? Are we sure we are not talking about another infographic and not trying to make things unnecessarily complicated? Since the term visualisation is so broad, we needed to understand what it means in our context, and what we were trying to achieve by making it."),Ks=e("
In order to generate a visualisation, it is obvious that we need to have a logic behind it. How are we going to parameterise qualitative research data? The team already had a good understanding of the requirement, so our discussion was more about in what format we are going to parameterise the data."),Zs=e("
Qualitative data usually requires more complex input than numbers. Also, the team was in the process of iterating their research, so I needed to come up with a solution in which the team can directly input the data while I develop the application. This also meant potential risks of changes in data structure.");function ea(){const k=r=>{W("mobility-study",r)};return[(()=>{var r=Qt(),t=r.firstChild,n=t.firstChild,i=t.nextSibling;return x(k,t),s(t,a(D,{alt:"The Future of Mobility",get class(){return p.bg},srcset:S}),n),s(i,a(I,{title:"The Future of Mobility",headline:"A development diary on an interactive web visualisation with qualitative data"}),null),s(i,a($,{agency:"Fjord",agencyLink:"https://fjordnet.com/",client:"Volkswagen",clientLink:"https://www.volkswagen.de/",overview:`
I led the full-stack development of an interactive website that is
fully generated with qualitative research data. I collaborated
with a back-end developer and visual designers to produce the web.
diff --git a/assets/picture-DoVBIOq-.js b/assets/picture-DZcGR_Rp.js
similarity index 96%
rename from assets/picture-DoVBIOq-.js
rename to assets/picture-DZcGR_Rp.js
index 96cd841..eafda99 100644
--- a/assets/picture-DoVBIOq-.js
+++ b/assets/picture-DZcGR_Rp.js
@@ -1 +1 @@
-import{i as s,c as d,j as r,b as v,t as c}from"./template-ByEHfdYF.js";var m=c(""),g=c(''),_=c(''),w=c(''),b=c(''),h=c(''),k=c(""),g=c(''),_=c(''),w=c(''),b=c(''),h=c(''),k=c("");function ke(t){return(()=>{var o=W();return i(o,()=>t.children),s(()=>l(o,r(J.quote,"col-12","col-lg-10","offset-lg-1",t.class,{[`${t.name}__quote`]:!!t.name,[J.noQuote]:t.noQuote}))),o})()}const X="_line_3otpa_1",Y={line:X};var Z=v(""),ne=v("
");function ye(t){return(()=>{var o=te();return i(o,(()=>{var d=h(()=>!!t.src);return()=>d()&&(()=>{var _=ne();return s(c=>{var u=t.alt,m=t.src;return u!==c.e&&G(_,"alt",c.e=u),m!==c.t&&G(_,"src",c.t=m),c},{e:void 0,t:void 0}),_})()})(),null),i(o,(()=>{var d=h(()=>!!t.srcset);return()=>d()&&f(T,{get alt(){return t.alt},get srcset(){return t.srcset}})})(),null),s(()=>l(o,r("project__section col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2",ee.imageBlock,t.className,t.name&&`${t.name}__section`))),o})()}const le="_roles_ah6jh_1",oe="_overview_ah6jh_13",re="_role_ah6jh_1",ie="_label_ah6jh_26",ce="_content_ah6jh_33",n={roles:le,overview:oe,role:re,label:ie,content:ce};var ae=v("
Summary Key roles Project year Agency Client "),de=v(""),ve=v("
");function je(t){let o;return t.client?o=t.clientLink?f(j,{get href(){return t.clientLink},get children(){return t.client}}):t.client:o="[Non-disclosable]",(()=>{var d=ae(),_=d.firstChild,c=_.firstChild,u=c.firstChild,m=u.nextSibling,x=m.firstChild,g=c.nextSibling,$=g.firstChild,k=$.nextSibling,S=k.firstChild,w=k.nextSibling,b=w.nextSibling,C=b.nextSibling,y=C.nextSibling,L=y.nextSibling,q=L.nextSibling;return i(x,()=>t.overview),i(g,(()=>{var e=h(()=>!!t.projectLink);return()=>e()&&(()=>{var a=de();return i(a,f(j,{get href(){return t.projectLink},children:"Project link"})),s(()=>l(a,r(n.content,n.projectLink,"font--default"))),a})()})(),$),i(S,f(O,{get each(){return t.roles},children:e=>(()=>{var a=ve();return i(a,e),a})()})),i(b,()=>t.year),i(y,(()=>{var e=h(()=>!!t.agencyLink);return()=>e()?f(j,{get href(){return t.agencyLink},get children(){return t.agency}}):t.agency})()),i(q,o),s(e=>{var a=r(n.roles,t.name&&`${t.name}__section`,"project__section col-nested"),B=r(n.summary,"col-12 col-sm-7 col-md-6 offset-md-1"),Q=n.label,P=n.content,E=r(n.overview,"font--overview"),N=r(n.details,"col-12 col-sm-5 col-md-4"),R=n.label,A=n.content,F=r(n.role,"font--default"),H=n.label,I=r(n.content,n.year,"font--default"),K=n.label,M=r(n.content,n.agency,"font--default"),z=n.label,D=r(n.content,n.client,"font--default");return a!==e.e&&l(d,e.e=a),B!==e.t&&l(c,e.t=B),Q!==e.a&&l(u,e.a=Q),P!==e.o&&l(m,e.o=P),E!==e.i&&l(x,e.i=E),N!==e.n&&l(g,e.n=N),R!==e.s&&l($,e.s=R),A!==e.h&&l(k,e.h=A),F!==e.r&&l(S,e.r=F),H!==e.d&&l(w,e.d=H),I!==e.l&&l(b,e.l=I),K!==e.u&&l(C,e.u=K),M!==e.c&&l(y,e.c=M),z!==e.w&&l(L,e.w=z),D!==e.m&&l(q,e.m=D),e},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0,n:void 0,s:void 0,h:void 0,r:void 0,d:void 0,l:void 0,u:void 0,c:void 0,w:void 0,m:void 0}),d})()}const se="_main_fkvu0_1",_e="_header_fkvu0_5",ue="_hero_fkvu0_12",me="_sticky_fkvu0_18",fe="_bg_fkvu0_22",he="_overlay_fkvu0_28",xe={main:se,header:_e,hero:ue,sticky:me,bg:fe,overlay:he};export{ke as B,be as H,ye as I,je as R,xe as p};
+import{i,c as s,b as l,a as r,t as v,g as h,j as G,h as f,E as j,F as O}from"./template-DEwkplrf.js";import{P as T}from"./picture-DZcGR_Rp.js";const U="_quote_rhym9_1",V="_noQuote_rhym9_9",J={quote:U,noQuote:V};var W=v("");function ke(t){return(()=>{var o=W();return i(o,()=>t.children),s(()=>l(o,r(J.quote,"col-12","col-lg-10","offset-lg-1",t.class,{[`${t.name}__quote`]:!!t.name,[J.noQuote]:t.noQuote}))),o})()}const X="_line_3otpa_1",Y={line:X};var Z=v(""),ne=v("
");function ye(t){return(()=>{var o=te();return i(o,(()=>{var d=h(()=>!!t.src);return()=>d()&&(()=>{var _=ne();return s(c=>{var u=t.alt,m=t.src;return u!==c.e&&G(_,"alt",c.e=u),m!==c.t&&G(_,"src",c.t=m),c},{e:void 0,t:void 0}),_})()})(),null),i(o,(()=>{var d=h(()=>!!t.srcset);return()=>d()&&f(T,{get alt(){return t.alt},get srcset(){return t.srcset}})})(),null),s(()=>l(o,r("project__section col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2",ee.imageBlock,t.className,t.name&&`${t.name}__section`))),o})()}const le="_roles_ah6jh_1",oe="_overview_ah6jh_13",re="_role_ah6jh_1",ie="_label_ah6jh_26",ce="_content_ah6jh_33",n={roles:le,overview:oe,role:re,label:ie,content:ce};var ae=v("
Summary Key roles Project year Agency Client "),de=v(""),ve=v("
");function je(t){let o;return t.client?o=t.clientLink?f(j,{get href(){return t.clientLink},get children(){return t.client}}):t.client:o="[Non-disclosable]",(()=>{var d=ae(),_=d.firstChild,c=_.firstChild,u=c.firstChild,m=u.nextSibling,x=m.firstChild,g=c.nextSibling,$=g.firstChild,k=$.nextSibling,S=k.firstChild,w=k.nextSibling,b=w.nextSibling,C=b.nextSibling,y=C.nextSibling,L=y.nextSibling,q=L.nextSibling;return i(x,()=>t.overview),i(g,(()=>{var e=h(()=>!!t.projectLink);return()=>e()&&(()=>{var a=de();return i(a,f(j,{get href(){return t.projectLink},children:"Project link"})),s(()=>l(a,r(n.content,n.projectLink,"font--default"))),a})()})(),$),i(S,f(O,{get each(){return t.roles},children:e=>(()=>{var a=ve();return i(a,e),a})()})),i(b,()=>t.year),i(y,(()=>{var e=h(()=>!!t.agencyLink);return()=>e()?f(j,{get href(){return t.agencyLink},get children(){return t.agency}}):t.agency})()),i(q,o),s(e=>{var a=r(n.roles,t.name&&`${t.name}__section`,"project__section col-nested"),B=r(n.summary,"col-12 col-sm-7 col-md-6 offset-md-1"),Q=n.label,P=n.content,E=r(n.overview,"font--overview"),N=r(n.details,"col-12 col-sm-5 col-md-4"),R=n.label,A=n.content,F=r(n.role,"font--default"),H=n.label,I=r(n.content,n.year,"font--default"),K=n.label,M=r(n.content,n.agency,"font--default"),z=n.label,D=r(n.content,n.client,"font--default");return a!==e.e&&l(d,e.e=a),B!==e.t&&l(c,e.t=B),Q!==e.a&&l(u,e.a=Q),P!==e.o&&l(m,e.o=P),E!==e.i&&l(x,e.i=E),N!==e.n&&l(g,e.n=N),R!==e.s&&l($,e.s=R),A!==e.h&&l(k,e.h=A),F!==e.r&&l(S,e.r=F),H!==e.d&&l(w,e.d=H),I!==e.l&&l(b,e.l=I),K!==e.u&&l(C,e.u=K),M!==e.c&&l(y,e.c=M),z!==e.w&&l(L,e.w=z),D!==e.m&&l(q,e.m=D),e},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0,n:void 0,s:void 0,h:void 0,r:void 0,d:void 0,l:void 0,u:void 0,c:void 0,w:void 0,m:void 0}),d})()}const se="_main_fkvu0_1",_e="_header_fkvu0_5",ue="_hero_fkvu0_12",me="_sticky_fkvu0_18",fe="_bg_fkvu0_22",he="_overlay_fkvu0_28",xe={main:se,header:_e,hero:ue,sticky:me,bg:fe,overlay:he};export{ke as B,be as H,ye as I,je as R,xe as p};
diff --git a/assets/synaesthesify-C2eZALfQ.js b/assets/synaesthesify-Crv0dONd.js
similarity index 96%
rename from assets/synaesthesify-C2eZALfQ.js
rename to assets/synaesthesify-Crv0dONd.js
index ee4a1dc..0d8c9ed 100644
--- a/assets/synaesthesify-C2eZALfQ.js
+++ b/assets/synaesthesify-Crv0dONd.js
@@ -1,4 +1,4 @@
-import{f as x,j as v,i as t,h as s,c as f,b as c,E as w,t as a,m as k}from"./template-ByEHfdYF.js";import{R as S,B as y,H as h,I as d,p}from"./project.module-CfcmTz4O.js";import{T as I,S as i}from"./title-D785si6n.js";import{u as q}from"./useInitProject-D_rdr1bV.js";import{B as j}from"./synaesthesify-bg-LwQASnIi.js";import"./picture-DoVBIOq-.js";const _="/assets/at-equinox-lg-BSR6CBE5.jpg",$="/assets/at-equinox-lg-NIWSl_eb.webp",C="/assets/at-equinox-md-Dyop9fi_.jpg",E="/assets/at-equinox-md-BphNDyZD.webp",T="/assets/at-equinox-sm-CX6VlUps.jpg",W="/assets/at-equinox-sm-B1rspy0M.webp",B="/assets/at-equinox-xl-BFtyo1YZ.jpg",A="/assets/at-equinox-xl-CrldTY5x.webp",F="/assets/at-equinox-xs-7YrUrUuq.jpg",P="/assets/at-equinox-xs-C5KFHN4g.webp",M="/assets/at-equinox-x_r7Zn4u.jpg",D="/assets/at-equinox-B4_6Cv2q.webp",L={xs:F,sm:T,md:C,lg:_,xl:B,default:M},X={xs:P,sm:W,md:E,lg:$,xl:A,default:D},G={jpg:L,webp:X},N="/assets/main-screen-lg-Ba381QWv.jpg",H="/assets/main-screen-lg-B7YILnQH.webp",R="/assets/main-screen-md-D4x5s7Mh.jpg",U="/assets/main-screen-md-CvOVw1BD.webp",Y="/assets/main-screen-sm-D3IxYDtj.jpg",Z="/assets/main-screen-sm-BL4I1oCz.webp",O="/assets/main-screen-xl-BtcNsaxO.jpg",V="/assets/main-screen-xl-DZoxbMtT.webp",z="/assets/main-screen-xs-BGyyZXG3.jpg",K="/assets/main-screen-xs-BKm86smG.webp",Q="/assets/main-screen-C55xCIcq.jpg",J="/assets/main-screen-DVd362Pz.webp",ee={xs:z,sm:Y,md:R,lg:N,xl:O,default:Q},te={xs:K,sm:Z,md:U,lg:H,xl:V,default:J},se={jpg:ee,webp:te},ae="/assets/sample-artwork-XUiOll_v.svg",ne="/assets/sample-chart-C0f2yUCw.svg",oe="/assets/sample-tweaks-D3BypgN2.svg";var ie=a(""),re=a("
Introduction"),le=a(" Shortly after I joined Fjord, I was suggested to give a talk at Fjord's biggest annual event – – to share a Creative Technologist's point of view towards the design world."),de=a("
I teamed up with two other new-joiners from Fjord Milan studio – a Visual Designer and another Creative Technologist – to quickly ideate on topics and concepts to talk about. We agreed that data and APIs are rising topics, and it would be inspiring for designers to show what we can do with them."),ce=a("
We came up with the idea of experimenting with to generate some artworks. Rather than giving a too techy talk, we wanted to engage designers in a more friendly way by producing visual outputs."),pe=a("
Approach"),he=a(" The main idea of this project was to play around with data to generate interesting visual outputs. I also personally wanted to generate something that makes sense , rather than being too artistic. I decided to start by making a chart with available data in order to determine which track features would be useful."),me=a("
After some trials, I decided to use seven track features shown above to generate a radar chart, with HSL colour extracted from song's key, loudness and tempo. These features are the ones directly related to song itself, which also means they are the most useful to visually find out how a song feels like."),ue=a("
At this point, I could already imagine an artwork generated by scattering the shape of radar charts. Also, by stacking them together in one place, I would be able to easily compare multiple song's characteristics at a glance."),ge=a("
The first outputs I got were close to what I had expected. I tried to fetch track features from all songs in Global Top 50 chart and generate above visualisations. From here, I started to experiment further by tweaking some parameters."),fe=a("
I was inspired by the fact that alignment of each radar charts makes significant difference in the output's look and feel. I quickly added options to toggle randomisations for each chart's position and rotation to see the output."),we=a("
As can be seen above, these simple tweaks already generated completely different effects, which was something I could not expect. The shapes of radar charts showed some similar patterns throughout the Global Top 50 chart (as a note, this does not necessarily mean these songs are similar; the pattern may come from different scoring system for each feature) that gave the feeling of directional movement in the left example."),ye=a("
Similarly, the charts formed a nice radial pattern as shown on the right example, giving somewhat joyful and playful feeling."),be=a("
As I had limited time, I decided to stop here and proceed to make my final product – a visual synthesiser for Spotify albums."),xe=a("
Outcome"),ve=a(" I took the physical grid sequencers as a metaphor to my app. I already had some design directions suggested by the visual designer, so I could quickly proceed with my idea."),ke=a("
In the final design, users can generate an artwork from a selected album or playlist, and also play around with positions and rotations. Each song in an album is represented as a grid title as shown above, which users can click to check song's features."),Se=a("
This work was presented in a pop-up session at Fjord's Equinox event, together with the Milan team with their own version of experiments. We shared our learnings and initiated conversations around the topic with designers from all over the world."),Ie=a("
Learnings"),qe=a(" While this mini-project was a simple and quick one, it triggered many discussions in the talk. It became a good opportunity to share experiences from both designers' and Creative Technologists' points of view."),je=a("
Many designers were interested in collaborating with Creative Technologists but found the process somewhat difficult. Also, as a team of new joiners, we were also keen to find out what has been the process in other studios and what we could suggest them to improve it."),_e=a("
At the end of the talk, one designer from Fjord London studio asked what designers could do to help Creative Technologists; and our suggestion was that they could familiarise themselves in reading developer documentations on APIs to learn what data is available. This will not only help us build our logic but will also become food for thoughts for designing new products and services."),$e=a("");function Ce(){const b=r=>{q("synaesthesify",r)};return[(()=>{var r=ie(),e=r.firstChild,o=e.firstChild,l=e.nextSibling;return x(b,e),v(o,"src",j),t(l,s(I,{title:"Synaesthesify",headline:"A three-day mini experiment with Spotify API by three fresh joiners"}),null),t(l,s(S,{agency:"Fjord",agencyLink:"https://fjordnet.com/",client:"N/A",overview:`
+import{f as x,j as v,i as t,h as s,c as f,b as c,E as w,t as a,m as k}from"./template-DEwkplrf.js";import{R as S,B as y,H as h,I as d,p}from"./project.module-EyBcDRJv.js";import{T as I,S as i}from"./title-C9g8anI-.js";import{u as q}from"./useInitProject-BYcbynEk.js";import{B as j}from"./synaesthesify-bg-LwQASnIi.js";import"./picture-DZcGR_Rp.js";const _="/assets/at-equinox-lg-BSR6CBE5.jpg",$="/assets/at-equinox-lg-NIWSl_eb.webp",C="/assets/at-equinox-md-Dyop9fi_.jpg",E="/assets/at-equinox-md-BphNDyZD.webp",T="/assets/at-equinox-sm-CX6VlUps.jpg",W="/assets/at-equinox-sm-B1rspy0M.webp",B="/assets/at-equinox-xl-BFtyo1YZ.jpg",A="/assets/at-equinox-xl-CrldTY5x.webp",F="/assets/at-equinox-xs-7YrUrUuq.jpg",P="/assets/at-equinox-xs-C5KFHN4g.webp",M="/assets/at-equinox-x_r7Zn4u.jpg",D="/assets/at-equinox-B4_6Cv2q.webp",L={xs:F,sm:T,md:C,lg:_,xl:B,default:M},X={xs:P,sm:W,md:E,lg:$,xl:A,default:D},G={jpg:L,webp:X},N="/assets/main-screen-lg-Ba381QWv.jpg",H="/assets/main-screen-lg-B7YILnQH.webp",R="/assets/main-screen-md-D4x5s7Mh.jpg",U="/assets/main-screen-md-CvOVw1BD.webp",Y="/assets/main-screen-sm-D3IxYDtj.jpg",Z="/assets/main-screen-sm-BL4I1oCz.webp",O="/assets/main-screen-xl-BtcNsaxO.jpg",V="/assets/main-screen-xl-DZoxbMtT.webp",z="/assets/main-screen-xs-BGyyZXG3.jpg",K="/assets/main-screen-xs-BKm86smG.webp",Q="/assets/main-screen-C55xCIcq.jpg",J="/assets/main-screen-DVd362Pz.webp",ee={xs:z,sm:Y,md:R,lg:N,xl:O,default:Q},te={xs:K,sm:Z,md:U,lg:H,xl:V,default:J},se={jpg:ee,webp:te},ae="/assets/sample-artwork-XUiOll_v.svg",ne="/assets/sample-chart-C0f2yUCw.svg",oe="/assets/sample-tweaks-D3BypgN2.svg";var ie=a("
"),re=a("
Introduction"),le=a(" Shortly after I joined Fjord, I was suggested to give a talk at Fjord's biggest annual event – – to share a Creative Technologist's point of view towards the design world."),de=a("
I teamed up with two other new-joiners from Fjord Milan studio – a Visual Designer and another Creative Technologist – to quickly ideate on topics and concepts to talk about. We agreed that data and APIs are rising topics, and it would be inspiring for designers to show what we can do with them."),ce=a("
We came up with the idea of experimenting with to generate some artworks. Rather than giving a too techy talk, we wanted to engage designers in a more friendly way by producing visual outputs."),pe=a("
Approach"),he=a(" The main idea of this project was to play around with data to generate interesting visual outputs. I also personally wanted to generate something that makes sense , rather than being too artistic. I decided to start by making a chart with available data in order to determine which track features would be useful."),me=a("
After some trials, I decided to use seven track features shown above to generate a radar chart, with HSL colour extracted from song's key, loudness and tempo. These features are the ones directly related to song itself, which also means they are the most useful to visually find out how a song feels like."),ue=a("
At this point, I could already imagine an artwork generated by scattering the shape of radar charts. Also, by stacking them together in one place, I would be able to easily compare multiple song's characteristics at a glance."),ge=a("
The first outputs I got were close to what I had expected. I tried to fetch track features from all songs in Global Top 50 chart and generate above visualisations. From here, I started to experiment further by tweaking some parameters."),fe=a("
I was inspired by the fact that alignment of each radar charts makes significant difference in the output's look and feel. I quickly added options to toggle randomisations for each chart's position and rotation to see the output."),we=a("
As can be seen above, these simple tweaks already generated completely different effects, which was something I could not expect. The shapes of radar charts showed some similar patterns throughout the Global Top 50 chart (as a note, this does not necessarily mean these songs are similar; the pattern may come from different scoring system for each feature) that gave the feeling of directional movement in the left example."),ye=a("
Similarly, the charts formed a nice radial pattern as shown on the right example, giving somewhat joyful and playful feeling."),be=a("
As I had limited time, I decided to stop here and proceed to make my final product – a visual synthesiser for Spotify albums."),xe=a("
Outcome"),ve=a(" I took the physical grid sequencers as a metaphor to my app. I already had some design directions suggested by the visual designer, so I could quickly proceed with my idea."),ke=a("
In the final design, users can generate an artwork from a selected album or playlist, and also play around with positions and rotations. Each song in an album is represented as a grid title as shown above, which users can click to check song's features."),Se=a("
This work was presented in a pop-up session at Fjord's Equinox event, together with the Milan team with their own version of experiments. We shared our learnings and initiated conversations around the topic with designers from all over the world."),Ie=a("
Learnings"),qe=a(" While this mini-project was a simple and quick one, it triggered many discussions in the talk. It became a good opportunity to share experiences from both designers' and Creative Technologists' points of view."),je=a("
Many designers were interested in collaborating with Creative Technologists but found the process somewhat difficult. Also, as a team of new joiners, we were also keen to find out what has been the process in other studios and what we could suggest them to improve it."),_e=a("
At the end of the talk, one designer from Fjord London studio asked what designers could do to help Creative Technologists; and our suggestion was that they could familiarise themselves in reading developer documentations on APIs to learn what data is available. This will not only help us build our logic but will also become food for thoughts for designing new products and services."),$e=a("");function Ce(){const b=r=>{q("synaesthesify",r)};return[(()=>{var r=ie(),e=r.firstChild,o=e.firstChild,l=e.nextSibling;return x(b,e),v(o,"src",j),t(l,s(I,{title:"Synaesthesify",headline:"A three-day mini experiment with Spotify API by three fresh joiners"}),null),t(l,s(S,{agency:"Fjord",agencyLink:"https://fjordnet.com/",client:"N/A",overview:`
I created a mini web application to generate artworks from song's
characteristics. With this work, I gave a talk at Fjord's annual
event to fellow designers to raise the topic of data and design.
diff --git a/assets/template-B3LBMZve.css b/assets/template-B3LBMZve.css
deleted file mode 100644
index 536398e..0000000
--- a/assets/template-B3LBMZve.css
+++ /dev/null
@@ -1 +0,0 @@
-@charset "UTF-8";._footer_ux7d3_1{position:relative;z-index:9999;background-color:var(--footer-background);padding:4rem 0 1rem;color:var(--footer-font-color);text-align:center}._copyright_ux7d3_10{font-size:calc(1.275rem + .3vw)}@media (min-width: 1200px){._copyright_ux7d3_10{font-size:1.5rem}}._iconLink_ux7d3_19{display:inline-block;transition:opacity .15s;margin:0 .75rem;border:0}._icon_ux7d3_19{width:2.5rem}._icon_ux7d3_19 path{fill:#fffc;transition:fill .15s}._icon_ux7d3_19:hover path{fill:#f6e81e}._version_ux7d3_37{display:block;margin-top:3.5rem;padding:0 1rem;font-size:.7rem;font-family:ibm-plex-mono,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;text-align:right}._version_ux7d3_37 a{transition:color .15s;border:0}._version_ux7d3_37 a:hover{color:var(--footer-link-color)}._logo_1egx1_1{margin:0;font-weight:900;font-size:2.5rem;line-height:3rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}._logo_1egx1_1>a{transition:color .15s;border:0;color:var(--toolbar-logo-color)}._logo_1egx1_1>a:hover{color:var(--toolbar-logo-hover-color)}._list_139r2_1{display:flex;margin:0;padding:0;list-style:none}._item_139r2_8{font-size:1rem;margin-left:2rem}._item_139r2_8:first-child{margin:0}._item_139r2_8 a{transition:color .15s,border .15s;border-color:transparent;color:var(--toolbar-font-color)}._item_139r2_8 a._current_139r2_20,._item_139r2_8 a:hover{border-bottom:2px solid color-mix(in srgb,var(--toolbar-link-color) 70%,transparent);color:var(--toolbar-link-color)}._toolbar_tv5pn_1{display:flex;position:absolute;top:0;right:0;left:0;justify-content:space-between;align-items:center;z-index:9999;transition:background-color .3s ease-in-out;margin-bottom:-3rem;height:3rem}@media (min-width: 0){._toolbar_tv5pn_1{padding-right:2rem;padding-left:2rem}}@media (min-width: 576px){._toolbar_tv5pn_1{padding-right:2rem;padding-left:2rem}}@media (min-width: 1024px){._toolbar_tv5pn_1{padding-right:3rem;padding-left:3rem}}@media (min-width: 1200px){._toolbar_tv5pn_1{padding-right:4rem;padding-left:4rem}}@media (min-width: 1440px){._toolbar_tv5pn_1{padding-right:4rem;padding-left:4rem}}@media (min-width: 576px){._toolbar_tv5pn_1{position:sticky}}body{--background: #fff;--font-color: #504f4e;--link-color: #797979;--border-color: #222;--on-dark-background: #fff;--toolbar-logo-color: #797979;--toolbar-logo-hover-color: #${v.$grey-dark}--toolbar-font-color: #797979;--toolbar-link-color: #504f4e;--footer-font-color: #fff;--footer-link-color: #f6e81e;--footer-background: #222}body.home:not(.intro){--toolbar-logo-color: #fff;--toolbar-logo-hover-color: #f6e81e;--toolbar-font-color: #fff;--toolbar-link-color: #f6e81e}body:not(.home).intro{--toolbar-logo-color: #fff;--toolbar-logo-hover-color: #f6e81e;--toolbar-font-color: #fff;--toolbar-link-color: #f6e81e}body:not(.home).visual-intelligence{--background: #222;--font-color: #fff;--link-color: #f6e81e;--border-color: #fff;--on-dark-background: #222;--toolbar-logo-color: #fff;--toolbar-logo-hover-color: #f6e81e;--toolbar-font-color: #fff;--toolbar-link-color: #f6e81e}body:not(.home).synaesthesify{--background: #0c2126;--font-color: #fff;--link-color: #f6e81e;--border-color: #fff;--on-dark-background: #222;--toolbar-logo-color: #fff;--toolbar-logo-hover-color: #f6e81e;--toolbar-font-color: #fff;--toolbar-link-color: #f6e81e}*,*:before,*:after{box-sizing:border-box}body{font-size:calc(1.275rem + .3vw);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;background:var(--background);color:var(--font-color);line-height:1.2;font-family:neue-haas-unica,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}@media (min-width: 1200px){body{font-size:1.5rem}}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}h3{margin-top:2em}h3:first-child{margin-top:0}p,.font--paragraph{font-size:calc(1.3rem + .6vw);margin-top:0;margin-bottom:1em;line-height:1.4}@media (min-width: 1200px){p,.font--paragraph{font-size:1.75rem}}a{transition:border .15s;border-bottom:3px solid color-mix(in srgb,var(--link-color) 70%,transparent);color:inherit;text-decoration:none}a:hover{border-color:var(--link-color);text-decoration:none}ul,ol,dl{margin:0 0 1rem}dd{margin-left:0}figure{margin:0 0 1rem}.font--title{font-size:calc(1.525rem + 3.3vw);margin-bottom:.5em;font-weight:900;line-height:1.1;font-family:big-caslon-fb,serif;letter-spacing:.02em}@media (min-width: 1200px){.font--title{font-size:4rem}}.font--subtitle{font-size:calc(1.425rem + 2.1vw);font-weight:300;line-height:1.1}@media (min-width: 1200px){.font--subtitle{font-size:3rem}}.font--headline{font-size:calc(1.3rem + .6vw);font-weight:300;line-height:1.2}@media (min-width: 1200px){.font--headline{font-size:1.75rem}}.font--overview{font-size:calc(1.3rem + .6vw);font-weight:600;line-height:1.2}@media (min-width: 1200px){.font--overview{font-size:1.75rem}}.font--default{font-size:calc(1.275rem + .3vw)}@media (min-width: 1200px){.font--default{font-size:1.5rem}}abbr[title]{cursor:inherit;text-decoration:none}blockquote{font-size:calc(1.525rem + 3.3vw);margin-bottom:.5em;font-weight:900;line-height:1.1;font-family:big-caslon-fb,serif;letter-spacing:.02em}@media (min-width: 1200px){blockquote{font-size:4rem}}blockquote:before{content:"“"}blockquote:after{content:"”"}q{font-style:italic}small{font-size:1rem}::-moz-selection{background-color:color-mix(in srgb,#f6e81e 50%,transparent)}::selection{background-color:color-mix(in srgb,#f6e81e 50%,transparent)}body{transition:background-color .3s ease-in-out}.container{display:grid;grid-template-columns:repeat(12,1fr);margin-right:auto;margin-left:auto;width:100%}@media (min-width: 576px){.container{max-width:540px}}@media (min-width: 1024px){.container{max-width:720px}}@media (min-width: 1200px){.container{max-width:960px}}@media (min-width: 1440px){.container{max-width:1140px}}@media (min-width: 0){.container{-moz-column-gap:0;column-gap:0;padding-right:2rem;padding-left:2rem}}@media (min-width: 576px){.container{-moz-column-gap:0 2rem;column-gap:0 2rem;padding-right:2rem;padding-left:2rem}}@media (min-width: 1024px){.container{-moz-column-gap:0 2rem;column-gap:0 2rem;padding-right:3rem;padding-left:3rem}}@media (min-width: 1200px){.container{-moz-column-gap:0 4rem;column-gap:0 4rem;padding-right:4rem;padding-left:4rem}}@media (min-width: 1440px){.container{-moz-column-gap:0 4rem;column-gap:0 4rem;padding-right:4rem;padding-left:4rem}}.container-fluid{display:grid;grid-template-columns:repeat(12,1fr);margin-right:auto;margin-left:auto;width:100%;position:relative;max-width:1920px}@media (min-width: 0){.container-fluid{gap:0;padding-right:2rem;padding-left:2rem}}@media (min-width: 576px){.container-fluid{gap:0 2rem;padding-right:2rem;padding-left:2rem}}@media (min-width: 1024px){.container-fluid{gap:0 2rem;padding-right:3rem;padding-left:3rem}}@media (min-width: 1200px){.container-fluid{gap:0 4rem;padding-right:4rem;padding-left:4rem}}@media (min-width: 1440px){.container-fluid{gap:0 4rem;padding-right:4rem;padding-left:4rem}}.col-nested{grid-column-start:1;grid-column-end:span 12}@media (min-width: 0){.col-nested{margin-right:-2rem;margin-left:-2rem}}@media (min-width: 576px){.col-nested{margin-right:-2rem;margin-left:-2rem}}@media (min-width: 1024px){.col-nested{margin-right:-3rem;margin-left:-3rem}}@media (min-width: 1200px){.col-nested{margin-right:-4rem;margin-left:-4rem}}@media (min-width: 1440px){.col-nested{margin-right:-4rem;margin-left:-4rem}}@media (min-width: 0){.col-1{grid-column-end:span 1}.col-2{grid-column-end:span 2}.col-3{grid-column-end:span 3}.col-4{grid-column-end:span 4}.col-5{grid-column-end:span 5}.col-6{grid-column-end:span 6}.col-7{grid-column-end:span 7}.col-8{grid-column-end:span 8}.col-9{grid-column-end:span 9}.col-10{grid-column-end:span 10}.col-11{grid-column-end:span 11}.col-12{grid-column-end:span 12}.order-first{order:-1}.order-last{order:13}.order-0{order:0}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.order-5{order:5}.order-6{order:6}.order-7{order:7}.order-8{order:8}.order-9{order:9}.order-10{order:10}.order-11{order:11}.order-12{order:12}.offset-1{grid-column-start:2}.offset-2{grid-column-start:3}.offset-3{grid-column-start:4}.offset-4{grid-column-start:5}.offset-5{grid-column-start:6}.offset-6{grid-column-start:7}.offset-7{grid-column-start:8}.offset-8{grid-column-start:9}.offset-9{grid-column-start:10}.offset-10{grid-column-start:11}.offset-11{grid-column-start:12}}@media (min-width: 576px){.col-sm-1{grid-column-end:span 1}.col-sm-2{grid-column-end:span 2}.col-sm-3{grid-column-end:span 3}.col-sm-4{grid-column-end:span 4}.col-sm-5{grid-column-end:span 5}.col-sm-6{grid-column-end:span 6}.col-sm-7{grid-column-end:span 7}.col-sm-8{grid-column-end:span 8}.col-sm-9{grid-column-end:span 9}.col-sm-10{grid-column-end:span 10}.col-sm-11{grid-column-end:span 11}.col-sm-12{grid-column-end:span 12}.order-sm-first{order:-1}.order-sm-last{order:13}.order-sm-0{order:0}.order-sm-1{order:1}.order-sm-2{order:2}.order-sm-3{order:3}.order-sm-4{order:4}.order-sm-5{order:5}.order-sm-6{order:6}.order-sm-7{order:7}.order-sm-8{order:8}.order-sm-9{order:9}.order-sm-10{order:10}.order-sm-11{order:11}.order-sm-12{order:12}.offset-sm-0{grid-column-start:1}.offset-sm-1{grid-column-start:2}.offset-sm-2{grid-column-start:3}.offset-sm-3{grid-column-start:4}.offset-sm-4{grid-column-start:5}.offset-sm-5{grid-column-start:6}.offset-sm-6{grid-column-start:7}.offset-sm-7{grid-column-start:8}.offset-sm-8{grid-column-start:9}.offset-sm-9{grid-column-start:10}.offset-sm-10{grid-column-start:11}.offset-sm-11{grid-column-start:12}}@media (min-width: 1024px){.col-md-1{grid-column-end:span 1}.col-md-2{grid-column-end:span 2}.col-md-3{grid-column-end:span 3}.col-md-4{grid-column-end:span 4}.col-md-5{grid-column-end:span 5}.col-md-6{grid-column-end:span 6}.col-md-7{grid-column-end:span 7}.col-md-8{grid-column-end:span 8}.col-md-9{grid-column-end:span 9}.col-md-10{grid-column-end:span 10}.col-md-11{grid-column-end:span 11}.col-md-12{grid-column-end:span 12}.order-md-first{order:-1}.order-md-last{order:13}.order-md-0{order:0}.order-md-1{order:1}.order-md-2{order:2}.order-md-3{order:3}.order-md-4{order:4}.order-md-5{order:5}.order-md-6{order:6}.order-md-7{order:7}.order-md-8{order:8}.order-md-9{order:9}.order-md-10{order:10}.order-md-11{order:11}.order-md-12{order:12}.offset-md-0{grid-column-start:1}.offset-md-1{grid-column-start:2}.offset-md-2{grid-column-start:3}.offset-md-3{grid-column-start:4}.offset-md-4{grid-column-start:5}.offset-md-5{grid-column-start:6}.offset-md-6{grid-column-start:7}.offset-md-7{grid-column-start:8}.offset-md-8{grid-column-start:9}.offset-md-9{grid-column-start:10}.offset-md-10{grid-column-start:11}.offset-md-11{grid-column-start:12}}@media (min-width: 1200px){.col-lg-1{grid-column-end:span 1}.col-lg-2{grid-column-end:span 2}.col-lg-3{grid-column-end:span 3}.col-lg-4{grid-column-end:span 4}.col-lg-5{grid-column-end:span 5}.col-lg-6{grid-column-end:span 6}.col-lg-7{grid-column-end:span 7}.col-lg-8{grid-column-end:span 8}.col-lg-9{grid-column-end:span 9}.col-lg-10{grid-column-end:span 10}.col-lg-11{grid-column-end:span 11}.col-lg-12{grid-column-end:span 12}.order-lg-first{order:-1}.order-lg-last{order:13}.order-lg-0{order:0}.order-lg-1{order:1}.order-lg-2{order:2}.order-lg-3{order:3}.order-lg-4{order:4}.order-lg-5{order:5}.order-lg-6{order:6}.order-lg-7{order:7}.order-lg-8{order:8}.order-lg-9{order:9}.order-lg-10{order:10}.order-lg-11{order:11}.order-lg-12{order:12}.offset-lg-0{grid-column-start:1}.offset-lg-1{grid-column-start:2}.offset-lg-2{grid-column-start:3}.offset-lg-3{grid-column-start:4}.offset-lg-4{grid-column-start:5}.offset-lg-5{grid-column-start:6}.offset-lg-6{grid-column-start:7}.offset-lg-7{grid-column-start:8}.offset-lg-8{grid-column-start:9}.offset-lg-9{grid-column-start:10}.offset-lg-10{grid-column-start:11}.offset-lg-11{grid-column-start:12}}@media (min-width: 1440px){.col-xl-1{grid-column-end:span 1}.col-xl-2{grid-column-end:span 2}.col-xl-3{grid-column-end:span 3}.col-xl-4{grid-column-end:span 4}.col-xl-5{grid-column-end:span 5}.col-xl-6{grid-column-end:span 6}.col-xl-7{grid-column-end:span 7}.col-xl-8{grid-column-end:span 8}.col-xl-9{grid-column-end:span 9}.col-xl-10{grid-column-end:span 10}.col-xl-11{grid-column-end:span 11}.col-xl-12{grid-column-end:span 12}.order-xl-first{order:-1}.order-xl-last{order:13}.order-xl-0{order:0}.order-xl-1{order:1}.order-xl-2{order:2}.order-xl-3{order:3}.order-xl-4{order:4}.order-xl-5{order:5}.order-xl-6{order:6}.order-xl-7{order:7}.order-xl-8{order:8}.order-xl-9{order:9}.order-xl-10{order:10}.order-xl-11{order:11}.order-xl-12{order:12}.offset-xl-0{grid-column-start:1}.offset-xl-1{grid-column-start:2}.offset-xl-2{grid-column-start:3}.offset-xl-3{grid-column-start:4}.offset-xl-4{grid-column-start:5}.offset-xl-5{grid-column-start:6}.offset-xl-6{grid-column-start:7}.offset-xl-7{grid-column-start:8}.offset-xl-8{grid-column-start:9}.offset-xl-9{grid-column-start:10}.offset-xl-10{grid-column-start:11}.offset-xl-11{grid-column-start:12}}img{margin-bottom:1rem;max-width:100%}video{max-width:100%;height:auto}
diff --git a/assets/template-CR0AsWLv.css b/assets/template-CR0AsWLv.css
new file mode 100644
index 0000000..70e7e32
--- /dev/null
+++ b/assets/template-CR0AsWLv.css
@@ -0,0 +1 @@
+@charset "UTF-8";._footer_ux7d3_1{position:relative;z-index:9999;background-color:var(--footer-background);padding:4rem 0 1rem;color:var(--footer-font-color);text-align:center}._copyright_ux7d3_10{font-size:calc(1.275rem + .3vw)}@media (min-width: 1200px){._copyright_ux7d3_10{font-size:1.5rem}}._iconLink_ux7d3_19{display:inline-block;transition:opacity .15s;margin:0 .75rem;border:0}._icon_ux7d3_19{width:2.5rem}._icon_ux7d3_19 path{fill:#fffc;transition:fill .15s}._icon_ux7d3_19:hover path{fill:#f6e81e}._version_ux7d3_37{display:block;margin-top:3.5rem;padding:0 1rem;font-size:.7rem;font-family:ibm-plex-mono,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;text-align:right}._version_ux7d3_37 a{transition:color .15s;border:0}._version_ux7d3_37 a:hover{color:var(--footer-link-color)}._logo_1egx1_1{margin:0;font-weight:900;font-size:2.5rem;line-height:3rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}._logo_1egx1_1>a{transition:color .15s;border:0;color:var(--toolbar-logo-color)}._logo_1egx1_1>a:hover{color:var(--toolbar-logo-hover-color)}._list_139r2_1{display:flex;margin:0;padding:0;list-style:none}._item_139r2_8{font-size:1rem;margin-left:2rem}._item_139r2_8:first-child{margin:0}._item_139r2_8 a{transition:color .15s,border .15s;border-color:transparent;color:var(--toolbar-font-color)}._item_139r2_8 a._current_139r2_20,._item_139r2_8 a:hover{border-bottom:2px solid color-mix(in srgb,var(--toolbar-link-color) 70%,transparent);color:var(--toolbar-link-color)}._toolbar_tv5pn_1{display:flex;position:absolute;top:0;right:0;left:0;justify-content:space-between;align-items:center;z-index:9999;transition:background-color .3s ease-in-out;margin-bottom:-3rem;height:3rem}@media (min-width: 0){._toolbar_tv5pn_1{padding-right:2rem;padding-left:2rem}}@media (min-width: 576px){._toolbar_tv5pn_1{padding-right:2rem;padding-left:2rem}}@media (min-width: 1024px){._toolbar_tv5pn_1{padding-right:3rem;padding-left:3rem}}@media (min-width: 1200px){._toolbar_tv5pn_1{padding-right:4rem;padding-left:4rem}}@media (min-width: 1440px){._toolbar_tv5pn_1{padding-right:4rem;padding-left:4rem}}@media (min-width: 576px){._toolbar_tv5pn_1{position:sticky}}body{--background: #fff;--font-color: #504f4e;--link-color: #797979;--border-color: #222;--on-dark-background: #fff;--toolbar-logo-color: #797979;--toolbar-logo-hover-color: #504f4e;--toolbar-font-color: #797979;--toolbar-link-color: #504f4e;--footer-font-color: #fff;--footer-link-color: #f6e81e;--footer-background: #222}body.home:not(.intro){--toolbar-logo-color: #fff;--toolbar-logo-hover-color: #f6e81e;--toolbar-font-color: #fff;--toolbar-link-color: #f6e81e}body:not(.home).intro{--toolbar-logo-color: #fff;--toolbar-logo-hover-color: #f6e81e;--toolbar-font-color: #fff;--toolbar-link-color: #f6e81e}body:not(.home).visual-intelligence{--background: #222;--font-color: #fff;--link-color: #f6e81e;--border-color: #fff;--on-dark-background: #222;--toolbar-logo-color: #fff;--toolbar-logo-hover-color: #f6e81e;--toolbar-font-color: #fff;--toolbar-link-color: #f6e81e}body:not(.home).synaesthesify{--background: #0c2126;--font-color: #fff;--link-color: #f6e81e;--border-color: #fff;--on-dark-background: #222;--toolbar-logo-color: #fff;--toolbar-logo-hover-color: #f6e81e;--toolbar-font-color: #fff;--toolbar-link-color: #f6e81e}*,*:before,*:after{box-sizing:border-box}body{font-size:calc(1.275rem + .3vw);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;background:var(--background);color:var(--font-color);line-height:1.2;font-family:neue-haas-unica,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}@media (min-width: 1200px){body{font-size:1.5rem}}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}h3{margin-top:2em}h3:first-child{margin-top:0}p,.font--paragraph{font-size:calc(1.3rem + .6vw);margin-top:0;margin-bottom:1em;line-height:1.4}@media (min-width: 1200px){p,.font--paragraph{font-size:1.75rem}}a{transition:border .15s;border-bottom:3px solid color-mix(in srgb,var(--link-color) 70%,transparent);color:inherit;text-decoration:none}a:hover{border-color:var(--link-color);text-decoration:none}ul,ol,dl{margin:0 0 1rem}dd{margin-left:0}figure{margin:0 0 1rem}.font--title{font-size:calc(1.525rem + 3.3vw);margin-bottom:.5em;font-weight:900;line-height:1.1;font-family:big-caslon-fb,serif;letter-spacing:.02em}@media (min-width: 1200px){.font--title{font-size:4rem}}.font--subtitle{font-size:calc(1.425rem + 2.1vw);font-weight:300;line-height:1.1}@media (min-width: 1200px){.font--subtitle{font-size:3rem}}.font--headline{font-size:calc(1.3rem + .6vw);font-weight:300;line-height:1.2}@media (min-width: 1200px){.font--headline{font-size:1.75rem}}.font--overview{font-size:calc(1.3rem + .6vw);font-weight:600;line-height:1.2}@media (min-width: 1200px){.font--overview{font-size:1.75rem}}.font--default{font-size:calc(1.275rem + .3vw)}@media (min-width: 1200px){.font--default{font-size:1.5rem}}abbr[title]{cursor:inherit;text-decoration:none}blockquote{font-size:calc(1.525rem + 3.3vw);margin-bottom:.5em;font-weight:900;line-height:1.1;font-family:big-caslon-fb,serif;letter-spacing:.02em}@media (min-width: 1200px){blockquote{font-size:4rem}}blockquote:before{content:"“"}blockquote:after{content:"”"}q{font-style:italic}small{font-size:1rem}::-moz-selection{background-color:color-mix(in srgb,#f6e81e 50%,transparent)}::selection{background-color:color-mix(in srgb,#f6e81e 50%,transparent)}body{transition:background-color .3s ease-in-out}.container{display:grid;grid-template-columns:repeat(12,1fr);margin-right:auto;margin-left:auto;width:100%}@media (min-width: 576px){.container{max-width:540px}}@media (min-width: 1024px){.container{max-width:720px}}@media (min-width: 1200px){.container{max-width:960px}}@media (min-width: 1440px){.container{max-width:1140px}}@media (min-width: 0){.container{-moz-column-gap:0;column-gap:0;padding-right:2rem;padding-left:2rem}}@media (min-width: 576px){.container{-moz-column-gap:0 2rem;column-gap:0 2rem;padding-right:2rem;padding-left:2rem}}@media (min-width: 1024px){.container{-moz-column-gap:0 2rem;column-gap:0 2rem;padding-right:3rem;padding-left:3rem}}@media (min-width: 1200px){.container{-moz-column-gap:0 4rem;column-gap:0 4rem;padding-right:4rem;padding-left:4rem}}@media (min-width: 1440px){.container{-moz-column-gap:0 4rem;column-gap:0 4rem;padding-right:4rem;padding-left:4rem}}.container-fluid{display:grid;grid-template-columns:repeat(12,1fr);margin-right:auto;margin-left:auto;width:100%;position:relative;max-width:1920px}@media (min-width: 0){.container-fluid{gap:0;padding-right:2rem;padding-left:2rem}}@media (min-width: 576px){.container-fluid{gap:0 2rem;padding-right:2rem;padding-left:2rem}}@media (min-width: 1024px){.container-fluid{gap:0 2rem;padding-right:3rem;padding-left:3rem}}@media (min-width: 1200px){.container-fluid{gap:0 4rem;padding-right:4rem;padding-left:4rem}}@media (min-width: 1440px){.container-fluid{gap:0 4rem;padding-right:4rem;padding-left:4rem}}.col-nested{grid-column-start:1;grid-column-end:span 12}@media (min-width: 0){.col-nested{margin-right:-2rem;margin-left:-2rem}}@media (min-width: 576px){.col-nested{margin-right:-2rem;margin-left:-2rem}}@media (min-width: 1024px){.col-nested{margin-right:-3rem;margin-left:-3rem}}@media (min-width: 1200px){.col-nested{margin-right:-4rem;margin-left:-4rem}}@media (min-width: 1440px){.col-nested{margin-right:-4rem;margin-left:-4rem}}@media (min-width: 0){.col-1{grid-column-end:span 1}.col-2{grid-column-end:span 2}.col-3{grid-column-end:span 3}.col-4{grid-column-end:span 4}.col-5{grid-column-end:span 5}.col-6{grid-column-end:span 6}.col-7{grid-column-end:span 7}.col-8{grid-column-end:span 8}.col-9{grid-column-end:span 9}.col-10{grid-column-end:span 10}.col-11{grid-column-end:span 11}.col-12{grid-column-end:span 12}.order-first{order:-1}.order-last{order:13}.order-0{order:0}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.order-5{order:5}.order-6{order:6}.order-7{order:7}.order-8{order:8}.order-9{order:9}.order-10{order:10}.order-11{order:11}.order-12{order:12}.offset-1{grid-column-start:2}.offset-2{grid-column-start:3}.offset-3{grid-column-start:4}.offset-4{grid-column-start:5}.offset-5{grid-column-start:6}.offset-6{grid-column-start:7}.offset-7{grid-column-start:8}.offset-8{grid-column-start:9}.offset-9{grid-column-start:10}.offset-10{grid-column-start:11}.offset-11{grid-column-start:12}}@media (min-width: 576px){.col-sm-1{grid-column-end:span 1}.col-sm-2{grid-column-end:span 2}.col-sm-3{grid-column-end:span 3}.col-sm-4{grid-column-end:span 4}.col-sm-5{grid-column-end:span 5}.col-sm-6{grid-column-end:span 6}.col-sm-7{grid-column-end:span 7}.col-sm-8{grid-column-end:span 8}.col-sm-9{grid-column-end:span 9}.col-sm-10{grid-column-end:span 10}.col-sm-11{grid-column-end:span 11}.col-sm-12{grid-column-end:span 12}.order-sm-first{order:-1}.order-sm-last{order:13}.order-sm-0{order:0}.order-sm-1{order:1}.order-sm-2{order:2}.order-sm-3{order:3}.order-sm-4{order:4}.order-sm-5{order:5}.order-sm-6{order:6}.order-sm-7{order:7}.order-sm-8{order:8}.order-sm-9{order:9}.order-sm-10{order:10}.order-sm-11{order:11}.order-sm-12{order:12}.offset-sm-0{grid-column-start:1}.offset-sm-1{grid-column-start:2}.offset-sm-2{grid-column-start:3}.offset-sm-3{grid-column-start:4}.offset-sm-4{grid-column-start:5}.offset-sm-5{grid-column-start:6}.offset-sm-6{grid-column-start:7}.offset-sm-7{grid-column-start:8}.offset-sm-8{grid-column-start:9}.offset-sm-9{grid-column-start:10}.offset-sm-10{grid-column-start:11}.offset-sm-11{grid-column-start:12}}@media (min-width: 1024px){.col-md-1{grid-column-end:span 1}.col-md-2{grid-column-end:span 2}.col-md-3{grid-column-end:span 3}.col-md-4{grid-column-end:span 4}.col-md-5{grid-column-end:span 5}.col-md-6{grid-column-end:span 6}.col-md-7{grid-column-end:span 7}.col-md-8{grid-column-end:span 8}.col-md-9{grid-column-end:span 9}.col-md-10{grid-column-end:span 10}.col-md-11{grid-column-end:span 11}.col-md-12{grid-column-end:span 12}.order-md-first{order:-1}.order-md-last{order:13}.order-md-0{order:0}.order-md-1{order:1}.order-md-2{order:2}.order-md-3{order:3}.order-md-4{order:4}.order-md-5{order:5}.order-md-6{order:6}.order-md-7{order:7}.order-md-8{order:8}.order-md-9{order:9}.order-md-10{order:10}.order-md-11{order:11}.order-md-12{order:12}.offset-md-0{grid-column-start:1}.offset-md-1{grid-column-start:2}.offset-md-2{grid-column-start:3}.offset-md-3{grid-column-start:4}.offset-md-4{grid-column-start:5}.offset-md-5{grid-column-start:6}.offset-md-6{grid-column-start:7}.offset-md-7{grid-column-start:8}.offset-md-8{grid-column-start:9}.offset-md-9{grid-column-start:10}.offset-md-10{grid-column-start:11}.offset-md-11{grid-column-start:12}}@media (min-width: 1200px){.col-lg-1{grid-column-end:span 1}.col-lg-2{grid-column-end:span 2}.col-lg-3{grid-column-end:span 3}.col-lg-4{grid-column-end:span 4}.col-lg-5{grid-column-end:span 5}.col-lg-6{grid-column-end:span 6}.col-lg-7{grid-column-end:span 7}.col-lg-8{grid-column-end:span 8}.col-lg-9{grid-column-end:span 9}.col-lg-10{grid-column-end:span 10}.col-lg-11{grid-column-end:span 11}.col-lg-12{grid-column-end:span 12}.order-lg-first{order:-1}.order-lg-last{order:13}.order-lg-0{order:0}.order-lg-1{order:1}.order-lg-2{order:2}.order-lg-3{order:3}.order-lg-4{order:4}.order-lg-5{order:5}.order-lg-6{order:6}.order-lg-7{order:7}.order-lg-8{order:8}.order-lg-9{order:9}.order-lg-10{order:10}.order-lg-11{order:11}.order-lg-12{order:12}.offset-lg-0{grid-column-start:1}.offset-lg-1{grid-column-start:2}.offset-lg-2{grid-column-start:3}.offset-lg-3{grid-column-start:4}.offset-lg-4{grid-column-start:5}.offset-lg-5{grid-column-start:6}.offset-lg-6{grid-column-start:7}.offset-lg-7{grid-column-start:8}.offset-lg-8{grid-column-start:9}.offset-lg-9{grid-column-start:10}.offset-lg-10{grid-column-start:11}.offset-lg-11{grid-column-start:12}}@media (min-width: 1440px){.col-xl-1{grid-column-end:span 1}.col-xl-2{grid-column-end:span 2}.col-xl-3{grid-column-end:span 3}.col-xl-4{grid-column-end:span 4}.col-xl-5{grid-column-end:span 5}.col-xl-6{grid-column-end:span 6}.col-xl-7{grid-column-end:span 7}.col-xl-8{grid-column-end:span 8}.col-xl-9{grid-column-end:span 9}.col-xl-10{grid-column-end:span 10}.col-xl-11{grid-column-end:span 11}.col-xl-12{grid-column-end:span 12}.order-xl-first{order:-1}.order-xl-last{order:13}.order-xl-0{order:0}.order-xl-1{order:1}.order-xl-2{order:2}.order-xl-3{order:3}.order-xl-4{order:4}.order-xl-5{order:5}.order-xl-6{order:6}.order-xl-7{order:7}.order-xl-8{order:8}.order-xl-9{order:9}.order-xl-10{order:10}.order-xl-11{order:11}.order-xl-12{order:12}.offset-xl-0{grid-column-start:1}.offset-xl-1{grid-column-start:2}.offset-xl-2{grid-column-start:3}.offset-xl-3{grid-column-start:4}.offset-xl-4{grid-column-start:5}.offset-xl-5{grid-column-start:6}.offset-xl-6{grid-column-start:7}.offset-xl-7{grid-column-start:8}.offset-xl-8{grid-column-start:9}.offset-xl-9{grid-column-start:10}.offset-xl-10{grid-column-start:11}.offset-xl-11{grid-column-start:12}}img{margin-bottom:1rem;max-width:100%}video{max-width:100%;height:auto}
diff --git a/assets/template-ByEHfdYF.js b/assets/template-DEwkplrf.js
similarity index 100%
rename from assets/template-ByEHfdYF.js
rename to assets/template-DEwkplrf.js
diff --git a/assets/title-D785si6n.js b/assets/title-C9g8anI-.js
similarity index 88%
rename from assets/title-D785si6n.js
rename to assets/title-C9g8anI-.js
index fc19777..90fbbcd 100644
--- a/assets/title-D785si6n.js
+++ b/assets/title-C9g8anI-.js
@@ -1 +1 @@
-import{f as o,i as s,c,b as a,t as r,a as d}from"./template-ByEHfdYF.js";const h="_section_16620_1",u="_noPadding_16620_27",g="_fullHeight_16620_32",l={section:h,noPadding:u,fullHeight:g};var m=r("
");function P(e){const t=[l.section,"col-12","col-md-8","col-xl-6"];return e.class&&t.push(e.class),e.align==="left"?(t.push("col-sm-8"),t.push("offset-xl-1")):(t.push("col-sm-10"),t.push("offset-sm-1"),t.push("offset-md-2"),t.push("offset-xl-3")),e.fullHeight&&t.push(l.fullHeight),e.noPadding&&(t.push(l.noPadding),t.push("section--no-padding")),(()=>{var n=m(),i=e.ref;return typeof i=="function"?o(i,n):e.ref=n,s(n,()=>e.children),c(()=>a(n,t.join(" "))),n})()}const $="_intro_1cyyr_1",v={intro:$};var x=r('
');function j(e){return(()=>{var t=x(),n=t.firstChild,i=n.firstChild,_=i.nextSibling,f=e.ref;return typeof f=="function"?o(f,t):e.ref=t,s(i,()=>e.title),s(_,()=>e.headline),c(()=>a(t,d(v.intro,e.class,"col-12","col-sm-10","offset-sm-1","col-lg-8","offset-lg-2","project__intro"))),t})()}export{P as S,j as T};
+import{f as o,i as s,c,b as a,t as r,a as d}from"./template-DEwkplrf.js";const h="_section_16620_1",u="_noPadding_16620_27",g="_fullHeight_16620_32",l={section:h,noPadding:u,fullHeight:g};var m=r("");function P(e){const t=[l.section,"col-12","col-md-8","col-xl-6"];return e.class&&t.push(e.class),e.align==="left"?(t.push("col-sm-8"),t.push("offset-xl-1")):(t.push("col-sm-10"),t.push("offset-sm-1"),t.push("offset-md-2"),t.push("offset-xl-3")),e.fullHeight&&t.push(l.fullHeight),e.noPadding&&(t.push(l.noPadding),t.push("section--no-padding")),(()=>{var n=m(),i=e.ref;return typeof i=="function"?o(i,n):e.ref=n,s(n,()=>e.children),c(()=>a(n,t.join(" "))),n})()}const $="_intro_1cyyr_1",v={intro:$};var x=r('
');function j(e){return(()=>{var t=x(),n=t.firstChild,i=n.firstChild,_=i.nextSibling,f=e.ref;return typeof f=="function"?o(f,t):e.ref=t,s(i,()=>e.title),s(_,()=>e.headline),c(()=>a(t,d(v.intro,e.class,"col-12","col-sm-10","offset-sm-1","col-lg-8","offset-lg-2","project__intro"))),t})()}export{P as S,j as T};
diff --git a/assets/typing-practice-CWRvwoI-.js b/assets/typing-practice-B7Nv8n7N.js
similarity index 98%
rename from assets/typing-practice-CWRvwoI-.js
rename to assets/typing-practice-B7Nv8n7N.js
index b965214..5916585 100644
--- a/assets/typing-practice-CWRvwoI-.js
+++ b/assets/typing-practice-B7Nv8n7N.js
@@ -1,4 +1,4 @@
-import{f as x,i as s,h as a,c as y,b as d,E as u,t as e,m as S}from"./template-ByEHfdYF.js";import{p as g,R as j,B as h,H as c,I as p}from"./project.module-CfcmTz4O.js";import{C as f}from"./cards-BzwuqlUe.js";import{G as W}from"./gallery-DIUdS5aK.js";import{P as $}from"./picture-DoVBIOq-.js";import{T as _,S as o}from"./title-D785si6n.js";import{u as k}from"./useInitProject-D_rdr1bV.js";import{B as C}from"./typing_practice_bg-Cez8mW-L.js";const I="/assets/application-lg-D9uffI9e.jpg",T="/assets/application-lg-CLenPyn9.webp",D="/assets/application-md-lVqClql0.jpg",X="/assets/application-md-E16VRpgK.webp",P="/assets/application-sm-_8-nqhjZ.jpg",M="/assets/application-sm-hl_275qo.webp",B="/assets/application-xl-C5OpLb5y.jpg",R="/assets/application-xl-CoRXc5Ky.webp",L="/assets/application-xs-UedUOX6M.jpg",K="/assets/application-xs-CONWNNlm.webp",E="/assets/application-B6uFBdlr.jpg",A="/assets/application-ClePgXgC.webp",q={xs:L,sm:P,md:D,lg:I,xl:B,default:E},O={xs:K,sm:M,md:X,lg:T,xl:R,default:A},N={jpg:q,webp:O},F="/assets/level-complete-lg-y3VU1t_D.jpg",H="/assets/level-complete-lg-zZgWC3Ui.webp",U="/assets/level-complete-md-DXOjhV5q.jpg",G="/assets/level-complete-md-DzRzmBPv.webp",Q="/assets/level-complete-sm-hNdhe6GR.jpg",Z="/assets/level-complete-sm-DIDXds1s.webp",z="/assets/level-complete-xl-CUAi-avF.jpg",V="/assets/level-complete-xl-qfN-k-mQ.webp",J="/assets/level-complete-xs-C_hRPIBa.jpg",Y="/assets/level-complete-xs-DjwIV2Sx.webp",ee="/assets/level-complete-D4OI11qp.jpg",te="/assets/level-complete-CcXO7qzq.webp",se={xs:J,sm:Q,md:U,lg:F,xl:z,default:ee},ae={xs:Y,sm:Z,md:G,lg:H,xl:V,default:te},ne={jpg:se,webp:ae},oe="/assets/level-selection-lg-HFZQZJMO.jpg",re="/assets/level-selection-lg-fH1t1CWM.webp",le="/assets/level-selection-md-iXSFGzo1.jpg",ie="/assets/level-selection-md-D5WgI0b9.webp",ce="/assets/level-selection-sm-CXMVJjPO.jpg",pe="/assets/level-selection-sm-8ziGeEDZ.webp",ge="/assets/level-selection-xl-CRWCS1bh.jpg",de="/assets/level-selection-xl-DEIcOIZK.webp",he="/assets/level-selection-xs-DNDMCUy_.jpg",ue="/assets/level-selection-xs-BezCRtwX.webp",me="/assets/level-selection-CIIJyv6F.jpg",we="/assets/level-selection-B-fcnqEG.webp",be={xs:he,sm:ce,md:le,lg:oe,xl:ge,default:me},ye={xs:ue,sm:pe,md:ie,lg:re,xl:de,default:we},fe={jpg:be,webp:ye},ve="/assets/long-paragraph-screen-lg-qeiYCezB.jpg",xe="/assets/long-paragraph-screen-lg-pZGItH4u.webp",Se="/assets/long-paragraph-screen-md-BUJlJgb6.jpg",je="/assets/long-paragraph-screen-md-CHDuNopj.webp",We="/assets/long-paragraph-screen-sm-B6Pvmi_W.jpg",$e="/assets/long-paragraph-screen-sm-Cf7UWHDj.webp",_e="/assets/long-paragraph-screen-xl-DO5IMn4o.jpg",ke="/assets/long-paragraph-screen-xl-yo-o-1qH.webp",Ce="/assets/long-paragraph-screen-xs-DwnQ0lyc.jpg",Ie="/assets/long-paragraph-screen-xs-DXmFW4zW.webp",Te="/assets/long-paragraph-screen-CqlE7i29.jpg",De="/assets/long-paragraph-screen-QTTPXuva.webp",Xe={xs:Ce,sm:We,md:Se,lg:ve,xl:_e,default:Te},Pe={xs:Ie,sm:$e,md:je,lg:xe,xl:ke,default:De},Me={jpg:Xe,webp:Pe},Be="/assets/long-paragraph-selection-lg-dmqJpSGl.jpg",Re="/assets/long-paragraph-selection-lg-BXtU-1dy.webp",Le="/assets/long-paragraph-selection-md-BAaZSn8j.jpg",Ke="/assets/long-paragraph-selection-md-D5Tumc6Q.webp",Ee="/assets/long-paragraph-selection-sm-Dcb6Ykf4.jpg",Ae="/assets/long-paragraph-selection-sm-D35LzlKq.webp",qe="/assets/long-paragraph-selection-xl-DVEq2u7s.jpg",Oe="/assets/long-paragraph-selection-xl-BBN4Gk6K.webp",Ne="/assets/long-paragraph-selection-xs-CUaZotNk.jpg",Fe="/assets/long-paragraph-selection-xs-B-mwksX_.webp",He="/assets/long-paragraph-selection-Eb8Ppr-U.jpg",Ue="/assets/long-paragraph-selection-BTvkzZgw.webp",Ge={xs:Ne,sm:Ee,md:Le,lg:Be,xl:qe,default:He},Qe={xs:Fe,sm:Ae,md:Ke,lg:Re,xl:Oe,default:Ue},Ze={jpg:Ge,webp:Qe},ze="/assets/practice-screen-lg-D4diQkIF.jpg",Ve="/assets/practice-screen-lg-LFbdHTMu.webp",Je="/assets/practice-screen-md-TceQG0Fy.jpg",Ye="/assets/practice-screen-md-B_t-WLnp.webp",et="/assets/practice-screen-sm-CjQo_8Xi.jpg",tt="/assets/practice-screen-sm-Dzh75bsh.webp",st="/assets/practice-screen-xl-DHT8Epy_.jpg",at="/assets/practice-screen-xl-BW1AUMu9.webp",nt="/assets/practice-screen-xs-BGd77xoV.jpg",ot="/assets/practice-screen-xs-X6Xmeq-A.webp",rt="/assets/practice-screen-BiEZdQUT.jpg",lt="/assets/practice-screen-qw_-8rTv.webp",it={xs:nt,sm:et,md:Je,lg:ze,xl:st,default:rt},ct={xs:ot,sm:tt,md:Ye,lg:Ve,xl:at,default:lt},pt={jpg:it,webp:ct},gt="/assets/short-sentence-lg-BwQ0EePs.jpg",dt="/assets/short-sentence-lg-DoxuykwT.webp",ht="/assets/short-sentence-md-ClJpNtkb.jpg",ut="/assets/short-sentence-md-wkYVllpn.webp",mt="/assets/short-sentence-sm-COfJdsW4.jpg",wt="/assets/short-sentence-sm-DNZ2uAtI.webp",bt="/assets/short-sentence-xl-KMHsFMs_.jpg",yt="/assets/short-sentence-xl-D45W1tDf.webp",ft="/assets/short-sentence-xs-CErsTwCG.jpg",vt="/assets/short-sentence-xs-DdGV8sZQ.webp",xt="/assets/short-sentence-CpoHYIcc.jpg",St="/assets/short-sentence-Cqiq0DE6.webp",jt={xs:ft,sm:mt,md:ht,lg:gt,xl:bt,default:xt},Wt={xs:vt,sm:wt,md:ut,lg:dt,xl:yt,default:St},$t={jpg:jt,webp:Wt},_t="/assets/special-keys-lg-DsQNPJ8y.jpg",kt="/assets/special-keys-lg-DNm6dFdU.webp",Ct="/assets/special-keys-md-CWEAat8w.jpg",It="/assets/special-keys-md-6eXLAezB.webp",Tt="/assets/special-keys-sm-D1Sc9LZr.jpg",Dt="/assets/special-keys-sm-xx29mC6I.webp",Xt="/assets/special-keys-xl-Cl_SUM1x.jpg",Pt="/assets/special-keys-xl-CV7GW8fJ.webp",Mt="/assets/special-keys-xs-u2T-DyxR.jpg",Bt="/assets/special-keys-xs-C3H189no.webp",Rt="/assets/special-keys-BkY5qoXM.jpg",Lt="/assets/special-keys-6dPoKE0h.webp",Kt={xs:Mt,sm:Tt,md:Ct,lg:_t,xl:Xt,default:Rt},Et={xs:Bt,sm:Dt,md:It,lg:kt,xl:Pt,default:Lt},At={jpg:Kt,webp:Et},qt="/assets/teaching-in-rwanda-lg-CFeDcweR.jpg",Ot="/assets/teaching-in-rwanda-lg-Dic0BBYS.webp",Nt="/assets/teaching-in-rwanda-md-ikK68Waw.jpg",Ft="/assets/teaching-in-rwanda-md-DUtusymv.webp",Ht="/assets/teaching-in-rwanda-sm-B1CaINQ-.jpg",Ut="/assets/teaching-in-rwanda-sm-BQYMQuCK.webp",Gt="/assets/teaching-in-rwanda-xl-nitpwkvy.jpg",Qt="/assets/teaching-in-rwanda-xl-CY8UhGfE.webp",Zt="/assets/teaching-in-rwanda-xs-CjFlmwEy.jpg",zt="/assets/teaching-in-rwanda-xs-fbFBJ9Qz.webp",Vt="/assets/teaching-in-rwanda-B8mDTQ3P.jpg",Jt="/assets/teaching-in-rwanda-DVkAE4F0.webp",Yt={xs:Zt,sm:Ht,md:Nt,lg:qt,xl:Gt,default:Vt},es={xs:zt,sm:Ut,md:Ft,lg:Ot,xl:Qt,default:Jt},ts={jpg:Yt,webp:es},ss="/assets/teaching-method-lg-NZ3VzdNM.jpg",as="/assets/teaching-method-lg-DwRrp1TO.webp",ns="/assets/teaching-method-md-DcHingk6.jpg",os="/assets/teaching-method-md-eqWaLXf_.webp",rs="/assets/teaching-method-sm-D5wc1H_D.jpg",ls="/assets/teaching-method-sm-B7QGNNXJ.webp",is="/assets/teaching-method-xl-BZLGvbw-.jpg",cs="/assets/teaching-method-xl-KNXfFQfa.webp",ps="/assets/teaching-method-xs-B4Huh4GA.jpg",gs="/assets/teaching-method-xs-DccZTutq.webp",ds="/assets/teaching-method-rne_iSDC.jpg",hs="/assets/teaching-method-2-biUbR8.webp",us={xs:ps,sm:rs,md:ns,lg:ss,xl:is,default:ds},ms={xs:gs,sm:ls,md:os,lg:as,xl:cs,default:hs},ws={jpg:us,webp:ms},bs="/assets/typing-demonstration-lg-ATW2jT1Z.jpg",ys="/assets/typing-demonstration-lg-B9vEHtp_.webp",fs="/assets/typing-demonstration-md-DIwPTprl.jpg",vs="/assets/typing-demonstration-md-GSaEMNj3.webp",xs="/assets/typing-demonstration-sm-Bek1B1TK.jpg",Ss="/assets/typing-demonstration-sm-BFG9oHI8.webp",js="/assets/typing-demonstration-xl-C8yy2ROK.jpg",Ws="/assets/typing-demonstration-xl-BEGvtQ1T.webp",$s="/assets/typing-demonstration-xs-Cp7hcx6R.jpg",_s="/assets/typing-demonstration-xs-DNSrdvEg.webp",ks="/assets/typing-demonstration-HFHyrP03.jpg",Cs="/assets/typing-demonstration-DkdwW7R_.webp",Is={xs:$s,sm:xs,md:fs,lg:bs,xl:js,default:ks},Ts={xs:_s,sm:Ss,md:vs,lg:ys,xl:Ws,default:Cs},Ds={jpg:Is,webp:Ts},Xs="/assets/user-test-lg-OHhmWSc9.jpg",Ps="/assets/user-test-lg-CfbfvdNK.webp",Ms="/assets/user-test-md-CorLRY2n.jpg",Bs="/assets/user-test-md-CgPZXP1N.webp",Rs="/assets/user-test-sm-BuNpsXOY.jpg",Ls="/assets/user-test-sm-BpbdMEjS.webp",Ks="/assets/user-test-xl-DIfbX9fV.jpg",Es="/assets/user-test-xl-BQRyhKFQ.webp",As="/assets/user-test-xs-DhpW7FI2.jpg",qs="/assets/user-test-xs-B7ZdFrij.webp",Os="/assets/user-test-B0QWPZD5.jpg",Ns="/assets/user-test-CLZhRh3S.webp",Fs={xs:As,sm:Rs,md:Ms,lg:Xs,xl:Ks,default:Os},Hs={xs:qs,sm:Ls,md:Bs,lg:Ps,xl:Es,default:Ns},Us={jpg:Fs,webp:Hs};var Gs=e(""),Qs=e("
Introduction"),Zs=e(" I spent about 2.5 years in Rwanda serving as an IT education volunteer. It was an alternative service for Korean mandatory military service by KOICA (Korea International Cooperation Agency) under Ministry of Foreign Affairs."),zs=e("
The above quote was the very first question I got from my students in my first lecture with the classic ‘Hello World!’ example. This C/C++ programming course was intended for second-year IT-major students in a college in Rwanda."),Vs=e("
...and this turned out to be one of my better days."),Js=e("
Challenges (a.k.a. The Reality)"),Ys=e(" When another student shouted right after my short instructions on how to use shift key, I realised that student had a German keyboard. Some students even had Arabic keyboards!"),ea=e("
But again, this was one of my better days – because, at least, the school had electricity on that day."),ta=e("
Frequent power outage"),sa=e(" How many people in developing countries have 24/7 access to electricity? Some obvious things for us are considered luxuries for people living in this part of the world. Teaching any computer-related things without power was a great challenge for me and colleagues."),aa=e("
This fact extends to personal access to computers, not to mention individual's ability to afford one. We can safely assume the lecture hours are the only chances for students to use computers."),na=e("
Power outage also causes maintenance issue. Due to the unstable electricity, computers have significantly lower lifespan, forcing schools to spend more money into parts."),oa=e("
Rainy season"),ra=e(" This may sound strange, but the weather was a great blocker for running courses for two main reasons."),la=e("
First reason is that during the rain, it is extremely dangerous to move in Rwanda due to high chances of lightning strikes. Also, one of the main affordable and reliable transportations is moto-taxi, which cannot run in heavy rain. This means most of the students will not make it to the school in such weather."),ia=e("
Another reason rain hinders lecture is due to tin roofs. Most Rwandan schools and houses are built with affordable tin roofs, which make much noise during rain. In a pouring rain, it is simply impossible to hear anything under such roof."),ca=e("
Language barrier"),pa=e(" Education in Rwanda after primary school is officially done in English. However, in rural areas where average education rate is relatively lower, it is realistically not possible to give lectures only in English."),ga=e("
On the other hand, there was no material on IT education written in Kinyarwanda language, so it was a great challenge for us to prepare our own lecture materials."),da=e("
Approach"),ha=e(" It is obvious that we, as a group of volunteers, cannot radically solve all the problems at once. We had to focus on what we could achieve within our service period."),ua=e("
Our primary goal (targeted for IT education volunteers) was very clear – effectively teach students on how to type. We simply could not move on to next lecture without students being able to type!"),ma=e("
We decided to make a typing practice software, and we defined three main approaches to help ourselves achieve the goal:"),wa=e("
Process"),ba=e(" Once our approaches were defined, we quickly started to build the actual software, aiming for a quick proof-of-concept test."),ya=e("
The team focused on building a working prototype for the test phase. Meanwhile, we also gathered supporters from KOICA volunteers to arrange user testing sessions together with Rwanda Education Board."),fa=e("
User test"),va=e(" With the help of Rwanda Education Board and participating schools, we were able to gather students to try our software. We wanted to test if students could follow instructions, but more importantly, we wanted to know if this actually is an effective way of teaching. Below are our key findings."),xa=e("
Collaboration with Rwanda Education Board"),Sa=e(" One of the biggest challenges we had was the Kinyarwanda language. Also, gathering contents for typing exercises was extremely difficult due to lack of digital database on literature as well as rarity of Rwandan literatures."),ja=e("
For this, we collaborated with Rwanda Education Board to gather usable contents. They were able to provide us with already existing course materials, and they offered us to help with translating English literatures."),Wa=e("
In addition, they agreed to include typing practice as an official curriculum for all Rwandan schools, which would significantly make distribution easier. To support the process, KOICA offered to sponsor software CD production and provide trainings for teachers."),$a=e("
Outcome"),_a=e(" Based on the user test outcomes, we finalised our software with improved features and local contents provided by Rwanda Education Board. At the same time, we proceeded to organise teaching sessions to introduce it as well as train first group of teachers and students."),ka=e("/ˈɲaruka/ n. to be quick"),Ca=e("The software"),Ia=e("
The name Nyaruka was suggested by Rwanda Education Board, which – according to them – straightforwardly represents the purpose of “enhancing typing speed.”"),Ta=e("
The structure of the program is similar to other existing typing practice software, with keyboard position training and various exercises ranging from single characters to long paragraphs."),Da=e("
We tried to gamify the learning process, hence the joyful design style with game-like interfaces. We found this very effective, as several people during showcase events challenged us to compete with typing speed. Interestingly, the gamifying process itself helped us to naturally come up with new evaluation criteria such as frequently mistaken keys."),Xa=e("
Applying to the field"),Pa=e(" After finalising our software, we actively sought for opportunities to utilise it in actual teaching situations. While in bulk production, it was pre-distributed to KOICA volunteers who could directly apply it in their teaching."),Ma=e("
We were also invited to – Tech-girl camp – organised by Peace Corps and Michigan State University as part of women empowerment programme. Together with their volunteers, we gave effective typing lessons to Rwandan girls using our software, along with other general IT courses."),Ba=e("
It was a great opportunity to test, develop and share teaching methods with education experts from the field, especially because many of KOICA volunteers did not have any pedagogical knowledge. We later shared our learnings with KOICA community to apply new methods in our teaching. Detailed evaluation report on Techkobwa camp can be found ."),Ra=e("
The Last Moment Failure"),La=e(" Everything seemed to be going so well, until the very last moment. And there was nothing we could do about it."),Ka=e("
Rwanda Education Board has informed KOICA shortly after the production of software CDs that they cannot distribute CDs until we fix our content. We tried to triple check our contents together with the board members before the production, but unfortunately, this nevertheless happened."),Ea=e("
Things got really tricky as KOICA had already spent all budgets to produce CDs, and to make things worse, the team's service period was almost ending. If things could not be solved within a few weeks, there would nothing we could do."),Aa=e("
Rwanda Education Board and KOICA had several meetings to seek for solutions, but sadly the conflict only became worse into political arguments. Eventually, the distribution was postponed indefinitely, with neither side following up until today."),qa=e("
Learnings and Next Steps"),Oa=e(" A project can nevertheless fail – the team learnt it the hard way. Although we, as experienced volunteers in the actual fields, were clearly aware anything unexpected could happen, it was very hard for us to accept the result. The reason behind our failure was completely out of our control, and there was nothing we could do about it – a painful, but a lifetime lesson."),Na=e("
How can we teach IT without any digital tools?"),Fa=e(" Despite the unsatisfactory result, like any other projects, our journey gave us priceless learnings. I personally found the collaboration with Peace Corps and Michigan State University really opened up my eyes."),Ha=e("
As a computer education volunteer coming from non-teaching background, I have never thought about teaching the digital world without plugs. However, what those education experts demonstrated in the camp made me realise how creative teaching could be, and also how unprepared I was in giving such education to others."),Ua=e("
Just like preparing design workshops, those volunteers prepared a number of activities students could easily do without any power – for example, playing with binaries using simple black-and-white cards!"),Ga=e("
Applying teaching methods for and with typing practice"),Qa=e(" Such experience also made me wonder if there would be more effective ways in teaching how to type. None of the team had any knowledge in pedagogy, nor did we learn typing with a software like this."),Za=e("
I recently (2019) had a good discussion with a friend regarding this project, as I am currently planning to re-develop the software. He suggested me to focus on utilising the software in teaching rather than focusing on the typing itself, as most of us ourselves learnt typing naturally rather than by practicing with a software."),za=e("
Inspired by this, and also looking back on one of our first aims to increase literacy, I hope to re-launch this project in open source and suggest a new school curriculum for developing countries, in which students have more chances to read and type."),Va=e(""),Ja=e("
Nyaruka!"),Ya=e('KOICA'),en=e("The main reason we decided to develop another typing practice software was because there was surprisingly no available multilingual solution. The whole point of this is to make education material written in Kinyarwanda language."),tn=e("
The software is mainly for teaching young students, and we also observed many of them are often afraid to use computer for the first time. We tried to make our software joyful so students can enjoy learning to type."),sn=e("
Many students in Rwanda have limited access to books. . We thought we could help them read more by including literatures for long paragraph typing exercises."),an=e("
During our tests, it became clear that students have no problem in following our software if we give them clear instructions. This also meant proper training for teachers on utilising the software is necessary."),nn=e("
Our observations gave some inspirations on features as well. For example, we found out that students tended to keep their eyes on on-screen keyboard, which prevented them from improving – so we implemented a feature to completely hide the keyboard."),on=e("
Although we were aware our software needed to run on low-end machines, there still were things we could not consider, for example, ultra-low resolution. Our test sessions helped us to ensure more coverage for schools.");function rn(){const v=l=>{k("typing-practice",l)};return[(()=>{var l=Gs(),t=l.firstChild,r=t.firstChild,i=t.nextSibling;return x(v,t),s(t,a($,{alt:"Nyaruka! Typing Practice",get class(){return g.bg},srcset:C}),r),s(i,a(_,{get title(){return[Ja()," Typing practice software for Rwanda"]},headline:`
+import{f as x,i as s,h as a,c as y,b as d,E as u,t as e,m as S}from"./template-DEwkplrf.js";import{p as g,R as j,B as h,H as c,I as p}from"./project.module-EyBcDRJv.js";import{C as f}from"./cards-DXqYv8UG.js";import{G as W}from"./gallery-aZizFZOU.js";import{P as $}from"./picture-DZcGR_Rp.js";import{T as _,S as o}from"./title-C9g8anI-.js";import{u as k}from"./useInitProject-BYcbynEk.js";import{B as C}from"./typing_practice_bg-Cez8mW-L.js";const I="/assets/application-lg-D9uffI9e.jpg",T="/assets/application-lg-CLenPyn9.webp",D="/assets/application-md-lVqClql0.jpg",X="/assets/application-md-E16VRpgK.webp",P="/assets/application-sm-_8-nqhjZ.jpg",M="/assets/application-sm-hl_275qo.webp",B="/assets/application-xl-C5OpLb5y.jpg",R="/assets/application-xl-CoRXc5Ky.webp",L="/assets/application-xs-UedUOX6M.jpg",K="/assets/application-xs-CONWNNlm.webp",E="/assets/application-B6uFBdlr.jpg",A="/assets/application-ClePgXgC.webp",q={xs:L,sm:P,md:D,lg:I,xl:B,default:E},O={xs:K,sm:M,md:X,lg:T,xl:R,default:A},N={jpg:q,webp:O},F="/assets/level-complete-lg-y3VU1t_D.jpg",H="/assets/level-complete-lg-zZgWC3Ui.webp",U="/assets/level-complete-md-DXOjhV5q.jpg",G="/assets/level-complete-md-DzRzmBPv.webp",Q="/assets/level-complete-sm-hNdhe6GR.jpg",Z="/assets/level-complete-sm-DIDXds1s.webp",z="/assets/level-complete-xl-CUAi-avF.jpg",V="/assets/level-complete-xl-qfN-k-mQ.webp",J="/assets/level-complete-xs-C_hRPIBa.jpg",Y="/assets/level-complete-xs-DjwIV2Sx.webp",ee="/assets/level-complete-D4OI11qp.jpg",te="/assets/level-complete-CcXO7qzq.webp",se={xs:J,sm:Q,md:U,lg:F,xl:z,default:ee},ae={xs:Y,sm:Z,md:G,lg:H,xl:V,default:te},ne={jpg:se,webp:ae},oe="/assets/level-selection-lg-HFZQZJMO.jpg",re="/assets/level-selection-lg-fH1t1CWM.webp",le="/assets/level-selection-md-iXSFGzo1.jpg",ie="/assets/level-selection-md-D5WgI0b9.webp",ce="/assets/level-selection-sm-CXMVJjPO.jpg",pe="/assets/level-selection-sm-8ziGeEDZ.webp",ge="/assets/level-selection-xl-CRWCS1bh.jpg",de="/assets/level-selection-xl-DEIcOIZK.webp",he="/assets/level-selection-xs-DNDMCUy_.jpg",ue="/assets/level-selection-xs-BezCRtwX.webp",me="/assets/level-selection-CIIJyv6F.jpg",we="/assets/level-selection-B-fcnqEG.webp",be={xs:he,sm:ce,md:le,lg:oe,xl:ge,default:me},ye={xs:ue,sm:pe,md:ie,lg:re,xl:de,default:we},fe={jpg:be,webp:ye},ve="/assets/long-paragraph-screen-lg-qeiYCezB.jpg",xe="/assets/long-paragraph-screen-lg-pZGItH4u.webp",Se="/assets/long-paragraph-screen-md-BUJlJgb6.jpg",je="/assets/long-paragraph-screen-md-CHDuNopj.webp",We="/assets/long-paragraph-screen-sm-B6Pvmi_W.jpg",$e="/assets/long-paragraph-screen-sm-Cf7UWHDj.webp",_e="/assets/long-paragraph-screen-xl-DO5IMn4o.jpg",ke="/assets/long-paragraph-screen-xl-yo-o-1qH.webp",Ce="/assets/long-paragraph-screen-xs-DwnQ0lyc.jpg",Ie="/assets/long-paragraph-screen-xs-DXmFW4zW.webp",Te="/assets/long-paragraph-screen-CqlE7i29.jpg",De="/assets/long-paragraph-screen-QTTPXuva.webp",Xe={xs:Ce,sm:We,md:Se,lg:ve,xl:_e,default:Te},Pe={xs:Ie,sm:$e,md:je,lg:xe,xl:ke,default:De},Me={jpg:Xe,webp:Pe},Be="/assets/long-paragraph-selection-lg-dmqJpSGl.jpg",Re="/assets/long-paragraph-selection-lg-BXtU-1dy.webp",Le="/assets/long-paragraph-selection-md-BAaZSn8j.jpg",Ke="/assets/long-paragraph-selection-md-D5Tumc6Q.webp",Ee="/assets/long-paragraph-selection-sm-Dcb6Ykf4.jpg",Ae="/assets/long-paragraph-selection-sm-D35LzlKq.webp",qe="/assets/long-paragraph-selection-xl-DVEq2u7s.jpg",Oe="/assets/long-paragraph-selection-xl-BBN4Gk6K.webp",Ne="/assets/long-paragraph-selection-xs-CUaZotNk.jpg",Fe="/assets/long-paragraph-selection-xs-B-mwksX_.webp",He="/assets/long-paragraph-selection-Eb8Ppr-U.jpg",Ue="/assets/long-paragraph-selection-BTvkzZgw.webp",Ge={xs:Ne,sm:Ee,md:Le,lg:Be,xl:qe,default:He},Qe={xs:Fe,sm:Ae,md:Ke,lg:Re,xl:Oe,default:Ue},Ze={jpg:Ge,webp:Qe},ze="/assets/practice-screen-lg-D4diQkIF.jpg",Ve="/assets/practice-screen-lg-LFbdHTMu.webp",Je="/assets/practice-screen-md-TceQG0Fy.jpg",Ye="/assets/practice-screen-md-B_t-WLnp.webp",et="/assets/practice-screen-sm-CjQo_8Xi.jpg",tt="/assets/practice-screen-sm-Dzh75bsh.webp",st="/assets/practice-screen-xl-DHT8Epy_.jpg",at="/assets/practice-screen-xl-BW1AUMu9.webp",nt="/assets/practice-screen-xs-BGd77xoV.jpg",ot="/assets/practice-screen-xs-X6Xmeq-A.webp",rt="/assets/practice-screen-BiEZdQUT.jpg",lt="/assets/practice-screen-qw_-8rTv.webp",it={xs:nt,sm:et,md:Je,lg:ze,xl:st,default:rt},ct={xs:ot,sm:tt,md:Ye,lg:Ve,xl:at,default:lt},pt={jpg:it,webp:ct},gt="/assets/short-sentence-lg-BwQ0EePs.jpg",dt="/assets/short-sentence-lg-DoxuykwT.webp",ht="/assets/short-sentence-md-ClJpNtkb.jpg",ut="/assets/short-sentence-md-wkYVllpn.webp",mt="/assets/short-sentence-sm-COfJdsW4.jpg",wt="/assets/short-sentence-sm-DNZ2uAtI.webp",bt="/assets/short-sentence-xl-KMHsFMs_.jpg",yt="/assets/short-sentence-xl-D45W1tDf.webp",ft="/assets/short-sentence-xs-CErsTwCG.jpg",vt="/assets/short-sentence-xs-DdGV8sZQ.webp",xt="/assets/short-sentence-CpoHYIcc.jpg",St="/assets/short-sentence-Cqiq0DE6.webp",jt={xs:ft,sm:mt,md:ht,lg:gt,xl:bt,default:xt},Wt={xs:vt,sm:wt,md:ut,lg:dt,xl:yt,default:St},$t={jpg:jt,webp:Wt},_t="/assets/special-keys-lg-DsQNPJ8y.jpg",kt="/assets/special-keys-lg-DNm6dFdU.webp",Ct="/assets/special-keys-md-CWEAat8w.jpg",It="/assets/special-keys-md-6eXLAezB.webp",Tt="/assets/special-keys-sm-D1Sc9LZr.jpg",Dt="/assets/special-keys-sm-xx29mC6I.webp",Xt="/assets/special-keys-xl-Cl_SUM1x.jpg",Pt="/assets/special-keys-xl-CV7GW8fJ.webp",Mt="/assets/special-keys-xs-u2T-DyxR.jpg",Bt="/assets/special-keys-xs-C3H189no.webp",Rt="/assets/special-keys-BkY5qoXM.jpg",Lt="/assets/special-keys-6dPoKE0h.webp",Kt={xs:Mt,sm:Tt,md:Ct,lg:_t,xl:Xt,default:Rt},Et={xs:Bt,sm:Dt,md:It,lg:kt,xl:Pt,default:Lt},At={jpg:Kt,webp:Et},qt="/assets/teaching-in-rwanda-lg-CFeDcweR.jpg",Ot="/assets/teaching-in-rwanda-lg-Dic0BBYS.webp",Nt="/assets/teaching-in-rwanda-md-ikK68Waw.jpg",Ft="/assets/teaching-in-rwanda-md-DUtusymv.webp",Ht="/assets/teaching-in-rwanda-sm-B1CaINQ-.jpg",Ut="/assets/teaching-in-rwanda-sm-BQYMQuCK.webp",Gt="/assets/teaching-in-rwanda-xl-nitpwkvy.jpg",Qt="/assets/teaching-in-rwanda-xl-CY8UhGfE.webp",Zt="/assets/teaching-in-rwanda-xs-CjFlmwEy.jpg",zt="/assets/teaching-in-rwanda-xs-fbFBJ9Qz.webp",Vt="/assets/teaching-in-rwanda-B8mDTQ3P.jpg",Jt="/assets/teaching-in-rwanda-DVkAE4F0.webp",Yt={xs:Zt,sm:Ht,md:Nt,lg:qt,xl:Gt,default:Vt},es={xs:zt,sm:Ut,md:Ft,lg:Ot,xl:Qt,default:Jt},ts={jpg:Yt,webp:es},ss="/assets/teaching-method-lg-NZ3VzdNM.jpg",as="/assets/teaching-method-lg-DwRrp1TO.webp",ns="/assets/teaching-method-md-DcHingk6.jpg",os="/assets/teaching-method-md-eqWaLXf_.webp",rs="/assets/teaching-method-sm-D5wc1H_D.jpg",ls="/assets/teaching-method-sm-B7QGNNXJ.webp",is="/assets/teaching-method-xl-BZLGvbw-.jpg",cs="/assets/teaching-method-xl-KNXfFQfa.webp",ps="/assets/teaching-method-xs-B4Huh4GA.jpg",gs="/assets/teaching-method-xs-DccZTutq.webp",ds="/assets/teaching-method-rne_iSDC.jpg",hs="/assets/teaching-method-2-biUbR8.webp",us={xs:ps,sm:rs,md:ns,lg:ss,xl:is,default:ds},ms={xs:gs,sm:ls,md:os,lg:as,xl:cs,default:hs},ws={jpg:us,webp:ms},bs="/assets/typing-demonstration-lg-ATW2jT1Z.jpg",ys="/assets/typing-demonstration-lg-B9vEHtp_.webp",fs="/assets/typing-demonstration-md-DIwPTprl.jpg",vs="/assets/typing-demonstration-md-GSaEMNj3.webp",xs="/assets/typing-demonstration-sm-Bek1B1TK.jpg",Ss="/assets/typing-demonstration-sm-BFG9oHI8.webp",js="/assets/typing-demonstration-xl-C8yy2ROK.jpg",Ws="/assets/typing-demonstration-xl-BEGvtQ1T.webp",$s="/assets/typing-demonstration-xs-Cp7hcx6R.jpg",_s="/assets/typing-demonstration-xs-DNSrdvEg.webp",ks="/assets/typing-demonstration-HFHyrP03.jpg",Cs="/assets/typing-demonstration-DkdwW7R_.webp",Is={xs:$s,sm:xs,md:fs,lg:bs,xl:js,default:ks},Ts={xs:_s,sm:Ss,md:vs,lg:ys,xl:Ws,default:Cs},Ds={jpg:Is,webp:Ts},Xs="/assets/user-test-lg-OHhmWSc9.jpg",Ps="/assets/user-test-lg-CfbfvdNK.webp",Ms="/assets/user-test-md-CorLRY2n.jpg",Bs="/assets/user-test-md-CgPZXP1N.webp",Rs="/assets/user-test-sm-BuNpsXOY.jpg",Ls="/assets/user-test-sm-BpbdMEjS.webp",Ks="/assets/user-test-xl-DIfbX9fV.jpg",Es="/assets/user-test-xl-BQRyhKFQ.webp",As="/assets/user-test-xs-DhpW7FI2.jpg",qs="/assets/user-test-xs-B7ZdFrij.webp",Os="/assets/user-test-B0QWPZD5.jpg",Ns="/assets/user-test-CLZhRh3S.webp",Fs={xs:As,sm:Rs,md:Ms,lg:Xs,xl:Ks,default:Os},Hs={xs:qs,sm:Ls,md:Bs,lg:Ps,xl:Es,default:Ns},Us={jpg:Fs,webp:Hs};var Gs=e(""),Qs=e("
Introduction"),Zs=e(" I spent about 2.5 years in Rwanda serving as an IT education volunteer. It was an alternative service for Korean mandatory military service by KOICA (Korea International Cooperation Agency) under Ministry of Foreign Affairs."),zs=e("
The above quote was the very first question I got from my students in my first lecture with the classic ‘Hello World!’ example. This C/C++ programming course was intended for second-year IT-major students in a college in Rwanda."),Vs=e("
...and this turned out to be one of my better days."),Js=e("
Challenges (a.k.a. The Reality)"),Ys=e(" When another student shouted right after my short instructions on how to use shift key, I realised that student had a German keyboard. Some students even had Arabic keyboards!"),ea=e("
But again, this was one of my better days – because, at least, the school had electricity on that day."),ta=e("
Frequent power outage"),sa=e(" How many people in developing countries have 24/7 access to electricity? Some obvious things for us are considered luxuries for people living in this part of the world. Teaching any computer-related things without power was a great challenge for me and colleagues."),aa=e("
This fact extends to personal access to computers, not to mention individual's ability to afford one. We can safely assume the lecture hours are the only chances for students to use computers."),na=e("
Power outage also causes maintenance issue. Due to the unstable electricity, computers have significantly lower lifespan, forcing schools to spend more money into parts."),oa=e("
Rainy season"),ra=e(" This may sound strange, but the weather was a great blocker for running courses for two main reasons."),la=e("
First reason is that during the rain, it is extremely dangerous to move in Rwanda due to high chances of lightning strikes. Also, one of the main affordable and reliable transportations is moto-taxi, which cannot run in heavy rain. This means most of the students will not make it to the school in such weather."),ia=e("
Another reason rain hinders lecture is due to tin roofs. Most Rwandan schools and houses are built with affordable tin roofs, which make much noise during rain. In a pouring rain, it is simply impossible to hear anything under such roof."),ca=e("
Language barrier"),pa=e(" Education in Rwanda after primary school is officially done in English. However, in rural areas where average education rate is relatively lower, it is realistically not possible to give lectures only in English."),ga=e("
On the other hand, there was no material on IT education written in Kinyarwanda language, so it was a great challenge for us to prepare our own lecture materials."),da=e("
Approach"),ha=e(" It is obvious that we, as a group of volunteers, cannot radically solve all the problems at once. We had to focus on what we could achieve within our service period."),ua=e("
Our primary goal (targeted for IT education volunteers) was very clear – effectively teach students on how to type. We simply could not move on to next lecture without students being able to type!"),ma=e("
We decided to make a typing practice software, and we defined three main approaches to help ourselves achieve the goal:"),wa=e("
Process"),ba=e(" Once our approaches were defined, we quickly started to build the actual software, aiming for a quick proof-of-concept test."),ya=e("
The team focused on building a working prototype for the test phase. Meanwhile, we also gathered supporters from KOICA volunteers to arrange user testing sessions together with Rwanda Education Board."),fa=e("
User test"),va=e(" With the help of Rwanda Education Board and participating schools, we were able to gather students to try our software. We wanted to test if students could follow instructions, but more importantly, we wanted to know if this actually is an effective way of teaching. Below are our key findings."),xa=e("
Collaboration with Rwanda Education Board"),Sa=e(" One of the biggest challenges we had was the Kinyarwanda language. Also, gathering contents for typing exercises was extremely difficult due to lack of digital database on literature as well as rarity of Rwandan literatures."),ja=e("
For this, we collaborated with Rwanda Education Board to gather usable contents. They were able to provide us with already existing course materials, and they offered us to help with translating English literatures."),Wa=e("
In addition, they agreed to include typing practice as an official curriculum for all Rwandan schools, which would significantly make distribution easier. To support the process, KOICA offered to sponsor software CD production and provide trainings for teachers."),$a=e("
Outcome"),_a=e(" Based on the user test outcomes, we finalised our software with improved features and local contents provided by Rwanda Education Board. At the same time, we proceeded to organise teaching sessions to introduce it as well as train first group of teachers and students."),ka=e("/ˈɲaruka/ n. to be quick"),Ca=e("The software"),Ia=e("
The name Nyaruka was suggested by Rwanda Education Board, which – according to them – straightforwardly represents the purpose of “enhancing typing speed.”"),Ta=e("
The structure of the program is similar to other existing typing practice software, with keyboard position training and various exercises ranging from single characters to long paragraphs."),Da=e("
We tried to gamify the learning process, hence the joyful design style with game-like interfaces. We found this very effective, as several people during showcase events challenged us to compete with typing speed. Interestingly, the gamifying process itself helped us to naturally come up with new evaluation criteria such as frequently mistaken keys."),Xa=e("
Applying to the field"),Pa=e(" After finalising our software, we actively sought for opportunities to utilise it in actual teaching situations. While in bulk production, it was pre-distributed to KOICA volunteers who could directly apply it in their teaching."),Ma=e("
We were also invited to – Tech-girl camp – organised by Peace Corps and Michigan State University as part of women empowerment programme. Together with their volunteers, we gave effective typing lessons to Rwandan girls using our software, along with other general IT courses."),Ba=e("
It was a great opportunity to test, develop and share teaching methods with education experts from the field, especially because many of KOICA volunteers did not have any pedagogical knowledge. We later shared our learnings with KOICA community to apply new methods in our teaching. Detailed evaluation report on Techkobwa camp can be found ."),Ra=e("
The Last Moment Failure"),La=e(" Everything seemed to be going so well, until the very last moment. And there was nothing we could do about it."),Ka=e("
Rwanda Education Board has informed KOICA shortly after the production of software CDs that they cannot distribute CDs until we fix our content. We tried to triple check our contents together with the board members before the production, but unfortunately, this nevertheless happened."),Ea=e("
Things got really tricky as KOICA had already spent all budgets to produce CDs, and to make things worse, the team's service period was almost ending. If things could not be solved within a few weeks, there would nothing we could do."),Aa=e("
Rwanda Education Board and KOICA had several meetings to seek for solutions, but sadly the conflict only became worse into political arguments. Eventually, the distribution was postponed indefinitely, with neither side following up until today."),qa=e("
Learnings and Next Steps"),Oa=e(" A project can nevertheless fail – the team learnt it the hard way. Although we, as experienced volunteers in the actual fields, were clearly aware anything unexpected could happen, it was very hard for us to accept the result. The reason behind our failure was completely out of our control, and there was nothing we could do about it – a painful, but a lifetime lesson."),Na=e("
How can we teach IT without any digital tools?"),Fa=e(" Despite the unsatisfactory result, like any other projects, our journey gave us priceless learnings. I personally found the collaboration with Peace Corps and Michigan State University really opened up my eyes."),Ha=e("
As a computer education volunteer coming from non-teaching background, I have never thought about teaching the digital world without plugs. However, what those education experts demonstrated in the camp made me realise how creative teaching could be, and also how unprepared I was in giving such education to others."),Ua=e("
Just like preparing design workshops, those volunteers prepared a number of activities students could easily do without any power – for example, playing with binaries using simple black-and-white cards!"),Ga=e("
Applying teaching methods for and with typing practice"),Qa=e(" Such experience also made me wonder if there would be more effective ways in teaching how to type. None of the team had any knowledge in pedagogy, nor did we learn typing with a software like this."),Za=e("
I recently (2019) had a good discussion with a friend regarding this project, as I am currently planning to re-develop the software. He suggested me to focus on utilising the software in teaching rather than focusing on the typing itself, as most of us ourselves learnt typing naturally rather than by practicing with a software."),za=e("
Inspired by this, and also looking back on one of our first aims to increase literacy, I hope to re-launch this project in open source and suggest a new school curriculum for developing countries, in which students have more chances to read and type."),Va=e(""),Ja=e("
Nyaruka!"),Ya=e('KOICA'),en=e("The main reason we decided to develop another typing practice software was because there was surprisingly no available multilingual solution. The whole point of this is to make education material written in Kinyarwanda language."),tn=e("
The software is mainly for teaching young students, and we also observed many of them are often afraid to use computer for the first time. We tried to make our software joyful so students can enjoy learning to type."),sn=e("
Many students in Rwanda have limited access to books. . We thought we could help them read more by including literatures for long paragraph typing exercises."),an=e("
During our tests, it became clear that students have no problem in following our software if we give them clear instructions. This also meant proper training for teachers on utilising the software is necessary."),nn=e("
Our observations gave some inspirations on features as well. For example, we found out that students tended to keep their eyes on on-screen keyboard, which prevented them from improving – so we implemented a feature to completely hide the keyboard."),on=e("
Although we were aware our software needed to run on low-end machines, there still were things we could not consider, for example, ultra-low resolution. Our test sessions helped us to ensure more coverage for schools.");function rn(){const v=l=>{k("typing-practice",l)};return[(()=>{var l=Gs(),t=l.firstChild,r=t.firstChild,i=t.nextSibling;return x(v,t),s(t,a($,{alt:"Nyaruka! Typing Practice",get class(){return g.bg},srcset:C}),r),s(i,a(_,{get title(){return[Ja()," Typing practice software for Rwanda"]},headline:`
In a hope for better IT education for students who have never seen
a computer in their life
`}),null),s(i,a(j,{get agency(){return Ya()},agencyLink:"https://koica.go.kr/",client:"Rwanda Education Board",clientLink:"https://reb.rw/",overview:`
diff --git a/assets/useInitProject-D_rdr1bV.js b/assets/useInitProject-BYcbynEk.js
similarity index 82%
rename from assets/useInitProject-D_rdr1bV.js
rename to assets/useInitProject-BYcbynEk.js
index 8d4d53f..b2a4795 100644
--- a/assets/useInitProject-D_rdr1bV.js
+++ b/assets/useInitProject-BYcbynEk.js
@@ -1 +1 @@
-import{k as t,l as r}from"./template-ByEHfdYF.js";function d(o,e){const s=new IntersectionObserver(([{isIntersecting:n}])=>{n?document.body.classList.add("intro"):document.body.classList.remove("intro")},{rootMargin:"-24px 0px 0px 0px"});t(()=>{document.body.classList.add(o),s.observe(e)}),r(()=>{document.body.classList.remove(o),s.disconnect()})}export{d as u};
+import{k as t,l as r}from"./template-DEwkplrf.js";function d(o,e){const s=new IntersectionObserver(([{isIntersecting:n}])=>{n?document.body.classList.add("intro"):document.body.classList.remove("intro")},{rootMargin:"-24px 0px 0px 0px"});t(()=>{document.body.classList.add(o),s.observe(e)}),r(()=>{document.body.classList.remove(o),s.disconnect()})}export{d as u};
diff --git a/assets/visual-intelligence-BKHTmL2v.js b/assets/visual-intelligence-DM5cA4cX.js
similarity index 98%
rename from assets/visual-intelligence-BKHTmL2v.js
rename to assets/visual-intelligence-DM5cA4cX.js
index 76998a6..e460f0e 100644
--- a/assets/visual-intelligence-BKHTmL2v.js
+++ b/assets/visual-intelligence-DM5cA4cX.js
@@ -1,4 +1,4 @@
-import{n as se,c as f,b as p,t as s,h as e,u as te,d as V,k as ne,l as oe,e as K,i as n,f as _,E as ie,a as ae,m as re}from"./template-ByEHfdYF.js";import{R as le,H as P,B as Y,I as ce,p as Z}from"./project.module-CfcmTz4O.js";import{C as Q}from"./cards-BzwuqlUe.js";import{G as pe}from"./gallery-DIUdS5aK.js";import{T as de,S as l}from"./title-D785si6n.js";import{a as ge,R as ue,s as c,D as he,c as me,d as E,T as fe}from"./visual_intelligence.module-BTfy8Y1F.js";import"./picture-DoVBIOq-.js";const we="_wrap_gekm5_1",be="_input_gekm5_6",ve="_toggle_gekm5_11",R={wrap:we,input:be,toggle:ve};var ye=s("");function O($){return(()=>{var w=ye(),b=w.firstChild,d=b.nextSibling;return se(b,"change",$.handler),f(r=>{var v=R.wrap,y=R.input,x=R.toggle;return v!==r.e&&p(w,r.e=v),y!==r.t&&p(b,r.t=y),x!==r.a&&p(d,r.a=x),r},{e:void 0,t:void 0,a:void 0}),f(()=>b.checked=$.enabled),w})()}const xe="/assets/ideation-process-lg-COjN3Waf.jpg",Se="/assets/ideation-process-lg-Cw6Imty8.webp",ke="/assets/ideation-process-md-D_GnXJx8.jpg",_e="/assets/ideation-process-md-Cnwk9hdE.webp",je="/assets/ideation-process-sm-Bb_Px0Wz.jpg",$e="/assets/ideation-process-sm-DzIwQg0d.webp",We="/assets/ideation-process-xl-KRY36lMx.jpg",Fe="/assets/ideation-process-xl-54LvSaKA.webp",Be="/assets/ideation-process-xs-Bbm4WPn3.jpg",Ce="/assets/ideation-process-xs-DW-fry78.webp",Pe="/assets/ideation-process-t3DtQZ-I.jpg",De="/assets/ideation-process-r8kfmqUL.webp",Me={xs:Be,sm:je,md:ke,lg:xe,xl:We,default:Pe},Ie={xs:Ce,sm:$e,md:_e,lg:Se,xl:Fe,default:De},Xe={jpg:Me,webp:Ie},Le="/assets/scenario-1-lg-DKqUOH78.jpg",Te="/assets/scenario-1-lg-COSXkqCU.webp",Ae="/assets/scenario-1-md-CWklRUTG.jpg",Ve="/assets/scenario-1-md-BrDMy1n7.webp",Ee="/assets/scenario-1-sm-DSEc51hp.jpg",Re="/assets/scenario-1-sm-gubkIrKT.webp",Oe="/assets/scenario-1-xl-BWcB3iEx.jpg",Ge="/assets/scenario-1-xl-CVIaT5tp.webp",He="/assets/scenario-1-xs-BiHu06WK.jpg",Ue="/assets/scenario-1-xs-BLHr-oca.webp",ze="/assets/scenario-1-ACJHiBEg.jpg",qe="/assets/scenario-1-BniVB34A.webp",Ne={xs:He,sm:Ee,md:Ae,lg:Le,xl:Oe,default:ze},Je={xs:Ue,sm:Re,md:Ve,lg:Te,xl:Ge,default:qe},Ke={jpg:Ne,webp:Je},Ye="/assets/scenario-2-lg-nxkmAU2W.jpg",Ze="/assets/scenario-2-lg-lnabbKpm.webp",Qe="/assets/scenario-2-md-B9AxVBw4.jpg",es="/assets/scenario-2-md-CnpaTFyA.webp",ss="/assets/scenario-2-sm-B_YTdguA.jpg",ts="/assets/scenario-2-sm-htwYrKnm.webp",ns="/assets/scenario-2-xl-FgkwJPFc.jpg",os="/assets/scenario-2-xl-B2FAuJR_.webp",is="/assets/scenario-2-xs-Ehwekpsx.jpg",as="/assets/scenario-2-xs-H3vl0zmh.webp",rs="/assets/scenario-2-0oQaCBec.jpg",ls="/assets/scenario-2-CLNXJOhV.webp",cs={xs:is,sm:ss,md:Qe,lg:Ye,xl:ns,default:rs},ps={xs:as,sm:ts,md:es,lg:Ze,xl:os,default:ls},ds={jpg:cs,webp:ps},gs="/assets/scenario-3-lg-SXfwXYOV.jpg",us="/assets/scenario-3-lg-BzjST8gd.webp",hs="/assets/scenario-3-md-CpvBAmDM.jpg",ms="/assets/scenario-3-md-WPVIqNq6.webp",fs="/assets/scenario-3-sm-BcIzYOHN.jpg",ws="/assets/scenario-3-sm-N7LVeD00.webp",bs="/assets/scenario-3-xl-Y49W2wLf.jpg",vs="/assets/scenario-3-xl-B54hp5SF.webp",ys="/assets/scenario-3-xs-pGBxEMXH.jpg",xs="/assets/scenario-3-xs-B3VJEfqz.webp",Ss="/assets/scenario-3-CyXE6G_T.jpg",ks="/assets/scenario-3-D9v1RzGv.webp",_s={xs:ys,sm:fs,md:hs,lg:gs,xl:bs,default:Ss},js={xs,sm:ws,md:ms,lg:us,xl:vs,default:ks},$s={jpg:_s,webp:js},Ws="/assets/scenario-4-lg-CBCpaRMu.jpg",Fs="/assets/scenario-4-lg-BB5eO-09.webp",Bs="/assets/scenario-4-md-Bf9dmPkr.jpg",Cs="/assets/scenario-4-md-ph0C8NmU.webp",Ps="/assets/scenario-4-sm-BHlFrh8w.jpg",Ds="/assets/scenario-4-sm-DWADzoBU.webp",Ms="/assets/scenario-4-xl-BU-_VuHS.jpg",Is="/assets/scenario-4-xl-B2QrCgiP.webp",Xs="/assets/scenario-4-xs-H843F37i.jpg",Ls="/assets/scenario-4-xs-B1VqBBU8.webp",Ts="/assets/scenario-4-Djfnq_rE.jpg",As="/assets/scenario-4-BuoA9ESb.webp",Vs={xs:Xs,sm:Ps,md:Bs,lg:Ws,xl:Ms,default:Ts},Es={xs:Ls,sm:Ds,md:Cs,lg:Fs,xl:Is,default:As},Rs={jpg:Vs,webp:Es},Os="/assets/scenario-5-lg-DVzyAbaO.jpg",Gs="/assets/scenario-5-lg-BDUV1Fgd.webp",Hs="/assets/scenario-5-md-DfiBCeS5.jpg",Us="/assets/scenario-5-md-DLGQgPly.webp",zs="/assets/scenario-5-sm-DJYumDPG.jpg",qs="/assets/scenario-5-sm-Bm8AL5Df.webp",Ns="/assets/scenario-5-xl-ZRwwenD7.jpg",Js="/assets/scenario-5-xl-Do7didR0.webp",Ks="/assets/scenario-5-xs-BiaIivxh.jpg",Ys="/assets/scenario-5-xs-CiGZKrVt.webp",Zs="/assets/scenario-5-Ce7xtJEL.jpg",Qs="/assets/scenario-5-BmB1WsXg.webp",et={xs:Ks,sm:zs,md:Hs,lg:Os,xl:Ns,default:Zs},st={xs:Ys,sm:qs,md:Us,lg:Gs,xl:Js,default:Qs},tt={jpg:et,webp:st},nt="/assets/scenario-6-lg-B-gSch8r.jpg",ot="/assets/scenario-6-lg-CI9an6Hf.webp",it="/assets/scenario-6-md-CInblE_L.jpg",at="/assets/scenario-6-md-CIF9smUq.webp",rt="/assets/scenario-6-sm-BGjZooiB.jpg",lt="/assets/scenario-6-sm-DU0Nz8Wi.webp",ct="/assets/scenario-6-xl-8bLUaqrC.jpg",pt="/assets/scenario-6-xl-D3yLaRvP.webp",dt="/assets/scenario-6-xs-OrB1yd1_.jpg",gt="/assets/scenario-6-xs-MBUJbM7N.webp",ut="/assets/scenario-6-mIZNyw2V.jpg",ht="/assets/scenario-6-B8GcqKNf.webp",mt={xs:dt,sm:rt,md:it,lg:nt,xl:ct,default:ut},ft={xs:gt,sm:lt,md:at,lg:ot,xl:pt,default:ht},wt={jpg:mt,webp:ft},bt="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3c!--%20Generator:%20Adobe%20Illustrator%2023.0.4,%20SVG%20Export%20Plug-In%20.%20SVG%20Version:%206.00%20Build%200)%20--%3e%3csvg%20version='1.1'%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20x='0px'%20y='0px'%20viewBox='0%200%20453.5%20255.1'%20style='enable-background:new%200%200%20453.5%20255.1;'%20xml:space='preserve'%3e%3cstyle%20type='text/css'%3e%20.st0{fill:none;}%20.st1{fill:none;stroke:%23FFFFFF;}%20.st2{fill:none;stroke:%23FFFFFF;stroke-linecap:round;stroke-linejoin:round;}%20.st3{fill:none;stroke:%23FFFFFF;stroke-linejoin:round;}%20.st4{fill:none;stroke:%23FFFFFF;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:11.594,11.594;}%20%3c/style%3e%3ctitle%3ePage%201%3c/title%3e%3cdesc%3eCreated%20with%20Sketch.%3c/desc%3e%3cg%3e%3cg%20id='Artboard-Copy-6'%20transform='translate(-83.000000,%20-509.000000)'%3e%3cg%20id='Page-1'%20transform='translate(83.000000,%20510.000000)'%3e%3cpolygon%20id='Fill-1'%20class='st0'%20points='386.7,53.3%20386.7,192%20438.9,216%20438.9,29.4%20'/%3e%3cg%20id='Group-28'%3e%3cpolygon%20id='Stroke-2'%20class='st1'%20points='438.7,216.2%20387.6,192.2%20387.6,53.3%20438.7,29.4%20'/%3e%3cpath%20id='Stroke-4'%20class='st2'%20d='M68.4,145.4c-7.2-3.2-12.2-10.4-12.2-18.7c0-8.4,5-15.6,12.2-18.7'/%3e%3cpath%20id='Stroke-6'%20class='st2'%20d='M198.1,126.7c0,40.5-10.9,73.3-24.3,73.3c-13.4,0-24.3-32.8-24.3-73.3s10.9-73.3,24.3-73.3%20C187.2,53.3,198.1,86.2,198.1,126.7z'/%3e%3cpath%20id='Stroke-8'%20class='st2'%20d='M318.8,126.7c0,55.7-5.8,100.8-12.9,100.8c-7.1,0-12.9-45.1-12.9-100.8S298.9,25.9,306,25.9%20C313.1,25.9,318.8,71,318.8,126.7z'/%3e%3cpath%20id='Stroke-10'%20class='st2'%20d='M263,81.7h-38.6c3.8,13.6,5.9,28.8,5.9,44.9c0,16.1-2.1,31.4-5.9,44.9H263%20c-3.8-13.6-5.9-28.8-5.9-44.9C257.1,110.6,259.2,95.3,263,81.7z'/%3e%3cpolyline%20id='Stroke-12'%20class='st2'%20points='68.1,160.9%2013.7,126.7%2068.1,92.5%20'/%3e%3cpath%20id='Stroke-14'%20class='st3'%20d='M62.2,95.2c4.9,5.2,8.4,17.3,8.4,31.5c0,13.9-3.3,25.8-8.1,31.2'/%3e%3cpath%20id='Stroke-16'%20class='st2'%20d='M70.6,126.7l9.7-1.8'/%3e%3cpolyline%20id='Stroke-18'%20class='st4'%20points='99.1,121.4%20149.5,112%20197.3,108.9%20229.6,110.3%20258.5,104.6%20294,89.1%20317.6,83.4%20389.7,83.4%20'/%3e%3cpath%20id='Stroke-20'%20class='st2'%20d='M399.3,83.4h9.9'/%3e%3cpath%20id='Stroke-22'%20class='st2'%20d='M70.6,126.7l9.7,1.8'/%3e%3cpolyline%20id='Stroke-24'%20class='st4'%20points='99.1,132%20149.5,141.4%20197.3,144.5%20229.6,143.1%20258.5,148.8%20294,164.2%20317.6,170%20389.7,170%20'/%3e%3cpath%20id='Stroke-26'%20class='st2'%20d='M399.3,170h9.9'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e",vt="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3c!--%20Generator:%20Adobe%20Illustrator%2023.0.4,%20SVG%20Export%20Plug-In%20.%20SVG%20Version:%206.00%20Build%200)%20--%3e%3csvg%20version='1.1'%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20x='0px'%20y='0px'%20viewBox='0%200%20453.5%20255.1'%20style='enable-background:new%200%200%20453.5%20255.1;'%20xml:space='preserve'%3e%3cstyle%20type='text/css'%3e%20.st0{fill-rule:evenodd;clip-rule:evenodd;fill:%23FEFEFE;}%20.st1{fill:none;stroke:%23231F20;stroke-linecap:round;stroke-linejoin:round;}%20.st2{fill-rule:evenodd;clip-rule:evenodd;fill:%23FFFFFF;stroke:%23020303;}%20.st3{fill-rule:evenodd;clip-rule:evenodd;fill:%23FFFFFF;}%20%3c/style%3e%3ctitle%3ePage%201%3c/title%3e%3cdesc%3eCreated%20with%20Sketch.%3c/desc%3e%3cg%3e%3cg%20id='Artboard-Copy-6'%20transform='translate(-85.000000,%20-1399.000000)'%3e%3cg%20id='Page-1'%20transform='translate(86.000000,%201399.000000)'%3e%3cg%20id='Group-28'%20transform='translate(322.924779,%2030.473684)'%3e%3cpolygon%20id='Fill-1'%20class='st0'%20points='102.4,128.5%2052.9,99.5%203.1,128.5%2052.6,157.4%20'/%3e%3cpolygon%20id='Stroke-3'%20class='st1'%20points='102.4,128.5%2052.9,99.5%203.1,128.5%2052.6,157.4%20'/%3e%3cpolygon%20id='Fill-6'%20class='st0'%20points='39.9,36.3%20-9.9,65.3%203,128.5%2052.8,99.5%20'/%3e%3cpolygon%20id='Stroke-8'%20class='st1'%20points='39.9,36.3%20-9.9,65.3%203,128.5%2052.8,99.5%20'/%3e%3cpolygon%20id='Fill-11'%20class='st0'%20points='65.7,36.7%20115.4,65.7%20102.5,128.9%2052.8,99.9%20'/%3e%3cpolygon%20id='Stroke-13'%20class='st1'%20points='65.7,36.7%20115.4,65.7%20102.5,128.9%2052.8,99.9%20'/%3e%3cpolygon%20id='Fill-16'%20class='st0'%20points='102.4,128.3%20115,80.2%2065.3,109.2%2052.7,157.3%20'/%3e%3cpolygon%20id='Stroke-18'%20class='st1'%20points='102.4,128.3%20115,80.2%2065.3,109.2%2052.7,157.3%20'/%3e%3cpolygon%20id='Fill-21'%20class='st0'%20points='2.8,128.3%20-9.8,80.2%2040,109.2%2052.7,157.3%20'/%3e%3cpolygon%20id='Stroke-23'%20class='st1'%20points='2.8,128.3%20-9.8,80.2%2040,109.2%2052.7,157.3%20'/%3e%3c/g%3e%3cg%20id='Group-4'%3e%3cpolygon%20id='Stroke-26'%20class='st2'%20points='48.9,109.6%2013.2,73.8%2048.9,38%2084.8,73.8%20'/%3e%3cpolygon%20id='Stroke-29'%20class='st2'%20points='84.8,145.5%2048.9,109.6%2084.8,73.8%20120.6,109.6%20'/%3e%3cpolygon%20id='Stroke-30'%20class='st2'%20points='120.6,109.6%2084.8,73.8%20120.6,38%20156.4,73.8%20'/%3e%3cpolygon%20id='Stroke-32'%20class='st2'%20points='120.6,181.3%2084.8,145.5%20120.6,109.6%20156.4,145.5%20'/%3e%3cpolygon%20id='Stroke-33'%20class='st2'%20points='84.8,217.1%2048.9,181.3%2084.8,145.5%20120.6,181.3%20'/%3e%3cpolygon%20id='Stroke-35'%20class='st2'%20points='156.4,217.1%20120.6,181.3%20156.4,145.5%20192.3,181.3%20'/%3e%3c/g%3e%3cpath%20id='Combined-Shape'%20class='st3'%20d='M254.2,134.3v9.3l18.9-16l-18.9-16v9.3h-30v13.4h30V134.3z'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e",yt="/assets/driver-3-D-NZZ1-l.svg",xt="/assets/driver-4-e2O6Wja2.svg";var St=s("Introduction More and more companies are investing into gathering various data, as access to sensors and cloud services has never been easier. But what are they going to do with the flooding amount of data?
Our core objective was to find out ways to make sense of data with rich visual representation."),kt=s("
Challenges"),_t=s(" Not all projects are planned ideally – in fact, it is harder to find a flawless setup. But this project was at another level, leaving us difficult challenges before we could even start. These are key challenges we had to face:"),jt=s("
Approach"),$t=s(" We did not have time to play ping-pong with our client. Instead, we decided to work on top of the challenges to convince the client with our approach."),Wt=s("
Seeking for use cases"),Ft=s(" Our major challenge was to find practical use cases for complex 3d data visualisation. Fortunately, we learnt that visual data mining is indeed a growing field with the help of artificial intelligence. One good example we found was ."),Bt=s("
Extracting design drivers"),Ct=s(" Based on our findings on use cases, we moved on to explore ways to navigate through data. Our learnings and ideation results were compiled into design drivers."),Pt=s("
Scenario generation"),Dt=s(" After defining and selecting our design drivers, we started to narrow down our potential target user to build a complete use case scenario for the visualisation."),Mt=s("
Outcome"),It=s(" During the ideation phase, it became clear that a working prototype is needed to show how interactions with complex data visualisation is done. I worked closely with visual designer and interaction designer to prioritise features to meet the time constraint."),Xt=s("
Based on the generated scenario and key design drivers, I created a fully working prototype to demonstrate how our concepts are achieved with live interaction. Below are some of the concepts we delivered with the prototype."),Lt=s("
Noise Cancelling Errant data can be switched on or off to allow for a pure focus experience or a noisier view to explore new connections.
Try toggling data below:
Clustering and Alignment The easiest way of visualising relevance of data is through clustering them. With the help of latest technologies such as machine learning, this process can be done automatically to discover new patterns."),At=s("
Different Points of View A simple and one of the most common methods to view data in different ways. By combining recipes generated from latest technologies, this simple approach can unveil unexpected insights."),Vt=s("
Learnings"),Et=s(" This was my first project in which I took role completely as a Creative Technologist. On top of the challenges we had for the project, it was a very good opportunity to define my role within the studio as well as to showcase what tangible output we could produce together."),Rt=s("
Pushing our beliefs to the client"),Ot=s(" We had to face a client with very strong opinions towards the visual design output. We were constantly challenged to convince our client with the need of proper user research and use case scenario. We often did not have time to argue with the client, but instead we learnt to move forward believing in our approach to fight back later by showing the result."),Gt=s("
Bridging the creativity and technology"),Ht=s(" Just as the title states, my primary role is to establish a close connection between design and technology within the team. Coming from a design background, I actively participated in design process not only to adjust technical capabilities, but also to expand our design ideas based on technical knowledge."),Ut=s("
Extending Fjord's capabilities in prototyping"),zt=s(" My personal aim in this project was to demonstrate my capabilities in programming to the studio. I pushed the team to create a fully working visualisation rather than a click dummy. I have successfully delivered a high-fidelity prototype within 4-week period, and designers were convinced we could escalate our deliverables with next-level tangible outputs."),qt=s("