kilde: shutterstock

Ja, redesign (del 2)

Hvordan man nærmer sig redesign i den mobile verden

Opsæt redesignmål

Diskussioner med forskellige teams giver os mulighed for at indsamle specifikke behov fra alle interessenter og sikre, at hver især bliver taget i betragtning under omdesignprocessen, og at det ultimative produkt når sit fulde potentiale. Den vigtigste del af denne proces inkluderer tidlig involvering af produktledere, designere og ingeniører. Dette vil reducere chancerne for overraskelse markant, når vi starter det næste trin, henrettelse. Disse diskussioner hjælper med at stramme vores fokus, sætte en klar vision og mål for redesignet. Det bygger fælles forståelse for, hvordan det endelige produkt skal se ud, føles og fungere; dialogen maler et verbalt billede af designet og hjælper med til udviklingen af ​​en ægte ramme (UX / UI-retningslinjer & værktøjssæt). Og sørger for, at alle passer sammen med den bedste designpraksis, der vil transformere Sing! til en enkel, tilgængelig, dejlig og ønskelig platform for vores brugere.

kilde: shutterstock

Plan for lancering

Trinvise funktionsændringer

Inden vi startede redesignen, var vi nødt til at fastlægge en lanceringsstrategi, der vil sikre succes med redesign. I den forrige diskussion fandt vi Sing! nødt til at ændre sin globale navigation for at forbedre funktionsopdageligheden. Det betyder at skifte fra den engangsindustrielle hamburgernavigation til bundnavigation. Dette er en betydelig ændring af kerneniveauet for produktet. Vi skal tilbage til tegnebrættet og genoverveje: hvad er de primære funktioner, og hvad er det rimelige, funktionelle hierarki til navigation. Det første spørgsmål er, om navigationsændringen skal være en separat frigivelse fra redesignen, eller om den skal rulles ind i redesignfrigivelsen. Vi ved fra tidligere tests og en grundig gennemgang af de eksisterende branchefaseundersøgelser, begge disse ændringer vil have en betydelig indflydelse på produktets ydelse. Historisk set, når Smule har introduceret en ny funktion eller design, har processen fungeret sådan:

1. Opret en hypotese
2. Design og opbyg funktionen
3. Slip funktionen til brugere
4. Mål og analyser den nye funktionsydelse
5. Evaluer om funktionen nåede målet eller validerede hypotesen
6. Valider den oprindelige hypotese

Ved hjælp af denne metode er det altid bedre at frigive design og funktionsændringer én ad gangen. Det isolerer ændringer, der kan være et utilsigtet resultat af redesignet eller forårsage forkert datamåling. Mere vigtigt er det, at det giver tid til fuldt ud at forstå den kvalitative virkning af hver af ændringerne (navigation og redesign) fra brugerens perspektiv.

Vælg platform og lås ressourcer

Efter at have taget den første store beslutning om at frigive disse ændringer i rækkefølge i to separate udgivelser, var det næste spørgsmål, om først at frigive på iOS eller Android, idet følgende faktorer var: (1) Alle disse designændringer er i sig selv en høj risiko; (2) Vi har ikke råd til at foretage en A / B-test for at validere hypotesen; (3) Vi har meget begrænsede design- og ingeniørressourcer. Baseret på disse givne faktorer blev vi enige om, at implementering af disse ændringer på en platform er den bedre mulighed for at minimere risikoen. Men hvilken platform først? Sammenlignet med Syng! iOS, syng! Android havde færre funktioner og værre antal engagementer og fastholdelse end Sing iOS. Dette betyder mindre risikabelt at anvende ændring og omdesign af navigationsdesign på Sing! Android først. Denne beslutning hjalp med at finde og låse de nødvendige design- og ingeniørressourcer. Vi har en meget mager struktur og et lille team. Vi er heldige at have en visuel designer og fire ingeniører slutter sig til mig for at arbejde med to-fase Sing! Android redesign projekt. En af udfordringerne på dette tidspunkt er at sikre, at vi fuldt ud forstår og omfanger det nødvendige designarbejde. Dette vil blive diskuteret i det følgende afsnit om designudførelse.

kilde: shutterstock

Lad os designe!

Scoping design indsats

Ændring af navigation og redesign-projektet var to store designdrevne projekter. Når man skal omfatte kravene til designtid, er det kritisk at bygge tid nok til at forske, udforske og komme med de rigtige designløsninger, mens man udfører i en mager og smidig proces. Som design og projektleder var denne fase super nyttig. Det gav mig en mulighed for at gå tilbage og se det store billede, mens jeg planlægger vejen frem. Det var tydeligt, at der er to trin i udførelsen af ​​redesignændringerne:

