https://liza-ux.de leesa Wed, 18 Oct 2023 17:15:26 +0000 https://liza-ux.de en https://liza-ux.de/nuggit-dashboard Wed, 06 Sep 2023 08:25:31 +0000 leesa https://liza-ux.de/nuggit-dashboard Nuggit app dashboard&nbsp;Role: UI DesignerClient: nuggit GmbH (2021) nuggit.de is a yearbook service, helping students to create and design their graduation books online. As part of the nuggit yearbook app redesign project, I was tasked with creating a design system for the app. The dashboard serves as a starting page for both new users and those who have been working on their book for a while. <img width="3130" height="2388" width_o="3130" height_o="2388" data-src="https://freight.cargo.site/t/original/i/5339443bd50b7924b50b1c0bd858ee4bbed95c125f74182ec417c3c4b0b27004/three-phones3.png" data-mid="189939516" border="0" data-scale="86" src="https://freight.cargo.site/w/1000/i/5339443bd50b7924b50b1c0bd858ee4bbed95c125f74182ec417c3c4b0b27004/three-phones3.png" /> Card structure breakdownAir | Assymetry | Visual Balance <img width="1284" height="698" width_o="1284" height_o="698" data-src="https://freight.cargo.site/t/original/i/497a62bf227fc5dff73e423415029d975ca84a46404452065165d2a1fe131260/card-anaysis.png" data-mid="190158157" border="0" src="https://freight.cargo.site/w/1000/i/497a62bf227fc5dff73e423415029d975ca84a46404452065165d2a1fe131260/card-anaysis.png" /> Card states Goal: provide users with maximum information on a card while ensuring that unnecessary clicks are avoided. It is important to maintain a clean and easy-to-understand interface. Solution: I have created a modular system for the card component that can be used in all states. Some examples of this system are displayed below. <img width="3357" height="2737" width_o="3357" height_o="2737" data-src="https://freight.cargo.site/t/original/i/dff1d4211179f3bab8d768be12fb34eb9a67637a37e6684e913606dc082f72fa/cards.png" data-mid="189951925" border="0" data-scale="69" src="https://freight.cargo.site/w/1000/i/dff1d4211179f3bab8d768be12fb34eb9a67637a37e6684e913606dc082f72fa/cards.png" /> https://liza-ux.de/nuggit-UI-Kit Wed, 18 Oct 2023 17:15:26 +0000 leesa https://liza-ux.de/nuggit-UI-Kit Nuggit app UI Kit&nbsp;Role: UI DesignerClient: nuggit GmbH (2021) nuggit.de is a yearbook service, helping students to create and design their graduation books online. As part of the nuggit yearbook app redesign project, I was tasked with creating a design system for the app. The dashboard serves as a starting page for both new users and those who have been working on their book for a while. Problem: quickly growing number of components, no system to guide the creation of the new components, no proper overview of components, duplicates. Outcome: cleaned up and systematised UI Kit that features over 100 components of various complexity levels, colour library and spacing guides. Components use variants and are grouped together logically which makes development process easier. Buttons Default- and small-sized buttons were created in order to establish visual hierarchy on the screens and distinguish between primary and secondary interactions. <img width="2579" height="1256" width_o="2579" height_o="1256" data-src="https://freight.cargo.site/t/original/i/c243cf28ed2552e9351d676315b1307e90061e375718210cb7dbf92e170188b9/three-phones.png" data-mid="194112579" border="0" src="https://freight.cargo.site/w/1000/i/c243cf28ed2552e9351d676315b1307e90061e375718210cb7dbf92e170188b9/three-phones.png" /> Colour paletteVibrant | Youthful | Modern <img width="2602" height="1509" width_o="2602" height_o="1509" data-src="https://freight.cargo.site/t/original/i/2ead9b88d9f9654ff67528c58c1b7f6dd0d300f5816665e2ade58fb700eed8e0/colours.png" data-mid="194113162" border="0" src="https://freight.cargo.site/w/1000/i/2ead9b88d9f9654ff67528c58c1b7f6dd0d300f5816665e2ade58fb700eed8e0/colours.png" /> Text styles At some point general patterns in text use emerged and thus many styles already in use had to be systematised. Developers required rem values, so I established 12px as a base with a multiplier of 1,3 and step of 2. Below is a bit of documentation that explains the system. <img width="5260" height="2989" width_o="5260" height_o="2989" data-src="https://freight.cargo.site/t/original/i/d49e10b54ec34ddf8da09c47947283649ce5dd3bb47a7b0b2780d680ec60cbe9/texts.png" data-mid="194678348" border="0" src="https://freight.cargo.site/w/1000/i/d49e10b54ec34ddf8da09c47947283649ce5dd3bb47a7b0b2780d680ec60cbe9/texts.png" /> https://liza-ux.de/print-data-flows Fri, 08 Sep 2023 17:15:38 +0000 leesa https://liza-ux.de/print-data-flows Print Data FlowsRole: UX Designer Client: nuggit GmbH (2023)nuggit.de is a yearbook service, helping students to create and design their graduation books online. The nuggit app has a key function that allows users to generate a PDF version of a book and send it to experts for review, in order to flag any potential issues. At present, this process is executed manually.However, my mission was to redesign the entire procedure, with the aim of automating it. I was responsible for conceptualizing various user scenarios, and creating wireframes of the new user flows. Print data check: user flow chart Flow chart to visualise the decision tree and where each flow I created falls into. <img width="2920" height="1458" width_o="2920" height_o="1458" data-src="https://freight.cargo.site/t/original/i/ea037af45c84105c521a4b6f91aa82e7fd26a1b889a38e1f47815f09be409e5c/Screenshot-2023-09-08-at-19.17.59.png" data-mid="190191116" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/ea037af45c84105c521a4b6f91aa82e7fd26a1b889a38e1f47815f09be409e5c/Screenshot-2023-09-08-at-19.17.59.png" /> Solving problem: photo quality This flow chart represents one of the eight flows developed for the Print Data Check feature update. Within this user experience enhancement, we enable students to initiate an in-app check of their books before finalizing their purchase, thereby identifying and addressing potential issues proactively. This specific flow delves into a scenario where the system identifies images with low-quality attributes, preventing potential issues during the print and offering an upscaling feature as an automated solution. <img width="2610" height="571" width_o="2610" height_o="571" data-src="https://freight.cargo.site/t/original/i/047db7554cfb20a1ded6c4928ce00529abb7afc8aab2acb4fd100dbed03f59e9/druckdatencheck-flow.png" data-mid="190639648" border="0" src="https://freight.cargo.site/w/1000/i/047db7554cfb20a1ded6c4928ce00529abb7afc8aab2acb4fd100dbed03f59e9/druckdatencheck-flow.png" /> Solving problem: not set to print This flow addresses potential omissions of chapters or student profile pages from printing. Users can review with a visual preview, track changes with a history log, and receive troubleshooting tips for problem resolution. <img width="542" height="707" width_o="542" height_o="707" data-src="https://freight.cargo.site/t/original/i/ed4515d2517b22fab3b8e7058ceb947ebd27eefc5190df3293edba976f8bc011/Not-on-print.png" data-mid="190864551" border="0" src="https://freight.cargo.site/w/542/i/ed4515d2517b22fab3b8e7058ceb947ebd27eefc5190df3293edba976f8bc011/Not-on-print.png" /> Solving problem: students with no group In some instances, there could be a situation where users weren't assigned to a group, resulting in their profile pages not being included in the print queue. To address this, my solution offers an activity history that provides insights into the issue and presents buttons to assign a student to a group, exclude them from printing, or defer the resolution for later consideration. <img width="542" height="707" width_o="542" height_o="707" data-src="https://freight.cargo.site/t/original/i/acb456673244341f47ca407f025c86ec6a0b93b7e06915fe3fc690bf9aa9861f/Students-with-no-group.png" data-mid="190864568" border="0" src="https://freight.cargo.site/w/542/i/acb456673244341f47ca407f025c86ec6a0b93b7e06915fe3fc690bf9aa9861f/Students-with-no-group.png" /> https://liza-ux.de/QloScan Thu, 03 Sep 2020 08:40:14 +0000 leesa https://liza-ux.de/QloScan QloScan is a digital service aimed to put a product that the user wants to buy in a context of the environmental cost of its production. The app promotes mindful consumption of physical products. While recycling is a good practice, it is not ideal. A lot of products should be refused before they are bought, the app teaches that skill. QloScan is meant to challenge the status quo, raise the bar for sustainability in the fashion industryband promote the sustainable brands. By making the data on how an item was produced transparent, I want hold the unsustainable brands accountable for the negative impact on ecology and inspire them to be more sustainable. <img width="1440" height="804" width_o="1440" height_o="804" data-src="https://freight.cargo.site/t/original/i/bc250a8ce41621c5bd73d5176d0ba32d99b7587f22ec1e8ce1ba84822f668fbe/layout1.jpg" data-mid="81687159" border="0" src="https://freight.cargo.site/w/1000/i/bc250a8ce41621c5bd73d5176d0ba32d99b7587f22ec1e8ce1ba84822f668fbe/layout1.jpg" /> <img width="1867" height="1200" width_o="1867" height_o="1200" data-src="https://freight.cargo.site/t/original/i/9181ad65d74d6a9dd6bf98bb23e17e0d400a35a6ec294855b9e8e5deec4f2e64/user-flow-qloscan.png" data-mid="81680821" border="0" src="https://freight.cargo.site/w/1000/i/9181ad65d74d6a9dd6bf98bb23e17e0d400a35a6ec294855b9e8e5deec4f2e64/user-flow-qloscan.png" /> The fashion industry has a disastrous impact on the environment. In fact, it is the second largest polluter in the world, just after the oil industry. And the environmental damage is increasing as the industry grows. <img width="1867" height="1200" width_o="1867" height_o="1200" data-src="https://freight.cargo.site/t/original/i/8c78e1d26bd7c372ed0f4f56761bcce598a9afce9152bd4f0591c9a693c7e3c7/screens-qloscan.png" data-mid="81686187" border="0" src="https://freight.cargo.site/w/1000/i/8c78e1d26bd7c372ed0f4f56761bcce598a9afce9152bd4f0591c9a693c7e3c7/screens-qloscan.png" /> <img width="1867" height="1200" width_o="1867" height_o="1200" data-src="https://freight.cargo.site/t/original/i/97a3edad5874d94c43a3297aaecdfc7eb3d21ee1d53b9338e771fae45894a12e/screens-qloscan2.png" data-mid="81686186" border="0" src="https://freight.cargo.site/w/1000/i/97a3edad5874d94c43a3297aaecdfc7eb3d21ee1d53b9338e771fae45894a12e/screens-qloscan2.png" /> <img width="1867" height="1200" width_o="1867" height_o="1200" data-src="https://freight.cargo.site/t/original/i/8985245c9448e6a656973b15a1d097701fc91df37945fbc97ec6c98147db4207/screens-qloscan5.png" data-mid="81686184" border="0" src="https://freight.cargo.site/w/1000/i/8985245c9448e6a656973b15a1d097701fc91df37945fbc97ec6c98147db4207/screens-qloscan5.png" /> <img width="1867" height="1200" width_o="1867" height_o="1200" data-src="https://freight.cargo.site/t/original/i/ec74befe96853dfe304919b7832887c25518b0b22ac32c68e183bfea20ed6d17/screens-qloscan4.png" data-mid="81686185" border="0" src="https://freight.cargo.site/w/1000/i/ec74befe96853dfe304919b7832887c25518b0b22ac32c68e183bfea20ed6d17/screens-qloscan4.png" /> <img width="1867" height="1200" width_o="1867" height_o="1200" data-src="https://freight.cargo.site/t/original/i/005877778dce5a6a98b795ccca77a0318e96080c489b8dba7d14949ae7b55118/screens-qloscan7.png" data-mid="81686182" border="0" src="https://freight.cargo.site/w/1000/i/005877778dce5a6a98b795ccca77a0318e96080c489b8dba7d14949ae7b55118/screens-qloscan7.png" /> <img width="1867" height="1200" width_o="1867" height_o="1200" data-src="https://freight.cargo.site/t/original/i/76c455e8a1ac0a362ea3f5a11ede459a3d0a5c4259776bcb25ffa9b329a50aee/screens-qloscan6.png" data-mid="81686183" border="0" src="https://freight.cargo.site/w/1000/i/76c455e8a1ac0a362ea3f5a11ede459a3d0a5c4259776bcb25ffa9b329a50aee/screens-qloscan6.png" /> By means of collaboration with sustainable brands, the app will promote smaller ethical producers and try to make the fashion inustry more fair and diverse. <img width="1440" height="804" width_o="1440" height_o="804" data-src="https://freight.cargo.site/t/original/i/6b54b4068a020dc87e50dd161626799c43a7c9fba8ed80508b76ca5c4223aaf0/layout3.jpg" data-mid="81686874" border="0" src="https://freight.cargo.site/w/1000/i/6b54b4068a020dc87e50dd161626799c43a7c9fba8ed80508b76ca5c4223aaf0/layout3.jpg" /> https://liza-ux.de/Digital-Diet Wed, 27 Nov 2019 14:01:20 +0000 leesa https://liza-ux.de/Digital-Diet Digital Diet is a reading app aimed at increasing user’s productivity by filtering, assesing and curating information intake and tracking down personal growth (namely, attention, quality of content consumption and focus). <img width="6962" height="4350" width_o="6962" height_o="4350" data-src="https://freight.cargo.site/t/original/i/5e250f42e33cbe11ccd1f0773004d8f334069296e8dd15175762f4163a0427d9/mock-up-digi-diet-new.jpg" data-mid="59206226" border="0" src="https://freight.cargo.site/w/1000/i/5e250f42e33cbe11ccd1f0773004d8f334069296e8dd15175762f4163a0427d9/mock-up-digi-diet-new.jpg" /> Users of the Digital Diet save all articles they want to read later in order to get away from the manipulative tricks and to analyse the content they consume. Embedded algorithms visualise user’s personality profile based on the quality of information they consume. Hectic consumption of information, distracting to social media apps while reading and increased tapping and scrolling destroy the harmonious look of the chart. User can see which characteristics of the article influenced the grade by tapping on the corresponding parts of the chart. Only one piece of information is given at a time, so if a user is interested in learning more he might want to tap several times. <img width="1440" height="900" width_o="1440" height_o="900" data-src="https://freight.cargo.site/t/original/i/1657d45921405e768e5c3fbbde025fcf9fda6941c0268504ffc7858c21e7a2fe/digi-layout.jpg" data-mid="59219356" border="0" src="https://freight.cargo.site/w/1000/i/1657d45921405e768e5c3fbbde025fcf9fda6941c0268504ffc7858c21e7a2fe/digi-layout.jpg" /> The reading part of the app helps to bring attention to the content of the article by notifying the user that they had distracted and by reminding to reflect on what has been read so far and dividing longer articles into digestible chunks of information. This can be referred to as teaching the user mindful consumption and forming healthier habits.The reading list contains all saved articles and quality rating shows whether the article is worth taking time or not. This feature is aimed to help user navigate within the information overload and choose the best content available. https://liza-ux.de/Watch-Deutsch Wed, 27 Nov 2019 14:01:20 +0000 leesa https://liza-ux.de/Watch-Deutsch Website created for a UI-UX intensive course in Moscow, Russia. Online cinema that aids learning German language. &nbsp; Goals: Facilitate learning of German language Tasks: Customise all material according to the language skillsMake the process intuitive and entertainingEncourage the user to grow their vocabulary. <img width="2880" height="1597" width_o="2880" height_o="1597" data-src="https://freight.cargo.site/t/original/i/74400032eb59e92d3d80e64619c089c5bc4ea488555332aa50fd771a5f8a86df/Episode-no-pop.jpg" data-mid="59193976" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/74400032eb59e92d3d80e64619c089c5bc4ea488555332aa50fd771a5f8a86df/Episode-no-pop.jpg" /> <img width="2880" height="1597" width_o="2880" height_o="1597" data-src="https://freight.cargo.site/t/original/i/1b5d319a85f146a336af6757886d00d030d50d224760d9249684658ada6c13cc/Episode-pop-up.jpg" data-mid="59193977" border="0" src="https://freight.cargo.site/w/1000/i/1b5d319a85f146a336af6757886d00d030d50d224760d9249684658ada6c13cc/Episode-pop-up.jpg" /> The idea appeared when I was carrying out research on online cinemas. According to numerous responses, many respondents used online cinemas and subscription services in order to watch series and movies in the language that they were learning. <img width="1544" height="1546" width_o="1544" height_o="1546" data-src="https://freight.cargo.site/t/original/i/093a22417f976d97263539962ba394de71189bf02ae518c4c1ef1e1ab8612ecc/CJM-for-Cinema_Elizaveta_Tereshchenko-bw.png" data-mid="59184813" border="0" src="https://freight.cargo.site/w/1000/i/093a22417f976d97263539962ba394de71189bf02ae518c4c1ef1e1ab8612ecc/CJM-for-Cinema_Elizaveta_Tereshchenko-bw.png" /> Customer Journey Map <img width="10624" height="6392" width_o="10624" height_o="6392" data-src="https://freight.cargo.site/t/original/i/6d9819dd949575d0945aae4456584cff06692f168880832cad24bfdd2481b4c6/profil.png" data-mid="59190633" border="0" src="https://freight.cargo.site/w/1000/i/6d9819dd949575d0945aae4456584cff06692f168880832cad24bfdd2481b4c6/profil.png" /> When working on the visual identity, I drew inspiration from German and Swiss graphic design with their grids, bold colours and basic geometric shapes.Colour coding of the language level helps navigate faster. <img width="1440" height="900" width_o="1440" height_o="900" data-src="https://freight.cargo.site/t/original/i/e7ddf156591e8b2694c2c81237dfd721572e299053957e6410cbbc24da922621/profil2.png" data-mid="59193450" border="0" src="https://freight.cargo.site/w/1000/i/e7ddf156591e8b2694c2c81237dfd721572e299053957e6410cbbc24da922621/profil2.png" /> https://liza-ux.de/Project-Nav Wed, 27 Nov 2019 14:01:22 +0000 leesa https://liza-ux.de/Project-Nav Index &nbsp; Next︎ &nbsp; https://liza-ux.de/Elizaveta Wed, 27 Nov 2019 14:01:22 +0000 leesa https://liza-ux.de/Elizaveta My name is Elizaveta Tereshchenko and I am a user experience and interface designer&nbsp; based in ︎ Berlin, Germany.&nbsp; Professional experience 2024-present Yara InternationalUX Designer Innovation &amp; Exploration team, Service Design subteamWorking in close collaboration with Incubation Market Leads to explore new potential products and featuresOwning Desirability lens: ensuring the proposed new features and products are design with user-centricity in mind by means of service and user experience designInvolving User Research team members, creating user research plan together, translating results into actionsProject management 2020-2023 nuggit GmbH UI/UX Designer Creating design system for the app from scratchapp redesign&nbsp;website redesign&nbsp;UI library creation and maintenancecreating flows for new app featuresresearching user interactions with the app via Hotjaroverseeing and optimising all design processes in the companysetting monthly KPIs and project planning&nbsp;company brand update,&nbsp;onboarding and managing junior designersgraphic design tasks 2018-2019 centrsvet Technical Designer Packaging design and specifications for manufacturers in Chinabusiness cardsdefinining the company’s mission and valuesvolunteered for designing Remote Light Control App as a side project 2018 edhv, the Architects of IdentityGraphic design internSupported graphic designers in their projectscollecting researchcreating advertising materialbrandingcreative photographycreative brainstorming