Нажимая на кнопку 'Я согласен', вы соглашаетесь с нашей

Кейбір нәрселер

Бұл уақытша, біз оны жақын арада түзетеміз

exolveBlack3.webm

Бизнес-коммуникацияларды автоматты түрде жасайтын сайт жиналды.

<div>
<h3>Кейс туралы кейс</h3>
<p>MTS Exolve — бұл компанияларға әртүрлі арналар арқылы клиенттермен өзара әрекеттесуге көмектесетін байланыс платформасы: мессенджерлер, әлеуметтік желілер, SMS, қоңыраулар.</p>
</div>

<img src="/uploads/IMG_Block_1_72dc69f709.webp">

</div>
<div>
<h3>Экожүйеге көзқарас</h3>
<p>Біз платформаның барлық бөліктерін МТС жалпы визуалды стилімен біріктірдік: сайт, комьюнити алаңы, интегратор кабинеті және әзірлеушісі жеке кабинеты. Жобаның міндеті — мақсатты аудиторияны өнімге тарту және сайт аудиториясын толыққанды пайдаланушылар санатына көшіру.</p>
</div> 

<img src="/uploads/IMG_Block_2_b5847f471c.webp">

</div>
<div>
<h3>Қазіргі заманның конструктивизмі</h3>
<p>Бастапқыда біз брендингтің эскиздерін алдық. Содан кейін тетрис идеясын ұсындық, ал ол конструктор форматына айналды.</p>
</div>
</div>

<video src="/uploads/exolve_Black_loop_x2_3dcf004828.webm"
loop
autoplay
muted
playsinline></video>
</div>
<div>
</div>
<div>
<h3>Жекелендіру және автоматтандыру</h3>
<p>Құрылымдық және визуалды түрде біз жобаны өнімнің әртүрлі функцияларын жақын блоктарға біріктіру тұжырымдамасының айналасында құрдық. Мұнда конструктор идеясы пайда болады: нақты мақсаттар үшін бизнес оның қажеттіліктеріне сәйкес келетін жеке өнімдерді таңдай алады.</p>
</div>
</div>

<img src="/uploads/IMG_Block_3_7d6eeeebe3.webp">

</div>
<div>
<h3>Ерекшеліктірге назар аудардық</h3>
<p>Көрнекі тұжырымдаманың конструктивистік формасы платформаның ерекше шешімдерін атап өтуге көмектесті. Пайдаланушы бөлігінің жоспарында көптеген сценарийлер блок-схемалар, квиз және модульдер принципі бойынша құрылған.</p>
</div>
</div>

<img src="/uploads/IMG_Block_4_c7e09ad0b1.webp">
</div>
</div>

<video src="/uploads/2560_b4103ef081.webm"
loop
autoplay
muted
playsinline></video>
</div>
<div>
</div>
<div>
<h3>Кең таңдау </h3>
<p>Жалпы экранда тарифтер туралы ақпарат және қызметтер мен серіктестердің толық каталогы жиналды. Бұл шешім МТС Exolve пайдаланушыларына қажетті өнімдерді жылдам таңдауға және тұтынушылармен коммуникацияны жеңілдетуге көмектеседі.</p>
</div>
</div>

<img src="/uploads/IMG_Block_6_e90a863bdf.webp">

</div>
<div>
<h3>Маңызды әңгімелер</h3>
<p>Жобаның коммуникациялық платформасы жеке тұлға болды. Ресурста МТС Exolve шешімдерін енгізу үшін ақпарат жиналды: құжаттама, кейстер, блог, оқиғалар күнтізбесі, форум. Сондықтан пайдаланушылар мен әзірлеушілерге жаңартуларды қадағалау, сұрақтар қою және өздері үшін тауашалық әріптестерімен жақсы жұмыс істеген өнімдерді таңдау оңайырақ.</p>
</div>
</div>