(1) Opret og indarbejd et nyt navigationsparadigme uden at ændre det aktuelle visuelle design.

(2) Opret et nyt design, der ruller de nye UX / UI-regler med nye farver, skrifttyper og ikoner.

Det andet trin kræver designforskning, definition af nye designregler og bestemmelse af, hvordan reglerne skal anvendes på begge platforme. Indgående tanker og beslutninger er nødvendige for: Hvad er Sing! 'S vigtigste farve; Hvad er de rigtige nye skrifttyper, Hvad er de nye ikoner, og hvordan tester vi disse designkoncepter. At finde ud af de utal af beslutninger, der er nødvendige for at afslutte hvert trin i det nye design, hjalp mig med at komme med en grov tidslinje for denne fremtidige udgivelse.

Opret nyt navigationsdesign

Som et første skridt begyndte vi at undersøge mulighederne for det nye navigationsdesign ved at sætte et grundlag for den fremtidige redesign. Kompleksiteten af ​​det nye navigationsdesign er i sig selv værd at en separat artikel. Da redesignet er det tilsigtede fokus i denne artikel, dækker jeg ikke dybdegående detaljer om, hvordan vi nærmet os det nye navigationsdesign. I stedet vil jeg gerne dele noget af den strategiske tænkning, der gik ind i denne redesignudfordring.

1. Find den rigtige navigationsstruktur, der passer til dit produktformål.

Virkningen af ​​enhedsstørrelse, såsom: mobile enheder vs. bærbar computer vs. desktop vs iPad tvinger en kritisk tidlig beslutning om "form", der skal bruges i designprocessen. Yderligere komplicerer denne beslutning variation af størrelse på mobilenheder. Mobile enheder har forskellige skærmstørrelser, der kan være så små som 3,5 tommer eller så store som 13 tommer. At skabe et simpelt, men dog skalerbart navigationsparadigme, der først passer til den mindste skærm, er nøglen til succes. Da vi udforskede navigationsdesignene med eksisterende apps i 2014, fandt vi, at der var tre grundlæggende typer. (1) iOS-standard (hovedskærmenavigation), (2) Android-standard (hamburgernavigation) og (3) Tilpasset, baseret på udviklerens behov. Vi indså, at beslutningen om navigationsparadigmet ikke skulle træffes baseret på platformen, men snarere skulle det være det paradigme, der bedst passer til produktets art eller anvendelse. For eksempel, hvis produktet er fokuseret på en oprettelsesoplevelse, som Instagram og Sing !, er navigering på hovedskærmen en fantastisk mulighed; hvis produktet er fokuseret på en browseroplevelse, f.eks. e-mail eller nyhedsprodukt, er hamburgernavigation mere velegnet til den oplevelse; og til sidst, hvis produktet har et centralt formål med brugen, ligesom Uber og Snapchat, er det relevant at oprette et tilpasset navigationsdesign, der imødekommer det enestående produkts behov.

2. Organiser funktionerne omkring temaer

Synge! forbinder mennesker gennem musik, hvilket betyder social interaktion og skabelse af musik er to centrale temaer til at organisere produktets funktioner. Det første skridt, vi tog i navigations redesign, var at placere alle funktioner, der tilbydes i enten “social interaktion” eller “skabe musik” spand. Vi fandt, at nogle funktioner ikke passede i nogen af ​​skovlene, og nogle funktioner kunne passe ind i begge dele. Til funktioner som registrering, der ikke passede i nogen af ​​spandene, kom vi frem til en tredje spand markeret med "andet". For funktioner, der kan passe i begge spande, lægger vi dem i begge spande til fremtidig overvejelse. Det næste trin er at rangordne funktionerne i hver spand baseret på data, produktmål og brugerundersøgelser. I sidste ende havde vi brug for at bestemme, hvad vores brugere var interesseret i, hvilke funktioner vi ville have, at vores brugere skulle engagere sig i, og hvordan vi bedst kunne føre dem der. Gennem denne rankingøvelse havde vi en ret god idé om, hvordan vi skulle arrangere disse funktioner baseret på deres spand og dets relative betydning.

3. Indstil et klart informationshierarki til navigation

I traditionel webdesign er der tre niveauer af navigationssystemer: global navigation, lokal navigation og kontekstuel navigation. Formålet med disse tre navigationer er at give kontekst og fleksibilitet til brugerne. De hjælper brugerne med at vide, hvor de er, og hvor de kan gå. I vores version af dette trin valgte vi de top 5 rangerede funktioner fra den foregående øvelse og inkluderede dem som det globale navigationsparadigme. De resterende funktioner blev en del af det lokale navigationsparadigme. Endelig, da mobilskærme ikke tillader brugere at hoppe mellem skærmen lige så let som en stationær eller bærbar skærm, er det vigtigt at udvikle en klar regel om, hvordan man stakler skærme, og hvornår man skal rydde de stablede skærme for at undgå forvirring af brugere.

