Diagrame de arhitectură a sistemelor de proiectare

Vocabular vizual pentru a relaționa sisteme, produse și mărci

Atât de multe întreprinderi prezintă ecosisteme mult mai complexe decât „un singur sistem de proiectare, toate produsele noastre”. Din ce în ce mai mult, am găsit discuții între lideri de grupuri și sisteme provocatoare. Până acum, mi-a lipsit vocabularul pentru a arăta și învăța rapid lățimea acestor numeroase sisteme și modul în care servesc clienți interni diferiți, cu funcții diferite.

Acest articol propune un vocabular vizual al mărcilor, sistemelor și produselor. Vocabularul indică diferitele ieșiri, documentare, adopție și limitele organizaționale ale unui sistem de proiectare. În concluzie, vocabularul este ilustrat printr-un exemplu complet, bazat pe scenariu.

simboluri

Diagramele de arhitectură de sistem folosesc simboluri (diamante, cercuri și pătrate) pentru a conecta obiecte (sisteme, produse și identități de marcă, respectiv).

Sistem, ca Diamond

Fiecare diamant reprezintă un set de caracteristici explicite sau implicite ale sistemului de design, incluzând, dar fără a se limita la un stil vizual definit, aplicat uneia sau mai multor componente UI oferite ca elemente de design și / sau cod.

Etichetele de titlu și descriere sunt afișate opțional în dreapta sus la 45 de grade. În timp ce se poate ajusta locația etichetei pe măsură ce apare o diagramă, această setare implicită s-a dovedit cel puțin probabil să intre în conflict cu obiectele și conectorii.

Instrumente de sistem - Asseturi de proiectare și cod - sub formă de semi-diamante

Fiecare sistem oferă active de proiectare (precum Sketch, Figma sau Invision Studio), o bibliotecă de coduri sau ambele. Prin urmare, diamantul sistemului este partiționat pentru a indica dacă oferă active de proiectare (un D roșu în jumătatea stângă a simbolului), cod (un C albastru în jumătatea dreaptă a simbolului) sau ambii clienți.

Ghid de proiectare și referință de cod ca fundal de diamant

Majoritatea sistemelor de proiectare documentează exemple vizuale și - dacă sunt disponibile - codul folosit pentru a produce acel rezultat. Cu toate acestea, nu toate sistemele de proiectare oferă ghiduri de proiectare mai profunde și materiale de referință de cod. Ambele sunt de obicei comunicate printr-un site web bine conceput. Prin urmare, fundalurile galbene din partea stângă și dreapta a diamantului sistemului indică disponibilitatea liniilor directoare de proiectare și, respectiv, a codului de referință.

De exemplu, IBM Carbon, Shopify Polaris, Morningstar, REI Cedar (dezvăluire: am contribuit la ultimele două) furnizează ghiduri detaliate de proiectare și materiale de referință de cod. Prin urmare, fiecare ar include un diamant galben complet în spatele ieșirilor D&C.

Pe de altă parte, Financial Times Origami oferă referințe de cod fără linii directoare de proiectare. Materialul Google a furnizat îndelung ghiduri de proiectare copioase fără cod, deși acestea s-au schimbat recent cu ghidurile și codul lor mai cuplate în arhitecturi diferite ale unui site mult mai larg.

Sistemul de proiectare Lightning Salesforce oferă îndrumări de proiectare destul de limitate, amestecate în documentația componentelor centrate pe cod. Prin urmare, am indicat - cu reticență - că site-ul său nu are ghiduri detaliate de proiectare.

Produse sub formă de cercuri

Diagrama de conexiuni între un sistem de proiectare și clienții săi este esențială. Unii pot să nu considere munca lor un „produs” în sine. Cu toate acestea, un cerc reprezintă orice experiență digitală (sau o parte a acesteia) produsă de o echipă care ar putea alege să adopte un sistem.

De exemplu, o experiență de comerț electronic poate avea echipe distincte pentru fiecare etapă a procesului: pagina principală, rezultatele căutării, paginile (paginile) de destinație și categorii, pagina produsului, coșul de cumpărături, plata, starea comenzii și returnările și profilul contului. Fiecare ar fi reprezentat distinct într-o diagramă.

Cantitatea produsului ca insigne

Pentru ecosistemul cu multe produse, consolidați-vă într-o dată simbolul reprezentând multe și indicați cantitatea cu o insigna.

Starea adoptării produsului ca culoare

Adoptarea produsului unui sistem este neregulată. Prin urmare, folosiți culoarea pentru a conota statutul ca fiind adoptarea folosind codul de sistem (negru), încorporarea designului sistemului într-un cod personalizat al unui produs (gri) sau nu adoptarea sistemului deloc (alb).

Acestea pot fi, de asemenea, consolidate folosind ecusoane pentru cantitate.

Conectori, linii de sus în jos

Conectorii verticali, de sus în jos reprezintă produsul (produsele) în funcție de sistem (e). În timp ce afișajele de la stânga la dreapta și cele radiale oferă oportunități distincte (în special, „frumusețea” radială), orientarea de sus în jos îmbunătățește eficiența vizuală, accelerează înțelegerea și ușurează producția și întreținerea.

