https://archive.martensparrman.com Marten Sparrman / archive Fri, 08 Apr 2022 13:04:28 +0000 https://archive.martensparrman.com en https://archive.martensparrman.com/Homepage Thu, 16 Jan 2020 15:28:35 +0000 Marten Sparrman / archive https://archive.martensparrman.com/Homepage Hello! I’m Mårten, a visual designer based in Stockholm, Sweden. Currently focusing on digital product design/UI design. About me ︎︎︎&nbsp; https://archive.martensparrman.com/About-1 Fri, 08 Apr 2022 13:04:28 +0000 Marten Sparrman / archive https://archive.martensparrman.com/About-1 About ︎︎︎ I started working professionally in 1997 for various advertising agencies, web agencies and production companies before starting my own business in 2007. I've worked with graphics in almost every way - from digital retouch, compositing and animation to package design, brand identity, illustration, web and UI design. Currently focusing on digital product design/UI. Studio Kellerwerk™Digital Design Studio Lidnersplan 8112 53 Stockholm, Swedenkellerwerk.co ︎︎︎︎ Contact Email ︎︎︎LinkedIn︎︎︎ Dribbble︎︎︎ Vimeo︎︎︎ Download ︎ MartenSparrman-Resume.pdf Experience 2022 - TV4 Play Product designer / design systems︎ 2020 -&nbsp; HaaartlandDesign director, product designer, UI/UX designer︎ 2014 - Freelance consultant (Kellerwerk AB)Product designer, UI/UX designer, motion designer, owner/founder Projects / ClientsKlarna, Fortum, Bonnier, Outsiders, Stockholms Stadsbibliotek, Quickspin, Medius, Postkodlotteriet, Schibsted, Wunderino, TV4, ELK Entertainment, Tacton, Badanamu︎ 2013 - 2014 Spring (fka Ayond)Senior Art Director, UI designer, motion designer Projects / ClientsTelia, Quickspin, Unibet, 3M, Tipser, Kvadrat, LO, ProFoto, Medius, Apotek Hjärtat︎ 2007 - 2013 FreelanceVisual designer, art director, motion designer, illustrator, UI designer Projects / ClientsUR, SVT, Gårdsnära, Toca Boca, Jonas Åkerlund, Apoteket, Frank Dandy, Spritmuseum, Pixl Family, Filimundus, Fortum, Wrigley’s, JP Morgan, UA, Peak Performance, Swebus, Mitsemhus, PWP, LeanDev, Hjerta, Waboba︎ 2006 - 2007 Ottoboni GroupMotion designer, art director Projects / Clients Vin &amp; Sprit, McDonalds, Tre, LG, Absolut, Allevo, Skanska, Northern︎ 2003 - 2006 Pine Film / Area Media GroupArt director, VFX compositor, motion designer, editor, illustrator Projects / ClientsWrigley’s, Samsung, Sportguiden, Fagerdala Thiger, Arena Marketwatch, ParkOne, Neoxxline, Premium Wines, QuantumSports︎ 1997 - 2003 White Walls / Comwell / Bild&amp;TextArt director, VFX compositor, motion designer, editor, illustrator Projects / Clients Wrigley’s, TV4, SVT, Ericsson, National Geographic, Brit Awards PromosWannadies feat Petter, Magnus Carlson, Aqua, Pusjkins︎ 1997 Svenska FilminstitutetDigital retouch artist Projects / ClientsComedia Infantil, Tic Tac, Hemsöborna, Änglar finns dom︎ 1996 FilmtecknarnaAnimator (intern) Projects / ClientsPercy Tårar︎ Education 2017 UX designBerghs School of Communication︎ 1995 - 1996 Computer graphics for Media ApplicationsLuleå Tekniska Universitet︎ Clients Klarna, Fortum, Haaartland, Schibsted, Swish, Bonnier, Postkodlotteriet, TV4, SVT, ELK Entertainment, Tre, Quickspin, Telia, Myndigheten för Samhällsskydd och Beredskap (MSB), Randstad, Stockholms Stadsbibliotek, 3M, Vin&amp;Sprit, LG, Sveriges Kommuner och Landsting (SKL), McDonalds ︎ Tools Figma, Sketch, Adobe XD, Zeplin, Abstract, Adobe After Effects, Lottie, Webflow, Adobe Illustrator, Notion, Adobe Photoshop, Slack, Adobe Premiere, Trello, Adobe InDesign, Jira︎ https://archive.martensparrman.com/Archive-1 Thu, 07 Apr 2022 08:09:11 +0000 Marten Sparrman / archive https://archive.martensparrman.com/Archive-1 Mårten Sparrman / archive https://archive.martensparrman.com/Hello Wed, 16 Mar 2022 15:11:39 +0000 Marten Sparrman / archive https://archive.martensparrman.com/Hello ︎︎︎ product designer / design systems @&nbsp;TV4play &nbsp; ︎︎︎ product designer / partner @&nbsp;haaartland&nbsp; UI design, product design, design systems, prototyping + motion design&nbsp;︎︎︎ Stockholm, Sweden ︎︎︎ Selected work https://archive.martensparrman.com/Haaartland Fri, 08 Apr 2022 12:47:54 +0000 Marten Sparrman / archive https://archive.martensparrman.com/Haaartland Haaartland Client Haaartland Platforms iOS, Android, webDate 2020- ︎︎︎ Haaartland’s mission is to enable more togetherness throughout society. A Nordic startup that offers a SaaS-platform where you can build communities that are safe, simple and beautiful. Packed with artificial intelligence, Scandinavian design and with a high focus on integrity. <img width="2250" height="1354" width_o="2250" height_o="1354" data-src="https://freight.cargo.site/t/original/i/32851dcfc78f210f24c2aa87ba666adc000a3ebd485e0af7c32c6e929f28b9a8/HL-lineup.jpg" data-mid="139081555" border="0" src="https://freight.cargo.site/w/1000/i/32851dcfc78f210f24c2aa87ba666adc000a3ebd485e0af7c32c6e929f28b9a8/HL-lineup.jpg" /> My role I was hired to redesign the UX/UI for the whole platform, from webapp to native iOS and Android apps. As well as corporate identity and various marketing materials.&nbsp; <img width="930" height="1884" width_o="930" height_o="1884" data-src="https://freight.cargo.site/t/original/i/4c3eeaee0d08f333692c12083f28ad9498be87374d48ccd894c9c334b61f2de3/feed.png" data-mid="139081558" border="0" src="https://freight.cargo.site/w/930/i/4c3eeaee0d08f333692c12083f28ad9498be87374d48ccd894c9c334b61f2de3/feed.png" /> <img width="930" height="1884" width_o="930" height_o="1884" data-src="https://freight.cargo.site/t/original/i/c71e783abda4c2dd24a145f37e60041ba4a2419d7c89706d399a71e47e7963fd/messages.png" data-mid="139081560" border="0" src="https://freight.cargo.site/w/930/i/c71e783abda4c2dd24a145f37e60041ba4a2419d7c89706d399a71e47e7963fd/messages.png" /> <img width="930" height="1885" width_o="930" height_o="1885" data-src="https://freight.cargo.site/t/original/i/fa753a04bce45b812af0586dc45247d9242785e669e23f2c64aa4e8e013a283f/videocall.jpg" data-mid="139081564" border="0" src="https://freight.cargo.site/w/930/i/fa753a04bce45b812af0586dc45247d9242785e669e23f2c64aa4e8e013a283f/videocall.jpg" /> <img width="930" height="1884" width_o="930" height_o="1884" data-src="https://freight.cargo.site/t/original/i/4bfc5224afc0f941fbba60134598c753c6426814fb61d84114e671b773b4cf1a/discover.png" data-mid="139081557" border="0" src="https://freight.cargo.site/w/930/i/4bfc5224afc0f941fbba60134598c753c6426814fb61d84114e671b773b4cf1a/discover.png" /> <img width="930" height="1884" width_o="930" height_o="1884" data-src="https://freight.cargo.site/t/original/i/878b15fac4de43df4adcdc16b7b1db9385d0f17002038de12bd6b47f999bdd09/room.png" data-mid="139081563" border="0" src="https://freight.cargo.site/w/930/i/878b15fac4de43df4adcdc16b7b1db9385d0f17002038de12bd6b47f999bdd09/room.png" /> <img width="930" height="1884" width_o="930" height_o="1884" data-src="https://freight.cargo.site/t/original/i/fa21fbc583a25129544e400e6323f20b0617fa13c0df303e06e320cba803e85a/polls.png" data-mid="139081561" border="0" src="https://freight.cargo.site/w/930/i/fa21fbc583a25129544e400e6323f20b0617fa13c0df303e06e320cba803e85a/polls.png" /> <img width="930" height="1884" width_o="930" height_o="1884" data-src="https://freight.cargo.site/t/original/i/51cb7ec65ed28d3add8cedb577322333e70e974ce7bbae42adf8239cf39dbe62/landingpage.png" data-mid="139081559" border="0" src="https://freight.cargo.site/w/930/i/51cb7ec65ed28d3add8cedb577322333e70e974ce7bbae42adf8239cf39dbe62/landingpage.png" /> <img width="930" height="1884" width_o="930" height_o="1884" data-src="https://freight.cargo.site/t/original/i/465db8073ba01aaf10fbb4f275ede0a9582079d0f58eeb3ec3e057d1bb9f4747/post.png" data-mid="139081562" border="0" src="https://freight.cargo.site/w/930/i/465db8073ba01aaf10fbb4f275ede0a9582079d0f58eeb3ec3e057d1bb9f4747/post.png" /> A product as complicated as this had to be redesigned from the ground up in order to be successful. It’s basically a Facebook with a feed, a messenger, notification centre etc. I threw everything out from the current version and started building a design system from scratch, creating all the UI components - buttons, input fields, navigation patterns, modals etc.Using Figma for both design and prototyping proved successful. Not having to switch between applications made the work faster and more efficient which allowed us to iterate quickly. <img width="2250" height="1532" width_o="2250" height_o="1532" data-src="https://freight.cargo.site/t/original/i/9e315f43bbdf40be67530662bc8946768a2ae12d5e763b1277e7b146cceb79e1/HL-designsystem.png" data-mid="139949319" border="0" src="https://freight.cargo.site/w/1000/i/9e315f43bbdf40be67530662bc8946768a2ae12d5e763b1277e7b146cceb79e1/HL-designsystem.png" /> With the new platform design, the corporate identity had to follow so I gave the logo and symbol an update. <img width="1024" height="1024" width_o="1024" height_o="1024" data-src="https://freight.cargo.site/t/original/i/91721fef3de85c61dfbee8ea958206f1a92675819a77f73a625c8e4dffa1defc/HL-logo.png" data-mid="139081568" border="0" src="https://freight.cargo.site/w/1000/i/91721fef3de85c61dfbee8ea958206f1a92675819a77f73a625c8e4dffa1defc/HL-logo.png" /> <img width="1024" height="1024" width_o="1024" height_o="1024" data-src="https://freight.cargo.site/t/original/i/0aacae85eb12b2376a8baedeaaef7c8bab1a63b5aee264561e387418d783fd84/HL-icon.png" data-mid="139081566" border="0" src="https://freight.cargo.site/w/1000/i/0aacae85eb12b2376a8baedeaaef7c8bab1a63b5aee264561e387418d783fd84/HL-icon.png" /> I also created a whole new set of icons, and switched fonts to the more suitable Inter. <img width="2250" height="1220" width_o="2250" height_o="1220" data-src="https://freight.cargo.site/t/original/i/2d52accb4e35a37fa22e9ff7af45412d7df2ebc341f96a9572c0e4c7643e36ef/HL-icons.png" data-mid="139081567" border="0" src="https://freight.cargo.site/w/1000/i/2d52accb4e35a37fa22e9ff7af45412d7df2ebc341f96a9572c0e4c7643e36ef/HL-icons.png" /> <img width="1024" height="1024" width_o="1024" height_o="1024" data-src="https://freight.cargo.site/t/original/i/9e73248f6235a8bb715487259b6a7bd6dadfc904eb5ba9923aa3254b4997f4c4/HL-typography.png" data-mid="139081569" border="0" src="https://freight.cargo.site/w/1000/i/9e73248f6235a8bb715487259b6a7bd6dadfc904eb5ba9923aa3254b4997f4c4/HL-typography.png" /> <img width="1024" height="1024" width_o="1024" height_o="1024" data-src="https://freight.cargo.site/t/original/i/d3d5cd08fbbe31c0e5c12b97523c9d408f560f1715dbe7af16cd281f2c6cad03/HL-colors.png" data-mid="139081565" border="0" src="https://freight.cargo.site/w/1000/i/d3d5cd08fbbe31c0e5c12b97523c9d408f560f1715dbe7af16cd281f2c6cad03/HL-colors.png" /> Obviously the website needed some work, as well as pitch deck and various marketing materials. <img width="2250" height="1600" width_o="2250" height_o="1600" data-src="https://freight.cargo.site/t/original/i/b66ec4fc6bc60707541511e4dacf04f6fd3a8795fce2c66a3ca7258abb0825c0/HL-web.png" data-mid="139949372" border="0" src="https://freight.cargo.site/w/1000/i/b66ec4fc6bc60707541511e4dacf04f6fd3a8795fce2c66a3ca7258abb0825c0/HL-web.png" /> ︎︎︎ Previous case Next case ︎︎︎ https://archive.martensparrman.com/Klarna-1 Fri, 01 Apr 2022 10:20:01 +0000 Marten Sparrman / archive https://archive.martensparrman.com/Klarna-1 Klarna ︎︎︎ Project Get Smoooth Date 2018 The Get Smoooth campaign was a collaboration between Klarna and Snoop Dogg. For the campaign, the rapper's new identity, "Smoooth Dogg", was launched along with a collection of smooth items such as golden peanut butter, silky sheets and cashmere toilet paper. Launched in 2019. <img width="2250" height="1354" width_o="2250" height_o="1354" data-src="https://freight.cargo.site/t/original/i/7542ed5bd9c499d145ba4719bbaabf2a5e8cc6846aa03c0ab13a4dd1f17887f1/snoop.jpg" data-mid="138852274" border="0" src="https://freight.cargo.site/w/1000/i/7542ed5bd9c499d145ba4719bbaabf2a5e8cc6846aa03c0ab13a4dd1f17887f1/snoop.jpg" /> My roleI was a part of the sites team, working from a (video heavy) concept design provided by the ad agency. My job was to adapt the campaign concept into a working responsive campaign site. <img width="2250" height="1354" width_o="2250" height_o="1354" data-src="https://freight.cargo.site/t/original/i/2596b67411ab9587c26bf4240cd91bcbcaacce0decf374ca24aa63c09ae83cf3/klarna-smooth_mobile.jpg" data-mid="138269177" border="0" src="https://freight.cargo.site/w/1000/i/2596b67411ab9587c26bf4240cd91bcbcaacce0decf374ca24aa63c09ae83cf3/klarna-smooth_mobile.jpg" /> <img width="2250" height="1600" width_o="2250" height_o="1600" data-src="https://freight.cargo.site/t/original/i/65a00a09848f68e378a6000d163bee666c9194209b90a51ca3bb261031964d8e/klarna-smooth_desktop1.jpg" data-mid="138269199" border="0" src="https://freight.cargo.site/w/1000/i/65a00a09848f68e378a6000d163bee666c9194209b90a51ca3bb261031964d8e/klarna-smooth_desktop1.jpg" /> <img width="2250" height="1600" width_o="2250" height_o="1600" data-src="https://freight.cargo.site/t/original/i/3ffcde129c6c432b2c95a94fc59d313f1ff107c6a4f40079530df79bf13ca14a/klarna-smooth_desktop2.jpg" data-mid="138269200" border="0" src="https://freight.cargo.site/w/1000/i/3ffcde129c6c432b2c95a94fc59d313f1ff107c6a4f40079530df79bf13ca14a/klarna-smooth_desktop2.jpg" /> <img width="2250" height="1600" width_o="2250" height_o="1600" data-src="https://freight.cargo.site/t/original/i/24b531b4da9f026c584b0a955ad76cc90733e6f813eddfbc62c9f9b19787c564/klarna-smooth_desktop3.jpg" data-mid="138269201" border="0" src="https://freight.cargo.site/w/1000/i/24b531b4da9f026c584b0a955ad76cc90733e6f813eddfbc62c9f9b19787c564/klarna-smooth_desktop3.jpg" /> The challengeEvery screen had some kind of motion involved, whether it was video background loops or animated text transitions, stuff was moving. And it had to be smooth obviously. Project Demostore Date 2019 Another project I worked on during my time at Klarna was the Demostore, an interactive guide showing all the features you get with Klarna connected to your store. I was responsible for visual design and UX, prototyping, user research. <img width="2250" height="1600" width_o="2250" height_o="1600" data-src="https://freight.cargo.site/t/original/i/5a42bead01f933497bb7cef5463c6221648c451508c9186dbe1d4426a2bb8bda/klarna-demostore.png" data-mid="139516253" border="0" src="https://freight.cargo.site/w/1000/i/5a42bead01f933497bb7cef5463c6221648c451508c9186dbe1d4426a2bb8bda/klarna-demostore.png" /> Project Klarna.com - Customer journey Date 2018 Animations for the customer journey.&nbsp; ︎︎︎ Previous case Next case ︎︎︎ https://archive.martensparrman.com/Swish Fri, 01 Apr 2022 15:01:00 +0000 Marten Sparrman / archive https://archive.martensparrman.com/Swish Swish Client Swish Collaborator Bontouch Platform iOS, Android Date 2018 ︎︎︎ Swish is one of the biggest mobile payment system in Sweden. The service was launched in 2012 by six large Swedish banks and is used by almost 80% of the swedish population. <img width="1679" height="1120" width_o="1679" height_o="1120" data-src="https://freight.cargo.site/t/original/i/2472dcfef4712b100260c493a4934a43d54af3ed16ee628278406ebda72058d1/swish.jpg" data-mid="139521538" border="0" src="https://freight.cargo.site/w/1000/i/2472dcfef4712b100260c493a4934a43d54af3ed16ee628278406ebda72058d1/swish.jpg" /> My roleI was hired to design and animate three onboarding screens for the new version of the Swish app. One for accessing the profile page, one for adding cards to your swish, and one for quick access to QR scanner. #aftereffects #bodymovin &nbsp; ︎︎︎ Previous case Next case ︎︎︎ https://archive.martensparrman.com/SmartLiving-1 Wed, 16 Mar 2022 12:15:43 +0000 Marten Sparrman / archive https://archive.martensparrman.com/SmartLiving-1 Smart Living Client Fortum Collaborators HiQ, Futurice, Spring Platforms iOS, Android Date 2017-2018 ︎︎︎ &nbsp; &nbsp; Smart homes is becoming part of our daily lives. Fortum wanted a smart home app with a clear and understandable interface, accessible to all residents, young and old. The app needed to work on smartphones as well as a wall mounted tablet, located in the hallway of the apartment. <img width="2250" height="1354" width_o="2250" height_o="1354" data-src="https://freight.cargo.site/t/original/i/165eb515a07cf20e689a347c196c8614aaab532da7dbaf494ca0709fa43baf39/SL-wall.jpg" data-mid="138149015" border="0" src="https://freight.cargo.site/w/1000/i/165eb515a07cf20e689a347c196c8614aaab532da7dbaf494ca0709fa43baf39/SL-wall.jpg" /> My roleI was part of a design team consisting of UX designers and UI/visual designers. I collaborated with two other designers on the overall visual design system - UI, icons and prototypes as well as early concept design and wireframes. The app launched early 2018. <img width="2263" height="1354" width_o="2263" height_o="1354" data-src="https://freight.cargo.site/t/original/i/99bbb46933d05f61ef6eb92d165bba54150bc22412eef59abb35bef4d395819e/SL-devices.png" data-mid="138142246" border="0" src="https://freight.cargo.site/w/1000/i/99bbb46933d05f61ef6eb92d165bba54150bc22412eef59abb35bef4d395819e/SL-devices.png" /> The challengeThe challenge we were facing was making an app that is both visually appealing yet non intrusive in your home setting (tablet app in particular). <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/e9021d38a1735fbe2afe12b82c1cb2fdff73c84570fc3fe6fb5846172bc9f00f/SL9.png" data-mid="138142514" border="0" src="https://freight.cargo.site/w/854/i/e9021d38a1735fbe2afe12b82c1cb2fdff73c84570fc3fe6fb5846172bc9f00f/SL9.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/88e4256f31e36f948b92868bacd59805aa78143d5bcb2fdb0657591dd80276c7/SL10.png" data-mid="138142515" border="0" src="https://freight.cargo.site/w/854/i/88e4256f31e36f948b92868bacd59805aa78143d5bcb2fdb0657591dd80276c7/SL10.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/57d2b60df51a585c9106033088c3d0a6568538b7f9422408f69bacfe2cdda22d/SL11.png" data-mid="138142516" border="0" src="https://freight.cargo.site/w/854/i/57d2b60df51a585c9106033088c3d0a6568538b7f9422408f69bacfe2cdda22d/SL11.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/bab8282bfb13393141253d2ac160c942bc7c888759f3d84feff0bce5129287ca/SL12.png" data-mid="138142517" border="0" src="https://freight.cargo.site/w/854/i/bab8282bfb13393141253d2ac160c942bc7c888759f3d84feff0bce5129287ca/SL12.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/3115aa29d38fccd6082be0c0a07aa0456aee1796b7122d455a4295ae6d7136e9/SL13.png" data-mid="138142518" border="0" src="https://freight.cargo.site/w/854/i/3115aa29d38fccd6082be0c0a07aa0456aee1796b7122d455a4295ae6d7136e9/SL13.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/6cebecf1bc650646abce3a884d7b715292b92c4b1039db98c9ce91e09ba209d0/SL14.png" data-mid="138142520" border="0" src="https://freight.cargo.site/w/854/i/6cebecf1bc650646abce3a884d7b715292b92c4b1039db98c9ce91e09ba209d0/SL14.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/f95177630e98acaa530ebacc1df119736ccb37866b32fa759ab4f7e110572a96/SL15.png" data-mid="138142521" border="0" src="https://freight.cargo.site/w/854/i/f95177630e98acaa530ebacc1df119736ccb37866b32fa759ab4f7e110572a96/SL15.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/556da52e4360d0d08433902209c76a1efb2199c0392798958cda92d61825aeb9/SL16.png" data-mid="138142523" border="0" src="https://freight.cargo.site/w/854/i/556da52e4360d0d08433902209c76a1efb2199c0392798958cda92d61825aeb9/SL16.png" /> The design processWe had numerous workshops to identify the use cases using personas. The UX team also performed qualitative interviews as well as quantitative which provided great insights that really helped in our process. In order to make the app as non intrusive as possible (and to keep down electricity consumption), we decided on a grey base colour. We wanted to make a really calm interface, similar to a home appliance that’s just ‘there’. Using colours mostly to highlight states and going full colour when needed (such as alarm alerts). As the design started to take form, we started making hi-fidelity prototypes that we tested on both interviewees and on random people on the street. This was a great way to get honest feedback on both usability and design and really helped us evolve the product. <img width="1024" height="1024" width_o="1024" height_o="1024" data-src="https://freight.cargo.site/t/original/i/d5712803ffc5bb1de2c7738b1b7fc2864ca946acae2d0d032c3c0918ef42a963/SL-appicon.png" data-mid="138142511" border="0" src="https://freight.cargo.site/w/1000/i/d5712803ffc5bb1de2c7738b1b7fc2864ca946acae2d0d032c3c0918ef42a963/SL-appicon.png" /> <img width="1024" height="1024" width_o="1024" height_o="1024" data-src="https://freight.cargo.site/t/original/i/5d1de26de02a96877e3fdc02c3cf0e094ad5a714e7fb1274a523b71d945efa4a/SL-icons.png" data-mid="138142512" border="0" src="https://freight.cargo.site/w/1000/i/5d1de26de02a96877e3fdc02c3cf0e094ad5a714e7fb1274a523b71d945efa4a/SL-icons.png" /> &nbsp; ︎︎︎ Previous case Next case ︎︎︎ https://archive.martensparrman.com/Charge-Drive Thu, 07 Apr 2022 07:31:40 +0000 Marten Sparrman / archive https://archive.martensparrman.com/Charge-Drive Charge &amp; Drive Client FortumCollaborator Spring Date 2016 ︎︎︎ Webapp for locating charging poles for your hybrid car. App UI and icons. <img width="1024" height="1024" width_o="1024" height_o="1024" data-src="https://freight.cargo.site/t/original/i/d3c19f207b488d45546f8cffdd4ce70392bf889ff904ca0a98d6c577ab8e3ef0/CD-lineup.png" data-mid="138951941" border="0" src="https://freight.cargo.site/w/1000/i/d3c19f207b488d45546f8cffdd4ce70392bf889ff904ca0a98d6c577ab8e3ef0/CD-lineup.png" /> <img width="1024" height="1024" width_o="1024" height_o="1024" data-src="https://freight.cargo.site/t/original/i/db693dd89461cbb5c94ab472e3f9f1b390309d95feb89b264cdb35a67e087871/chargedrive-live.jpg" data-mid="138950145" border="0" src="https://freight.cargo.site/w/1000/i/db693dd89461cbb5c94ab472e3f9f1b390309d95feb89b264cdb35a67e087871/chargedrive-live.jpg" /> My roleI worked on this app on two occasions, first when it was a web-app and a couple of years later when it became a native app. I was in charge of UI design and some UX design. <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/b5c217eb51f627c8b8d9aca6a5d09c5e9957a2ba2e0a3f3ba28367c6233bbe21/CD1.png" data-mid="138951087" border="0" src="https://freight.cargo.site/w/854/i/b5c217eb51f627c8b8d9aca6a5d09c5e9957a2ba2e0a3f3ba28367c6233bbe21/CD1.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/3a2fb814a6a4b81fd5a206d7501849d023073421980db3f31f15da6ada704b04/CD2.png" data-mid="138951088" border="0" src="https://freight.cargo.site/w/854/i/3a2fb814a6a4b81fd5a206d7501849d023073421980db3f31f15da6ada704b04/CD2.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/8491d27a6e4741220188db2a733b9be2d4d0f2531b01f992f266a5b3c29ddee0/CD3.png" data-mid="138951089" border="0" src="https://freight.cargo.site/w/854/i/8491d27a6e4741220188db2a733b9be2d4d0f2531b01f992f266a5b3c29ddee0/CD3.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/bdb21efb21dc071ae19bad12640fc81da159f5245b373747a424bada001b3e02/CD4.png" data-mid="138951090" border="0" src="https://freight.cargo.site/w/854/i/bdb21efb21dc071ae19bad12640fc81da159f5245b373747a424bada001b3e02/CD4.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/2a3a59020f4236f1a953f065773fb3da97f65f42249b45affdcfa0c486ce8f5c/CD5.png" data-mid="138951091" border="0" src="https://freight.cargo.site/w/854/i/2a3a59020f4236f1a953f065773fb3da97f65f42249b45affdcfa0c486ce8f5c/CD5.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/a9db06c064d1820234c4d1249f8848c4ca9b6d06c81df19149deed1f779af3eb/CD6.png" data-mid="138951092" border="0" src="https://freight.cargo.site/w/854/i/a9db06c064d1820234c4d1249f8848c4ca9b6d06c81df19149deed1f779af3eb/CD6.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/5bc443ea497d1890021787136632dd426ac8a33bef4993e7f228ce27f1e9bf18/CD10.png" data-mid="138951096" border="0" src="https://freight.cargo.site/w/854/i/5bc443ea497d1890021787136632dd426ac8a33bef4993e7f228ce27f1e9bf18/CD10.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/c802664a781b9ba70baf7b7c5c26d8a81b009915b81d823a2438298d849f94d7/CD7.png" data-mid="138951093" border="0" src="https://freight.cargo.site/w/854/i/c802664a781b9ba70baf7b7c5c26d8a81b009915b81d823a2438298d849f94d7/CD7.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/f6c573891457a440192f8e55fe4fb42816a0dd7f82a2b89ee9bd98307507ce12/CD8.png" data-mid="138951094" border="0" src="https://freight.cargo.site/w/854/i/f6c573891457a440192f8e55fe4fb42816a0dd7f82a2b89ee9bd98307507ce12/CD8.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/7049da6e5a9957bac78c3c5eb0621ea63cf6d920ba2f60449d7a849d2650faf3/CD9.png" data-mid="138951095" border="0" src="https://freight.cargo.site/w/854/i/7049da6e5a9957bac78c3c5eb0621ea63cf6d920ba2f60449d7a849d2650faf3/CD9.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/b343bbfb7fb1d8661ee4c374811a3296d9f4843f38aba648f1bae6ccbc367bb6/CD11.png" data-mid="138951097" border="0" src="https://freight.cargo.site/w/854/i/b343bbfb7fb1d8661ee4c374811a3296d9f4843f38aba648f1bae6ccbc367bb6/CD11.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/ee1533c78b112c25bc6de80c1ad65af1f75be35b3e6b6823b727244f52a27d04/CD12.png" data-mid="138951098" border="0" src="https://freight.cargo.site/w/854/i/ee1533c78b112c25bc6de80c1ad65af1f75be35b3e6b6823b727244f52a27d04/CD12.png" /> A few icons for the different charger cables, and some navigation icons for the first C&amp;D web app (last image). <img width="1440" height="1440" width_o="1440" height_o="1440" data-src="https://freight.cargo.site/t/original/i/e99f1a912515cfb31a124374af551cb6ecb8d1167df80897bf58bc45a9cb8171/fortum3.png" data-mid="138949265" border="0" src="https://freight.cargo.site/w/1000/i/e99f1a912515cfb31a124374af551cb6ecb8d1167df80897bf58bc45a9cb8171/fortum3.png" /> <img width="1440" height="1440" width_o="1440" height_o="1440" data-src="https://freight.cargo.site/t/original/i/d8795e547eb7cdfcc49df6af6ba6d3c8c3d6352c0468d596fdd5238b19d106ab/fortum4.png" data-mid="138949268" border="0" src="https://freight.cargo.site/w/1000/i/d8795e547eb7cdfcc49df6af6ba6d3c8c3d6352c0468d596fdd5238b19d106ab/fortum4.png" /> <img width="1440" height="1440" width_o="1440" height_o="1440" data-src="https://freight.cargo.site/t/original/i/d5ce81a0c2ffb86b0d364234eb41cf1b2e91b54a2a0315ab8be38237db3372ae/fortum2.png" data-mid="138949263" border="0" src="https://freight.cargo.site/w/1000/i/d5ce81a0c2ffb86b0d364234eb41cf1b2e91b54a2a0315ab8be38237db3372ae/fortum2.png" /> ︎︎︎ Previous case Next case ︎︎︎ https://archive.martensparrman.com/En-Ska-Bort-1 Fri, 01 Apr 2022 14:55:16 +0000 Marten Sparrman / archive https://archive.martensparrman.com/En-Ska-Bort-1 En Ska Bort Client Postkodlotteriet, TV4 Collaborators ELK Entertainment, Netlight Platform iOS, Android Date 2015 ︎︎︎ &nbsp; &nbsp; In the TV quiz show En Ska Bort, the contestants have to figure out&nbsp;which of four pictures in a category does not fit in. In a short span of time of&nbsp;course. The app enables the viewer to participate in real time&nbsp;for a chance to win prizes. <img width="1440" height="1024" width_o="1440" height_o="1024" data-src="https://freight.cargo.site/t/original/i/23964321b171c08a8967a1d3060f13ef2617d6a755d52182a825fd8f3fb64e6c/esb1.png" data-mid="138292436" border="0" src="https://freight.cargo.site/w/1000/i/23964321b171c08a8967a1d3060f13ef2617d6a755d52182a825fd8f3fb64e6c/esb1.png" /> My roleOn this project I was in charge of UI and UX design. I was the only designer on the team, but I&nbsp;worked&nbsp;closely with the show's production company capturing the tone of the show. I also had a good collaboration with&nbsp;the development team during the entire project, figuring out game logic amongst other things. <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/ec8944d78c0340a64bd5dd68e60b49292f2c421cbfe650e9b2c887756a6123f8/ESB-01.png" data-mid="139952076" border="0" src="https://freight.cargo.site/w/854/i/ec8944d78c0340a64bd5dd68e60b49292f2c421cbfe650e9b2c887756a6123f8/ESB-01.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/da4d114366808b30f6e2d6f50f6f944e8ad84d51fae57f224305c2acf22bd8b9/ESB-17.png" data-mid="139952189" border="0" src="https://freight.cargo.site/w/854/i/da4d114366808b30f6e2d6f50f6f944e8ad84d51fae57f224305c2acf22bd8b9/ESB-17.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/4701eeb816764589a8eb1a86b89cdbf0174d16b4bf51317d6f6cb7e5dc8e293d/ESB-03.png" data-mid="139952078" border="0" src="https://freight.cargo.site/w/854/i/4701eeb816764589a8eb1a86b89cdbf0174d16b4bf51317d6f6cb7e5dc8e293d/ESB-03.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/6b4efafb9ea751dfd1091ae721474e395a5acbc6d4b7b2e22eec83f95820a2f6/ESB-02.png" data-mid="139952077" border="0" src="https://freight.cargo.site/w/854/i/6b4efafb9ea751dfd1091ae721474e395a5acbc6d4b7b2e22eec83f95820a2f6/ESB-02.png" /> Playing with the TV ESB synks your app with a specific sound broadcasted from the show allowing competing in real time with the shows contestants.&nbsp; <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/3ebc9139e370bd7ae53b636137680305837bf47d040f2199a55cb7b21a4a1d78/ESB-05.png" data-mid="139952080" border="0" src="https://freight.cargo.site/w/854/i/3ebc9139e370bd7ae53b636137680305837bf47d040f2199a55cb7b21a4a1d78/ESB-05.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/00a3fb54af1498a4d9d54ccb3b018fbf372c4cd2604c48f5248703e8dfd10f98/ESB-06.png" data-mid="139952081" border="0" src="https://freight.cargo.site/w/854/i/00a3fb54af1498a4d9d54ccb3b018fbf372c4cd2604c48f5248703e8dfd10f98/ESB-06.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/58a089fcedd0ad0584bc2c207e0ffe8f21127d80deb5cf631087f7c645a5221f/ESB-07.png" data-mid="139952083" border="0" src="https://freight.cargo.site/w/854/i/58a089fcedd0ad0584bc2c207e0ffe8f21127d80deb5cf631087f7c645a5221f/ESB-07.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/1082516c7844b59e19747625535770d27ccd9180850f27c741d60a858cfb1a3d/ESB-09.png" data-mid="139952086" border="0" src="https://freight.cargo.site/w/854/i/1082516c7844b59e19747625535770d27ccd9180850f27c741d60a858cfb1a3d/ESB-09.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/7e7b14e4fb9d96e2c331dd33e8cbc557c0c27f8fc229ca1f4b93f6381c1b180a/ESB-10.png" data-mid="139952087" border="0" src="https://freight.cargo.site/w/854/i/7e7b14e4fb9d96e2c331dd33e8cbc557c0c27f8fc229ca1f4b93f6381c1b180a/ESB-10.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/eaa9811b439eeb1b3cf2255f4241915dc2fe55c96cb1bc15cd3e4b7bf0bc4a97/ESB-11.png" data-mid="139952088" border="0" src="https://freight.cargo.site/w/854/i/eaa9811b439eeb1b3cf2255f4241915dc2fe55c96cb1bc15cd3e4b7bf0bc4a97/ESB-11.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/6d8708fd49a72e30affa64533fe9384f3816b7ce0ac2cf82411448f74445227d/ESB-08.png" data-mid="139952085" border="0" src="https://freight.cargo.site/w/854/i/6d8708fd49a72e30affa64533fe9384f3816b7ce0ac2cf82411448f74445227d/ESB-08.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/5a6437f82b4d0a87ad5a4261d3b7607c2abfc459a1efc88960f9b42b470db9d7/ESB-18.png" data-mid="139952785" border="0" src="https://freight.cargo.site/w/854/i/5a6437f82b4d0a87ad5a4261d3b7607c2abfc459a1efc88960f9b42b470db9d7/ESB-18.png" /> Various screens, in-game chat, invite options and leaderboards. <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/f8e8ed6f55e5d191527c9f945f4d89070d3d151887a86397d0ec64157491cba7/ESB-13.png" data-mid="139952090" border="0" src="https://freight.cargo.site/w/854/i/f8e8ed6f55e5d191527c9f945f4d89070d3d151887a86397d0ec64157491cba7/ESB-13.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/7650a05acc663a1aeb0faaa2b7da078bdcf52f6929ba4e763e29708d09050a84/ESB-14.png" data-mid="139952092" border="0" src="https://freight.cargo.site/w/854/i/7650a05acc663a1aeb0faaa2b7da078bdcf52f6929ba4e763e29708d09050a84/ESB-14.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/18393e8d875170753baef0ddc62e6f4b27e281d02e0acd3169b18afcf2ff4ba6/ESB-12.png" data-mid="139952089" border="0" src="https://freight.cargo.site/w/854/i/18393e8d875170753baef0ddc62e6f4b27e281d02e0acd3169b18afcf2ff4ba6/ESB-12.png" /> <img width="854" height="1716" width_o="854" height_o="1716" data-src="https://freight.cargo.site/t/original/i/7b1b3cceb9d9b7f9ffe95a72077de79b8794fe555b0435e12d53a59061e23765/ESB-04.png" data-mid="139952079" border="0" src="https://freight.cargo.site/w/854/i/7b1b3cceb9d9b7f9ffe95a72077de79b8794fe555b0435e12d53a59061e23765/ESB-04.png" /> ︎︎︎ Previous case Next case ︎︎︎