Designe Shyp Web Experience

Vores proces fra kundebehov til produktlancering

Den 6. oktober frigav vi vores første webprodukt som en del af Shyps nye servicetilbud.

Jeg er meget begejstret over at dele vores vej og de erfaringer, vi har lært undervejs. Dette er en af ​​de største resultater i min designkarriere, og jeg kunne ikke være mere stolt over alt det hårde arbejde, teamet har lagt ned i det.

Baggrunden

Tilbage i 2015, da jeg sluttede mig til Shyp, var det eneste kunde-vendte produkt en mobilapp. Selvom nogle små stykker af produktet eksisterede på webstedet (tilmelding, sporingssider osv.), Var vores kunder nødt til at downloade mobilappen for at bruge Shyp. Dette fungerede godt for forbrugerne, men da vi udvidede til at imødekomme virksomhedernes behov, opdagede vi behovet for en oplevelse på nettet.

Vores mål var at give kunderne et mere kraftfuldt værktøj til at imødekomme deres forretnings behov. Skærmen ejendom tilgængelig på desktop browsere giver vores kunder mulighed for at behandle meget højere forsendelsesvolumen såvel som d0 opgaver på samme tid.

En af de mange tjenester, Shyp tilbyder kunder, er muligheden for at sammenligne priser på tværs af transportører. På grund af infrastrukturen i vores afhentning og pakningstjeneste tilbød vi kun vores prissammenligningstjeneste til kunder i fire byer. Gennem mange samtaler med kunder uden for vores byer opdagede vi, at sammenligning af transportpriser var en tjeneste, de ønskede - selv uden vores andre opfyldelsestjenester. Da vi begyndte at undersøge at tilbyde vores prissammenligningstjeneste landsdækkende, så vi mange nye muligheder for at udvikle en sømløs og kraftfuld weboplevelse.

Vores designteam startede brainstorme ideer til, hvordan vi kan nå vores produktmål. Min rolle for dette projekt var at fokusere på Shyp-weboplevelsen. Målet var ikke kun at bringe vores nye produkt til live, men også at definere et stærkt fundament for vores nuværende og fremtidige webtilbud. Selvom vi havde stilguider og genanvendelige komponenter, vi havde udviklet til vores mobile apps, var vi nødt til at oprette et nyt designsystem til web. Vores udfordring var at integrere forskning i vores tankegang, opbygge et produkt, der imødekommer vores kunders behov, skabe dette nye system, så designet kunne skaleres og gøre det hele under en stram lanceringsfrist.

Forståelse af brugerproblemet

For at kunne udføre et problem, havde teamet brug for først at forstå problemet. Produktdesign er et tværfagligt håndværk, der inkluderer forskning, konkurrencedygtig analyse, brugeradfærdsanalyse og forståelse af tekniske begrænsninger.

Målet med dette initiativ var at hjælpe med opfyldelsen og opbygge bedre værktøjer til afsendere af store mængder, små virksomheder og markedssælgere.

Gennem omfattende brugerundersøgelser indså vi, at erhvervskunder har meget forskellige (og ofte meget komplicerede) arbejdsgange, processer og løsninger, når det kommer til levering af forsendelser sammenlignet med forbrugere. Virksomheder har også langt større forsendelsesmængder, mere definerede opfyldelsesprocesser, faktureringssystemer, tidslinjer osv.

Interviewing af brugere gav os en masse indsigt i arbejdsgangen for erhvervskunderne og områder, hvor et nyt Shyp-produkt virkelig kunne ændre den måde, vores brugere sender. Vi indså hurtigt, at der var en enorm mulighed for at tilbyde et overbevisende produkt, og at brugerne var begejstrede for tanken om et nyt produkt, der imødekommer deres behov.

Rejser landsdækkende

Indtil nu var Shyp kun tilgængelig i 4 byer - San Francisco, Los Angeles, New York og Chicago. Vi kunne ikke profitabelt skalere opsamlings- og emballeringsservicen, før vi havde ramt en vis mængde. Vi ønskede at tage læring fra disse markeder og anvende dem landsdækkende. Lancering af et etiketudskrivningsprodukt landsdækkende gjorde det muligt for os at åbne dele af vores servicetilbud uden den logistiske omkostning / omkostning.

At have ingen geografiske grænser skabte en interessant designudfordring, som vi ikke havde før. Behovene og processerne i en storstilet beklædningsforretning i New York City er meget forskellige fra den lokale smykkeproducent i Oklahoma. Mens målet med begge brugerpersoner er det samme - at levere varerne til deres kunder - var deres arbejdsgang og processer iboende forskellige.

Basen

En af de største udfordringer, når man udvikler et nyt designsystem fra bunden, er at opbygge noget, der kan skaleres i fremtiden. Jeg kiggede tilbage på vores mobile designhistorie og lærte meget af det. Tilbage i 2015 gennemgik vi en rebrand og etablerede designmønstre, der hjalp med at forme min vision om, hvordan Shyp kunne se ud på nettet.

