Sisältö
- Mitkä olivat projektin tavoitteet?
- Mitä UX-tutkimusta teit?
- Kuinka työ jaettiin?
- Kuinka hoidit viestintää?
- Kuinka mukautit prosessisi hallitsemaan aika- ja budjettirajoituksia?
- Kuinka kuvailisit projektin suunnittelun perusarvoja?
- Kuulostaa siltä, että olisit tullut melko hyvin. Kuinka se vaikutti projektiin?
- Mitä tekniikoita käytit?
- Jon kuvaili tätä "lähinnä unelmaprojektille". Kuinka niin?
- Kuinka kooit kuvakirjaston?
- Miksi jaoit kirjastoa?
- Miksi teit alfa-julkaisun?
- Kuinka hoidit sisällönsiirron vanhalta sivustolta?
- Oliko tällä projektilla tunnari?
Bay Arean voittoa tavoittelematon järjestö Code for America auttaa tekemään Yhdysvaltain hallituksen digitaalisista palveluista kauniita, yksinkertaisia ja helppokäyttöisiä. Sen äskettäinen sivustohuolto, joka tehtiin yhteistyössä brittiläisen UX-toimiston Clearleftin kanssa, toi samat arvot omaan läsnäoloonsa verkossa. Clearleftissä Jon Aizlewood hoiti visuaalista suunnittelua, freelancer Anna Debenham hoiti käyttöliittymän rakentamisen, kun taas Jeremy Keith valvoi työtä ja kirjoitti JavaScriptin. CfA: lla UX-evankelista Cyd Harrell hoiti IA: ta, teknologiajohtaja Mike Migurski toteutti muutokset ja vanhempi markkinointipäällikkö Dana Oshiro johti projektia.
Mitkä olivat projektin tavoitteet?
Mike Migurski: Alkuperäinen tehtävämme oli korvata vanha, röyhkeä Code for America -sivusto uudella näyttävällä. Kun aloitimme projektin parissa työskentelyn kesällä 2013, tunnistimme kolme tavoitetta, jotka auttaisivat parantamaan projektia. Ensinnäkin Cyd Harrellin tutkimus hallituksemme ja nörttiyhteisömme motivaatioista ehdotti, että meidän pitäisi korvata sivuston ammattikieltä jollakin suoremmin yleisölle kirjoitetulla.
Toiseksi, GOV.UK: n julkaisu keskitti uuden huomion hallituksen verkkosivustojen rooliin, ja halusimme saada mielekästä omakohtaista kokemusta, jota voisimme hyödyntää neuvotellessamme kaupungin ja läänin kumppaneita. Viimeiseksi huomasimme, että meillä oli valtava määrä epäjohdonmukaisia sivustosuunnitelmia erilaisille aloitteille, ja halusimme kirjaston joustavista, mobiilivalmiista malleista, joita hyödynnettäisiin tulevia hankkeita rakennettaessa.
Mitä UX-tutkimusta teit?
Cyd Harrell: Koska työskentelimme myös yleisen sitoutumismallimme tai osallistumisarkkitehtuurimme parissa, teimme generatiivisemman tutkimustyylin kuin on tyypillistä verkkosivustojen uudelleensuunnittelulle. Haastattelin noin 40 nykyistä, entistä ja potentiaalista osallistujaa erilaisiin ohjelmiin. Tutkin ihmisten motivaatioita työskennellä kanssamme, heidän polku kiinnostuksesta täyden sitoutumisen kautta ja verkkosivuston rooli heidän matkallaan.
Mielenkiintoisin löytö, joka on suuren osan uudesta verkkosivustosuunnittelusta, oli erittäin voimakas halu käyttää ammattitaitoaan hyväksi. Julkiset toimihenkilöt ja kaupalliset teknikot estetään tästä eri tavoin, ja Code for America -toiminta tarjoaa tapoja ohittaa nämä esteet. Joten verkkosivustomme suuntaamisesta tukemaan ihmisiä toimimaan ja näkemään tekojensa vaikutukset mahdollisimman nopeasti tuli etusijalle. Näet tämän vahvistuneen, kun jatkamme sivuston kehittämistä.
Kuinka työ jaettiin?
Jeremy Keith: Yleensä kun Clearleft on mukana projektissa, käsittelemme asioiden UX-puolen, visuaalisen suunnittelun ja joskus frontend-kehityksen (päätämme tarkoituksella olla tekemättä backend-kehitystä). Tämä projekti oli hieman erilainen: Code for America oli jo käynyt läpi suuren sisällön tarkastuksen ja työskennellyt haluamansa käyttäjäkokemuksen läpi. Se jätti meidät tekemään visuaalista suunnittelua ja käyttöliittymän kehittämistä. Työn edetessä kaikki käyttöliittymään tai tietoarkkitehtuuriin liittyvät kysymykset käsiteltiin yhteistyössä.
Kuinka hoidit viestintää?
JK: Meillä oli nopea stand-up-neuvottelupuhelu joka päivä. Meille puhelu oli päivän lopussa: 17.30. Se oli klo 9.30 San Franciscossa, juuri kun ihmiset pääsivät Code for America -toimistoon. Se toimi yllättävän hyvin. Jos meillä olisi tarvitsemamme heiltä, ilmoittaisimme heille päivän päätteeksi; sitten heillä olisi koko päivä aikaa koota se yhteen, joten se odotti meitä, kun tulemme töihin seuraavana päivänä. Nämä transatlanttiset keskustelut olivat aina mukavia ja lyhyitä. Ne kesti harvoin yli 10 tai 15 minuuttia. Se oli tarpeeksi pitkä, jotta kaikki saisivat vauhtia tapahtumaan. Jatkuvan viestinnän taso oli oikein: matkan varrella ei tapahtunut odottamattomia yllätyksiä tai ”suuria paljastuksia”.
Kuinka mukautit prosessisi hallitsemaan aika- ja budjettirajoituksia?
JK: Tiukan aikataulun ja rajoitetun budjetin parissa työskentely merkitsi sitä, että päätösten oli tapahduttava nopeasti: meillä ei ollut ylellisyyttä tarkastella kaikkea hyvin yksityiskohtaisesti.Tämä tarkoitti sitä, että ideoista oli välitettävä mahdollisimman nopeasti. Joskus se oli vain luonnos paperille. Jos tarvittaisiin lisätietoja, Photoshop tulisi esiin. Jos kyseessä oli vuorovaikutuskysymys, yritämme koota nopeasti toimivan koodin yhteen.
Lyhyt aikataulu tarkoitti myös sitä, että suunnittelun ja kehityksen oli tapahduttava rinnakkain: ei ollut vain tarpeeksi aikaa odottaa, että mallit ovat täysin selvillä ennen kehityksen aloittamista. Mielestäni tällä oli positiivinen vaikutus. Suunnitelmia tutkittiin Photoshopissa, mutta ne viimeisteltiin selaimessa.
Jon Aizlewood: Oudolla kyllä yhdeksän aikavyöhykettä Brightonin ja San Franciscon välillä olivat siunaus valepuvussa. Päivittäiset stand-upit antoivat meille mahdollisuuden puhua työstä, jonka olimme päättäneet sinä päivänä. Pohjimmiltaan jokainen päivä oli sprintti, jonka lopussa oli toisto, joten suunnittelemme, kehitimme ja iteroimme joka päivä ajoissa kello 17.30. Tämä ei merkinnyt sähköpostitennistä, ei Basecamp-romaaneja ja hyvin vähän projektinhallintaa, koska kaikki olivat täysin ajan tasalla siitä, mitä kaikki työskentelivät. Google-dokumenttien ohella sisällön, sivun kuvauskaavioiden ja niin edelleen jakamiseksi päätimme käyttää Trelloa sen Kanban-tyyliseen toimintaan Tehtävä, Tehtävä ja Valmis.
Kuinka kuvailisit projektin suunnittelun perusarvoja?
JA: CfA-tiimillä oli jo jonkin verran tuotemerkkityötä osavaltion toimistossa, mikä auttoi asettamaan sävyn sivuston visuaaliselle kielelle. Kun kehitimme tätä kieltä verkkoon, käytimme läpi periaatteita, joita CfA käyttää organisaationa, ja edustimme niitä käyttöliittymän vahvan, rohkean paletin, suuren typografian ja yleisen yksinkertaisuuden kautta. Halusimme, että sivusto on voimakas ja kommunikoiva, isänmaallinen ja helposti lähestyttävä kaikilta CfA-liikkeestä kiinnostuneilta.
MM: Työn kolme arvoa olivat avoimuus, valuutta ja optimismi. Ajatuksena on, että tämä on helppopääsyinen ja vieraanvarainen paikka, joka jakaa sen salaisen kastikkeen, että sivusto on ajan tasalla sekä sisällöltään että siitä, miten se todella toimii, ja että kansalaiset ja hallitukset voivat tehdä yhteistyötä tilanteen parantamiseksi.
Kuulostaa siltä, että olisit tullut melko hyvin. Kuinka se vaikutti projektiin?
JK: Vaikka Jon on kokopäiväinen Clearleftin työntekijä, Anna on freelancer. Mutta tässä projektissa vaadin, että hän ei vain tule Clearleftin toimistoon, vaan että hän istui vierekkäin Jonin kanssa. He eivät tappaneet toisiaan. Itse asiassa luulen, että heillä oli hauskaa. Projektin loppuun mennessä Anna oli melkein vakuuttanut meidät teeman valmistamiseen liittyvän kiistanalaisen lähestymistavan eduista, dokumentoitu osoitteessa teamethod.co.uk. Oli aina mukavaa lopettaa päivä transatlanttisella neuvottelupuhelulla kollegoillemme Code for America -sivustolla. Kolme ihmistä, joiden kanssa olimme tekemisissä, oli ehdottoman ilo työskennellä.
Anna Debenham: Olimme tasa-arvoisilla - Code for America -tapahtuman kansalaiset tietävät todella tavaransa, joten he pystyivät antamaan uskomattoman hyödyllistä palautetta ja ehkäisemään ongelmia. Järjestelmän rakentaminen oli vain yksi osa prosessia. Mikä todella määrittää, kuinka onnistunut projekti on, perustuu siihen, kuinka helppoa Code for America on ylläpitää ja rakentaa sitä kuukausien ja vuosien aikana.
Mitä tekniikoita käytit?
ILMOITUS: Meitä pyydettiin toimittamaan CSS-tiedostoja Sassin sijaan, mutta käytimme silti Sassia kehityksen aikana auttamaan muun muassa muuttamaan px-arvoja remeiksi ja tallentamaan värimuuttujia. Prototyyppimallit rakennettiin Jekyllillä, ja tätä päädyttiin käyttämään suoralla sivustolla, koska sivut on tallennettu staattisina HTML-tiedostoina tietokannan sijasta, mikä tekee muiden ihmisten kanssa helpoksi yhteistyön. Tehtävien hallinnassa käytimme Trelloa sen sijaan, että kiinnitimme tavaraa seinälle, jotta kuka tahansa voisi milloin tahansa sukeltaa sisään ja nähdä, mitä oli meneillään. Jon käytti suunnittelussa Photoshopia. Tämä sai minut vannomaan paljon, joten hän ei enää käytä Photoshopia ja käyttää sen sijaan Sketchia.
Laitetestauksessa ja virheenkorjauksessa Ghostlab oli valtava apu. Voisin tehdä muutoksia prototyyppiin paikallisesti, päivittää selaimen työpöydällä, ja se päivittäisi automaattisesti kaikkien laitteiden selaimet. Käytimme GitHubia ensimmäisestä päivästä prototyyppiin, ja projektin loppupuolella siellä oli vikoja. Siellä kaikki sivustotiedostot elävät nyt, joten muutoksia on helppo tehdä.
Jon kuvaili tätä "lähinnä unelmaprojektille". Kuinka niin?
JA: Mielestäni jatkuvan vuoropuhelun ja avoimen ja rehellisen palautteen antavan asiakkaan yhdistelmä on - minulle - projektin onnistumisen kulmakivi. Päivittäiset sprintit pitivät kaiken kohdennettuna ja tiellä, ja CfA: n ihmiset olivat vastaanottavia, nopeita toimimaan ja tiesivät, mistä he puhuivat. Ei ole haittaa, että he ovat vain todella mukava joukko ihmisiä, jotka tekevät hyvää työtä hyvän asian hyväksi. Kaiken kaikkiaan se oli täydellinen sekoitus.
ILMOITUS: Code for America luotti meihin toimittamaan ja kokeilemaan vähän - he olivat hyvin avoimia ideoille. Se auttoi myös, että he pitivät kaikista malleista ja jakoivat huumorintajumme!
Kuinka kooit kuvakirjaston?
ILMOITUS: Code for America lähetti meille tuotemerkkityylioppaan, jonka he olivat äskettäin tuottaneet. Samalla kun Jon alkoi pilkata malleja, valitsin sen läpi ja poimin joitain asioita, joita tarvitsemme verkkosivustolle: fontit, värit, kuvakkeet ja kuvat. Kun olimme valmiita rakentamaan maketteja, jakoin suunnittelun kuvioiksi - erillisiksi moduuleiksi - ja rakensin kaikki näistä ja testasin sen eri laitteilla. Päivittäisen nousun aikana käytiin läpi uudet mallit ja tarkastelimme niitä selaimessa yhdessä.
Se oli mukavaa, koska koodin käyttäminen kuvion rinnalla tarkoitti toisinaan Code for America -tuotetta antavan meille teknistä palautetta HTML: stä ja malleista. Puolivälissä, lisäsin "patchwork" -näkymän kuvakirjastoon helpottamaan laitetestausta, jotta voimme tarkistaa kuviot niiden koko leveydeltä sen sijaan, että ne olisi kääritty konttiin.
Miksi jaoit kirjastoa?
ILMOITUS: Muuta ei, paitsi että se olisi mukava asia tehdä? Loppujen lopuksi, jos verkkosivustosi on julkinen, CSS ja HTML ovat jo käytettävissä lähdekoodin perusteella. Kirjasto ei ole vain loistava oppimisväline muille, vaan sen lisääminen GitHubiin tarkoittaa, että ihmisillä on paikka ehdottaa virhekorjauksia tai parannuksia. Lisäksi tieto siitä, että koodi tulee olemaan näkyvissä, on hyvä kannustin kirjoittaa parempia, harkittuja merkintöjä.
Miksi teit alfa-julkaisun?
MM: Päätimme tehdä alfa-julkaisun kuusi viikkoa ennen pääsivuston käynnistämistä muutamista syistä. Ensinnäkin halusimme olla varmoja siitä, että yhteisöllämme oli mahdollisuus nähdä ja tutustua uuteen sivustoon, ennen kuin se korvasi vanhan, ja hyödyntää GitHubissa olevaa sisältöä lähettääkseen korjauksia ja lisäyksiä. Toiseksi seisomme organisaationa ketterien / laihojen kehitysmenetelmien takana hallituskumppaneillemme ja halusimme käydä tätä keskustelua. Lisäksi on vähemmän stressaavaa vaihtaa, kun voit käyttää sitä palalta kerrallaan tietyn ajanjakson ajan. Jopa nyt vanha sivusto on edelleen käytettävissä.
Kuinka hoidit sisällönsiirron vanhalta sivustolta?
MM: Sisällönsiirto oli suurin osa työtä. Aloitimme sanojen siirtämisen kuukausia ennen visuaalisen suunnitteluvaiheen saavuttamista, kirjoittamalla ja yksinkertaistamalla sivuja hallituksille ja kansalaisille -osioille, jotta ne kuvastaisivat pääosastamme. Dana Oshiro, Cyd Harrell ja minä pidimme puoli tusinaa "sivurikoja", joissa karsimme ja virtaviivaistimme sisältöä, perustimme uudelleenohjauksia ja rakensimme uusia sivuja. Danalla on erinomainen blogikirjoitus tästä aiheesta ”Testing The Ugly Duckling”.
Kun Clearleftin työ oli tehty, tammikuu oli aggressiivinen askel siirtää jäljellä olevia sivuja. Dana teki leijonanosan tästä työstä, ja Cyd ja minä itse tekivät paljon copy / paste-työtä. Se ei ollut hohdokas työ: meidän oli poistettava vanhan sivuston tyylitaulukkoihin optimoidut merkinnät, kartoitettava uudelleenohjaukset, jotta olemassa olevat linkit eivät epäonnistuneet, siirrettävä kuvia ja linkkejä ja testattava jatkuvasti kahden sivuston välisiä linkkejä. Pieni Python-koodi auttoi testauksessa, jaettu laskentataulukko auttoi meitä koordinoimaan, ja valtava määrä HTTP-uudelleenohjauksia piti yllätys 404: n minimissä. Alfa-julkaisun jälkeen yhteisömme auttoi meitä täydentämään sivun sisältöä ongelmien ja pyyntöjen kautta.
Oliko tällä projektilla tunnari?
JA: Hauska sinun pitäisi kysyä. Tässä elokuvassa on nukkeja, Matt Damon ja paljon vannomista. Päiväsi eivät voineet alkaa ennen kuin kyseisen elokuvan tunnari soi täydellä äänenvoimakkuudella ainakin kerran. Koodi Amerikalle, vittu Joo!
