Ambitionen är att utveckla en webbapplikation där kunden på ett enkelt och smidigt sätt kan hitta de dofter som intresserar den. Designen har som mål att vara relativt okomplicerat och på så sätt enkel att förstå, med bland annat möjlighet att studera produkterna i en meny på vänstra sidan, en navigation bar i toppen, samt en del för innehåll i mitten av sidan. Detta för att erbjuda kunden en enkel och bekant köpprocess, vilket förhoppningsvis kommer påverka framtida kundflöde.
Startsida
Startsidans layout består av ett antal menyer samt ett “huvudfönster” där innehållet på sidan visas. För att göra sidan intuitiv och lättnavigerad är det främst innehållet i detta fönster som ändras vid navigation på sidan. På toppen av sidan så kommer det sitta en navigationsruta med olika flikar, exempelvis ”Home” och ”Contact”, som kommer att leda till att olika mallar visas i huvudfönstret. Till vänster om huvudfönstret kommer en filtreringsyta att sitta, där användare kan filtrera ut produkter baserat på sina preferenser. Om webbapplikationen skulle visa något annat än produkter i huvudfönstret så kommer användaren att omdirigeras till produktfönstret när personen klickar på någon filtrering. På andra sidan av huvudfönstret så kommer en liten version av varukorgen att presenteras, samt att det kommer visas en top tre lista över sålda produkter för män och kvinnor respektive.
Produktsida
På produktsidan kommer alla parfymer som ligger i databasen att visas. Endast bilder av produkterna kommer att visas, och om konsumenten söker mer information om dem eller vill lägga till dem i varukorgen så kommer användaren att behöva klicka på dem. Längst upp på sidan kommer det också finnas tre stycken rekommendationer på populära produkter.
Produktdetaljer
När kunden klickat på en parfym kommer den specifika produktsidan visas. Den innehåller information om doften, bild, pris samt möjligheten att välja antal till kundkorgen. För att ge kunden tips om populära dofter visas även topp tre med direktlänkar till motsvarande produktsida.
Figur 9-19, prototyp produktdetaljer
Varukorg
Varukorgens huvudfönster består av en lista med information om pris och antal för varje specifik produkt samt det totala priset Det finns även möjlighet att ändra antal eller ta bort varor samt att klicka vidare för betalning. Målet med kundkorgen är att det ska vara lätt att ändra antal och att se vad varje produkt kostar samt se det totala priset på beställningen.
Figur 9-20, prototyp varukorg
Om oss
Detta är en informativ sida utan interaktioner för kunden. Här kommer lite kort information om projektgruppen att presenteras.
Figur 9-21, prototyp om oss
Kontakt
Under ”Contact”-fliken så kommer ett kontaktformulär att presenteras. För att skicka iväg ett meddelande till databasen så måste kunden fylla sitt namn, sin email samt det meddelande som användaren vill lämna.
Figur 9-22, prototyp kontaktsida
Mina Sidor
Om en användare loggar in på applikationen dirigeras personen till ”My Account”. På ”My Account” kommer användarens personliga uppgifter att presenteras. Det skall också finnas möjlighet att redigera denna information genom att klicka på en knapp. Här kommer också order historiken för användaren att visas upp, och om kunden klickar sitt ordernummer så kommer mer information om ordern att visas.
Figur 9-23, prototyp mina sidor
Mobil Startsida
Den mobila versionen av applikationen bygger på en responsiv design av webbversionen. Navigationsrutan samlas under en kollapsad meny där förstasidan gör det möjligt att bläddra bland de populäraste dofterna genom höger-vänster-navigering. Här visas även en lista över samtliga produkter i sin helhet genom att kunden scrollar uppåt och nedåt.
Figur 9-24, prototyp mobil startsida
Mobil Aktiv Meny
När kunden aktiverat menyn visas de olika avdelningarna som en lista samt döljer raden med topp-parfymer.
Figur 9-25, prototyp mobil aktiv meny
Mobil Kundkorg
Den mobila kundkorgen är snarlik webbversionen, men mer kompakt. I övrigt visas samma information och möjligheter.
Figur 9-26, prototyp mobil kundkorg
En arkitekturbeskrivning har tagits fram för applikationen, och återfinns ned som Figur 9-27. Denna arkitektur beskriver hur kommunikationen och samarbetet mellan de olika
Figur 9-27, den planerade arkitekturen för webbapplikationen
Baserat på prototypen
För att på ett effektivt sätt kunna styra utvecklingsprocessen har utvecklingsgruppen aktivt försökt standardisera de olika sätt som komponenterna i systemet kommunicerar med varandra.
Startsida
Vid uppstart av applikationen så landar användaren på en startsida. Denna startsida utgör grunden för hela webbapplikationen, då enbart ett informationsutrymme i mitten av sidan kommer vara det som uppdateras. Längst upp på sidan sitter en navigeringsruta, med knappar för alla olika sidor som kan besökas. Vid ett klick på någon knapp så skickas ett anrop till Flask via JavaScript om att en ny sida skall presenteras. Till vänster om
informationsutrymmet så finns en filtreringsfunktion, som kommer . På andra sidan av informationsutrymmet så visas kundens varukorg, som kontinuerligt uppdateras vart efter användaren lägger till produkter. Där presenteras också en top tre lista för manliga och kvinnliga kunder, som kommer baseras på totala orders.
Produktdetaljer
När en person klickar på en produkt på produktsidan kommer användaren omdirigeras till en mer detaljerad informationssida. Denna sida kommer innehålla en counter för att välja hur många produkter konsumenten vill lägga till i varukorgen, och en knapp för att bekräfta detta.
Användarlogin
Applikationen kommer att innehålla möjlighet för att som antingen administratör eller kund kunna logga in och beroende på användare sedan komma åt olika funktionaliteter.
Administratörsfunktioner
Systemet kommer att innehålla funktionalitet för att kunna administrera nätbutiken från ett webbgränssnitt, där administratörer bland annat kommer att kunna hantera produkter samt att se beställningar och liknande.
Databas
I systemet kommer information att lagras i en extern databas därifrån den sen kommer att läsas in och visas i webbapplikationen.
Köpfunktion och kundkorg
Centralt i webbapplikationen är möjligheten att kunna lägga varor i en varukorg för att sedan kunna gå till utcheckningen av varor och därifrån lägga sin order och sen betala.
JQuery och Bootstrap
För att underlätta utvecklingen skrivs ej alla funktioner från grunden, utan ramverken jQuery samt Twitter Bootstrap används för att på ett enkelt och effektivt sätt kunna leverera en bra produkt utan att behöva återuppfinna hjulet.
Projektbeskrivning
Projektet utgörs av ett kandidatarbete i datateknik om 18 HP som skrivs vid Linköpings Tekniska högskola. Arbetet genomförs i form av ett utvecklingsprojekt där en nätbutik utvecklas. Utvecklingsprojektet består av en förstudie följt av ett antal utvecklingssprintar.
Gruppen är begränsad till sina sju medlemmar, som samtliga förfogar över 480 timmar var, +/-10%. Projektet får således maximalt uppta 3 696 timmar, alla aktiviteter (även utbildning) inkluderade.
Projektet har som mål att genom en process där samtliga gruppmedlemmar utmanas och utvecklas kunna leverera en professionell nätbutik, komplett med front- och backend.
Projektet inleds genom introduktionsföreläsningen 18 januari 2016 och anses vara avslutat i och med slutinlämningen 25 maj 2016.