<img src="/uploads/IMG_Block_7_f4453c049c.webp">

</div>
<div>
<h3>Интегратордың жеке кабинеті</h3>
<p>Интегратор кабинеті — жаңа серіктес болуға, платформада өз жобаларын қосуға және басқаруға, сыйақы алып, ескеруге мүмкіндік беретін ресурс.</p>
</div>
</div>

<img src="/uploads/IMG_Block_8_26fabddee9.webp">

</div>
<div>
<h3>Әрі қарай не болды</h3>
<p>Біз клиентке барлығы 150-ге жуық орналасу опцияларын ұсындық. Қазір платформа іске қосылды және оны кеңейту жоспарлануда.</p>
</div>
</div>

Frame 2.webp

МТС Exolve сайты

KTS mob cover 2.webp

IT-компанияның қону беттері үшін көрнекі көріністі екінші рет жасадық. Екінші рет бәрі сәтті шықты.



</div>
<div>
<h3>Технологиялық бүлікшілік</h3>
<p>KTS — бұл бастаушы стартаптар мен ірі корпорациялар үшін ыңғайлы, технологиялық және функционалды шешімдермен айналысатын IT-компаниясы. 

Компания біз 2021 жылы жасаған сайтқа редизайн жасау керек деп жүгінді. Себебі, уақыт өте келе ол ескеріп қалды: KTS қызметкерлері өздерін жас бүлікші санап, рухына сай сайт дайындағысы келд.</p>
</div>
</div>

<img src="/uploads/KTS_cases_3_1c58ef5320.webp">

</div>
<div>
<h3>Жағдайларға бейімделу</h3>
<p>Біз айдентикасын дамытқан жоқпыз, ол үшін embacy агенттігіне мың алғыс, керемет болып шықты. Біз тек сайттың дизайнын жасадық. KTS командасы бізге дайын нұсқаулықпен және ыңғайлы әрі функционалды UX-ті жарқын және ерекше дизайнмен бірге қолдану идеясымен келді.</p>
</div>
</div>

<img src="/uploads/KTS_cursors_3_d223c56714.webp">

</div>
<div>
<h3>Сіз кімсіз</h3>
<p>Жаңартылған беттің маңызды артықшылығы — KTS-тің мөлдір бейнесі. Сайттың құрылымы компания қандай жобаларды орындағаны, қандай компаниялармен жұмыс істегені және қандай клиенттер үшін пайдалы болатыны бірден белгілі болатындай етіп жинақталған. 

Галерея форматын серіктестермен бөлімінде жалғастырдық. Жылжыту кезінде клиенттердің бағыттары бар тегтер анимациялық карталар түрінде пайда болады.</p>
</div>
</div>

<img src="/uploads/KTS_footer_be040807af.png">

</div>
<div>
<h3>Ал ең астында не бар?</h3>
<p>Командамыз төмен жағын қызықты етіп жасады. «Жертөледе» ешкімді таң қалдырмайтын байланыс ақпаратынан басқа, біз гиперсілтемелермен сайттың тиісті бөліктеріне жіберілетін немесе әрі қарай бағытталатын басылатын белгілерді мысықтың табаны сияқты еттік.</p>
</div>
</div>
<img src="/uploads/KTS_usability_3b6258eac3.png">

</div>
<div>
<h3>DevOps - бұл реттеулермен байланысты</h3>
<p>Негізгі беттен басқа, біз DevOps бағыты үшін жұмыс істедік. Дайын және шешімдері бар бөлімді ыңғайлы әрі жергілікті түрде жасадық. Карточкалар автоскроллға сәйкес өзгереді, олар сыртқы түрін өзгертетін курсормен бірге жүреді: әдеттегі көрсеткі жалынды көздер мен тырнақ табанына айнала алады. Барлық кейстер санаттарға бөлінеді және тегтермен белгіленеді, олар арқылы компанияның тауашасын анықтау оңайырақ.</p>
</div>
</div>
<img src="/uploads/KTS_illustrations_2_4867c0131b.png">