Typografi og farver

Vores brand font-familie er Graphik, som vi også har overført til internettet. Det fungerer godt inden for informationstæt tabelvisninger (skalering ned til så lille som 10px) såvel som til større titler og meddelelser.

Vi havde et stærkt og genkendeligt fundament for vores farvepalet, og vi ønskede at bevare en konstant visuel fornemmelse, da brugerne flyttede mellem enheder. Som vi gør i vores mobilapps, understregede vi hvidafstand til at præsentere information på en let, læsbar måde - og tilføjede farvesprøjt til at understrege handlingsbare elementer.

Designprincipper

For at kommunikere effektivt som et design-, produkt- og teknikerteam skal vi tale det samme sprog og bruge de rigtige værktøjer. Vi er nødt til at tro på de samme værdier og bruge dem til at informere vores beslutninger. Lad os gennemse Julie Zhou's tanker i A Matter of Principle:

”Du ser, en stor designer starter med whys. Hun formidler principperne bag hendes tænkning og efterlader dig følelsen af ​​at du forstår de kerneværdier, som alle hendes designbeslutninger strømmer fra. ”

Når man designer et nyt system, er der uundgåeligt en række antagelser undervejs. For at hjælpe med denne udfordring og støtte antagelserne er det yderst værdifuldt at etablere et sæt design kernedesignværdier (principper), der giver mulighed for at tænke systematisk.

Disse designprincipper hjælper os med:

  • støtte designbeslutninger
  • kommunikere dine beslutninger til de bredere design- og teknikhold
  • at få buy-in fra interessenter
  • at sikre, at systemet er samlet og fungerer som forventet
  • skabe en følelse af tillid hos dine brugere

Ingeniørteamet opmuntrede også til konsistens, da vi begyndte at oprette byggestenene til dette produkt; ensartede elementer, tilgange og temaer betød, at de kunne skabe genanvendelige komponenter snarere end engangsløsninger. Designere og ingeniører taler det samme sprog, de bruger bare forskellige værktøjer til at udtrykke den samme hensigt. Deres samlede mål er at imødekomme brugerens behov.

Åbenheden og mobiliteten i et startmiljø gør det relativt let at forme processen, hvis man kan bevise værdien af ​​en foreslået ændring. Betydningen af ​​samarbejde blev forstået og aftalt mellem medlemmer af mit team. Vi havde mange samtaler omkring, hvad der ville være den bedste måde at udnytte vores tid og kræfter på at nå det ambitiøse mål om at opbygge et helt nyt produkt på en kort frist.

Her er de principper, vi implementerede, når vi designede weboplevelsen til Shyp:

Brugeren har kontrol - dette er noget, vi stræber efter hele tiden. Vi tror dybt på nødvendigheden af ​​at give brugeren den kontrol, de fortjener; guide dem gennem produktet, mens du overlader beslutningen om at gøre dem op.

Enkelhed - systemet skal være intuitivt og let at bruge med en hovedhandling pr. Atomisk UI-visning. Når det er sagt, skal det give alle de nødvendige værktøjer til, at brugeren kan udføre sine opgaver med succes.

Gennemsigtighed - fra oprettelse til levering til levering, brugeren har fuld gennemsigtighed i leveringscyklussen ved at kende den nøjagtige placering og status for deres forsendelser til enhver tid. Dette var ekstremt vigtigt, når vi designede vores forsendelsesside med sporing af begivenheder.

Tillid - selvom brugeren skal forblive i kontrol, skal vi levere fornuftige standarder, forudse deres behov og give en ensartet oplevelse.

Feedback - systemet skal give meningsfuld feedback til brugeren; hjælpe dem med at komme sig efter fejl og forstå de tilgængelige muligheder.

Hver designbeslutning, vi tog, skulle understøttes af disse principper. Vi fandt, at dette var yderst værdifuldt, da det tvang os til at være i overensstemmelse med vores beslutninger og sørge for, at vi sætter brugernes behov først.

Bruger strømmer

Da vi målrettede erhvervskunder som vores primære brugere, ønskede vi at støtte dem med at oprette forsendelser manuelt og samtidig gøre det muligt for dem at importere ordrer fra deres online butik.

Efter import er brugeren i stand til at redigere deres forsendelse, tilføje eventuelle manglende oplysninger om nødvendigt, vælge deres serviceklasse og sammenligne priser mellem transportører. Når de har købt en etiket, kan de se en detaljeret oversigt over alle deres varer og deres aktuelle status.

Layout

Vi havde mange muligheder for, hvordan man viser information - vi vidste, at vi ønskede, at de skulle være tilgængelige og intuitive, men at det skulle være informationsdigt og kraftfuldt nok til avancerede erhvervskunder.