Liniile se transformă prin unghiuri rotunjite, de 90 de grade. Conectoarele drepte sau arcuite s-au suprapus și s-au combinat cu alți conectori și obiecte, ceea ce face prezentarea dezordonată și rutele mai greu de urmărit.

Aceste diagrame se referă strâns la diagramele de dependență care încheie conectoarele cu o săgeată. Cu toate acestea, feedback-ul a sugerat cu tărie că orientarea verticală a diagramei presupunea direcționalitate. „Săgețile înghesuie diagrama”, au afirmat colegii mei. Prin urmare, bazați-vă pe o culoare simplă și mai mică de contrast pentru o linie pentru a conecta obiecte.

Identități de marcă ca pătrate

Uneori este amuzant să vezi pro-sistemele de proiectare pornite atunci când le-am reamintit că sistemul lor nu este partea de sus a piramidei. Fiecare sistem de design (digital) pe care l-am lucrat moștenește elemente esențiale vizuale - culoare, tipografie, ilustrare - și alte proprietăți de la una sau mai multe identități de marcă gestionate dintr-o marcă sau o echipă de marketing. Brandurile sunt reprezentate ca un pătrat.

Mărci multiple ca părinți ai unui singur sistem

Afișarea mărcilor este utilă pentru portretizarea multor identități acceptate de un singur sistem. De exemplu, un sistem de proiectare Marriott a inclus reguli pentru proprietăți hoteliere distincte, cum ar fi Courtyard, Renaissance și JW Marriott.

Limite organizatorice sub formă de coloane

Nici o arhitectură a sistemelor de proiectare în întreprindere nu este completă fără o indicație a unității (unităților) organizaționale deservite de fiecare. Acestea pot lua forma de domenii, triburi și echipe. Sau poate linii de afaceri. Sau segmente ale călătoriei unui client. Indiferent de modul în care compania dvs. divizează activitatea și echipele, dacă este de orice anvergură, are divizii.

Am ales să folosesc limitele purpurii, care sunt în linie și sunt mai groase decât liniile care conectează nodurile. În plus, etichetele violet cu un sau două niveluri orientate pe linia de bază a diagramei etichetează clar fiecare zonă.

Exemple

Pentru a vedea vocabularul vizual în acțiune, vă prezint o serie de exemple susținute de povești descriptive pentru a stabili contextul și a dezvălui provocări la nivel înalt cu care se confruntă sistemul (sistemele) în cauză.

Exemplu: un sistem central cu intermediari

Această arhitectură de sistem de design conține un sistem unic recunoscut de care depind toate produsele digitale. Unele produse adoptă sistemul direct. În alte cazuri, sistemul este intermediat de echipe care oferă traduceri JavaScript bazate pe React și Vue ale bibliotecii sale vaniliene HTML și CSS.

Echipa de sistem de proiectare a recunoscut redundanța și complexitatea arhitecturală, conducând următoarea generație de lucrări pentru a oferi componente web pentru a atenua nevoia unor astfel de traduceri.

Exemplu: Bănci mici și companii de asigurare

Multe companii de asigurări și bănci organizează echipe de produse digitale pe măsură ce pâlnia curge de la .com marketing prin caneluri de vânzare care achiziționează clienți pentru a deservi experiențe pentru gestionarea tranzacțiilor, cum ar fi o cerere și respectiv transferul de bani. Acest lucru poate duce la cel puțin două sisteme de proiectare, divizarea cel puțin .com și deservirea, dacă nu și un al treilea sistem pentru fluxurile care achiziționează clienți în spațiul despărțit între.

Exemplu: Software-as-a-Service (Educație)

Luați în considerare un portofoliu de software sub umbrela unei companii-mamă. Sistemul lor a apărut printr-o reproiectare a ofertei sale de prezentare: conținut și media interactivă ca curriculum.

După lansarea flagship-urilor, echipele au aplicat sistemul pentru instrumente de produse încrucișate (autentificare, pagină de pornire, tablou de bord, căutare și gestionarea contului) și console administrative unde educatorii au gestionat datele și accesul elevilor. Odată cu creșterea succesului, au început să se uite spre o unitate de frați care producea site-uri personalizate, cu etichete albe pentru clienți.

Exemplu: Unități de afaceri în funcție de tipul clientului

O companie a organizat echipe digitale în unități de dezvoltare a produselor care deservesc separat consumatorii, angajatorii și angajații lor și instituțiile mari din domeniul lor. Drept urmare, în fiecare unitate au apărut sisteme distincte.

Echipele de sistem au distribuit practici și instrumente încă rămase autonome pentru a deservi în mod optim clienți distinși. Acest lucru a contribuit la evitarea provocărilor, cum ar fi convergerea prematură a unui limbaj de design care nu era încă o prioritate.

Exemplu: Software-as-a-Service (Enterprise)

O companie de software a creat un sistem centralizat puternic, cu adopție în toate produsele pilot și în produsele secundare. Acestea fiind spuse, a persistat o experiență de documentare de proiectare separată, în afară de componentele codificate aplicate universal. Unele produse cheie au extins sistemul, fie că sunt proiectanți de la produsele A&B care administrează bibliotecile Sketch sau un inginer care menține codul componentelor pentru echipele sale. În plus, o potențială achiziție va declanșa discuții despre integrare la nivel de produs, sistem și marcă.

Puteți descărca fișierul Sketch cu simboluri și exemple afișate aici.