Բեռնվում է

Picsart

Growth և Marketplace — խոշոր թվային պրոդուկտի UI-ի մշակում

2021 թվականի հոկտեմբերից մինչև 2024 թվականի փետրվարը ես աշխատել եմ picsart.com-ի վրա՝ որպես Senior UI Engineer․ սկզբում Growth թիմում, ապա Marketplace-ում։

Իմ աշխատանքը ներառում էր Picsart-ի դիզայն համակարգի ներդրումը, համակարգում բացակայող բաղադրիչների ստեղծումը, աջից ձախ գրությամբ լեզուների աջակցության իրականացումը զրոյից և հասանելիության աշխատանքների զգալի մասը՝ իմ պատասխանատվության շրջանակում։

Դերը՝
Senior UI EngineerԸնկերության աշխատակից
Աշխատանքների շրջանակը՝
Դիզայն համակարգի ինտեգրումRTL/LTR տեղայնացումՀասանելիությունԱրագագործություն
Թիմեր՝
Growth (2021–2023)Marketplace (2023–2024)
Տեխնոլոգիաներ՝
ReactJSSStyled Componentsi18n

Ինչ էր ներառում աշխատանքը

picsart.com-ը մեծածավալ պրոդուկտային հարթակ է, որի վրա միաժամանակ աշխատում են բազմաթիվ թիմեր։ Իմ խնդիրն էր իմ թիմի պատասխանատվության շրջանակում ապահովել UI-ի միասնականությունը, հասանելիությունն ու պատրաստ լինելը բոլոր աջակցվող լեզուների համար։

  1. Նախապատմություն

    Picsart-ի կայքում ներկայացված են տարբեր պրոդուկտներ և էջերի տեսակներ՝

    • Մարքեթինգային և բիզնես էջեր
    • Marketplace և Discovery
    • Խմբագրիչ և Mini Apps
    • Growth պրոդուկտներ, այդ թվում՝ Ad Wizard

    picsart.com-ի վրա միաժամանակ աշխատում են բազմաթիվ թիմեր։ Յուրաքանչյուր թիմում կա Design System-ի ինտեգրման պատասխանատու․ իմ թիմում այդ դերը կատարում էի ես։

  2. Growth թիմ, 2021–2023

    Ես թիմի հիմնական UI ծրագրավորողն էի և հիմնականում աշխատում էի Picsart-ի կայքի վրա՝

    • Մոդուլային, մասշտաբելի UI՝ React, JSS և Styled Components տեխնոլոգիաներով
    • Ադապտիվ և տարբեր բրաուզերների հետ համատեղելի իրականացում
    • Հասանելիության բարելավումներ
    • Կոդի վերանայում՝ արագագործության, սպասարկելիության և լավագույն պրակտիկաների շեշտադրմամբ

  3. Ad Wizard

    Growth թիմի առանձին պրոդուկտ, որտեղ օգտատերերը ստեղծում են տեսողական և սոցիալական մեդիայի բովանդակություն ու հարմարեցնում այն տարբեր հարթակների ձևաչափերին՝ տեքստ, պատկերներ, վերնագրեր և էմոջիներ՝ մեկ խմբագրիչում։

    Որպես Growth թիմի հիմնական UI ծրագրավորող՝ իրականացրել եմ դրա ինտերֆեյսը React, HTML/CSS, JSS և Styled Components տեխնոլոգիաներով։

  4. Փուլ 1Դիզայն համակարգի ինտեգրում

    Իմ թիմում ես էի հիմնական պատասխանատուն picsart.com-ի և առանձին պրոդուկտային ուղղությունների UI-ի ու դիզայն համակարգի ինտեգրման համար՝

    • Ընդհանուր բաղադրիչները ներդրել եմ բիզնես էջերում, խմբագրիչում և Mini Apps-ում
    • Տրամադրված բաղադրիչներն ու ձևանմուշները կիրառել եմ պրոդուկտի պահանջներին համապատասխան

    Փուլ 2Բաղադրիչներ, որոնք դիզայն համակարգում չկային

    Ընդհանուր բաղադրիչները տրամադրում էր Design System թիմը։

    Եթե անհրաժեշտ լուծումը համակարգում չկար, մեր պրոդուկտային ուղղության համար ստեղծում էի բացակայող բաղադրիչները՝ համապատասխանեցնելով դրանք ընդհանուր համակարգին, որպեսզի ինտերֆեյսը մնա միասնական։

    Փուլ 3Աջից ձախ գրությամբ լեզուներ

    Իմ պատասխանատվության շրջանակում զրոյից իրականացրել եմ բազմալեզու աջակցություն՝ ներառյալ RTL/LTR-ը։

    Յուրաքանչյուր էջում left և right արժեքներն առանձին ուղղելու փոխարեն դասավորության ուղղության տրամաբանությունը կառուցեցի CSS-ի տրամաբանական հատկությունների վրա՝ inline և block, start և end։ Այդպես ուղղության փոփոխությունը կիրառվում է ամբողջ կառուցվածքում։

    Փուլ 4Հասանելիություն

    Երբ սկսեցի աշխատել, հասանելիությունը միայն մասամբ էր իրականացված։ Իմ պատասխանատվության շրջանակում կատարել եմ WCAG-ի ներդրման աշխատանքների զգալի մասը՝ պահանջները ներառելով հենց բաղադրիչների մեջ, ոչ թե ավելացնելով հետո։

    Փուլ 5Ադապտիվություն և տարբեր բրաուզերների աջակցություն

    Յուրաքանչյուր բաղադրիչ ստուգել եմ տարբեր էկրանների չափերի և բրաուզերների վրա, որպեսզի էջերը բոլոր այցելուների համար հետևողական աշխատեն։

  5. Արագագործություն

    Growth թիմում օպտիմալացրել եմ Discovery էջերն ու դրանց կոդային բազան։

    Էջերի արագությունը չափվել է փոփոխություններից առաջ և հետո. կոնկրետ ցուցանիշներն այստեղ չեն հրապարակվում։

  6. Ինչ փոխվեց

    • RTL լեզուների կառուցվածքային աջակցություն՝ ձեռքով ուղղումների փոխարեն
    • Marketplace-ի էջերը համապատասխանեցվել են ընդհանուր դիզայն համակարգին
    • Հասանելիությունը ներառվել է իմ պատասխանատվության շրջանակի բաղադրիչներում
    • Discovery-ի ավելի արագ էջեր

  7. Ինչ է ցույց տալիս նախագիծը

    • Մեծ մասշտաբի պրոդուկտի վրա աշխատանք՝ մեծ թիմերում և ընդհանուր համակարգերում
    • Տեղայնացումն ու հասանելիությունը՝ որպես կառուցվածքի հիմք, ոչ թե ուշացած շտկումներ
    • Նույն ստանդարտները կիրառվում են Torchyan-ի յուրաքանչյուր նախագծում

