KomIn Sverige

Klient

Jörgen Erikssons driver företaget Erikssons Transmissions Teknik, förkortat E.T.T. Släpkärror, växellådor och diverse fordonsdelar säljs av Eriksson i Erikstad, Mellerud.

Uppdrag

Ett familjeprojekt åt min pappa, Jörgen Eriksson. Erikssons företagshemsida hade inte uppdaterats på mer än 15 år och en ombyggnad önskades med nya funktioner. Det var viktigt att hemsidan skulle platsa i företagets arbetsprocess utan hinder och behövde därför göras lättanvänd, både för användaren och för Eriksson. Sidan utformas som en broschyrsida med möjligheten att publicera de produkter som Eriksson säljer. Produkterna skulle kunna filtreras och vara lättpublicerade.

Resultat

Projektet är ännu inte lanserat utan utvecklas fortfarande.

Klient

Jörgen Eriksson, E.T.T, Erikssons Transmissions Teknik

Tidslinje

Pågående

Min roll

UI/UX och webbdesign

Gruppmedlemmar

Arvid Lindvall

Nikki Norberg

Emma Anne Rehnström

Helen Negash Girmazion

Deborah Awe-Cederqvist

Logga In

1. Indikation av sida

Text som visar den nuvarande sidan, exempelvis har applikationens startsida namnet "Hem" och inställningar visar texten "Inställningar".

2. Profil

En inloggningsportal designad för att underlätta för användare som saknar större digital erfarenhet. En standardiserad design valdes då målet inte var att stå ut från vad som vanligen förkommer på digitala plattformar.

Bild på E.T.Ts produktsida i light mode.

Dynamiska Bilder

Produktbilderna har slider funktioner. Bilderna är kopplade till varandra och uppdateras automatiskt när bilden byts. Båda sliders fungerar alltså som navigation. Om endast en bild finns på själva produkten visas inte slidern, istället visas bilden som helbild.

Dynamisk Data

Dynamisk data för produkter samt sidor har implementerats. Produktspecifikationer visas endast om respektive fällt innehåller information. Systemet är utbyggbart och fungerar både för SAAB-delar och släpvagnar. Crocoblocks JetEngine användes här i sammband med Bricks. Custom Post Types används för att separera SAAB-delar och släpvagnar i sina egna kategorier. Detta är menat att underlätta för Eriksson när han publicerar nya produkter, endast ett par fällt måste fyllas i. Sedan sköts allt dynamiskt.

Logga In

1. Sökfält

Låter användaren snabbt söka genom sin kontaktlista.

2. Kontakt notis

En signalerande cirkel som visar på att kontakten har skrivit något som användaren ännu inte läst.

3. Kontaktlista

En kontaktlista bestående av profilbild, namn och pil. Pilen indikerar att kontakten är klickbar. När profilbilden klickas på visas en detlajerad sida innehållande kontakinformation kopplad till kontakten. Denna kontaktinformations sida skapades inte under projektet, istället var det ett förslag på funktion. Om användaren klickar på resterande delar av kontaktelement, inklusive pilen, öppnas kontaktens chatfönster.

Verktyg som användes

Figma

Figma användes för att designa och presentera wireframes, mockups och slutgiltig design. Viss kategorisering och visualisering av information skedde även i Figma.

Monday

Monday användes för att få en översikt över projektet. Kanban och Gantt användes främst.

Tack KomIn Sverige

Att få arbeta på ett projekt som KomIn Sverige var mycket givande. Samarbete både inom gruppen men även mellan gruppen och klienten fungerade bra, med ytterst lite friktion. Klienten gav feedback som sedan implementeras utan krockar och var slutligen nöjd med resultatet. Jag ser fram emot att se hur applikationen kommer att se ut när den är färdigställd.

E.T.T Erikssons Transmissions Teknik

Min roll

UI/UX, webbdesigner och webbsidebyggare

Klient

Jörgen Eriksson, E.T.T, Erikssons Transmissions Teknik

Tidslinje

Pågående

Sammanfattning

Ett familjeprojekt åt min pappa, Jörgen Eriksson. Erikssons hemsida hade inte uppdaterats på mer än 15 år och en ombyggnad önskades med nya funktioner. Det var viktigt att hemsidan skulle platsa i företagets arbetsprocess utan hinder och behövde därför göras lättanvänd, både för användaren och för Eriksson.

