Qstars app — Vi byggde den.
/VISIARC
Kort om appen
Projektstart. Januari 2024
Lansering. 6 maj 2026 (tyst)
Leverans. UX, grafisk design, arkitektur och utveckling (iOS-app & Android-app)
Betalningsmetoder. Qstar-kundklubbkort, kortbetalningar, Apple Pay och Google Pay
Compliance. PCI DSS-granskning genomförd. WCAG-förstudie. Löpande tillgänglighetstestning. BankID-inloggning.
När Qstar bestämde sig för att det var dags att erbjuda möjligheten att tanka med app var de tydliga med att det skulle göras rätt.
Smidig och enklast möjliga apptankning blev vårt uppdrag. All friktion ska tas bort.
Dessutom ska det vara lika enkelt att bli Qstar-Klubbmedlem i appen. Det kan man nu.
Inga onödiga funktioner finns i appen. Det är enkelt att hitta till närmsta station för att tanka.
Väl på plats startar du pumpen och tankar. Föregående tankning kommer appen ihåg.
Stoppa ned mobilen i fickan när du tankar. När du är klar får du en notifiering och kvitto finns.
Med kvittot direkt i appen vet du att pumpen är stängd. Ingen kan tanka på ditt kort.
» Att tanka på Qstar ska vara smidigt, enkelt och snabbt. Vi förenklar vardagen för våra kunder genom att göra tankningen snabbare och mer tillgänglig. «
— Ann-Sofi Karlsson,
verksamhetsutvecklare,
Qstar
Qstar-appen finns att ladda ner från både App Store (för iPhone & iPad) och Google Play (för Android).
Qstar-appen
VISIARC har designat och byggt Qstars mobilapp för iOS och Android, lanserad den 6 maj 2026. Vi ansvarade för hela leveransen i ett sammanhållet team: UX, grafisk design och arkitektur för de båda apparna. Projektet startade i januari 2024.
Utgångsläget var bra med en mogen marknad där beprövade sätt att tanka redan var etablerade. Qstar har dessutom en tydlig position på marknaden och en lång historik. Utmaningen blev att leverera det som Qstar uttalat; tanka smidigt, enkelt och snabbt med appen. Designprocessen började med att mappa upp de betalningsmöjligheter som skulle erbjudas och hur respektive påverkade betalningsprocessen. Med detta blev utmaningen att genom listig design minimera antalet nödvändiga interaktioner för respektive betalningsmetod. Betala med Qstar-kort och fakturabetalning blev enklast. Tillhandahålla kreditkortsbetalning från kunder som kanske var stammisar men som alltid tankade med kreditkort krävde mest, och inte minst för att PCI-kraven finns där, d.v.s. de specifika mycket högre kraven som ställs när information som finns på betalkort (VISA och Mastercard) ska hanteras. Apple Pay och Google Pay är också väldigt enkla att betala med.
När det enkla blir det svåra
Kvittot på bra design. Inte förrän användarna fick frågan om de tyckte det var enkelt, det var först då reflekterade de över saken. Många svarade att det var enklare än de trodde. Då visste vi som designat upplevelsen att apptankningen blivit både smidig och självförklarande. Men att få saker att kännas enkla och naturliga kan kräva mycket designarbete. I Qstar-fallet ska appen prata med en backend via ett säkert API som i sin tur ska kommunicera med pumpen på plats på stationen. Där är det mycket som kan hända och appen är beroende av flera andra system och aktörer. Och det ska gå snabbt. När vi fick feedback från vissa användare att det här var den enklaste appen att tanka med, då kände vi oss stolta. Målet var nått.
Appen som berättar i bilder
Qstar är ett folkligt varumärke. Qstar har ett spännande tilltal och deras sätt att kommunicera utgår ifrån vanliga och riktiga människor. Vi ville förmedla detta och ta det med oss in i appen och låta den spegla det. I stället för generella illustrationer och grafik använder vi fotografier på riktiga stationer och situationer: en farfar som tankar, en kund som väntar på att pumpen ska starta, tre EPA-tjejer vid en station. Det är bilder som känns igen och som alla kan relatera till, ofta med en känsla av att vara på väg. Se bilderna från appen ovan.
Ett team på VISIARC
VISIARC levererade allt: UX-design med flödesdesign, grafisk design och visuell identitet i appen, systemarkitektur för både iOS-appen och Android-appen. Parallellt, i samma team. Det är ovanligare än det låter. Många projekt jonglerar mellan en UX-byrå, en formgivare och en teknisk appkonsult, med allt det som det kan leda till vad gäller kommunikations- och tolkningsproblem. Här fattades alla beslut i ett team med en gemensam förståelse av vad vi försökte åstadkomma.
WCAG-arbetet var en del av det från start. Vi genomförde en tillgänglighetsstudie tidigt i projektet för att säkerställa rätt grund, och testade löpande under hela utvecklingen. Tillgänglighetsarbetet är en process utan slut där vi lär oss mer under resans gång.
Betalningsmetoder: säkerhet som inte syns
Appen stödjer Qstar-kort, Visa, Mastercard, Apple Pay och Google Pay. Autentisering vid tankning sker med Face ID eller Touch ID. För användaren är det sömlöst. Bakom kulisserna innebar det att vi genomgick en PCI DSS-granskning, den internationella säkerhetsstandarden för kortdatahantering. Det är en grundlig process som täcker arkitektur, kod och rutiner. Den granskningen är ett kvitto som inte alla utvecklingsteam kan visa upp.
» Vi fick komma in från dag ett. Det är ovanligare än man kan ana, och är förutsättningen för att en app ska bli riktigt bra. Qstar gav oss det förtroendet och har varit en fantastisk kund att jobba med fram till lansering. Nära, beslutsamt och med en klar bild av vad de ville uppnå. Vi blickar nu framåt tillsammans. «
— Peter Lindgren,
VD VISIARC
Samarbetet
Partnerskap som växte fram. Projektet sträckte sig över drygt två år. För att det ska fungera måste kunden och leverantören vara beredda att fatta beslut gemensamt, och stå för dem. Vi på VISIARC vill verkligen uttrycka tacksamhet och respekt för hur Qstar drivit sitt approjekt. Vi tillsammans med övriga aktörer bjöds in från tidigast möjliga tidpunkt och alla har varit med och bidragit hela vägen från att vi visade upp de första designprototyperna till leverans av första versionen. Saker som ska bli riktigt bra måste ibland få ta sin tid. Med engagemang, tålamod, uthållighet och tydliga mål kan vi på VISIARC bara känna hur positivt det här samarbetet har varit. Utan de tajta och frekventa dialogerna hade resultatet aldrig blivit så bra som det nu är.
Qstar har fungerat väl i den rollen. Tydliga prioriteringar, snabba beslut och en klar bild av sina användare. Det är det som gör att ett nära samarbete ger bättre resultat än ett traditionellt beställar-leverantörsförhållande. Relationer byggs under produktskapandet, vilket formar partnerskap som varar.
Vad händer nu?
Appen är lanserad men projektet är inte slut. Det tar aldrig slut. Vi fortsätter nu i en process att vidareutveckla Qstars app: fler funktioner, erbjudanden och kommunikationskanaler mot fler Qstars kunder är inplanerade.
Släppet den 6 maj firades med tårta. Under sommaren 2026 syns Qstar i bred media med sina kampanjer.
Bygger du en app med kortbetalning?
Vi är PCI DSS-granskade och har levererat hela kedjan från UX, design, arkitektur, iOS och Android med samma team i ett och samma projekt. Hör av dig.
