https://mackozal.com/my-design-sandbox daily 0.75 2022-07-29 https://mackozal.com/my-design-sandbox/typewriter-art monthly 0.5 2021-11-19 https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595503719078-QJ5BF77OPRIB1OGNU564/1.jpg My Design Sandbox - Typewriter Art https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595503710259-RILOCME635RX367Z6F6V/2.jpg My Design Sandbox - Typewriter Art https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595503731412-V6A5B5F4IBEJKJZ0NMV7/3.jpg My Design Sandbox - Typewriter Art https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595503733218-SCIQUPRXIWVLBA96W1HW/4.jpg My Design Sandbox - Typewriter Art https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595503733917-UE95YMO1R5UFJAAT0FHW/5.jpg My Design Sandbox - Typewriter Art https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595503747712-269TFAL92RXUAWGVZ3IK/6.jpg My Design Sandbox - Typewriter Art https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595503752685-AB2SC9XRUJ5T6S2RQT8F/7.jpg My Design Sandbox - Typewriter Art https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595503758313-58IDHLIRUJDZUMTPG8NO/8.jpg My Design Sandbox - Typewriter Art https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595503771873-AOIOZLJYS0E1289Z0K4F/9.jpg My Design Sandbox - Typewriter Art https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595503771375-OJ35F20ERQYP69MOCYDK/10.jpg My Design Sandbox - Typewriter Art https://mackozal.com/my-design-sandbox/sketches-of-barcelona monthly 0.5 2020-07-23 https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595505086214-TY1E0IPTJ8ROF5ZXWU1S/1.jpg My Design Sandbox - Sketches of Barcelona https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595505086150-G3T1KQ781714ZHQPHQK9/2.jpg My Design Sandbox - Sketches of Barcelona https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595505092453-LPJTGZS91W8YDZ9K36QE/3.jpg My Design Sandbox - Sketches of Barcelona https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595505092784-RDIQKMLSFOEIDQS5RXIE/4.jpg My Design Sandbox - Sketches of Barcelona https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595505099454-73CYDO3TYYIYNFINSHOD/5.jpg My Design Sandbox - Sketches of Barcelona https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595505097668-4RRDBWWV2IEDOZQ2AVVO/6.jpg My Design Sandbox - Sketches of Barcelona https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595505102893-77HJ1YKEPP5E1R4UNBBZ/7.jpg My Design Sandbox - Sketches of Barcelona https://mackozal.com/my-design-sandbox/minimal-art monthly 0.5 2020-07-23 https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595504776587-5MZ5IVHVCVU1FG97LHLQ/1.jpg My Design Sandbox - Minimal Paintings https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595504779186-Y8EFZ01MYKNLGMWH5NJ0/2.jpg My Design Sandbox - Minimal Paintings https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595504790955-DZVWP4160YHARMO0UIV0/3.jpg My Design Sandbox - Minimal Paintings https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595504791982-LMYHQ5QB8VZAAYSYFU95/4.jpg My Design Sandbox - Minimal Paintings https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595504796339-GZNIH8HE8I86H2KB41Q0/5.jpg My Design Sandbox - Minimal Paintings https://mackozal.com/my-design-sandbox/some-illustrations monthly 0.5 2020-07-23 https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595505464122-2MXVQZXHNXKOMZ4DLW7Q/1.jpg My Design Sandbox - Some Illustrations https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595505464628-7OX6OEN943WT3JWZLGCN/2.jpg My Design Sandbox - Some Illustrations https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595505468932-MU3RNSHIR1ULPUE00LRK/4.jpg My Design Sandbox - Some Illustrations https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595505472624-M4CFRW4VHW24XZNS3PAX/5.png My Design Sandbox - Some Illustrations https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595505474265-X8TCOBOB1V47IEAISNZA/7.png My Design Sandbox - Some Illustrations https://mackozal.com/home daily 1.0 2024-11-26 https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1594575897738-EU1HEETRGHP4O3A2CNWM/IMG_20191217_112238_MP.jpeg https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595069883513-WF8MAWCF2TFMQKZD7ZFS/25.png https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/53b1012c-8e5e-4f48-a32f-800a6557209c/open+ocean+-+featured.png https://mackozal.com/about-me daily 0.75 2024-10-24 https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1594819249960-TP3KRNP80BNY40FGQ9FJ/IMG_2574.jpeg About Me - Along with co-founding six mobile apps, I am a product designer with over 15 years of design experience and a broad architectural background. I combine the processes of those two specialties in a daily routine to create inspired and innovative products. I specialize in planning, conceptualizing, and designing clean, scalable, functional products, and experiences that leave a positive impact on people and solve business problems. You can follow me on Twitter, Dribbble, LinkedIn https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1594932012970-9YM6VKEITW7OFO50QMN0/21.png About Me - When I work on a final version of the design I believe it’s important to provide a precise and explanatory documentation. There is a developer who needs to execute the project. I want to make it as easy and clear for them as possible https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1594932122885-10M1QXOI4X2EQVM7IJCM/22.png About Me - It’s a good practice to describe edge cases and less common scenarios. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1594930965805-PMTFR1CQ81QVQ3SNCX54/20.png About Me - Sometimes it's worth to make a heuristic evaluation. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1594930770704-JRXWHIZEOXAJB5O5RQ50/image-asset.png About Me - When I have my feedback, it’s time to prioritize it and decided what to work next. You never work alone and every project has different dependencies. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1594932478029-FC67LEBVGRQZPO8INHSA/22.gif About Me - You can define all the elements and rules together and make them the single source of truth for the whole organization. It will allow the teams to design, realize and develop a product in a much more pragmatic manner. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1594932976480-28R06UV0R0SPEY4D2AFY/24.png About Me - ...but it’s never finished, so I think it’s always crucial to take look on the metrics and talk with clients (or customer happiness team) regularly to figure out the next challenges to work on. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1594852522301-W97OZUXIE7C9K4AZFIOA/Screenshot+2019-05-22+at+22.36.png About Me - Whatever has been prototyped it's always important to test a prototype and see how people are using it. You can do some automatic tests... https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1594852592689-4P74UT8B9VRBHX6KCZ5E/Screenshot+2019-05-22+at+21.53.png About Me - ...ask people about their preference... https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1594852367927-BFV6TPU4M0OO7DSU5M6F/image-asset.gif About Me - … or this micro interaction. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1594825985540-GNT6P23QFC3L12B4ZEM2/Screenshot+2019-05-22+at+21.43.jpg About Me - …or quantitative data. I try to understand the goal and a real purpose of the project. Why something needs to be done, and why the solution we’re working on is the best way to achieve that. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1594930850578-X0POWIJ8WTJBWN5IQN22/19.png About Me - You can put all benefits and costs together, and generate a chart that helps you with the decision. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1594826512241-DOUS8XZDZ8F70C9FEG2T/Untitled_2+2.jpg About Me - I always start with drawing. As Le Corbusier said “I prefer drawing to talking. Drawing is faster and leaves less room for lies.” https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1594823296479-FFJSXJ3ZQIV6NIRLO7SK/Frame+3.jpg About Me - It’s very important to understand users motivations and behaviors. That’s why the research is always very handy. It can be done in many ways ie. heatmaps… https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1594847134822-DFLHLU5B9I1ZVP62CHXK/byers+11.png About Me - It all starts with the drawings The creative process is complex and hard to define, but when ideas are generated, the simplest way of communicating them is by drawing. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1594849799832-QZ2HJT2TI0F30PO21ZUF/13.gif About Me - ...or a single component (like this complex dropdown)... https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1594925690740-TUHJQKXL3CNQ7KHJ8AE2/8.png About Me - Sometimes the best way to find the proper solution is to work on abstract entities. Creating user flows always put a lot of light to the problem. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1594825917402-CIHQEKSYHHB7KDEDU0BL/Screenshot+2019-05-22+at+21.52.jpg About Me - …surveys, interviews, qualitative research, cards sorting… https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1594849439089-AH267A1CIM2Y4S29RRHD/12.gif About Me - You can prototype the behavior of the whole part of the system... https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1594846811291-2XQH7HIE01PR2ZUL7SKU/byers+10.png About Me - Some wireframes and quick tests among users can put us closer to a satisfactory solution as well. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1594926806336-K91BFYTQUXC21QBJB5GR/11.png About Me - Sometimes it’s necessary to make high fidelity prototypes to create convincing and credible testing materials. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1594932638220-GN0G0F77M9NVPVJZEIW8/23.png About Me - It’s always a great feeling to see the developed product... https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1594821686050-OMQ5C1VS09RX3I9ZZRVU/IMG_4262.jpg About Me - I like to keep the project notebook with my sketches I can always refer to. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1594825845278-Z7ZTH4ZCYP6XGA0U8540/Untitled_3.jpg About Me - It’s good for developing ideas, making quick iterations and team collaboration. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1594926592591-6AQ04T3KCEBQ3ONKCAQI/10.png About Me - The first solution is usually, not the best, I make a lot iterations to find something that clicks. I like to keep all of them saved for future reference. Sometimes they are very useful at later stages of design or during kickoff presentations. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1594930539215-QATF8NWTP0COK6BJFM8T/17.png About Me - ...or do the qualitative user testings where you observe how different participants solve previously assigned tasks. I like to use this rainbow matrix to collect feedback among different users. https://mackozal.com/my-work daily 0.75 2023-10-07 https://mackozal.com/my-work/service-delivery-portals-20202022 monthly 0.5 2023-07-18 https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/5681190f-ea4a-4a8b-aa37-daf72b83cf67/mitel_toptal+1.jpg https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/c21c0dbc-5a52-48d5-b812-d1d4b28c711c/mitel_toptal+1.jpg My Work - CCaaS Service Delivery Portals (2020-2022) A screenshot from the high-fidelity prototype of the workflow editor I was working on. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/26e5f3a6-70d9-4a4c-b54a-8ff5dbcc8ddd/mitel_toptal+2.gif My Work - CCaaS Service Delivery Portals (2020-2022) I was working on admin widget system design for the organization communication app. Notifications consist multiple contextual options that enrich the user experience. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/e90d0fb6-0568-464e-b109-d66b732d455d/mitel_toptal+3.jpg My Work - CCaaS Service Delivery Portals (2020-2022) The creative process is complex and hard to define, but when ideas are generated, the simplest way of communicating them is by drawing. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/cdb105bb-03ef-49b4-a35b-f5699a46ffc1/mitel_toptal+4.jpg My Work - CCaaS Service Delivery Portals (2020-2022) Some details of the workflow editor I was working on. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/3e0b424b-4606-49fe-98f2-dcbcd0c98a74/mitel_toptal+15.jpg My Work - CCaaS Service Delivery Portals (2020-2022) Screenshots of developer portal I was working on. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/32854be5-26ad-46c7-b42e-879f7506d114/mitel_toptal+5.jpg My Work - CCaaS Service Delivery Portals (2020-2022) I divided the complex projects into user flows and presented the design to stakeholders in this way. It makes it easier to comprehend and develop on the later stages of design to development process. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1823eff0-0466-4214-8f19-5871f265c310/mitel_toptal+6.jpg My Work - CCaaS Service Delivery Portals (2020-2022) UI Example; I was working on notification system for the company communication app. Notifications consist multiple contextual options that enrich the user experience. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/b8981849-6a3f-4bb0-ac4e-eb3124e6644f/mitel_toptal+7.jpg My Work - CCaaS Service Delivery Portals (2020-2022) An example of the self enclosed user flow I was working on. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/b057bbaa-3883-425f-85e6-3d0737c96ad9/mitel_toptal+8.jpg My Work - CCaaS Service Delivery Portals (2020-2022) I was responsible for creating and maintaining the design system ux documentation. Each card shows the UI elements, together with the design description, best practices, and information how to use them. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1751cba6-3844-4874-9404-8fe98fd67ee8/mitel_toptal+9.jpg My Work - CCaaS Service Delivery Portals (2020-2022) Details of the table view with the information about spacings and paddings between elements. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/ccba7b0d-dddf-41dc-ac56-59186c1e254f/mitel_toptal+10.jpg My Work - CCaaS Service Delivery Portals (2020-2022) Arrangement details and relations between different components of the table design. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/9e8f6814-30ae-4bd3-9b34-3e6ade6bbb7d/mitel_toptal+16.jpg My Work - CCaaS Service Delivery Portals (2020-2022) Mockup of the organization communication app. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/876edbd5-81dd-44be-9ca0-9f686d57bd36/mitel_toptal+10.jpg My Work - CCaaS Service Delivery Portals (2020-2022) Some examples of the design of one of the admin tools I was working on. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/5bfacd45-9f19-4d8a-a021-4e6483d5d481/mitel_toptal+11.jpg My Work - CCaaS Service Delivery Portals (2020-2022) Design proposal of the system status dashboard. We wanted to use colors in a very informative way - we want them to convey the messages important for users. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/68009d88-33c0-444e-9632-696b0cd4d42b/mitel_toptal+12.jpg My Work - CCaaS Service Delivery Portals (2020-2022) Few mockups of CC client improvements I was responsible for. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/d15ec745-777b-4032-8d1e-df0e5094372b/mitel_toptal+13.jpg My Work - CCaaS Service Delivery Portals (2020-2022) I was working on many studies, research, and explorations exercises. https://mackozal.com/my-work/ai-powered-venture-classification-platform monthly 0.5 2023-07-18 https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/b9d2fbca-7efb-48c0-86f9-575d37e5bcd9/open+ocean1.jpg https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/6b424064-da7e-4429-984b-1dd47ae6831c/open+ocean2.jpg My Work - AI-powered Venture Classification Platform (2023) Design of the animated donut plot that allows previewing multiple dimensions of the data set. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/50c69d19-0d60-430c-bd2d-78578d999360/open+ocean3.jpg My Work - AI-powered Venture Classification Platform (2023) An interactive table view accompanied by secondary plots allows users to dive into a large data set and find patterns without problems. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/52673d8a-af1e-4113-8577-211f725d621f/open+ocean4.jpg My Work - AI-powered Venture Classification Platform (2023) A hexagonal map view that shows multiple dimensions of data related to geographic locations https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/a949ddf2-99b3-469a-a991-310c0677a27e/open+ocean5.jpg My Work - AI-powered Venture Classification Platform (2023) Design of the animated donut plot with the multiple data categories and the details view https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/cd19d06d-5cbc-4a66-9757-9f4d2196c0de/open+ocean6.jpg My Work - AI-powered Venture Classification Platform (2023) Design of the user flow https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/2a542cbd-b78f-4cec-86c2-9a9ad067aaad/open+ocean7.jpg My Work - AI-powered Venture Classification Platform (2023) Some of the first sketches I made https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/637d1f9d-1748-4e70-9ed6-a6a51f4e0d0e/open+ocean8.jpg My Work - AI-powered Venture Classification Platform (2023) Design study of the data visualizations in the light and dark mode, together with color-blindness test. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/f7c05230-fbbd-42f5-8ac3-57a614091c33/open+ocean9.jpg My Work - AI-powered Venture Classification Platform (2023) I made a lot of research, trying to find the proper data visualization method that will be both informative and fun to play. https://mackozal.com/my-work/aidriven-chemistry-tool-for-medicine-2021 monthly 0.5 2021-11-23 https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/2e730e7f-b7fa-4bcb-ad50-eef34654aaad/Frame+39.png My Work - AI-Driven Chemistry Tool For Medicine (2020) This screen shows the workspace with four molecules and different properties. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/c53107a1-80fc-47c8-a400-10777507d525/Animation+1.gif My Work - AI-Driven Chemistry Tool For Medicine (2020) With Envision you can calculate and compare properties of molecules, explore reaction pathways, measure bonds and angles, edit geometries, and export images and videos - image by entos.ai https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/01524e5a-f00d-4f35-b377-4a75e88cd12b/3.png My Work - AI-Driven Chemistry Tool For Medicine (2020) The creative process is complex and hard to define, but when ideas are generated, the simplest way of communicating them is by drawing. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/72dfe3cc-0dbd-4608-8750-c63d357f7161/4.png My Work - AI-Driven Chemistry Tool For Medicine (2020) We decided to make the app in both light and dark mode. All repetitive elements were saved in a design system. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/ba7bc496-4f62-4bda-bbb8-09e5a93a68a9/6.png My Work - AI-Driven Chemistry Tool For Medicine (2020) A basic user flow. We wanted to give users an easy and quick access to all most used elements. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/7d725c9c-a4e6-44e1-b85f-d195c227b00b/5.png My Work - AI-Driven Chemistry Tool For Medicine (2020) Early concept of the data browser. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/158977f7-675a-4865-a363-92c5f4191aab/1.gif My Work - AI-Driven Chemistry Tool For Medicine (2020) Early concept of the main window - light mode. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/c173cdbf-ad27-4e32-bba8-ac5e7d0ea836/2.gif My Work - AI-Driven Chemistry Tool For Medicine (2020) Early concept of the main window - dark mode. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/84b86d0f-ad5a-4684-86bc-aef383cb0834/Screenshot+01.png My Work - AI-Driven Chemistry Tool For Medicine (2020) Orbitals visualization - image by entos.ai https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/bd909a9d-61c8-4559-9b24-69c18b922e16/Screenshot+04.png My Work - AI-Driven Chemistry Tool For Medicine (2020) IR Spectra property - image by entos.ai https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/375f266e-9ff0-415a-aacb-b59c43bb1595/7.png My Work - AI-Driven Chemistry Tool For Medicine (2020) Early concept of the export modal - light mode. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/59f1e057-805e-4d6f-b7d6-60847615de32/Screenshot+05.png My Work - AI-Driven Chemistry Tool For Medicine (2020) Surfaces property - image by entos.ai https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/901aedca-14b1-465d-80a0-99202f850b5d/8.png My Work - AI-Driven Chemistry Tool For Medicine (2020) One of the early concepts of workflows. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/6216eca4-0e3c-48b1-b39c-20f4eb456371/Screenshot+03.png My Work - AI-Driven Chemistry Tool For Medicine (2020) Coordinate interpolation - image by entos.ai https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/c6b470ab-7abe-4ac5-8feb-0179f2be4c31/9.png My Work - AI-Driven Chemistry Tool For Medicine (2020) Early concept of the workflow details. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/9dfbcd8d-310b-46bf-ab04-72a69c0e3b5f/Screenshot+02.png My Work - AI-Driven Chemistry Tool For Medicine (2020) Data browser - image by entos.ai https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/51c4d1bf-09e4-4a27-ac53-946dd39dc394/10.png My Work - AI-Driven Chemistry Tool For Medicine (2020) Early exploration of databases browser. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/fb40dbe2-983d-4792-b701-f63775c3a49d/12.png My Work - AI-Driven Chemistry Tool For Medicine (2020) Webpage organization sketches https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/091def68-dc40-4216-abc5-ffbdbd44b729/11.png My Work - AI-Driven Chemistry Tool For Medicine (2020) UI explorations https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/f9cf1971-18c4-4823-a742-c3e714f8caa6/13.png My Work - AI-Driven Chemistry Tool For Medicine (2020) I made many high-fidelity prototypes to create convincing and credible testing materials. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/e218213b-5320-4a50-9b15-817cb46ac038/14.gif My Work - AI-Driven Chemistry Tool For Medicine (2020) The company website proposal https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/170cacbe-9f1f-417d-a7db-5dec05bacccd/15.gif My Work - AI-Driven Chemistry Tool For Medicine (2020) Team page details https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/511d8227-6c12-43fe-bd8a-0e57c3e7dac0/17.png My Work - AI-Driven Chemistry Tool For Medicine (2020) Branding colors and their implementation in the design system https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/29c20b9b-4f9e-4f74-b822-a3aafb7354f7/18.png My Work - AI-Driven Chemistry Tool For Medicine (2020) Company logo details https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/17fb6b14-f3eb-45c7-b63d-6974bfd8f4e0/19.png My Work - AI-Driven Chemistry Tool For Medicine (2020) Fonts and typography grid details https://mackozal.com/my-work/ui-samples monthly 0.5 2021-01-10 https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1610297779138-JPSIHW4EAH8ENQFYSCQ5/IMG_5958.jpeg My Work - UI Samples (2020) Landing page of User Flow Figma Plugin https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1610298058874-0CCJ2TVT6SVMB1CRVS8G/flows.png My Work - UI Samples (2020) Figma Flows plugin design https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595334882070-TPM518AHHCKJ3WY9K7FS/UI+1.png My Work - UI Samples (2020) One of the dashboards of the web traffic analytic platform I worked on. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595334900050-KQJF4N972PUUC7F86SFT/UI+2.png My Work - UI Samples (2020) The design of the mobile version of AFO clothes luxury brand store https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595334884049-7BAW8N0XT6M8MPO7MZRQ/UI+3.png My Work - UI Samples (2020) The design of the main screen of Inventory Management App https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595334902741-P7NAB54S5MH6W6GJHUR8/UI+4.png My Work - UI Samples (2020) The design of the cooking and recipes sharing social media iOS app I worked on. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595334884319-FG2FRAAZ0G4PH5HT2GS9/UI+5.png My Work - UI Samples (2020) The design on the cryptocurrency trading platform https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595334882286-IAGI0RUHPMQNVMN8TFPV/UI+6.png My Work - UI Samples (2020) Welcome screen dashboard for the web traffic analytic platform I worked on. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595334895208-PFPNJJENG9JQDAF2DDR5/UI+7.png My Work - UI Samples (2020) The design of the banking app https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595334901167-G7KVRMIGQJWFNZ041UO2/UI+8.png My Work - UI Samples (2020) The design of the settings panel for the mobile IOS iMessage game https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595334890650-T5KUC6FD1QWEV8N8K8H3/UI+9.png My Work - UI Samples (2020) https://mackozal.com/my-work/architecture monthly 0.5 2020-07-23 https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595429427861-EDNAZ7P3158VDJC3TM8J/26.png My Work - Architecture https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595429435773-7VKRPK1R1FGHJKKDW9JP/Rectangle+3+Copy+2.png My Work - Architecture https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595429450715-VBB4RV1FLOZLYDCDTDRY/Rectangle+3+Copy+3.png My Work - Architecture https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595429462092-UKDLIE7S57OSPSPH3Y8R/Rectangle+3+Copy+4.png My Work - Architecture https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595429472793-RTEJ9FXAANAUESJH0S9U/Rectangle+3+Copy+5.png My Work - Architecture https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595429483902-TISNNVG8ZLUG539NU4GW/Rectangle+3+Copy+6.png My Work - Architecture https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595429502995-SMLKGYUV0WQX70SL5552/Rectangle+3+Copy+7.png My Work - Architecture https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595429518820-IRL4MOMFX4C79KGJCK3W/Rectangle+3+Copy.png My Work - Architecture https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595429529345-80ZXSQ7GQDMEV0C1DPR1/Rectangle+3.png My Work - Architecture https://mackozal.com/my-work/my-writing monthly 0.5 2020-07-23 https://mackozal.com/my-work/starred monthly 0.5 2020-07-22 https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595422259958-VATPAFW39LYMDPCCABD5/Mockup+3.png My Work - Starred (2018-2020) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595422189398-4JCQ0ZFVTO8GL6TQSKDA/12.png My Work - Starred (2018-2020) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595422221763-3F9FA4SUEOM7PEBGIFRL/Mockup+2.png My Work - Starred (2018-2020) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595422855637-GHH7FUVJ8Z2XR7K4F0TX/1.png My Work - Starred (2018-2020) - What has challenged me and what have I learned? Working with a team in multiple locations. I gained experience how to efficiently communicate, discuss and handle design principles, tests and documentation remotely. Limited development resources. I learned how to use them to produce the most impact and valuable solutions. Working with the legacy project. How to understand constraints and push the product design into the proper directions to overcome them. Customers and end-users are different groups. I learned how to combine working towards two goals. Fulfilling users needs and business goals at the same time. Technical constraints. Complex data structures, and different frameworks used within the platform. Multiple languages. The platform is available in multiple languages. The design needs to be flexible to support all of them. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595422664651-OH1DQT8RK44C469NW372/3.png My Work - Starred (2018-2020) - What skills have I employed? Designing and framing the design to development process Building and maintaining a scalable design system - Polestar Built the data-informed culture within the organization by implementing tools like Mixpanel and Hotjar Improved the survey completion rate by 51-95% by applying UX methodologies. UX and UI improvements of the platform Usability testing Feature prioritization methodology Building Starred Connect from scratch; part of the platform that allows building integrations with external apps without code knowledge. Average time to integrate with other platforms decreased from days to minutes. Design evangelization Improved onboarding Developed metrics and analytical culture Improved given metrics by design adjustments Design sprints Design audits Checking usability heuristics Leading design projects https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595422938719-PBVQPR26JC5JJE0L6O6F/3.gif My Work - Starred (2018-2020) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595423109114-S2EP7FYIBU9PV4NEG2ZZ/2.png My Work - Starred (2018-2020) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595423117673-C7OP1ZR8FROH7BHYQX8E/4.png My Work - Starred (2018-2020) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595423359970-5S72XUEE1GBV21205A89/5.png My Work - Starred (2018-2020) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595423129385-BM4YAB3OEE6MYCTZF9E1/6.png My Work - Starred (2018-2020) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595423133661-1DFILO87BPB9FFMOZ302/7.png My Work - Starred (2018-2020) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595423138489-0XQTZQ15DT91JR64CSAG/8.png My Work - Starred (2018-2020) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595423147188-67FCKVV82GR4VVNYUMNC/10.png My Work - Starred (2018-2020) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595423160488-NC5G944YQ9CWE2PNGZKC/11.png My Work - Starred (2018-2020) https://mackozal.com/my-work/games-tracker monthly 0.5 2020-07-22 https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595428293077-HGHVBPBC5Q9BJLF75REN/games-tracker.png My Work - Games Tracker (2018) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595428183695-RAKMWBDPVO6ABOEYWRA7/2.gif My Work - Games Tracker (2018) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595428012484-EN7NVF5PTH35RT4L8ONS/1.png My Work - Games Tracker (2018) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595428012656-8MBA9NNU7AF9F3C80FAF/3.png My Work - Games Tracker (2018) https://mackozal.com/my-work/jottings monthly 0.5 2020-07-23 https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595427026997-DDYXHUD6U28ENABP3F2I/3.gif My Work - Jottings (2016) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595426856201-CO2T6HPU3Y038I7Y30JD/6.jpg My Work - Jottings (2016) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595426863949-JXWODWT85LR46W57FRQU/7.png My Work - Jottings (2016) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595426925611-3M3DWZD8Q13IEN5KZJCC/1.jpg My Work - Jottings (2016) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595426924754-RGIXFJVM6KJY6UIO6ZYI/2.png My Work - Jottings (2016) https://mackozal.com/my-work/coypu monthly 0.5 2020-07-22 https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595425079911-AQUABIRN0NV7ZUWDLES5/1.png My Work - Coypu (2017) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595425085485-YV9DB9HSKS3RMTPO2H9E/2.jpeg My Work - Coypu (2017) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595425103809-4YG9MZA1KMRD9APPOLIU/3.png My Work - Coypu (2017) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595425147488-715NOFQ6IQ4MEG5KVTS3/4.gif My Work - Coypu (2017) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595425170140-3BMQRTWDDQVXJWXCZ14G/5.jpg My Work - Coypu (2017) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595425169200-HGZ0IXAZ6ZFRNEJFB28E/6.png My Work - Coypu (2017) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595425166681-EUDDHJFV6HAYMMUSI47B/7.png My Work - Coypu (2017) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595425165796-0I1CHOP5V2HWAJ2938N7/8.jpg My Work - Coypu (2017) https://mackozal.com/my-work/checkers monthly 0.5 2020-07-23 https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595425779488-LQ28ACBGNNW4R2HBCXAH/2.png My Work - Checkers (2016) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595425758338-UPI0W3MNYOQFKS1A0941/4.jpg My Work - Checkers (2016) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595425758305-9QTBVPXWJJKWEOJMPDT7/5.jpg My Work - Checkers (2016) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595425748360-UQG1LWJMPBUTMTT66ZSM/1.png My Work - Checkers (2016) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595425756965-7C1FH2JPE7BIITQRP089/3.png My Work - Checkers (2016) https://mackozal.com/my-work/starred-people-experience monthly 0.5 2020-07-21 https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595258611043-HTPG666SPRC92FHQZ7SB/image-asset.png My Work - People Experience Tool (2019) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595258726387-8KQIDIN4APISRO55J9V4/2.png My Work - People Experience Tool (2019) Sometimes the best way to find the proper solution is to work on abstract entities. Creating user flows always put a lot of light to the problem and makes it easier to find satisfactory solutions. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595259330483-DJ6L7RA6UEN67WX8Z5AM/3.png My Work - People Experience Tool (2019) I always sketch a lot while designing. Sketching allows me to check and communicate design ideas with stakeholders and team members quickly, or as Le Corbusier said, “I prefer drawing to talking. Drawing is faster and leaves less room for lies.” https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595259355739-RBBZS7273SVWZLV3GY0L/4.png My Work - People Experience Tool (2019) This low-fidelity design focuses on the critical actions that a persona will take while using a product. Its purpose is to map out the big picture, rather than describing interactions in detail. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595259541984-U4ZQXOMI8D01FIRM74HP/5.png My Work - People Experience Tool (2019) Wireframes represent interface elements, navigation, and functionalities of the product. They are handy to map all of the user interactions. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595259564182-VGYV82L9NIXTRXCW5YA5/6.png My Work - People Experience Tool (2019) A hover state reveals some extra information and actionable insights. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595259622737-LE8AT333ZSPF3DC9T46E/7.gif My Work - People Experience Tool (2019) Users can check historical data by hovering on top of the small charts. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595259663770-VCR0ZNX6EEA4AL4VS6LT/8.png My Work - People Experience Tool (2019) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595259679493-YS00RYNP8H4CT81NU1L7/9.png My Work - People Experience Tool (2019) I prepared the documentation where I described all components and edge cases to discuss it with developers and incorporated it into the design system. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595259710070-X66L4TMVUX1674D57ZWN/10.png My Work - People Experience Tool (2019) The close-up view of the chart. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/322cbd38-8800-4d2d-90b1-ae147eb4e3d5/People+Experience+21.png My Work - People Experience Tool (2019) One of the candidate experience actionable dashboard designI was working on - image by starred.com https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/3b4b4c5f-ed4e-4f58-89a3-3de7bfff870a/People+Experience+22.png My Work - People Experience Tool (2019) Priority Matrix design I was working on - it turns your candidate experience data into actionable next steps. Each recruiter, hiring manager, or other stakeholders will get an automated action plan to start improving - image by starred.com https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/a10ffc46-86ef-4908-ab22-c4767b334b59/People+Experience+23.png My Work - People Experience Tool (2019) One of the dashboard design I was working on - user can have the overview of the status of the system on a first glance https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/f47d3f7a-1dd6-4f67-827f-2750325cef16/People+Experience+24.png My Work - People Experience Tool (2019) One of the dashboard design I was working on - user can dive into the details of each plot https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/8062f2dc-f0ae-4273-92ce-58ab0d8ff8e7/People+Experience+25.png My Work - People Experience Tool (2019) One of the dashboard design I was working on - feedback form summary dashboard https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/d7cabb78-9382-4274-9819-448a5798bf34/People+Experience+26.png My Work - People Experience Tool (2019) One of the dashboard design I was working on - priority matrix turns data into actionable next steps. https://mackozal.com/my-work/polestar-design-system monthly 0.5 2020-08-02 https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595326889795-V0NWSMDVR1VZUB28KRNN/1.png My Work - Polestar Design System (2018) Logo of Polestar Product Context: Starred is a SaaS company that builds feedback solution that empowers talent acquisition and HR teams to improve the people experience for corporate clients from the day they are hired to retirement. The Challenge: We want to continue growing as an organization and deliver a better product to more clients. One of the success factors was having an effective design pattern repository: something that our co-workers can easily access, comment on, modify, and use. The Solution: Consistency is a big issue when working on a large-scale product. We continuously test new solutions and usage of patterns. As a result, there are always some pages with a legacy design on the platform. With the Polestar design system, we can minimize them. It consists of UI assets, behavioral patterns, animations and voice, and tone snippets. Thanks to Polestar, we can now deliver cohesive, consistent user experiences, and our users started to learn and master the product faster. Deliverables: Ideation sketches Research Documentation Motion design Establishing proper metrics and implementing them in Mixpanel Session recordings and heatmaps Metrics analytics Quality assurance UX assurance https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595327367951-DCXLUK47MREWLA2JEKHR/2.png My Work - Polestar Design System (2018) Solid principles - We started by describing the principles like color scheme, typography, and most used UI elements. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595327372015-Z1GI98SPVTP6G32PX9QD/3.png My Work - Polestar Design System (2018) Rules - Every component in the Polestar design system comes with construction principles, such as distances and alignments. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595327379496-XLMY8HUXSBJAOAIQA2W1/4.png My Work - Polestar Design System (2018) Scope of work - Polestar quickly became quite a project at Starred. We covered all components we have. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595327388470-EPRGK1AYZ8YRMF90ZO9Y/5.png My Work - Polestar Design System (2018) Design documentation - Example of the dropdown design. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595327398260-IGSLMYDTSO8Z9EQ9JY0W/6.png My Work - Polestar Design System (2018) Design documentation - The design is not just how something looks like, but also how it works. That’s why we include the behavioral description in our documentation. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595327420655-8MJCVROVA0FYMZQ5CCKH/7.gif My Work - Polestar Design System (2018) Design documentation - We often add animations to the component description because it makes documentation much easier to comprehend. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595327465792-355FRLCJ8SPTMZFXIE7R/8.png My Work - Polestar Design System (2018) Sometimes it's important to describe precise flow case. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595327477066-G8U0Q63D0VP2XDY0G0QT/9.png My Work - Polestar Design System (2018) A few examples of components we have. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595327481174-9X1XS06817VF2ZT8ZC13/10.png My Work - Polestar Design System (2018) Testing - This heatmap was the result of our initial tests, during which we wanted to check if our new card component drew our users’ attention to the right areas. https://mackozal.com/my-work/feedback-form-page-redesign monthly 0.5 2020-07-21 https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595337345192-69F3XUEM1ATPN6131TND/1.png My Work - Feedback Form Page Redesign (2018) Product Context: Starred is a SaaS company that builds feedback solution that empowers talent acquisition and HR teams to improve the people experience for corporate clients from the day they are hired to retirement. The Challenge: We want to make this app more appetizing for Starred users. In practice, this meant we wanted to provide even higher response rates. That was our starting point for the long journey of redesigning the respondent experience. The Solution: Our ambition was to provide similar experience regardless of screen size. Content should be readable and crisp on all of them. Deliverables: Ideation sketches Research User interviews User analysis made with Google Analytics User flows Wireframes Low-fidelity prototype Concept testings High-fidelity prototypes Preference tests Usability test questionnaires Moderated and unmoderated usability tests Usability test analysis—rainbow matrix Feature prioritization framework Documentation Motion design Design system Establishing proper metrics and implementing them in Mixpanel Sessions recordings and heatmaps Metrics analytics Quality assurance UX assurance https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595337570107-STQZQ146FHZTXO17PKCU/2.png My Work - Feedback Form Page Redesign (2018) A survey preview on a tablet. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595337570573-3PCZ8G379KB6VRGQBYP8/3.png My Work - Feedback Form Page Redesign (2018) During the research phase, I checked among others multiple metrics, performed screen recordings sessions, and surveyed the users. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595337571030-MM3FPR4RBYOHSMA5ZBSL/4.png My Work - Feedback Form Page Redesign (2018) We used a lot of hand sketches and user flows proposals during the initial phase of the project. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595337607872-H2L3WOL73BWXDKZT2BSB/5.gif My Work - Feedback Form Page Redesign (2018) We did multiple tests and formulated a few design hypotheses to be verified during usability tests. We also checked a lot of UI patterns to find the one that worked the best. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595337810106-XDYPTNIPPKSTXV09ZC3N/6.gif My Work - Feedback Form Page Redesign (2018) Subtle microinteractions provide friendly experiences for the users. We checked and documented every edge case of every component. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595337591402-X2CV7LVOJQZ1NN86O31U/8.png My Work - Feedback Form Page Redesign (2018) The new version of the feedback forms have many advantages for our clients. It helps them collect feedback and reach their business goals: • The total completion rate is almost 100% better on the new version of the feedback form. • Respondents tend to leave 22% more comments on the new feedback form page. • The new version opens noticeably faster than the original one. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595337593410-JTY0TWX1SKV4AE101AKA/9.png My Work - Feedback Form Page Redesign (2018) A survey preview on a tablet. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595337889604-CYY1PW8YNBHG6S14BLPS/7.png My Work - Feedback Form Page Redesign (2018) We used multiple user testings methods for this project including preference tests, moderated and unmoderated usability tests, accessibility tests, and loading speed tests—resulting in satisfactory experiences for end-users. https://mackozal.com/my-work/field-data-collection-tool monthly 0.5 2020-07-23 https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595260397893-XOZH3AJDVX4EOZZAD5QC/a66dca95699841.5e9dc07de7f05.png My Work - Field Data Collection Tool (2020) This screen shows the platform dashboard with all projects laid down on the map. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595325270397-V82XWS3REC46ZOIY5733/2.png My Work - Field Data Collection Tool (2020) The creative process is complex and hard to define, but when ideas are generated, the simplest way of communicating them is by drawing. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595325270833-NGMMPG4QB9CL0M43GNWC/3.png My Work - Field Data Collection Tool (2020) Sometimes the best way to find the proper solution is to work on simple entities. Creating user flows and transforming them into simple wireframes is very useful in the designing process. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595325250892-DODNQXE17SHRD70QPCX3/4.png My Work - Field Data Collection Tool (2020) I divided the project into user flows and presented the design to stakeholders in this way. It makes it easier to comprehend and develop on the later stages of design to development process. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595325250993-OZRO378Q00ZOK39I1N1T/5.png My Work - Field Data Collection Tool (2020) Project settings page. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595325575918-9Z5PJ8AVD4OLH7EIGHFS/6.png My Work - Field Data Collection Tool (2020) I utilized the Google Material Design principles for the purpose of creating company design system. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595325423230-IEJJ8QTVMG65F7U7YGWL/7.gif My Work - Field Data Collection Tool (2020) I prototyped various elements of the user interface to check how people will interact with them. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595325288509-4H26AU8TYBJK4EYROZ5Y/8.png My Work - Field Data Collection Tool (2020) I proposed a cohesive and coherent design and information architecture through the whole product. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595325279478-BVBQLN3A6N2WB49RARC8/9.png My Work - Field Data Collection Tool (2020) Design of the layer display page. https://mackozal.com/my-work/echotags monthly 0.5 2020-07-23 https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595413626957-LM9CB95EFK1BPRHWIQR3/1.png My Work - Echotags (2016-2017) Product Context: Echotags is an offline audioguide for Amsterdam in the Netherlands. It uses geolocation to play recorded messages via earbuds when a user is close to an interesting object, spot, or location. I co-founded, designed, and built an MVP version of the app. The Challenge: Make the product for short term travelers who stay in a city just for a couple of days and who like active traveling and learning something new about the place they visit. The Solution: To build a mobile application for solo travelers and short-time visitors called Echotags. It allows you to dive into the new city and discover places hands-free. You can get lost and rely on our content made by locals who know the city the best. Put headphones on, hide your iPhone in a pocket — that’s all. Services: Product design User experience design User interface design Product strategy Risk estimation Project management Deliverables: Ideation sketches Research User flows Wireframes Concept testings High-fidelity prototypes Documentation (design to development handoff) Motion design Quality assurance https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595413932115-OF8BBC1SUNTTXW7EIN8Y/1.png My Work - Echotags (2016-2017) App design https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595413932754-U324ELEB2P9VGRUT9IKE/2.png My Work - Echotags (2016-2017) The market of solo traveling is growing super fast. A number of bookings increased nearly 60% in last three years and 1/3 of all trips in Europe are solitary. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595413934089-T8X3QRDR4QXFPM35NBTO/3.png My Work - Echotags (2016-2017) I started making the very first mockups and schemes of the interface. They were just a simple handmade sketches that showed the main design decisions and connections between the screens. I really like working by hand because that gives a lot of freedom and it’s really fast. The process is efficient and clear when you keep in your head what do you want to communicate. It allows making a lot of iterations fast and in an entertaining way. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595413954565-AWPXN2OXW6O0VX26F6HT/4.gif My Work - Echotags (2016-2017) The history of the iterative process of designing the landing page. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595413980716-K4I69A30GYBIB1GBNEQT/5.png My Work - Echotags (2016-2017) I created handmade images for the landing page and marketing purposes. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595413979957-TUUWX9ZNVRN9F15UTTQL/6.png My Work - Echotags (2016-2017) I designed a few newsletters for our users made in a form of a comic book. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595413981907-9MF430IF7KSYVCHOA2BS/7.png My Work - Echotags (2016-2017) In Echotags, content is the king. It’s an app built around content. We wanted to deliver the best quality information that we could. We decided to make around 200 points of interest in the first iteration of the product. This resulted in sufficient density of points, so the travel time between them on foot won’t take too long. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595413998906-ZLB74IKWBIH5QQZRGEY6/8.gif My Work - Echotags (2016-2017) I decided to make a service to manage the database of Echotags points. It should allow us to add, view, modify and delete points. We wanted to have a search option, preview of all triggers and possibility to keep the text for audio recording. We called it Echotags Marker. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595414032495-GAVNFXM9TI542WPJ2PDI/9.png My Work - Echotags (2016-2017) A vector illustration that I made for the Echotags app. https://mackozal.com/my-work/mood-tracker monthly 0.5 2020-08-02 https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595361171481-OV2B9OZILI9VN8BBOXZ1/6.png My Work - Mood Tracker (2019) https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595361428030-IATUVMO868LJ9XU9INLN/1.png My Work - Mood Tracker (2019) Light version of UI https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595361441877-9ESJK0YJ1BUSVVE78LSC/2.png My Work - Mood Tracker (2019) Dark version of UI https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595361456482-K654E6M4LM0I2TUJR1E4/3.png My Work - Mood Tracker (2019) The design of the promo screens used in the App Store and Google Play Store. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595361474158-BL794OVYVGOVLCYX33IK/4.png My Work - Mood Tracker (2019) Snippets from research - I checked some of the most popular in the App Store and made a simple card sorting exercise to discover design patterns. I used them later for alternating the mental model of the app. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595361486943-ZGN7IZE9RSM5IWCCTVRG/5.png My Work - Mood Tracker (2019) The visual representation of the high fidelity prototype of the app. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595361507584-HYAFJAUFI5QOBFV88QPO/6.png My Work - Mood Tracker (2019) A close up image of the main screen of the app. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595361534607-O1U9T8A6VDMV11AL124Y/7.gif My Work - Mood Tracker (2019) Users see the insight right away after launching the app. This help to identify patterns in how their mood varies and trigger the imagination. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595361611087-IUQFHGUNZAQIHR4JV132/9.png My Work - Mood Tracker (2019) The basic visual elements used in the mood tracker https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595361625206-ELOI4OAUVP7RLULEIWJX/8.png My Work - Mood Tracker (2019) The design and description of some crucial components. https://mackozal.com/my-work/settings-2019 monthly 0.5 2020-07-21 https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595335641146-BKDXEPOR3GW82BZ8HQZJ/1.png My Work - Settings Panels (2019) Settings page - A view of the colleagues' section, where admins can modify users of the app. Product Context: Starred is a SaaS company that builds feedback solution that empowers Talent Acquisition and HR teams to improve People Experience for Corporate clients from the day they are hired to retirement. The Challenge: To rebuild and modernize the Settings page within the Starred platform. We had to make it intuitive for new users while keeping in mind the mental maps of existing users. The Solution: Based on user tests, preference tests, and conversations with users, we decided to clean and rebuilt the existing page while fixing UX issues and improving its information architecture. Deliverables: Ideation sketches Research User flows Wireframes Low-fidelity prototype Concept testings High-fidelity prototypes Documentation (design to development handoff) Motion design Quality assurance UX assurance https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595335888970-0IDN6IKICSI3Z7F3GXQN/2.png My Work - Settings Panels (2019) A fragment of the diagram that shows the structure of the settings page. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595336197746-KBY8Y0A0PBBJ3F3GZZOD/3.png My Work - Settings Panels (2019) User flows show the logic of the design and how different design elements work and interact with each other. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595336208762-NC8300XFPFJ6WEIDT5VZ/4.png My Work - Settings Panels (2019) This image shows the design of the API configuration page. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595336221048-RLWY8UR0P3N1K6J8QY4H/5.png My Work - Settings Panels (2019) This image shows the relations between components https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595336231603-VV5QEVJZSF4TBW7TOH0M/6.png My Work - Settings Panels (2019) The colleague details card. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595336244324-5XYTGYX3ZFKRAZUR4T98/7.png My Work - Settings Panels (2019) The page where users can access their visual styles. https://images.squarespace-cdn.com/content/v1/5f0a01441f6b1056b51153f8/1595336261194-E1R5D0CXDXL8MEGXTIEM/8.png My Work - Settings Panels (2019) The page where users can modify their visual styles.