← App Development

App Development · PER100

PER100.

Een calorie- en eiwittracker die onder elk getal zet waar het vandaan komt, en verder niets van je vindt. Je scant een product, zoekt het op of typt gewoon wat je at. Onder elk getal staat de bron: het etiket, Open Food Facts of een voedingstabel. Rekent de app zelf iets uit, dan staat dat er ook bij.

ExamenMediavormgeving
UpfrontOpdrachtgever
AndroidTestversie
11.000+Producten
Het Thuis-scherm van PER100
01

Denkwijze

Ik maakte PER100 als examenproject Mediavormgeving, met Upfront als opdrachtgever: het sportvoedingsmerk dat alles wat je moet weten op de voorkant van de verpakking zet. PER100 doet dat voor alles wat je eet.

Bron

Een getal zonder bron is een gok

In mijn enquête onder 24 mensen scoorde de bron van een getal een 4,2 van 5, en het vertrouwen in hun huidige app een 3,0. Daarom zie je de bron in plaats van dat je hem leest: een blauw woord onder elk getal.

Rust

Ontworpen voor wie gevoelig is voor cijfers

Geen rood en geen groen, geen reeksen of badges, alleen een neutrale telling. Een doel bestaat alleen als je het zelf invult. Wat voor die gebruiker veilig is, is voor de rest gewoon rustig.

Moeite

Camera eerst

Van de mensen die stopten met bijhouden, deden 9 van de 12 dat door de moeite. Dus staan barcode en etiket voorop, is zoeken de uitweg en kun je typen zoals je praat.

Bewust niet

Geen account, geen server

Geen verplicht account, geen analytics, geen gewichtslog en geen gezondheidsclaims. En geen Upfront-huisstijl: PER100 kreeg vier eigen kleuren, eigen letters en een eigen iconenset.

02

Wat het doet

ScanDe barcode scannen, of een foto van het etiket maken en de telefoon de voedingswaarde laten lezen.
ZoekOp naam zoeken in ruim 11.000 producten uit voedingstabellen, ook zonder verbinding, en online in Open Food Facts.
Typ wat je atEen zin als "2 boterhammen met kaas en een glas melk" wordt een maaltijd, met elke standaardmaat als schatting gemarkeerd.
Bron bij elk getalOnder elk getal één woord in blauw, en op één tik de uitleg en de som als het berekend is.
Je eerste getalBij de start kies je wat groot op Thuis staat: proteïne, calorieën, koolhydraten, vet of ingrediënten.
AgendaElke dag terugkijken, aanvullen of vooruit plannen, en een regel of dag verplaatsen of kopiëren.
WeekZeven dagen als tabel, met het gemiddelde van alleen de dagen die je bijhield.
Vitamines en mineralenNegentien stoffen per product en per dag, met het percentage van de referentie-inname zoals op een etiket.
DagetiketJe hele dag als één voedingswaardetabel, om te delen als afbeelding.
Licht en donkerElk scherm in allebei, en op Android ook het app-icoon op je beginscherm.
03

Hoe het eruitziet

Testversie
Thuis
01Thuis. Eén groot getal is het beeld, met de bronregel in blauw eronder.
Een product
02Een product als etikettabel, per 100 gram en per portie naast elkaar.
De bron van een getal
03De bron van één getal, op één tik, in gewone taal.
Typ wat je at
04Een gewone zin wordt een maaltijd, elke schatting gemarkeerd.
Het dagetiket
05De dag als voedingswaardetabel. Het idee achter de naam in één scherm.
Thuis in donker
06Donker is een omkering, geen tweede ontwerp.
04

Waar het van gemaakt is

Expo en React NativeEén codebasis in TypeScript, met de schermen als bestanden via Expo Router.
Op het toestelAlles staat in een lokale database, per getal met de bron, de berekening en wanneer.
Camera en ML KitBarcodes met controlecijfer, en etiketten lezen op de telefoon zelf.
Open dataCiqual van ANSES, USDA FoodData Central en Open Food Facts, met hun licentie erbij.
EU 1169/2011Energie, zout en referentie-innames gerekend zoals de etiketwetgeving het voorschrijft.
TestversieEen APK die bij elke ronde automatisch gebouwd wordt, getest op mijn eigen telefoon.