Efter runder med design-iterationer synger den nye Android! navigationsdesign blev frigivet i 4. kvartal 2014. Fra både kvantitativ og kvalitativ forskning fandt vi, at det nye navigationsdesign drastisk forbedrede opdageligheden af ​​både funktionerne "skabe musik" og "social interaktion". Som et resultat blev vores brugeropbevaring øget på en dramatisk og statistisk signifikant måde.

kilde: shutterstock

Start redesignet

Omdesign strategi

Når man nærmer sig en redesign til en mobilapp, er et hovedspørgsmål, hvilken platform (iOS og Android) designretningslinje skal designteamet følge og anvende. Nogle virksomheder startede først med at oprette iOS UI-stilen og førte derefter iOS-designstil til sit Android-produkt. Dette er en meget effektiv tilgang til design og opbygning af funktioner til en anden platform. Nogle virksomheder tog forskellige designsprog for hver af platformene. Formålet med denne metode er at opfylde standarden for fladt design (iOS) og materialedesign (Android) på hver platform. Der er fordele og ulemper ved hver tilgang. Den første metode sparer meget tid for udviklingsteamet, mens man ignorerer det faktum, at Android-brugere og iOS-brugere muligvis bruger og interagerer med apps forskelligt. Den anden fremgangsmåde er mere bruger- og platformvenlig, men kan skabe inkonsekvens i designet, forvirrende brugere, hvis de skifter platforme, og også bremse udviklingsprocessen. Til redesign til Sing !, besluttede vi at udvikle vores egen stilretningslinje, der integrerer fladt design med materialedesign, samtidig med at vi bibeholdt de mindre, men unikke forskelle for hver platform. I dette tilfælde blev redesignen tilpasset Sing! S oprindelige karakter, som med succes har tiltrukket millioner af brugere. Baseret på kvantitative data og kvalitativ forskning har iOS- og Android-brugere forskelle i produktforbrug. Ved at opretholde platformforskellen i vores stilguide respekteres vores brugers opførsel og gjorde det muligt for os at opretholde vores høje niveauer af brugeropbevaring.

kilde: shutterstock

Betydningen af ​​farvevalg

Der er så mange måder en designer kan vælge en farve til både et brand og et produkt. Gennem redesigningen af ​​Sing !, fandt vi, at de følgende tre trin fungerede godt for os.

Trin 1 - Find en primær farve, der repræsenterer din brandidentitet

Vi startede processen med at vælge en ny farve ved at forstå, hvem vores nuværende brugerfællesskab er, og hvem vores fremtidige målgruppe er. Synge! er en sjov, finurlig og dejlig app. Samfundet er indbydende, opmuntrende og lidenskabelig med at skabe musik. Det tiltrækker mennesker, der tror på selvudtryk, optimisme og nyder at skabe musik individuelt og i samarbejde. Som en af ​​apps fra Smule, Syng personlighed! er inkluderende, ægte, optimistisk, forfriskende og fængslende. Med disse karaktertræk i tankerne udforskede vi humørbræt, som vi mente kunne repræsentere disse følelser og valgte en primær farve til at repræsentere Syng! Dette var ikke slutningen på processen. Farvevalg er meget subjektivt. At kende dette udvalg af primærfarver ville være en permanent tilstedeværelse på skærmen efter skærmen overalt. Vi ønskede at have en høj grad af tillid til, at vores brugere ville synes, det var tiltalende, og at det "fungerede" ordentligt på hver skærm, før det blev afsluttet. Vi udførte kvalitative test på nye brugere og eksisterende strømbrugere for at forstå, hvordan de reagerede på den nye farve, når de blev anvendt til det eksisterende design. Denne feedback hjalp os med at få en bedre idé om, hvad de kan lide og ikke kan lide, og hvorfor. Det gav os en klar retning for den næste runde af design-iterationer.

Trin 2 - Oprettelse af en farvepalet fra den primære farve