</div>
<div>
<h3>Мысықтардан басқа</h3>
<p>Бөлек, біз иллюстрациялар салдық — мысықтармен және онсыз. Жоғарыда аталған айдентика, гайд және клиенттің жануарларға деген сүйіспеншілігі негіз болды.</p>
</div>
</div>

KTS desk cover 2.webp

KTS сайты үшін редизайн

PAN CLUB Main.webp

Зергерлік брендтен зергерлік мультибрендке дейін



</div>
<div>
<h3>Ребрендинг</h3>
<p>Брендтер келіп-кетеді, ал әдемі зергерлік бұйымдарды сатып алып-кию бәріне ұнайды. Мұны PanClub (бұрынғы Pandora Russia) түсінді де, сайтын өзгертуді шешті. Ал онымен бірге нарықтағы жайғасымын да, бірақ бұл туралы кейінірек. 

Тапсырысшы бізге "жеңіл" редизайн үшін келді. Брендтің жаңа визуалды үнін бастан әзірлеуге уақыт болмады, себебі командамыз платформамен 2,5 ай ғана айналысты. Сондықтан біз ағымдағы беттерге аудит жасадық және өзгертулерді қажет ететіндерді таңдадық.</p>
</div>
</div>

<img src="/uploads/Illustration_3_b99f6a2e90.webp">
<video 
src="/uploads/pan_Club_0fe1ab931f.webm"
loop
autoplay
muted
playsinline></video>
</div>

<div>
<h3>Ең басы</h3>
<p>Редизайн жасау кезінде бір шектен екінші шекке шығып, брендтің бұрынғы стилін толығымен бұзуға болмады. Сайт аудиториясының көпшілігі сүйікті брендтің зергерлік бұйымдарын сатып алуды жалғастырғысы келетіндер — Pandora Russia нағыз жанкүйерлері. Сондықтан дизайн элементтерін тануды сақтау маңызды болды. Бірақ сонымен бірге сайттың тағы бір ақ-қызғылт көшірмесін жасаудың қажеті жоқ болды.</p>
</div>
</div>

<img src="/uploads/Illustration_2_cf4e6c07ff.webp">
<img src="/uploads/Illustration_4_a2fa09d154.webp">

</div>
<div>
<h3>Нарықта жайғасу</h3>
<p>Бұрын Pandora бренді әлемдік қауымдастығының бөлігі болған. Енді компания қайта бағдарланып, мультибрендтік алаңға айналды. Осыны ескере отырып, сайттың дизайнын нақтылау қажет болды: оны ресейлік және басқа брендтердің әшекейлерін орналастыруға ыңғайлы етіп жасау керек болған. 

Ол үшін PanClub беттерінің дизайнын қарапайым етіп сақтадық. Солай түрлі-түсті және әртүрлі бренд әшекейлері сайттың жалпы идеясына қайшы келмейді. </p>
</div>
</div>

<img src="/uploads/Illustration_1_c8f004f52b.webp">

</div>
<div>
<h3>Анимациялар</h3>
<p>Әзірлеушілермен байланысты жеңілдету үшін анимациялық бейнелер жасап, интерфейс элементтерінің өзін қалай ұстау керектігін көрсеттік.</p>
</div>
</div>

<img src="/uploads/Illustration_6_52c1cf94bc.webp">

</div>
<div>
<h3>Брендинг</h3>
<p>Ал соңында UI Kit пен компоненттер жүйесі клиенттің одан әрі пайдалануы үшін дайындалды. Осының арқасында қосымша уақытты үнемдедік: әзірлеушілерге бәрін басынан жасаудың қажеті жоқ болды, тек қана сайттың негізгі элементтерін жаңарту керек болды.