Den interessante udfordring her var at præsentere en masse information på en tilgængelig måde - forsendelsesmuligheder, pakningsstørrelser, toldangivelser, sporing - samtidig med at enkelheden opretholdes som et af vores grundlæggende designprincipper.

Valg af et dashboardlayout gjorde det muligt for mig at udføre et par opgaver og opfylde brugernes behov med høje forsendelsesmængder, herunder:

  • Se mange forsendelser med et øjeblik for at muliggøre en nem proces til oprettelse, redigering og køb af forsendelse
  • Nem oprettelse af nye forsendelser
  • Mulighed for hurtigt at navigere mellem flere sider
  • Tillad et fleksibelt, responsivt layout
  • Forsendelsesmanipulation, såsom redigering, sletning osv.
  • Batchbehandling af forsendelser
  • Sporing af mange forsendelser med et øjeblik

Den mere detaljerede betjeningspanel vises nedenfor:

Tabellen indeholder mange rækker, der hver repræsenterer en forsendelse (enten afventende eller behandlet). Ved at vælge en række angiver brugeren deres hensigt og kan manipulere forsendelsen eller fortsætte med at købe forsendelsesetiketten.

Forsendelsesrate-sammenligning

En af nøglefunktionerne i Shyp er muligheden for at sammenligne forsendelsespriser. Med muligheden for at skifte filtre og se, hvordan det afspejler deres hastighed, kan kunden tage mere uddannede beslutninger om deres forsendelsesvalg.

"Redigering" sidefelt

Sidepanelet i instrumentbrættet er den vigtigste metode for brugeren til at manipulere deres eksisterende forsendelser. Vi besluttede at gå med dette mønster, så brugeren hurtigt kan navigere mellem ordrene og udføre hurtige redigeringer uden at miste konteksten.

Indtastning af pakkestørrelse, ændring af modtagerinfo, udfyldning af toldangivelser, valg af forsendelseshastighed og flere handlinger kan alle udføres i sidebjælken. Det giver også mulighed for en hurtig sammenligning mellem forsendelser i tabellen. Feedbacken gives, hvis noget har brug for opmærksomhed - f.eks. En manglende pakningsstørrelse eller en udløbet sats.

Design af et system

At starte fra bunden var både spændende og udfordrende. Vi var nødt til at bevare konsistensen med den etablerede brand-stil, samtidig med at vi udviklede retningslinjer og principper for en ny platform.

Heldigvis havde vi etableret UI-retningslinjer for brand og mobil, der gav os et godt sted at starte. Vi var i stand til at udnytte nogle af de eksisterende mønstre og anvende systematisk tænkning på produktet.

Selvom jeg var begyndt at bespotte forskellige skærme på appen på egen hånd, indså jeg hurtigt, at jeg var nødt til at zoome ud for at se det større billede. For at gøre dette trak jeg nye komponenter ud i separate Sketch-filer og kommenterede hver skærm for at være sikker på, at vi anvendte de samme regler for hver nye funktion.

Indgange og knapper

UI-komponenter

For at styrke konsistensen i designelementer kompilerede vi atomelementer, såsom knapper, tabelvisninger, fotos, inputfelter osv. I et mønsterbibliotek. Vi definerede afstand og størrelse på hvert element, hvilket sikrer konsistens og velkendte mønstre i hele platformen.

For at dele vores stilguider i vores team bruger vi GitHub - du kan læse om vores proces her.

Webkomponentbibliotek

I løbet af en hackedag hos Shyp byggede mine ingeniører og jeg et komponentbibliotek, som er en samling af alle Style Guide-elementer oversat til React-komponenter. Dette gjorde det muligt for os at overveje hver enkelt komponent isoleret og afprøve hver variation, samt tilbyde en god måde at ombord nye teammedlemmer og introducere dem til det system, vi byggede.

Nogle af jer kan huske, at jeg afslørede nogle snige toppe på Dribbble:

Konklusion

Jeg er meget begejstret over at være en del af denne enorme milepæl i Shyp-historien. Vi kom langt fra, hvor vi startede - fra ideation og research til en komplet web-oplevelse fra ende til ende.

Hvad er det næste?

Det er kun starten på en fantastisk rejse fra Shyp. Vi arbejder på spændende nye funktioner og fortsætter med at bygge videre på det fundament, vi har etableret. Hold dine øjne åbne!

Kast mig en linje

Du er velkommen til at e-maile eller tweet på mig med alle de tanker eller feedback, du har, eller kommentere nedenfor. Jeg ville elske at høre fra dig!

Tak for at have læst!

P. S. Stor tak til Micah for feedbacken! Også - vi ansætter en fantastisk kommunikationsdesigner. Læs mere og anvend her: https://jobs.lever.co/shyp