Det andet trin er at opbygge en farvepalet fra den primære farve. Målet er at skabe et sæt farver fra primærfarve skaleret fra lys til mørk. Der er et par måder at generere denne farvepalet på. Vores tilgang var at skabe to sæt farveblandinger: fra den primære farve til hvid og fra den primære farve til sort. For Sing !, besluttede vi at indstille 8 trin mellem disse to blandinger. Slutresultatet var en farvepalet bestående af 19 farver, inklusive det primære. Dette gav os et bredt udvalg af farver til det fulde udvalg af forventede anvendelser, dvs .: accentfarve, tekstfarve, ikonfarve, skillelinjer og baggrundsfarve. Accentfarven skal fungere i harmoni med den primære farve, mens den stadig er i stand til at skille sig ud på egen hånd. At låse den primære farve og accentfarve sætter grundlaget for valg af tekstfarve. Tekstfarve spiller en kritisk rolle i hele UI-designet. Det påvirker indholdets læsbarhed, og hvordan brugere kan svare på opkald til handlinger. Når det gælder tekstfarve, ved vi, at vi er nødt til at finde en balance i at arbejde i harmoni med vores primære farve, samtidig med at vi giver tilstrækkelig en kontrast til at gøre det skiller sig ud. Den nemmeste og sikreste løsning er at vælge sort og hvidt, de to mest dominerende farver til tekst. Dog at vide Syng! er velkommen og sjov, og vores brugere er kreative og lidenskabelige, vi følte at brug af sort og hvid måske er lidt kedeligt. Så vi brugte vores primære farvepalet til at finde tekstfarven. Gennem flere runder med udforskning og testning valgte vi tre farver til at rotere mellem titler, body copy, CTA (opfordring til handling) og den kontekstuelle tekst.

Når vores tekstfarver var indstillet, begyndte vi at vælge dividerfarve, navigationsfarve og baggrundsfarve fra den samme farvepalet. Da tekstfarver er nødt til at skille sig ud i alle forskellige sammenhænge, ​​for at sikre læsbarhed, ved vi, at vi har brug for kontrast. Og at vende en mørk tekstfarvetekst ud af en baggrund giver dårlig læsbarhed. Så dividerfarve, navigationsfarve og baggrundsfarve skal alle være lysere end tekstfarven.

Trin 3 - Reglerne: Anvendelse af farvevalg på skærme

Hvad jeg mener med at indstille farveforbrugsreglen er vi nødt til at indstille de primære farveapplikationer, accentfarveapplikationer, tekstfarveapplikationer og andre designelementer farveapplikationer. At færdiggøre din farvepalet betyder ikke, at opgaven er udført. Der skal udvikles regler for, hvordan disse farver kan anvendes på hvert UI-element i appen, mens der opnås et klart informationshierarki. Hvorvidt de farver, der er valgt fra trin et og to, fungerer eller ej, afhænger virkelig af to dele: hvordan vi definerer applikationsstandarderne (reglerne), og hvordan de fungerer holistisk på hver skærm. Vi havde en grov idé fra trin 1 og 2, hvad disse regler kunne omfatte. Nu er det tid til at tilføje detaljer og færdiggøre reglerne. Dette betyder også forståelse af, hvordan farve kan præsentere produktoplysninger, når de tilpasses produktets intention og skabe et hierarki af applikationen. Når vi har indstillet farvenormen, er det ganske vigtigt at teste den og få reel, målbar feedback fra brugerne. Test af den virkelige verden, dvs. anvendelse af farveændringer på det eksisterende design gjorde det muligt for os at læse, om farvereglen fungerer som tilsigtet eller ej. Resultaterne lader os også vide, om vi havde brug for at justere og justere reglerne og under hvilken brug. For at fremskynde testprocessen testede vi ikke farveregler på hver enkelt skærm. I stedet valgte vi de skærme, der kørte mest trafik eller har mest komplekse UX- og UI-mønstre til at køre farvetesten. To ting skulle testes på dette tidspunkt. At få designet til at fungere på computeren betyder ikke, at det fungerer godt på mobile enheder, dette gælder især for Android-telefoner. Vi vil også teste, hvordan farven på CTA og tekstlæsbarheden vises på de mobile enheder. Den anden test, vi udførte, var en farveblindhedstest. Vi ønskede at sikre, at det nye designs grå skala kunne læses af alle, og at vores farvevalg ikke blev negativt påvirket af brugerens farveblindhed.

Opsætning af en stilretningslinje og anvendelsesregler