Қорытынды жұмыс брендтің "бет-бейнесі" ғана емес, сонымен қатар брендтің өзіне айналды. Бастапқыда PanClub тек логотипке ие болған, ал енді оның қолтаңба стилі бар.</p>
</div>
</div>


Cover.webp

PanClub

MTS Travel (2).webp

Шетелде қонақ үйлерді брондау үшін қызметтің веб-интерфейсі ең басынан бастап жасалған

</div>
<div>
<h3>Тендер</h3>
<p>2022 жылдың көктем айында МТС қызметкерлері МТС Саяхаттары бағытын бастауға шешім қабылдады. TravelTech нарығындағы жаңа өнім шетелде қонақ үйлерді брондау үшін ыңғайлы орын болуы керек еді. Осы сұраныспен болашақ МТС Саяхаттары тендерге шықты. Жобаны алу үшін біздің команда өнімге деген көзқарасын ұсынып, сайттың басты бетінің тұжырымдамасын жасауы керек еді.</p>
</div>
</div>

<img src="/uploads/3_7_43ed2de8d6.webp">

</div>
<div>
<h3>Негізгі ұғым</h3>
<p>Тендер үшін біз түрік бағытымен жұмыс істедік. Олар әйгілі ресейлік және халықаралық қызметтерден шабыт алып, түпнұсқа өнімді жасауға тырысты. Негізгі екпін пайдаланушы таңдаған бағытқа бейімделген үлкен анимациялық кескін болды. Нәтижесінде біздің тұжырымдамамыз тендерді жеңіп алды, ад біз платформаның десктоптық нұсқасын жасауға кірістік.</p>
</div>
</div>

<video src="/uploads/travel_d1928288b5.mp4"
loop
autoplay
muted
playsinline></video>
</div>

<div>
<h3>Жобаның міндеттері</h3>
<div>
<p>Барлығы жұмыс үшін Mish дизайнерлеріне шамамен екі ай қажет болды. Толығырақ айтқанда:</p>
<ul>
  <li>негізгі беттен тур сатып алуға дейін түсінікті пайдаланушы ағынын құру;</li>
  <li>пайдаланушының өніммен өзара әрекеттесуін жобалау;</li>
  <li>МТС корпоративтік жүйесіне негізделген визуалды дизайн.</li>
</ul>
</div>
</div>

<img src="/uploads/MTS_Travel_case_2_6360001745.webp">
<img src="/uploads/MTS_Travel_case_4_7cd1a15dd1.webp">
<img src="/uploads/MTS_Travel_case_5_a2994e3bdc.webp">

</div>
<div>
<h3>Дизайн жүйесі</h3>
<p>МТС экожүйесі өнімдерінің біркелкілігін сақтау үшін біз платформаның визуалды бөлігін МТС-тің өздерінен Granat дизайн жүйесінде жинадық, олар оны барлық өнімдерінде пайдаланады. Ал одан кейін берілген стильде жетіспейтін компоненттердің бір бөлігі жасалды.</p>
</div>
</div>

<img src="/uploads/MTS_Travel_case_3_385da75b0b.webp">

</div>
<div>
<h3>Әзірлеу</h3>
<p>Дайын макеттер әзірлеу командасына берілді. Содан кейін біздің UX/UI идеяларымыз дұрыс жүзеге асырылуы үшін егжей-тегжейлі дизайн ревьюі жүргізілді. Десктоптық нұсқасы дайын болған кезде, команда оны планшет пен мобильді форматқа бейімдеді.</p>
</div>
</div>

<img src="/uploads/MTS_Travel_case_6_c3044842a8.webp">

</div>
<div>
<h3>Нәтижесі</h3>
<p>Қазір MTS Саяхаттары - бұл қонақ үйлерді тек Түркияда ғана емес, басқа елдерде де брондауға мүмкіндік беретін дайын жұмыс істейтін өнім. Бағыттардың арасында Орта Азия, Таяу Шығыс, Еуропа елдері бар. Ал біз МТС-пен басқа жобалар бойынша жұмыс істеуді жалғастырамыз.</p>
</div>
</div>

