Service design

För oss är Service design - eller tjänsedesign - en uppsättning etablerade metoder för att sätta användarupplevelsen i centrum och att designa tjänster som gör rätt sak, på rätt sätt, vid rätt tillfälle. Och det bästa av allt: ni och era kunder är starkt delaktiga i hela innovationsprocessen.

Kundcentrerad utveckling av tjänster

Service design handlar om att skapa en röd tråd i interaktionen mellan människa och teknik och ett helhetsperspektiv kring hur er kund upplever en tjänst, eller hela ert varumärke.

I vårt fall är vi naturligtvis inriktade på skapandet av digitala tjänster, men för att utforma dessa på rätt sätt behöver vi ur ett kund- och organisationsperspektiv  förstå även hur andra delar inverkar. Till exempel den fysiska upplevelsen av att besöka en skobutik, besöka sin bank inför ett husköp eller stå i en liftkö i kraftigt snöfall och med kurrande mage.

  • Grunden i Service design är att förstå kundens upplevelse av en befintlig tjänst, eller förväntningar på en helt ny tjänst, och att använda dessa insikter i design- och utvecklingsarbetet. 

Stegen mot en genomtänkt digital tjänst

Service design i flera steg

När vi designar en tjänst rör vi oss genom olika faser. Vi söker efter fakta och insikter, skapar en bild av helheten och försöker sedan ta fram en prototyp som visualiserar tjänsten.

Det går att använda alla, eller bara vissa delar, av de metoder vi använder beroende på vilken typ av tjänst som ska utvecklas och dess komplexitet. Service design är i allra högsta grad anpassningsbart.

Processen för Service design

1. Research kring användarbehov & beteenden

Det finns olika sätt att få en bild av nuläget och användarnas behov. I vårt fall använder vi mest fokusgrupper och djupintervjuer. Det är viktigt att genomföra denna typ av undersökningar på rätt sätt för att vara säker på att det finns en tillförlitlighet och validitet i de svar vi får.

I vissa fall är också fältstudier eller övervakade användartester intressanta för att bygga upp förståelse kring eventuella problem eller hinder som en användare upplever.

2. Kundresekartläggning

Kundresekartläggning (Customer journey mapping) är ett perfekt workshop-format för att både visualisera hur en kund använder och upplever en tjänst idag och hur en ideal utformning av en tjänst borde se ut.

3. Service Blueprints

Service Blueprints är något förenklat att ta kundresekartan och också visualisera vad som händer eller behöver hända inom era väggar (bortom kundens synfält) för att allt ska fungera. Vi adderar begreppet ”back stage” som syftar till att rita in era roller, processer och stödsystem som finns på kartan för att leverera er tjänst till kunden.

En service blueprint ska inte förväxlas med en systemöversikt eller lösningsarkitektur även om den innehåller en teknisk nivå. Däremot är en Service Blueprint i det närmaste ovärdelig när vi ska ta fram ett lösningsförslag för den tjänst som ska utvecklas.

4. Skapa en designprototyp

Sista steget i en designdriven utveckling av en tjänst, innan den är redo att börja byggas,  är att arbeta fram en designprototyp för en tänkta digitala tjänsten. Så att vi sedan kan testa prototypen på riktiga användare och få en bekräftelse på att vi designat en tjänst som uppfyller behovet. Och är så lättanvänd som det bara går!

  • Vi följer utvalda delar av Googles metodik för designprintar, framförallt hur vi skissar och arbetar fram prototyper som sedan kan testas mot målgruppen.

Det är en effektiv metodik som uppmuntrar samverkan, innovation och snabba beslut.

5. Dags för digital design, färg & form.

När prototypen är förankrad och testad är det dags att skapa det slutliga gränssnittet som användaren ska mötas av och interagera med. Detta kallas ofta UI – user interface. Här är färg, form och typografi viktiga delar. Det är här vi knyter ihop en användbar design med ert varumärke och den känsla ni vill förmedla via ert designspråk.

