Design // ID // Wireframes

INDEX
Enkel wireframe av index. Siden har fire deler.

Del en er header med logo, iconer for mail, insta og face, og et icon som leder rett til bestillingssjema.

Del to er menyen, med ikoner og «tittel».

Del tre er en newsfeed. De små sirklene til venstre er tid for publisering. Hver innlegg har et teaserbilde, tittel og et utdrag fra starten av artikkelen.

Del fire er en footer med adresse, telefon, og de samme medieknappene som øvert i headeren. Denne delen er fast på alle sider.


Underside

En generell fremstilling av en underside. Denne kan variere noe etter informasjon, bilder, om det er en «bestill her»-knapp osv…

Del 1 er samme header på alle sider.

Del to er menyen, som har blitt mindre og lagt som en linje under headeren. Her er det bare iconer, og ikke tittel som på index.

Del 3 er innlegget med tekst og bilder. Øvert i denne rammen er det undermeny for iconet som er valgt i hovedmenyen.

Del 4 er samme footer.


Bestillingsskjema

Denne wireframen viser ikke hvordan menyen ser ut for brukeren, men denne er fremstilt fult utbrett med alle muligheter, valg og knapper, under alle kategorier (se kundeversjon under).

Bestillingsskjemaet er delt i tre. Produkter av Angus, produkter av gris og andre produkter (egg, kylling, korn…). Det er varierende om det er et-valgs-dropdown, eller at brukeren kan huke av for flere valg.

Bestillingsskjema for kunden

Når brukeren klikker seg inn i bestillingsskjemaet, vil det bare være Angus-skjemaet som er fult synlig, mens gris og andre produkter vil kun være synlig med logo under Angusskjemaet. Jeg har valgt å gjøre det sånn for at ikke kunden skal få alt for mange dyr/produkter/bokser å forholde seg til. Det er en «legg i handlekurv»-knapp under hver av de tre skjemaene. Når kunden har lagt kjøttproduktene sine i handlekurven, så lukker Angusskjemaet seg, og gris åpner seg. Om ikke brukeren vil vil ha noen produkter av svin, så trykker den på iconet under med «andre produkter», og skjemaet for gris lukker seg og «andre produkter» åpner seg. Nederst på siden, er det en «gå til handlekurv»-knapp.


Handlekurv

Når brukeren har lagt det som den ønsker i handlekurven fra bestillingssiden, trykker den seg videre til handlekurven.

Førte delen i dette feltet er handlekurven. Her står det hvilket produkt, og antall. Her kan man også justere antallet. Etter at kunden har lagt en pake med 18 egg i handlekurven i bestillingsskjemaet, så kan den nå justere antallet hvis den skal ha f. eks. tre pakker med 18 egg. Totalsummen på handlekurven står nederst til høyre i handlekurven.

Den andre delen, er kundeinformasjon. Navn, mail, telefon. Kunden krysser av for om det skal bli levert. Det er kun da det blir spurt om adresse. Det er et fritekstområde, om kunden ønsker å spesifisere eller kommentere noe.

Nederst er knappen «bestill og betal». Da går man videre til et eksternt betalingssystem.

Show your support

Clapping shows how much you appreciated Ingrid Christine Hole’s story.