<img src="/uploads/MTS_Travel_case_1_99c8847906.webp">

MTS Travel-1 (2).webp

МТС Саяхаттары

alisa_2.mp4

Төрт түрлі Яндекс колонкаларының мүмкіндіктерін көрсететін төрт түрлі лендинг.


</div>
<div>
<h3>Ақылды Үй</h3>
<p>Ақылды Үй, шын айтсақ, енді ешкімді таңдандырмайды. Бірақ тек ақылды колонка арқылы мүмкін болатын нәрселердің кішкене бөлігі туралы да бәрі біле бермейді.</p>
</div>
</div>

<img src="/uploads/1_3_d1582d4a93.png">

</div>
<div>
<h3>Ақылды колонкалар не үшін қажет?</h3>
<p>Біздің міндетіміз - ақылды колонканың жаңа мүмкіндіктерін көрсету және пайдаланушыға олардың үйде қалай жұмыс істей алатындығын түсіндіру. Сондықтан біз нақты сценарийлермен ("Алиса, жарықты сөндір", "Алиса, фильмді баста") колонка барлығына пайдалы және оны әртүрлі тәсілдермен қолдануға болатындығын көрсетеміз.</p>
</div>
</div>

<video src="/uploads/alisa_case_test_bffaacb8e6.mp4"
loop
autoplay
muted
playsinline></video>

</div>
<div>
<h3>Zigbee-датчиктері</h3>
<p>Лендингтерде біз Zigbee-датчиктеріне назар аударамыз, бұл Ақылды Үй тек арнайы қымбат құрылғылармен мүмкін болатын стереотипті жоюға көмектеседі. Zigbee-датчиктері кез келген үй техникасын Ақылды Үйдің бір бөлігіне айналдырады, ал Макс Станциясы осы экожүйенің жүрегі болады.</p>
</div>
</div>

<img src="/uploads/3_2_4abe0ddd08.png">

</div>
<div>
<h3>Шырынды 3D-иллюстрациялар</h3>
<p>Колонкалардың рендерлеріне ерекше назар аударыңыз. Олар біздің талантты 3D-мен жұмыс істейтін әріпстестеріміздің қолдарымен, ерекще қамқорлықпен жасалған. Сондықтан сіз тіпті ең кішкентай бөлшектерге қарап, шынайы ләззат ала аласыз.</p>
</div>
</div>

<img src="/uploads/4_5_3858cf96ab.png">

</div>
<div>
<h3>Сонымен, не болды?</h3>
<p>Ақпараттылық - бұл промо-сайттың басты ерекшелігі. Біз көптеген ақпаратты түсінікті визуалды тілмен жеткізе алдық, сонымен қатар ақпаратты бөліктерге бөліп, пирамида сияқты пайдаланушының тұтас түсінігіне негізделетін етіп құрылымдадық.</p>
</div>
</div>

<img src="/uploads/5_4_ea27a6b5ab.png">

Станция_подложка.png

Яндекс Ақылды Үй

Data-Track.png

Абин металлургия зауытына арналған бағдарламалық жасақтама мысалында

 <img src="/uploads/1_11_4f6b371f78.png" alt="enter image description here">
 <div>
<h3>Бұл не?</h3>
<div>
<p>Data-Track — бұл MES (ағылш. manufacturing execution system), яғни өндірістік процестерді басқару жүйесі, өндіріс шеңберінде өнім шығаруды синхрондау, үйлестіру, талдау және оңтайландыру міндеттерін шешуге арналған мамандандырылған қолданбалы бағдарламалық қамтамасыз ету. MES-жүйелері шеберхана деңгейіндегі басқару жүйелерінің класына жатады, бірақ оларды тұтастай алғанда кәсіпорында өндірісті интеграцияланған басқару үшін де пайдалануға болады.</p>
</div>
</div>
  <img src="/uploads/2_f908d5038d.png" alt="enter image description here">
 <div>