Ofta tar vi även fram ett så kallat designsystem som innehåller riktlinjer och regler för hur ikoner, element, färger, typsnitt mm ska användas i alla era digitala gränssnitt och kanaler. Fördelen med att ha ett designsystem är att vi säkerställer en likartad upplevelse av ert varumärke i alla kanaler.

Vi arbetar främst med designverktyget Figma för att ta fram digital design och digitala designsystem. Starka varumärken som Audi, Uber och Slack jobbar alla med designsystem via Figma.

Nyfiken på Service design?

Prata med Mattias om hur vi kan hjälpa er designa en tjänst.


Mattias Berglund

Head of strategy

Kontakta oss

  • Läs vår integritetspolicy här.
  • Detta fält används för valideringsändamål och ska lämnas oförändrat.
Address Book Address Card adjust Alarm Clock align-center align-justify align-left align-right Allergies ambulance American Sign Language Interpreting Anchor Angle Double Down Angle Double Left Angle Double Right Angle Double Up angle-down angle-left angle-right angle-up Archive Alternate Arrow Circle Down Alternate Arrow Circle Left Alternate Arrow Circle Right Alternate Arrow Circle Up Alternate Arrow Down Alternate Arrow from Bottom Alternate Arrow from Left Alternate Arrow from Right Alternate Arrow from Top Alternate Arrow Left Alternate Arrow Right Alternate Arrow Square Down Alternate Arrow Square Left Alternate Arrow Square Right Alternate Arrow Square Up Alternate Arrow to Bottom Alternate Arrow to Left Alternate Arrow to Right Alternate Arrow to Top Alternate Arrow Up Arrow Circle Down Arrow Circle Left Arrow Circle Right Arrow Circle Up arrow-down Arrow from Bottom Arrow from Left Arrow from Right Arrow from Top arrow-left arrow-right Arrow Square Down Arrow Square Left Arrow Square Right Arrow Square Up Arrow to Bottom Arrow to Left Arrow to Right Arrow to Top arrow-up Arrows Alternate Arrows Alternate Arrows Horizontal Alternate Arrows Vertical Arrows Horizontal Arrows Vertical Assistive Listening Systems asterisk At Audio Description backward Badge Check Badge Balance Scale ban Band-Aid barcode Barcode Alternate Barcode Read Barcode Scan Bars Baseball Baseball Ball Basketball Ball Basketball Hoop Bath Battery Bolt Battery Empty Battery Full Battery 1/2 Full Battery 1/4 Full Battery Slash Battery 3/4 Full Bed beer bell Bell Slash Bicycle Binoculars Birthday Cake Blind bold Lightning Bolt Bomb book bookmark Bowling Ball Bowling Pins Box Box Check Boxes Boxing Glove Braille Briefcase Medical Briefcase Browser Bug Building bullhorn Bullseye Burn Bus Calculator Calendar Alternate Calendar Calendar Check Calendar Edit Calendar Exclamation Calendar Minus Calendar Plus Calendar Times camera Alternate Camera Retro Camera Capsules Car Caret Circle Down Caret Circle Left Caret Circle Right Caret Circle Up Caret Down Caret Left Caret Right Caret Square Down Caret Square Left Caret Square Right Caret Square Up Caret Up Shopping Cart Arrow Down Add to Shopping Cart certificate Area Chart Bar Chart Line Chart Pie Chart Check Check Circle Check Square Chess Chess Bishop Alternate Chess Bishop Chess Board Chess Clock Alternate Chess Clock Chess King Alternate Chess King Chess Knight Alternate Chess Knight Chess Pawn Alternate Chess Pawn Chess Queen Alternate Chess Queen Chess Rook Alternate Chess Rook Chevron Circle Down Chevron Circle Left Chevron Circle Right Chevron Circle Up Chevron Double Down Chevron Double Left Chevron Double Right Chevron Double Up chevron-down chevron-left chevron-right Chevron Square Down Chevron Square Left Chevron Square Right Chevron Square Up chevron-up Child Circle Circle Notched Clipboard Clipboard Check Clipboard List Clock Clone Closed Captioning Cloud Cloud Download Cloud Download Alternate Cloud Upload Cloud Upload Alternate Club Code Code Branch Code Commit Code Merge Coffee cog cogs Columns comment Alternate Comment comments Compass Compress Alternate Compress Compress Wide Conveyor Belt Conveyor Belt Alternate Copy Copyright Credit Card Credit Card Blank Credit Card Front Cricket crop Crosshairs Cube Cubes Curling Cut Database Deaf Desktop Alternate Desktop Diagnoses Diamond DNA Dollar Sign Dolly Dolly Empty Dolly Flatbed Dolly Flatbed Alternate Dolly Flatbed-empty Dot Circle Download Dumbbell Edit eject Horizontal Ellipsis Alternate Horizontal Ellipsis Vertical Ellipsis Alternate Vertical Ellipsis Envelope Envelope Open Envelope Square eraser Euro Sign Exchange Alternate Exchange exclamation Exclamation Circle Exclamation Square Exclamation Triangle Expand Alternate Expand Expand Arrows Alternate Expand Arrows Expand Wide External Link Alternate External Link External Link Square Alternate External Link Square Eye Eye Dropper Eye Slash fast-backward fast-forward Fax Female Field Hockey fighter-jet File Alternate File Archive File Audio File Check File Code File Edit File Excel File Exclamation File Image File Medical File Medical File Alternate Minus File PDF File Plus File Powerpoint File Times File Video File Word File Film Alternate Film Filter fire fire-extinguisher First Aid flag flag-checkered Flask Folder Folder Open font Football Ball Football Helmet Forklift forward Frown Futbol Gamepad Gavel Gem Genderless gift Martini Glass Globe Golf Ball Golf Club Graduation Cap H Square H1 Heading H2 Heading H3 Heading Hand Holding Box Lizard (Hand) Paper (Hand) Peace (Hand) Hand Pointing Down Hand Pointing Left Hand Pointing Right Hand Pointing Up Pointer (Hand) Hand Receiving Rock (Hand) Scissors (Hand) Spock (Hand) Handshake Hashtag HDD heading headphones Heart Heartbeat Hexagon History Hockey Puck Hockey Sticks home hospital Hospital Alternate Hospital Symbol Hourglass Hourglass End Hourglass Half Hourglass Start I Beam Cursor Identification Badge Identification Card Identification Card Alternate Image Images inbox Inbox In Inbox Out Indent Industry Alternate Industry Info Info Circle Info Square Inventory italic Jack-o'-lantern key Keyboard Language Laptop leaf Lemon Level Down Level Down Alternate Level Up Level Up Alternate Life Ring Lightbulb Link Turkish Lira Sign List List Alternate list-ol list-ul location-arrow lock Alternate Lock Lock Open Alternate Lock Open Alternate Long Arrow Down Alternate Long Arrow Left Alternate Long Arrow Right Alternate Long Arrow Up Long Arrow Down Long Arrow Left Long Arrow Right Long Arrow Up Low Vision Luchador magic magnet Male Map map-marker Map Marker Alternate Map Pin Map Signs Mars Mars Double Mars Stroke Mars Stroke Horizontal Mars Stroke Vertical medkit Meh Mercury Microchip microphone Alternate Microphone Microphone Slash minus Minus Circle Minus Hexagon Minus Octagon Minus Square Mobile Phone Alternate Mobile Mobile Android Alternate Mobile Android Money Bill Money Bill Alternate Moon Motorcycle Mouse Pointer Music Neuter Newspaper Medical Notes Object Group Object Ungroup Octagon Outdent Paint Brush Pallet Pallet Alternate Paper Plane Paperclip paragraph Paste pause Pause Circle Paw Pen Alternate Pen Pen Square pencil Alternate Pencil Pennant Percent Phone Phone Slash Phone Square Phone Volume Pills plane Alternate Plane play Play Circle Plug plus Plus Circle Plus Hexagon Plus Octagon Plus Square Podcast Poo Portrait Pound Sign Power Off Prescription Bottle Prescription Bottle Alternate print Procedures Puzzle Piece qrcode Question Question Circle Question Square Quidditch quote-left quote-right Racquet random Landscape Rectangle Portrait Rectangle Wide Rectangle Recycle Redo Alternate Redo Registered Trademark Repeat Repeat 1 Alternate Repeat 1 Alternate Repeat Reply reply-all Retweet Alternate Retweet road rocket rss RSS Square Ruble Sign Indian Rupee Sign Save Scanner Scanner Keyboard Scanner Touchscreen Scrubber Search Search Minus Search Plus Server Share Share All Alternate Share Alternate Share Square Share Square Shekel Sign shield Alternate Shield shield Ship Shipping Fast Shipping Timed Shopping Bag Shopping Basket shopping-cart Shower Shuttlecock Sign In Alternate Sign In Sign Language Sign Out Alternate Sign Out signal Sitemap Horizontal Sliders Square Horizontal Sliders Vertical Sliders Square Vertical Sliders Smile Smoking Snowflake Sort Sort Alpha Down Sort Alpha Up Sort Amount Down Sort Amount Up Sort Down (Descending) Sort Numeric Down Sort Numeric Up Sort Up (Ascending) Space Shuttle Spade Spinner Spinner Third Square Square Full Star Exclamation Star star-half step-backward step-forward Stethoscope Sticky Note stop Stop Circle Stopwatch Street View Strikethrough subscript Subway Suitcase Sun superscript Sync Alternate Sync Syringe table Table Tennis tablet Alternate Tablet Tablet Android Alternate Tablet Android Rugged Tablet Tablets Tachometer Alternate Tachometer tag tags Tasks Taxi Tennis Ball Terminal text-height text-width th th-large th-list Thermometer Thermometer Empty Thermometer Full Thermometer 1/2 Full Thermometer 1/4 Full Thermometer 3/4 Full thumbs-down thumbs-up Thumbtack Ticket Alternate Ticket Times Times Circle Times Hexagon Times Octagon Times Square tint Toggle Off Toggle On Trademark Train Transgender Alternate Transgender Trash Alternate Trash Tree Tree Alternate Triangle trophy Alternate Trophy truck TTY Television Retro Televison Umbrella Underline Undo Alternate Undo Universal Access University unlink unlock Alternate Unlock Upload US Dollar Circle US Dollar Square User Alternate User User Circle user-md Add User User Secret Remove User Users Utensil Fork Utensil Knife Utensil Spoon Utensils Alternate Utensils Venus Venus Double Venus Mars Vial Vials Video Volleyball Ball volume-down volume-mute volume-off volume-up Warehouse Warehouse Alternate Watch Weight Wheelchair Whistle WiFi Window Alternate Window Window Close Window Maximize Window Minimize Window Restore Won Sign Wrench X-Ray Yen Sign 500px Accessible Icon Accusoft App.net Adversal affiliatetheme Algolia Amazon Amazon Pay Amilia Android AngelList Angry Creative Angular App Store iOS App Store Apper Systems AB Apple Apple Pay Asymmetrik, Ltd. Audible Autoprefixer avianex Aviato Amazon Web Services (AWS) Bandcamp Behance Behance Square BIMobject Bitbucket Bitcoin Bity Font Awesome Black Tie BlackBerry Blogger Blogger B Bluetooth Bluetooth BTC Büromöbel-Experte GmbH & Co. KG. BuySellAds Amazon Pay Credit Card American Express Credit Card Apple Pay Credit Card Diner's Club Credit Card Discover Credit Card JCB Credit Card MasterCard Credit Card Paypal Credit Card Stripe Credit Card Visa Credit Card Centercode Chrome cloudscale.ch Cloudsmith cloudversify Codepen Codie Pie Connect Develop Contao cPanel Creative Commons CSS 3 Logo Alternate CSS3 Logo Cuttlefish Dungeons & Dragons DashCube Delicious Logo deploy.dog Deskpro deviantART Digg Logo Digital Ocean Discord Discourse DocHub Docker Draft2digital Dribbble Dribbble Square Dropbox Drupal Logo Dyalog Earlybirds Edge Browser Elementor Ember Galactic Empire Envira Gallery Erlang Ethereum Etsy ExpeditedSSL Facebook Facebook F Facebook Messenger Facebook Square Firefox First Order firstdraft Flickr Flipboard Fly Font Awesome Alternate Font Awesome Font Awesome Flag Fonticons Fonticons Fi Fort Awesome Alternate Fort Awesome Forumbee Foursquare Free Code Camp FreeBSD Get Pocket GG Currency GG Currency Circle Git Git Square GitHub Alternate GitHub GitHub Square GitKraken GitLab Gitter Glide Glide G Gofore Goodreads Goodreads G Google Logo Google Drive Google Play Google Plus Google Plus G Google Plus Square Google Wallet Gratipay (Gittip) Grav Gripfire, Inc. Grunt Gulp Hacker News Hacker News Square Hips HireAHelper Hooli Hotjar Houzz HTML 5 Logo HubSpot IMDB Instagram Internet-explorer ioxhost iTunes Itunes Note Jenkis Joget Joomla Logo JavaScript (JS) JavaScript (JS) Square jsFiddle KeyCDN Kickstarter Kickstarter K KORVUE Laravel last.fm last.fm Square Leanpub Less Line LinkedIn LinkedIn In Linode Linux lyft Magento MaxCDN MedApps Medium Medium M MRT Meetup Microsoft Mix Mixcloud Mizuni MODX Monero Napster Nintendo Switch Node.js Node.js JS npm NS8 Nutritionix Odnoklassniki Odnoklassniki Square OpenCart OpenID Opera Optin Monster Open Source Initiative page4 Corporation Pagelines Palfed Patreon Paypal Periscope Phabricator Phoenix Framework PHP Pied Piper Logo Alternate Pied Piper Logo Pied Piper PP Logo (Old) Pinterest Pinterest P Pinterest Square PlayStation Product Hunt Pushed Python QQ QuinScape Quora Ravelry React Rebel Alliance red river reddit Logo reddit Alien reddit Square Rendact Renren replyd Resolving Rocket.Chat Rockrms Safari Sass SCHLIX Scribd Searchengin Sellcast Sellsy Servicestack Shirts in Bulk SimplyBuilt SISTRIX skyatlas Skype Slack Logo Slack Hashtag Slideshare Snapchat Snapchat Ghost Snapchat Square SoundCloud Speakap Spotify Stack Exchange Stack Overflow StayLinked Steam Steam Square Steam Symbol Sticker Mule Strava Stripe Stripe S Studio Vinari StumbleUpon Logo StumbleUpon Circle Superpowers Supple Telegram Telegram Plane Tencent Weibo ThemeIsle Trello TripAdvisor Tumblr Tumblr Square Twitch Twitter Twitter Square Typo3 Uber UIkit Uniregistry Untappd USB us-Sunnah Foundation Vaadin Viacoin Viadeo Viadeo Square Viber Vimeo Vimeo Square Vimeo Vine VK VNV Vue.js Weibo Weixin (WeChat) What's App What's App Square WHMCS Wikipedia W Windows WordPress Logo Wordpress Simple WPBeginner WPExplorer WPForms Xbox Xing Xing Square Y Combinator Yahoo Logo Yandex Yandex International Yelp Yoast YouTube YouTube Square