Ինտեգրման սկզբունքներ

Ինչպես էր ընդհանուր դիզայն համակարգը ներդրվում իմ պատասխանատվության շրջանակի էջերում։

  • Նախ՝ ընդհանուր բաղադրիչները

    Օգտագործել դիզայն համակարգի բաղադրիչները ամենուր, որտեղ դրանք համապատասխանում են խնդրին, իսկ նորերը ստեղծել միայն իրական բացերի դեպքում։

  • Հետևել համակարգին

    Նոր բաղադրիչները հետևում են ընդհանուր թոքեններին, բացատներին և վիճակներին։

  • Դասավորություն՝ անկախ գրության ուղղությունից

    CSS-ի տրամաբանական հատկություններ՝ ֆիքսված left և right-ի փոխարեն, որպեսզի RTL-ն աշխատի կառուցվածքային մակարդակում։

  • Հասանելիություն՝ ի սկզբանե

    Հասանելիությունը հաշվի է առնվում յուրաքանչյուր բաղադրիչում, ոչ թե ավելացվում վերջում։

  • Ադապտիվություն՝ ամենուր

    Յուրաքանչյուր բաղադրիչ ստուգվում է տարբեր էկրանների և բրաուզերների վրա։

Մանրամասն

Աշխատանքի հինգ ուղղություն և դրանցից յուրաքանչյուրի մոտեցումը։

1. RTL/LTR դասավորության տրամաբանություն

Էջի գրության ուղղությունը ձախից աջից աջից ձախ փոխելիս սովորաբար պետք է գտնել բոլոր left և right արժեքները։

Դասավորության ուղղության տրամաբանությունը վերակառուցել եմ CSS-ի տրամաբանական հատկությունների հիման վրա՝

  • margin-inline և padding-inline՝ left և right-ի փոխարեն
  • inset-inline-start և inset-inline-end՝ դիրքավորման համար
  • Գրության ուղղությունը սահմանվում է մեկ անգամ՝ արմատային մակարդակում

Այժմ ուղղության փոփոխությունն ազդում է ամբողջ կառուցվածքի վրա՝ առանց յուրաքանչյուր էջն առանձին շտկելու։

2. Դիզայն համակարգի ինտեգրում

Design System թիմի ընդհանուր բաղադրիչները ներդրվել են՝

  • Բիզնես և պրոդուկտային էջեր
  • Խմբագրիչ
  • Mini Apps

Բաղադրիչների տեղադրումը որոշվում էր պրոդուկտի պահանջներով. իմ թիմի շրջանակում տարբեր ուղղությունների միջև միասնականության համար պատասխանատու էի ես։

3. Համակարգում բացակայող բաղադրիչները

Marketplace-ի որոշ պահանջների համար ընդհանուր համակարգում պատրաստ լուծումներ չկային։ Այդ դեպքերում ստեղծում էի մեր թիմի բաղադրիչները, որոնք՝

  • Օգտագործում են ընդհանուր թոքենները
  • Պահպանում են նույն վիճակներն ու բացատները
  • Մնում են ադապտիվ և հասանելի

4. Հասանելիության իրականացում

Սկզբում հասանելիության աջակցությունը սահմանափակ էր, սակայն իմ պատասխանատվության շրջանակում այն դարձավ բաղադրիչների մաս, ոչ թե ուշացած շտկում։ WCAG-ի հետ կապված այդ աշխատանքների զգալի մասը կատարել եմ անձամբ։

5. Ad Wizard

Growth թիմի առանձին պրոդուկտ՝ վիզուալ և սոցիալական բովանդակություն ստեղծելու և տարբեր հարթակների ձևաչափերին հարմարեցնելու համար։ Որպես թիմի հիմնական UI ծրագրավորող՝ դրա ինտերֆեյսը իրականացրել եմ React, HTML/CSS, JSS և Styled Components տեխնոլոգիաներով։

Նմանատիպ խնդի՞ր ունեք

Պատմեք՝ ինչ եք ստեղծում։ Կպատասխանեմ երկու աշխատանքային օրվա ընթացքում։

Սկսել նախագիծ

Նոր կայք, պրոդուկտի ինտերֆեյս, դիզայն համակարգ կամ գործող լուծման բարելավում։

Սկսել նախագիծ