<h3>Бұл не үшін қажет?</h3>
<div>
<p>Ең алдымен, деректерді жүйелеу және визуализациялау, ең бастысы бөлектеу үшін, өйткені бағдарламалық жасақтама барлық зауыттық процестерге негізделген excel кестелерінде: өндіріс жоспарлары, қойманы жүктеу, материалдарды жылжыту және т.б. Ал бұл ыңғайлы интерфейс қажет дегенді білдіреді, өйткені қызметкерлер онымен ұзақ уақыт жұмыс істейді, кейде тіпті жеткіліксіз жарық жағдайында.</p>
</div>
</div>
  <img src="/uploads/3_ecfb833ed6.png" alt="enter image description here">
 <div>
<h3>Қиындықтар</h3>
<div>
<p>Жұмысты бастамас бұрын да бізді ең оңтайлы шешімдерді іздеуге итермелеген көптеген қиындықтар туындады. Келесідей:</p>
 <ul>
 <li>Көптеген қағаз құжат айналымы. Өндірістегі көптеген процестер тек қағазға бекітілген. Оларды бақылау, сақтау және тасымалдау қиын;</li>
 <li>Жұмыс орындарындағы қиын жағдайлар. Қызметкерлер бұл интерфейспен ұзақ уақыт жұмыс істейді, кейде тіпті жарық жеткіліксіз жағдайларында да; </li>
 <li>Көптеген деректер. Бір экранда өндірістегі жағдайды тез көруге мүмкіндік жоқ;</li>
 <li>Маңыздылығы жоқ. Әдетте, басшылыққа деректер тек алдыңғы күннен қолжетімді. Өндірісті нақты уақыт режимінде бақылаудың мүмкіндігі жоқ;</li>
 <li>Жұмыс жылдамдығы. Бөлімдер арасындағы деректер бірнеше тәулік ішінде беріледі;</li>
</ul>

</p>
</div>
</div>
  <img src="/uploads/4_e8d08a61ed.png" alt="enter image description here">
 <div>
<h3>Сонымен, біз не істедік</h3>
<div>
<p>Біз Figma-да заманауи интерфейсті жасадық. Сондай-ақ, кез келген қажетті интерфейстерді тез жинауға мүмкіндік беретін дизайн жүйесін жасадық. Келесі цифрлық технологиялар мен шешімдер қолданылды:</p>
 <ul>
 <li>HTML/CSS/JS;</li>
 <li>React (CRA);</li>
 <li>Storybook;</li>
 <li>Сандық егіз;</li>
 <li>Датчиктер мен камералар.</li>
</ul>

</p>
</div>
</div>
  <img src="/uploads/5_ce5fae8f9c.png" alt="enter image description here">
 <div>
 <h3>Технологиялық тәуелсіздік</h3>
<div>
<p>Бұл бағдарламалық жасақтаманың артықшылықтарының бірі — технологиялық тәуелсіздік, яғни open-source негізінде ашық технологиялар қолданылады. Мұндай бағдарламалардың бастапқы коды қарау, зерттеу және өзгерту үшін қолжетімді, бұл осалдықтар мен пайдаланушы үшін қолайсыз мүмкіндіктердің жоқтығына көз жеткізуге мүмкіндік береді (мысалы, бағдарлама пайдаланушысын жасырын бақылау), ең ашық бағдарламаны нақтылауға қатысуға, кодты жаңа бағдарламалар жасау және олардағы қателерді түзету үшін пайдалануға болады.</p>
</div>
<br>
<br>
<h4>Совместно с компанией <a href="https://dc.ru/">ДАТА-ЦЕНТР Автоматика</a></h5>

Жобалар

hello@mish.design

Мәскеу

Нижний Новгород