Eriksson ville ha en broschyrsida med möjligheten att publicera de produkter som Eriksson säljer. Produkterna skulle kunna filtreras och vara lättpublicerade för Eriksson.

Projektet är ännu inte lanserat utan utvecklas fortfarande.

Verktyg som användes

Figma

Figma används för att designa och presentera wireframes, mockups och slutgiltig design.

Bricks Builder

Bricks Builder är själva sidbyggaren som används. Ett lättviktigt tema med fokus på hög hastighet och ren kod. Det som inte kunde lösas direkt med Bricks löstes genom anpassad kod.

WordPress

WordPress är själva CMS:n som används som bas. WordPress är väletablerat med miljontals webbsidor som använder systemet.

Core Framework

Core Framework är ett ramverk anpassat för Bricks Builder. Färger, klasser, textstorlek och variabler hanteras här. Ramverket gör det lätt att ändra hela webbplatsens färger, textstorlek och mellanrum.

Crocoblock

Crocoblocks plugin JetEngine och JetSmartFilters används för Custom Post Types och produktfiltrering. Datan är dynamisk, alltså behövs endast en produktsida skapas. Produktsidan fungerar sedan för alla produkter oavsett Post Type/kategori. Nya kategorier kan lätt läggas till och fungerar på samma sätt. Hittills har två kategorier, med flera underkategorier, implementerats. SAAB-delar och släpvagnar.

Designprocessen kortfattat

Empathize

Klienten intervjuades i detalj, flera saker som önkades vara med togs upp. Exempelvis sorteringsystem och filter, fokus på lättanvändning. Lättpublicerade produkter som inkluderar produktspecifikationer. Då Erikssons hemsida tidigare inte varit anpassad för SEO, samt inte sett någon användning var målet att öka trafiken och säkerställa Erikssons företag även på webben. Webbsidor som Eriksson tyckte om utforskades i jakt på inspiration.

Define

Vad som bör och inte bör inkluderas på sidan dokumenterades. En brochyrsida valdes framför en webbshop pågrund av det ökade ansvaret som en webbshop för med sig. Då Eriksson även främst säljer på plats var en webbshop inte lika nödvändig. Istället skall kunden kunna skicka email eller nå Eriksson via telefon genom hemsidan. Proudktspecifikationerna som skulle inkulderas etablerades här, exempelvis om släpvagnen inkluderar ramp, eller om släpvagnen har kåpa.

Ideate

Tillsammans byggde vi på de ideer som redan fastsällts. Email som skickas skall automatiskt inkudera produkten som kunden är intresserad av samt en länk tillbaka till sidan för att underlätta för Eriksson. Produktspecifikationerna bör uppdateras automatiskt beroende på de fällt Eriksson väljer att fylla i.

Prototype

När vi hade fastsällt vad webbsidan skulle inkudera övergick jag till nästa stadie. Jag skapade först wireframes för landningssidan i Figma som visades för Eriksson. När en version godkändes övergick jag till att detaljera wireframen. De element som Eriksson godkände återanvänds utmed hemsidan, exempelvis färger och knappar. Vi är ännu i detta stadie och designen kan komma att ändras.

Test

Vi har ännu inte testat projektet på Erikssons kunder eller andra personer då projektet är pågående och detta stadie ännu inte nåtts.

Tekniska funktioner

Dynamiska Bilder

Dynamisk Data

Bild på E.T.Ts landningssida i dark mode.

WIP Landningsida

Landningsidan kommer att arbetas mer på, den stora förändringen sker i form av att visa produkterna direkt, istället för den nutida deisgnen som istället fokuserar på budskapet.

Dark mode

Sidan har för tillfället ljust och mörkt läge, detta kan komma att andras beroende på feedback från kunder och hur framtida designer ser ut.

Kontaktformulär

Möjlighet att kontakta Eriksson via email finns på landningssidan, kontaktsidan sam på varje produkt. På produktsidan skickas även relevant information kring produkten och en länk till Eriksson.

Platsposition

Addressen där Eriksson bedriver sitt företag visas då Eriksson främst säljer på plats. Det låter kunder som föredrar att affärer sker ansikte mot ansikte lätt kan hitta vart Eriksson främst arbetar.