Et af formålene og konsekvenserne af redesignet er at etablere et skalerbart designsystem, der viser, hvordan farve, skrifttyper og ikoner anvendes på baggrund af funktionens informationshierarki og kontekst. Dette system bliver derefter bibelen til fremtidig designindsats, hvilket gør dem mere effektive og mindre besværlige. Definition af applikationsreglerne er et kritisk trin i hele denne proces. Hvis vi spørger os selv, hvordan en vellykket designstandard ser ud, skal reglerne holde os i skak, da en beholder ikke tillader vand at spildes, hvis det bruges korrekt. Reglerne skal være generelle nok til at omfatte alle de forskellige UI-sager, men også indskrænkende nok til at guide designere til at tage rigtige beslutninger. De skal give en konsistent, modulariseret ramme, men alligevel give plads til kreativitet til at skinne. De fungerer som et legosæt. Du kan bygge mest alt andet end inden for retningslinjerne for sammenkoblede og indbyrdes afhængige blokke. Du kan stadig bygge nyt legetøj med dine legoer og tilføje regler til din retningslinje. Så længe du fortsætter med at bruge sammenkoblende blokke af plast og dit skriftlige sæt retningslinjer, kan du tage begge med til det meste overalt. Både Apples retningslinjer for menneskelig interaktion og Googles retningslinjer for materialedesign er gode designrammer, der tjener dette formål. I stedet for at anvende forskellige regler på de forskellige platforme, som vi diskuterede i ovenstående dele, besluttede vi at udvikle vores egen stilretningslinje, der integrerer fladt design og materialedesign.

Denne tilgang gav os meget plads til at omfavne vores brandidentitet i redesignen og udvikle UX & UI-mønstre, der passer til begge platforme, samtidig med at vi respekterer den forskellige brugeradfærd på hver platform. Et eksempel: iOS- og Android-materialedesign har forskellige sprog i brugen af ​​ikonegrafik. I Sing! Kommer halvdelen af ​​vores daglige aktive brugere fra internationale lande. Dette betyder, at vi stolede på ikonegrafik for at kommunikere produktfunktioner for at reducere mulige UI-bugs til tekst. Som et lille team krævede det at skabe og producere et ikon til kun én platform meget tid og energi fra den visuelle designer. At have en ensartet ikonografisk hjalp os med at holde fokus på sagen omtalt ovenfor, samtidig med at vi reducerede vores design og udviklingstid.

kilde: shutterstock

Design moduler og opbyg skærmbilleder

Opret nye skærme

Dette er sandhedens øjeblik. Dette er det trin, som designerne har ventet på, en masse spændende og kreative ting kommer igennem fra dette trin. De visuelle ændringer, udseendet og følelsen med et klart hierarki får virkelig produktet til at se spændende og nyt ud. Vi brugte Flinto til at oprette en prototype og delte den inden for vores produkt- og designteam såvel som vores strømbrugere og indsamlede feedback fra dem alle. Deling af Flinto-prototypen gjorde det muligt for alle at bruge og interagere med det nye design på deres enhed. Det hjælper virkelige brugere med at se og interagere med det nye design, udvikle et sæt spørgsmål og feedback, der skal adresseres, inden udviklingen starter.

Samarbejd med ingeniører for at opbygge design

Et af redesignmålene var at tilvejebringe en skalerbar løsning for designere og frontendingeniører til i samarbejde at opbygge funktioner. For at nå dette mål oprettede vi standardiserede UI-moduler, specifikationer og arbejdede med ingeniører for at definere modelnavne og deres applikationer sammen. Vi samarbejdede også med ingeniører om at bygge UX / UI-sprogbiblioteket fra UI-værktøjssættet i kode. Dette delte initiativ sparede ikke kun meget tid for designere og ingeniører, men skabte også et solidt fundament for fremtidige samarbejder.

QA designet

Ligegyldigt hvor gode dine ingeniører er, er der chancen for, at de ikke udførte noget, som designerne havde planlagt. Hemmeligheden bag at opbygge et komplet og holistisk design fra en skissefil er at skille en klart defineret og aftalt Design QA ind i den endelige opbygningsproces. Den mest effektive måde at kommunikere designintention på var faktisk at sidde med ingeniører og fungere som et par programmerer. Simulatoren med Xcode kan hjælpe designeren med at se enkeltskærme med rigtige data på forskellige enheder, som iPhone 5, iPhone 6, iPhone 7 og iPad på samme tid. I mellemtiden kan ingeniørerne også se skærmene på forskellige sprog på én gang. Tilvejebringelse af de rigtige indstillinger fra forskellige sprog vil også reducere risikoen for UI-fejl, der er forårsaget af lokalisering, yderligere.

På dette tidspunkt er det nye design klar til afsendelse. Og hele teamet er klar til at høre fra vores brugere om, hvor meget de kan lide den nye, friske og dejlige oplevelse af vores genopbygning og redesign.

Men vent ... Det betyder ikke, at vi er færdige. I den næste del vil jeg dele nogle opfølgningstrin, forståelser efter frigivelsen og yderligere opdateringer af dette redesigninitiativ.

kilde: shutterstock