{"id":3411,"date":"2019-08-23T09:03:41","date_gmt":"2019-08-23T07:03:41","guid":{"rendered":"http:\/\/itcraftapps.com\/pl\/?p=3411"},"modified":"2021-07-07T18:24:33","modified_gmt":"2021-07-07T16:24:33","slug":"usprawniania-ux-i-ui-aplikacji-auchan","status":"publish","type":"post","link":"https:\/\/itcraftapps.com\/pl\/blog\/usprawniania-ux-i-ui-aplikacji-auchan\/","title":{"rendered":"Aplikacja Auchan &#8211; Proces Usprawniania UX i UI w Aplikacji Hipermarketu"},"content":{"rendered":"\n<script type=\"application\/ld+json\">\n    {\n      \"@context\": \"http:\/\/schema.org\",\n      \"@type\": \"Blog\",\n      \"name\": \"itCraftapps.com - Mobile App Development Blog\",\n      \"url\": \"https:\/\/itcraftapps.com\/pl\/blog\"\n    }\n  <\/script>\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"http:\/\/schema.org\",\n  \"@type\": \"Article\",\n  \"mainEntityOfPage\": {\n  \"@type\": \"WebPage\",\n  \"@id\": \"https:\/\/itcraftapps.com\/pl\/blog\/usprawniania-ux-i-ui-aplikacji-auchan\/\"\n  },\n  \"headline\": \"Aplikacja Auchan \u2013 Proces Usprawniania UX i UI w Aplikacji Hipermarketu\",\n \n    \"image\": [\n{\n\t\n  \"@type\": \"ImageObject\", \n  \"contentUrl\": \"Auchan-concept-sketch-wireframes-1024x768.png\",  \"url\":\"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-sketch-wireframes-1024x768.png\",\n  \"description\": \"Koncepcja aplikacji mobilnej\",\n  \"name\": \"Szkic aplikacji mobilnej Auchan\"\n\n},\n{\n\t\n  \"@type\": \"ImageObject\", \n  \"contentUrl\": \"Auchan-concept-hi-fi-wireframes-1024x934.png\",  \"url\":\"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-hi-fi-wireframes-1024x934.png\",\n  \"description\": \"Koncepcja aplikacji mobilnej - widoki aplikacji\",\n  \"name\": \"Widoki aplikacji mobilnej Auchan\"\n\n},\n{\n\t\n  \"@type\": \"ImageObject\", \n  \"contentUrl\": \"Auchan-concept-catalog-User-Flow-568x1024.gif\",  \"url\":\"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-catalog-User-Flow-568x1024.gif\",\n  \"description\": \"User Flow - katalog produktowy\",\n  \"name\": \"Widok aplikacji mobilnej Auchan - User Flow\"\n\n},\n{\n\t\n  \"@type\": \"ImageObject\", \n  \"contentUrl\": \"Auchan-concept-product-view-1024x768.png\",  \"url\":\"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-product-view-1024x768.png\",\n  \"description\": \"Finalny wygl\u0105d aplikacji - katalog produktowy\",\n  \"name\": \"Finalny Widok aplikacji mobilnej Auchan\"\n\n}\n  \n  ],\n  \n  \"datePublished\": \"2019-08-23\",\n  \"dateModified\": \"2020-03-04\",\n  \"author\": {\n  \"@type\": \"Person\",\n  \"name\": \"Jakub Dobek\",\n  \"jobTitle\": \"UX\/UI Designer\",\n  \"description\": \"UX\/UI Designer at itCraft\"\n\n  },\n  \"publisher\": {\n  \"@type\": \"Organization\",\n  \"name\": \"itCraftapps.com\",\n  \"logo\": {\n  \"@type\": \"ImageObject\",\n  \"url\": \"https:\/\/wp-test.itcraft.pl\/wp-content\/uploads\/2019\/04\/placeholder-post.png\"\n  },\n  \"description\": \"itCraftapps.com - Mobile App Development\"\n}}\n<\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Spis tre\u015bci<\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/usprawniania-ux-i-ui-aplikacji-auchan\/#1\">Auchan app concept \u2013 proces powstawania<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/usprawniania-ux-i-ui-aplikacji-auchan\/#2\">Hipermarkety proponuj\u0105 aplikacje<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/usprawniania-ux-i-ui-aplikacji-auchan\/#3\">Aplikacja Auchan \u2013 analiza<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/usprawniania-ux-i-ui-aplikacji-auchan\/#4\">Analiza aplikacji konkurencji<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/usprawniania-ux-i-ui-aplikacji-auchan\/#5\">Low fi wireframes dla aplikacji Auchan<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/usprawniania-ux-i-ui-aplikacji-auchan\/#6\">High fidelity wireframes dla aplikacji Auchan<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/usprawniania-ux-i-ui-aplikacji-auchan\/#7\">Wewn\u0119trzne testy z u\u017cytkownikami<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/usprawniania-ux-i-ui-aplikacji-auchan\/#8\">Branding Auchan w redesign<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/usprawniania-ux-i-ui-aplikacji-auchan\/#9\">Podsumowanie<\/a><\/span><\/li><\/ol>\n\n\n\n<br \/>\n\n\n\n<h2 class=\"has-text-align-left wp-block-heading\" id=\"1\">Auchan app concept &#8211; proces powstawania&nbsp;<\/h2>\n\n\n\n<p>W czasach powszechnej komputeryzacji i nieograniczonego dost\u0119pu do Internetu, wiele obszar\u00f3w \u017cycia cz\u0142owieka zostaje przeniesionych do wirtualnej rzeczywisto\u015bci. W szczeg\u00f3lno\u015bci obszary takie jak handel i us\u0142ugi. Ludzie przyzwyczaili si\u0119 do wygody jak\u0105 jest telefon kom\u00f3rkowy, za pomoc\u0105 kt\u00f3rego mo\u017cemy zap\u0142aci\u0107 rachunki, um\u00f3wi\u0107 wizyt\u0119 u fryzjera, z\u0142o\u017cy\u0107 wniosek w urz\u0119dzie, odczyta\u0107 wyniki bada\u0144, wykona\u0107 istotne przelewy\u2026&nbsp;<\/p>\n\n\n\n<p>Mo\u017cna by tak wymienia\u0107 w niesko\u0144czono\u015b\u0107. Ludzie po prostu nie maj\u0105 czasu, na to by fizycznie wybra\u0107 si\u0119 w dane miejsce i faktycznie \u201codsta\u0107\u201d swoje w kolejkach. A co z ogromem czasu jaki po\u015bwi\u0119camy w marketach, aby zrobi\u0107 zakupy? Tak wi\u0119c za potrzeb\u0105 spo\u0142ecze\u0144stwa postanowi\u0142y pod\u0105\u017cy\u0107 hipermarkety.&nbsp;<\/p>\n\n\n\n<h2 class=\"has-text-align-left wp-block-heading\" id=\"2\">Hipermarkety proponuj\u0105 aplikacje<\/h2>\n\n\n\n<p>Zacz\u0119\u0142y powstawa\u0107 aplikacje, kt\u00f3re umo\u017cliwiaj\u0105 dokonanie b\u0142yskawicznych zakup\u00f3w bez wychodzenia z domu. Wiele firm zdecydowa\u0142o&nbsp;si\u0119&nbsp;na stworzenie w\u0142asnych aplikacji, tak aby pozyska\u0107 jeszcze wi\u0119ksz\u0105 liczb\u0119 klient\u00f3w. Aby zatrzyma\u0107 ich w ci\u0105g\u0142ym obiegu, informuj\u0105 u\u017cytkownik\u00f3w mi\u0119dzy innymi o nadchodz\u0105cych promocjach czy umo\u017cliwiaj\u0105 zbieranie punkt\u00f3w na zakup artyku\u0142\u00f3w w obni\u017conych cenach.&nbsp;<\/p>\n\n\n\n<p>Idealnym przyk\u0142adem s\u0105 marki takie jak \u017babka czy Lidl, kt\u00f3re dzi\u0119ki aplikacji umo\u017cliwiaj\u0105 korzystanie&nbsp;ze zni\u017cek na wybrane produkty. Przeprowadzili\u015bmy analiz\u0119 aplikacji dost\u0119pnych na polskim rynku i postanowili\u015bmy skupi\u0107&nbsp;si\u0119 na sieci handlowej Auchan. Sie\u0107 posiada ok. 110 sklep\u00f3w w ca\u0142ym kraju. Naszym celem by\u0142a propozycja usprawnienia&nbsp;jej pod k\u0105tem UX oraz UI.&nbsp;<\/p>\n\n\n\n<h2 class=\"has-text-align-left wp-block-heading\" id=\"3\">Aplikacja Auchan &#8211; analiza<\/h2>\n\n\n\n<p>Pierwsz\u0105&nbsp;rzecz\u0105 jaka zwr\u00f3ci\u0142a moj\u0105 uwag\u0119&nbsp;jest to, \u017ce strona internetowa otwiera si\u0119&nbsp;w aplikacji. Co za tym idzie, hierarchia poszczeg\u00f3lnych element\u00f3w oraz u\u017cyteczno\u015b\u0107 nie s\u0105 dostosowane pod urz\u0105dzenie mobilne. Projektuj\u0105c interfejs, powinni\u015bmy mie\u0107 na uwadze wielko\u015bci font\u00f3w oraz modu\u0142\u00f3w, tak aby ko\u0144cowy u\u017cytkownik nie mia\u0142 problem\u00f3w z jej korzystaniem. <\/p>\n\n\n\n<p>Zwr\u00f3ci\u0142em uwag\u0119, \u017ce niekt\u00f3re zamieszczone banery promocyjne nie kieruj\u0105 do \u017cadnej konkretnej oferty. U\u017cytkownik aplikacji mo\u017ce czu\u0107 si\u0119 zagubiony tym, \u017ce nie wszystkie przyciski i elementy s\u0105 klikalne. Ca\u0142a apka jest \u201cprzepchana\u201d r\u00f3\u017cnymi reklamami, czy to w postaci zwyk\u0142ego boxu czy wyskakuj\u0105cego popup\u2019u. Zdaj\u0119 sobie spraw\u0119 z tego, i\u017c jest to przestrze\u0144 do zamieszczania g\u0142\u00f3wnie ofert handlowych, ale w moim odczuciu klienci s\u0105 bombardowani niezliczon\u0105&nbsp;ilo\u015bci\u0105&nbsp;zb\u0119dnych informacji.&nbsp;<\/p>\n\n\n\n<p>Sam proces zamawiania dowolnego artyku\u0142u jest niemo\u017cliwy. Mianowicie wchodz\u0105c w kategorie produktowe po chwili wyskakuje bia\u0142y popup, kt\u00f3ry zas\u0142ania nam ca\u0142y content. Postanowi\u0142em wi\u0119c uporz\u0105dkowa\u0107&nbsp;funkcjonowanie apki skupiaj\u0105c si\u0119&nbsp;na g\u0142\u00f3wnych sekcjach oraz zaproponowa\u0107 nowoczesny, czysty interfejs.&nbsp;<\/p>\n\n\n\n<h2 class=\"has-text-align-left wp-block-heading\" id=\"4\">Analiza aplikacji konkurencji<\/h2>\n\n\n\n<p>Pierwszym krokiem by\u0142a analiza aplikacji konkurencji. Skupi\u0142em si\u0119 mi\u0119dzy innymi na aplikacjach takich jak:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Tesco,<\/li><li>Biedronka,<\/li><li>Lidl,<\/li><li>Carrefour,<\/li><li>\u017babka.<\/li><\/ul>\n\n\n\n<p>Zauwa\u017cy\u0142em, \u017ce w wi\u0119kszo\u015bci z nich g\u0142\u00f3wny nacisk k\u0142adziony jest na:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Produkty obj\u0119te promocj\u0105,&nbsp;<\/li><li>Kupony oraz zbieranie punkt\u00f3w z wymian\u0105 na artyku\u0142y w obni\u017conych cenach,<\/li><li>Katalog produktowy,<\/li><li>Wirtualne zakupy oraz dostaw\u0119 do domu,<\/li><li>Gazetki.<\/li><\/ul>\n\n\n\n<p>Zdecydowa\u0142em, \u017ce b\u0119d\u0105&nbsp;to r\u00f3wnie\u017c fundamentalne sekcje w mojej propozycji aplikacji. Przyst\u0105pi\u0142em do rozrysowywania pierwszych koncepcyjnych widok\u00f3w tzw. low fi wireframes.&nbsp;<\/p>\n\n\n\n<h2 class=\"has-text-align-left wp-block-heading\" id=\"5\">Low fi wireframes dla aplikacji Auchan<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"http:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-sketch-wireframes-1024x768.png\" alt=\"Szkic wygl\u0105du aplikacji mobilnej Auchan\" class=\"wp-image-3417\" srcset=\"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-sketch-wireframes-1024x768.png 1024w, https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-sketch-wireframes-300x225.png 300w, https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-sketch-wireframes-768x576.png 768w, https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-sketch-wireframes.png 1334w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>D\u0105\u017cy\u0142em do zminimalizowania contentu oraz wyszczeg\u00f3lnienia najwa\u017cniejszych tre\u015bci czy modu\u0142\u00f3w danej sekcji. Warto r\u00f3wnie\u017c wspomnie\u0107, i\u017c na tym etapie nasze decyzje projektowe konsultowa\u0142em w \u015bcis\u0142ym kontakcie z <a href=\"https:\/\/itcraftapps.com\/pl\/zatrudnij-najlepszych-programistow-ios-do-swojego-projektu\/\">ios<\/a> \/ android deweloperami.&nbsp;<\/p>\n\n\n\n<p>Co za tym idzie nie tylko UX designerzy trzymali r\u0119k\u0119 nad przebiegaj\u0105c\u0105 budow\u0105 widok\u00f3w. Wsparcie techniczne by\u0142o istotne, poniewa\u017c wyklucza ono na tak wczesnym etapie p\u00f3\u017aniejsze problemy z dalsz\u0105&nbsp;rozbudow\u0105 aplikacji.&nbsp;<\/p>\n\n\n\n<h2 class=\"has-text-align-left wp-block-heading\" id=\"6\">High fidelity wireframes dla aplikacji Auchan<\/h2>\n\n\n\n<p>Maj\u0105c rozrysowane widoki przeszed\u0142em do high fidelity wireframes, czyli doprowadzenia szkic\u00f3w do postaci cyfrowej. Do tego dzia\u0142ania wykorzysta\u0142em program Sketch. Wersj\u0119 wysoko poziomow\u0105&nbsp;obrazuje poni\u017cszy zrzut.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"934\" src=\"http:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-hi-fi-wireframes-1024x934.png\" alt=\"Widoki aplikacji - Auchan\" class=\"wp-image-3414\" srcset=\"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-hi-fi-wireframes-1024x934.png 1024w, https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-hi-fi-wireframes-300x274.png 300w, https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-hi-fi-wireframes-768x701.png 768w, https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-hi-fi-wireframes.png 1866w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Skupi\u0142em si\u0119 mi\u0119dzy innymi na usprawnieniu funkcjonowania katalogu produktowego. Wprowadzi\u0142em wygodniejsz\u0105 kategoryzacj\u0119 oraz filtrowanie produkt\u00f3w. Doda\u0142em nowy feature, czyli po\u017c\u0105dany przez wielu u\u017cytkownik\u00f3w proces zamawiania produkt\u00f3w i dostarczenia ich do domu.&nbsp;<\/p>\n\n\n\n<p>Warto r\u00f3wnie\u017c wspomnie\u0107, \u017ce konkurencyjna aplikacja Tesco, proponuje tak\u0105 mo\u017cliwo\u015b\u0107 w swojej aplikacji. W naszym przypadku chcia\u0142em zminimalizowa\u0107 liczb\u0119 krok\u00f3w potrzebnych do z\u0142o\u017cenia zam\u00f3wienia. Dodatkowo, doda\u0142em sekcj\u0119 z kuponami, kt\u00f3re mo\u017cemy wykorzystywa\u0107&nbsp;przez zebrane punkty z zakup\u00f3w.&nbsp;<\/p>\n\n\n\n<p>Poni\u017cej moja propozycja przep\u0142ywu u\u017cytkownika przez katalog produktowy.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"568\" height=\"1024\" src=\"http:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-catalog-User-Flow-568x1024.gif\" alt=\"Wygl\u0105d aplikacji mobilne auchan\" class=\"wp-image-3413\" srcset=\"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-catalog-User-Flow-568x1024.gif 568w, https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-catalog-User-Flow-167x300.gif 167w\" sizes=\"(max-width: 568px) 100vw, 568px\" \/><\/figure>\n\n\n\n<p>Celem by\u0142o r\u00f3wnie\u017c sprawne&nbsp;przeprowadzenie u\u017cytkownika od ekranu g\u0142\u00f3wnego do przycisku z\u0142o\u017cenia zam\u00f3wienia. Tym samym edycja zam\u00f3wienia. Poni\u017csze flow obrazuje ten przypadek.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"600\" height=\"1072\" src=\"http:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-online-order.gif\" alt=\"Flow zam\u00f3wienia\" class=\"wp-image-3415\"\/><\/figure>\n\n\n\n<h2 class=\"has-text-align-left wp-block-heading\" id=\"7\">Wewn\u0119trzne testy z u\u017cytkownikami<\/h2>\n\n\n\n<p>Maj\u0105c zbudowany prototyp interaktywny by\u0142em w stanie przeprowadzi\u0107&nbsp;wewn\u0119trzne testy z u\u017cytkownikami, kt\u00f3rzy nie korzystali wcze\u015bniej z podobnej aplikacji. Wyci\u0105gn\u0105\u0142em kilka istotnych wniosk\u00f3w i na ich podstawie zoptymalizowa\u0142em interfejs. Projektuj\u0105c widoki, nie mo\u017cemy zapomnie\u0107 o takich badaniach. To w\u0142a\u015bnie one potwierdzaj\u0105 s\u0142uszno\u015b\u0107 naszych decyzji.&nbsp;<\/p>\n\n\n\n<p>Nast\u0119pnie, przeszed\u0142em do ostatniej fazy projektowej. Czyli finalny look &amp; feel ekran\u00f3w. Bazuj\u0105c na wcze\u015bniejszej analizie konkurencji wiedzia\u0142em jaki kierunek wybra\u0142y pokrewne marki. Tym samym, mia\u0142em przestrze\u0144 do zaproponowania nowego, \u015bwie\u017cego rozwi\u0105zania. Wykorzysta\u0142em panuj\u0105cy trend na ilustracje i budowanie opowie\u015bci wok\u00f3\u0142 nich. Chcia\u0142em, aby nasz \u201cwirtualny asystent\u201d by\u0142 przyjemny w odbiorze i wzbudza\u0142 zaufanie.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"http:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-assistant-1024x768.png\" alt=\"auchan aplikacja\" class=\"wp-image-3412\" srcset=\"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-assistant-1024x768.png 1024w, https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-assistant-300x225.png 300w, https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-assistant-768x576.png 768w, https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-assistant.png 1999w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"has-text-align-left wp-block-heading\" id=\"8\">Branding Auchan w redesign<\/h2>\n\n\n\n<p>Wykorzysta\u0142em kolory marki \u0142\u0105cz\u0105c je z du\u017c\u0105 ilo\u015bci\u0105&nbsp;bia\u0142ych przestrzeni. Zabieg ten nie by\u0142 przypadkowy. Chcia\u0142em wprowadzi\u0107 poczucie lekko\u015bci interfejsu i \u0142atwo\u015b\u0107 w \u015bledzeniu produkt\u00f3w oraz tre\u015bci. Bardzo dobrym przyk\u0142adem jest aplikacja Airbnb, kt\u00f3ra agreguje olbrzymi\u0105 ilo\u015b\u0107 contentu. Dzi\u0119ki wykorzystaniu wi\u0119kszych padding\u00f3w oraz rozs\u0105dnej ilo\u015bci white space\u2019a sprawia wra\u017cenie czystej i przyjemnej w u\u017cytkowaniu.&nbsp;<\/p>\n\n\n\n<p>Dodatkow\u0105 estetyk\u0119&nbsp;i sp\u00f3jno\u015b\u0107 w decyzjach projektowych wprowadza szare t\u0142o wykorzystane w prezentacji produkt\u00f3w. Zdecydowa\u0142em si\u0119 na ten zabieg zar\u00f3wno w miniaturkach kategorii jak i widoku szczeg\u00f3\u0142owym danego artyku\u0142u.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"http:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-product-view-1024x768.png\" alt=\"Interface\" class=\"wp-image-3416\" srcset=\"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-product-view-1024x768.png 1024w, https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-product-view-300x225.png 300w, https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-product-view-768x576.png 768w, https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-product-view.png 1999w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Warto r\u00f3wnie\u017c wspomnie\u0107, i\u017c kafelki produktowe s\u0105 przedstawiane na dwa r\u00f3\u017cne sposoby. Stan defaultowy agreguje tre\u015b\u0107 wewn\u0105trz siwego boxu. Z kolei produkty znalezione w wynikach wyszukiwania przedstawiaj\u0105 wszystkie informacje na prawo od zdj\u0119cia. S\u0105 to decyzje, kt\u00f3re wp\u0142ywaj\u0105 na prostot\u0119 \u015bledzenia tre\u015bci w danym fragmencie aplikacji. Wi\u0119kszo\u015b\u0107 tych na poz\u00f3r b\u0142ahych rozwi\u0105za\u0144 wp\u0142ywa na nasze finalne zadowolenie z podr\u00f3\u017cy wewn\u0105trz apki.&nbsp;<\/p>\n\n\n\n<h2 class=\"has-text-align-left wp-block-heading\" id=\"9\">Podsumowanie<\/h2>\n\n\n\n<p>Uwa\u017cam, \u017ce przeprowadzony przeze mnie redesign zwi\u0119kszy liczb\u0119 dziennych, aktywnych u\u017cytkownik\u00f3w. Prze\u0142o\u017cy si\u0119 to na zwi\u0119kszenie zainteresowania w\u015br\u00f3d nowych klient\u00f3w jak i wzrost sprzeda\u017cy artyku\u0142\u00f3w.&nbsp;<\/p>\n\n\n\n<p>Tak jak aspekty \u017cycia spo\u0142ecze\u0144stw ci\u0105gle si\u0119 zmieniaj\u0105 i przechodz\u0105 proces cyfryzacji, tak aplikacje, czyli najwa\u017cniejsze narz\u0119dzia, z kt\u00f3rych korzystaj\u0105 miliony u\u017cytkownik\u00f3w, powinny by\u0107 modernizowane i dostosowywane do obowi\u0105zuj\u0105cych potrzeb.&nbsp;<\/p>\n\n\n\n<p>Nowoczesne aplikacje, kt\u00f3re towarzysz\u0105 nam na ka\u017cdym kroku, id\u0105 w kierunku maksymalnego u\u0142atwienia zakup\u00f3w i prostego komunikowania si\u0119 z u\u017cytkownikami, co z pewno\u015bci\u0105 jest kluczem do sukcesu wielu firm.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8222;image&#8221;: [ { &#8222;@type&#8221;: &#8222;ImageObject&#8221;, &#8222;contentUrl&#8221;: &#8222;Auchan-concept-sketch-wireframes-1024&#215;768.png&#8221;, &#8222;url&#8221;:&#8221;https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-sketch-wireframes-1024&#215;768.png&#8221;, &#8222;description&#8221;: &#8222;Koncepcja aplikacji mobilnej&#8221;, &#8222;name&#8221;: &#8222;Szkic aplikacji mobilnej Auchan&#8221; }, { &#8222;@type&#8221;: &#8222;ImageObject&#8221;, &#8222;contentUrl&#8221;: &#8222;Auchan-concept-hi-fi-wireframes-1024&#215;934.png&#8221;, &#8222;url&#8221;:&#8221;https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-hi-fi-wireframes-1024&#215;934.png&#8221;, &#8222;description&#8221;: &#8222;Koncepcja aplikacji mobilnej &#8211; widoki aplikacji&#8221;, &#8222;name&#8221;: &#8222;Widoki aplikacji mobilnej Auchan&#8221; }, { &#8222;@type&#8221;: &#8222;ImageObject&#8221;, &#8222;contentUrl&#8221;: &#8222;Auchan-concept-catalog-User-Flow-568&#215;1024.gif&#8221;, &#8222;url&#8221;:&#8221;https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-catalog-User-Flow-568&#215;1024.gif&#8221;, &#8222;description&#8221;: &#8222;User Flow &#8211; katalog produktowy&#8221;, &#8222;name&#8221;: &#8222;Widok aplikacji mobilnej Auchan -&hellip;<\/p>\n","protected":false},"author":12,"featured_media":3412,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[4],"tags":[],"class_list":{"0":"post-3411","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-aplikacje-mobilne"},"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Aplikacja Auchan - Proces Usprawniania UX i UI w Aplikacji Hipermarketu - itCraft blog<\/title>\n<meta name=\"description\" content=\"Sprawd\u017a, jak dzi\u0119ki do\u015bwiadczeniu i wiedzy z zakresu UX i UI usprawnili\u015bmy aplikacj\u0119 hipermarketu Auchan \u27a4 Proces przedstawiony krok po kroku \u27a4 Przeczytaj!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itcraftapps.com\/pl\/blog\/usprawniania-ux-i-ui-aplikacji-auchan\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Aplikacja Auchan - Proces Usprawniania UX i UI w Aplikacji Hipermarketu - itCraft blog\" \/>\n<meta property=\"og:description\" content=\"Sprawd\u017a, jak dzi\u0119ki do\u015bwiadczeniu i wiedzy z zakresu UX i UI usprawnili\u015bmy aplikacj\u0119 hipermarketu Auchan \u27a4 Proces przedstawiony krok po kroku \u27a4 Przeczytaj!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itcraftapps.com\/pl\/blog\/usprawniania-ux-i-ui-aplikacji-auchan\/\" \/>\n<meta property=\"og:site_name\" content=\"Aplikacje mobilne i webowe dla firm | itCraft\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-23T07:03:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-07T16:24:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-assistant.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1999\" \/>\n\t<meta property=\"og:image:height\" content=\"1500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"itcseo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Aplikacja Auchan - Proces Usprawniania UX i UI w Aplikacji Hipermarketu - itCraft blog","description":"Sprawd\u017a, jak dzi\u0119ki do\u015bwiadczeniu i wiedzy z zakresu UX i UI usprawnili\u015bmy aplikacj\u0119 hipermarketu Auchan \u27a4 Proces przedstawiony krok po kroku \u27a4 Przeczytaj!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itcraftapps.com\/pl\/blog\/usprawniania-ux-i-ui-aplikacji-auchan\/","og_locale":"pl_PL","og_type":"article","og_title":"Aplikacja Auchan - Proces Usprawniania UX i UI w Aplikacji Hipermarketu - itCraft blog","og_description":"Sprawd\u017a, jak dzi\u0119ki do\u015bwiadczeniu i wiedzy z zakresu UX i UI usprawnili\u015bmy aplikacj\u0119 hipermarketu Auchan \u27a4 Proces przedstawiony krok po kroku \u27a4 Przeczytaj!","og_url":"https:\/\/itcraftapps.com\/pl\/blog\/usprawniania-ux-i-ui-aplikacji-auchan\/","og_site_name":"Aplikacje mobilne i webowe dla firm | itCraft","article_published_time":"2019-08-23T07:03:41+00:00","article_modified_time":"2021-07-07T16:24:33+00:00","og_image":[{"width":1999,"height":1500,"url":"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-assistant.png","type":"image\/png"}],"author":"itcseo","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/itcraftapps.com\/pl\/blog\/usprawniania-ux-i-ui-aplikacji-auchan\/","url":"https:\/\/itcraftapps.com\/pl\/blog\/usprawniania-ux-i-ui-aplikacji-auchan\/","name":"Aplikacja Auchan - Proces Usprawniania UX i UI w Aplikacji Hipermarketu - itCraft blog","isPartOf":{"@id":"https:\/\/itcraftapps.com\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itcraftapps.com\/pl\/blog\/usprawniania-ux-i-ui-aplikacji-auchan\/#primaryimage"},"image":{"@id":"https:\/\/itcraftapps.com\/pl\/blog\/usprawniania-ux-i-ui-aplikacji-auchan\/#primaryimage"},"thumbnailUrl":"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-assistant.png","datePublished":"2019-08-23T07:03:41+00:00","dateModified":"2021-07-07T16:24:33+00:00","author":{"@id":"https:\/\/itcraftapps.com\/pl\/#\/schema\/person\/d2fc85f8fb53798d0b727d373f9e39b7"},"description":"Sprawd\u017a, jak dzi\u0119ki do\u015bwiadczeniu i wiedzy z zakresu UX i UI usprawnili\u015bmy aplikacj\u0119 hipermarketu Auchan \u27a4 Proces przedstawiony krok po kroku \u27a4 Przeczytaj!","breadcrumb":{"@id":"https:\/\/itcraftapps.com\/pl\/blog\/usprawniania-ux-i-ui-aplikacji-auchan\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itcraftapps.com\/pl\/blog\/usprawniania-ux-i-ui-aplikacji-auchan\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/itcraftapps.com\/pl\/blog\/usprawniania-ux-i-ui-aplikacji-auchan\/#primaryimage","url":"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-assistant.png","contentUrl":"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/08\/Auchan-concept-assistant.png","width":1999,"height":1500,"caption":"Koncept aplikacji Auchan - asystent"},{"@type":"BreadcrumbList","@id":"https:\/\/itcraftapps.com\/pl\/blog\/usprawniania-ux-i-ui-aplikacji-auchan\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/itcraftapps.com\/pl\/"},{"@type":"ListItem","position":2,"name":"Aplikacja Auchan &#8211; Proces Usprawniania UX i UI w Aplikacji Hipermarketu"}]},{"@type":"WebSite","@id":"https:\/\/itcraftapps.com\/pl\/#website","url":"https:\/\/itcraftapps.com\/pl\/","name":"Aplikacje mobilne i webowe dla firm | itCraft","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itcraftapps.com\/pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Person","@id":"https:\/\/itcraftapps.com\/pl\/#\/schema\/person\/d2fc85f8fb53798d0b727d373f9e39b7","name":"itcseo","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/itcraftapps.com\/pl\/#\/schema\/person\/image\/","url":"https:\/\/itcraftapps.com\/pl\/wp-content\/litespeed\/avatar\/5\/8d5121d60f83294679f3ed7498971492.jpg?ver=1776363496","contentUrl":"https:\/\/itcraftapps.com\/pl\/wp-content\/litespeed\/avatar\/5\/8d5121d60f83294679f3ed7498971492.jpg?ver=1776363496","caption":"itcseo"},"url":"https:\/\/itcraftapps.com\/pl\/blog\/author\/itcseo\/"}]}},"_links":{"self":[{"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/posts\/3411","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/comments?post=3411"}],"version-history":[{"count":0,"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/posts\/3411\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/media\/3412"}],"wp:attachment":[{"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/media?parent=3411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/categories?post=3411"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/tags?post=3411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}