https://simonlouaza.com Simon Louaza Fri, 07 Feb 2025 23:00:12 +0000 https://simonlouaza.com en https://simonlouaza.com/Analysis Fri, 07 Feb 2025 21:47:35 +0000 Simon Louaza https://simonlouaza.com/Analysis Analysis The project focuses on redesigning the information architecture and design system of EIAS, enhancing data visualisation efficacy, and introducing advanced analysis capabilities and customisation features. These improvements aim to better align with users’ goals and expectations. Research &amp; analysis / UX / UI / Prototype2024 / 2025 (ongoing) Encare is a HealthTech company based in Stockholm, specializing in the development of cloud-based solutions to enhance surgical care.EIAS, ERAS® Interactive Audit System, is a comprehensive software solution developed by Encare to support the implementation of ERAS protocols in hospitals. It offers functionalities such as data entry, analysis, and reporting. Enhanced Recovery After Surgery (ERAS) protocols aim to improve patient outcomes by reducing complications and shortening hospital stays. Browse the galleries to view the new design <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/2e06169ff6e4b998a3bd559c1ec79864b509a481f8984f348ff38b264ff84e25/New-01.png" data-mid="228690717" border="0" src="https://freight.cargo.site/w/1000/i/2e06169ff6e4b998a3bd559c1ec79864b509a481f8984f348ff38b264ff84e25/New-01.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/027218685a5b8d855c13a120e86b96f81807f289f18666bbee0e407fc3c25a0e/New-02.png" data-mid="228690718" border="0" src="https://freight.cargo.site/w/1000/i/027218685a5b8d855c13a120e86b96f81807f289f18666bbee0e407fc3c25a0e/New-02.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/71a553e3f426cea2901db29e208832c7c765d0c936e156f980411a68282f744e/New-03.png" data-mid="228690719" border="0" src="https://freight.cargo.site/w/1000/i/71a553e3f426cea2901db29e208832c7c765d0c936e156f980411a68282f744e/New-03.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/708639b23d2cece4d0f098cb22a762a73df1f7a185acae1374ed95cd696460f0/New-04.png" data-mid="228690720" border="0" src="https://freight.cargo.site/w/1000/i/708639b23d2cece4d0f098cb22a762a73df1f7a185acae1374ed95cd696460f0/New-04.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/fde3056b4b53a7bd51cd0ad8d0a3c0e4273ddbf6c405a37597f382089509b89c/New-05.png" data-mid="228690745" border="0" src="https://freight.cargo.site/w/1000/i/fde3056b4b53a7bd51cd0ad8d0a3c0e4273ddbf6c405a37597f382089509b89c/New-05.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/5fcf4b0daa991106fb1218fc7c243f8cdfb014c078960f441289220b30453eb4/New-06.png" data-mid="228690741" border="0" src="https://freight.cargo.site/w/1000/i/5fcf4b0daa991106fb1218fc7c243f8cdfb014c078960f441289220b30453eb4/New-06.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/68256e7635142f00573a5a9a04258ab25441d8fa17d228dac808056c890d5f94/New-07.png" data-mid="228690743" border="0" src="https://freight.cargo.site/w/1000/i/68256e7635142f00573a5a9a04258ab25441d8fa17d228dac808056c890d5f94/New-07.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/dbd811098a72fa8b22b8bb79bae1c24cc4446b97f2a114bbc062885b29bd1d16/New-08.png" data-mid="228690742" border="0" src="https://freight.cargo.site/w/1000/i/dbd811098a72fa8b22b8bb79bae1c24cc4446b97f2a114bbc062885b29bd1d16/New-08.png" /> The problem : In the previous interface, the information architecture was not intuitively structured, and the prioritisation of elements was ineffective. The left navigation menu displayed only icons by default, which failed to convey the content of each section, causing confusion among users. The secondary navigation used a nested tab system with two layers of dropdowns, making it difficult for users to navigate across sections and remember their locations. This increased the number of clicks needed to get a full overview of the data. Additionally, a secondary right navigation menu contained important actions, but its hidden placement and poor prioritisation made them harder to access. The icons in this menu also lacked clarity, further hindering usability. Overall, the steep learning curve caused significant friction for users. Browse the gallery to view screens of the previous interface <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/ca76ca6e5f6635021c33fec84cae53b970d577aeee53b6de8982bc080b94025f/RR-intro.png" data-mid="228499217" border="0" src="https://freight.cargo.site/w/1000/i/ca76ca6e5f6635021c33fec84cae53b970d577aeee53b6de8982bc080b94025f/RR-intro.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/e21316bd283aaac0eae5464bbc2319423d96ebf0438b881ad3187b4bbe466e3f/RP-01.png" data-mid="228499228" border="0" src="https://freight.cargo.site/w/1000/i/e21316bd283aaac0eae5464bbc2319423d96ebf0438b881ad3187b4bbe466e3f/RP-01.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/a06a3b957394aa31408f646ba8bd79743f66989a95eefa358ba63244719654ba/RP-02.png" data-mid="228499226" border="0" src="https://freight.cargo.site/w/1000/i/a06a3b957394aa31408f646ba8bd79743f66989a95eefa358ba63244719654ba/RP-02.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/14c5d0895656864a36ccde44105a6816dedf8a884141c6dd6ff22a3467372462/RP-04.png" data-mid="228499223" border="0" src="https://freight.cargo.site/w/1000/i/14c5d0895656864a36ccde44105a6816dedf8a884141c6dd6ff22a3467372462/RP-04.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/b0d40c7d52d3186b78054976bdb77bae8ba57ed37fcc968473444f4671b40c1d/RP-05.png" data-mid="228499219" border="0" src="https://freight.cargo.site/w/1000/i/b0d40c7d52d3186b78054976bdb77bae8ba57ed37fcc968473444f4671b40c1d/RP-05.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/4aa6656fb569fcf407825a0984f5e21d47d62e56e32d6358323cc99e2c2b4bdc/RP-06.png" data-mid="228499218" border="0" src="https://freight.cargo.site/w/1000/i/4aa6656fb569fcf407825a0984f5e21d47d62e56e32d6358323cc99e2c2b4bdc/RP-06.png" /> Additional steps between login and landing on the main page increased user frustration. Since their primary goal was to perform data entry tasks or conduct data analysis, these extra steps created unnecessary friction. Upon every login, users were required to select a specific data unit before proceeding. However, they were not given the option to set a favourite unit, remember their last selection, or skip this step if they had access to only one unit. This resulted in additional clicks and an inefficient workflow. Browse the gallery to explore the workshop map and the bubble chart <img width="3840" height="3328" width_o="3840" height_o="3328" data-src="https://freight.cargo.site/t/original/i/e9e380703323335f7c61b02af9953203e61e40d8cc0289e41cbec778ef59c9e8/Map-01.png" data-mid="227856459" border="0" src="https://freight.cargo.site/w/1000/i/e9e380703323335f7c61b02af9953203e61e40d8cc0289e41cbec778ef59c9e8/Map-01.png" /> <img width="3840" height="3328" width_o="3840" height_o="3328" data-src="https://freight.cargo.site/t/original/i/715573ded93bba272bc9eafc7e6f14ea5223eee96df2faac85eb0876f66be3a4/Map-02.png" data-mid="227856458" border="0" src="https://freight.cargo.site/w/1000/i/715573ded93bba272bc9eafc7e6f14ea5223eee96df2faac85eb0876f66be3a4/Map-02.png" /> <img width="3840" height="3328" width_o="3840" height_o="3328" data-src="https://freight.cargo.site/t/original/i/d68a3e1da7cd7ea4075c1d9af0a5662fa4c9f8bb301759a2ee2f8877b5351958/Map-03.png" data-mid="227956765" border="0" src="https://freight.cargo.site/w/1000/i/d68a3e1da7cd7ea4075c1d9af0a5662fa4c9f8bb301759a2ee2f8877b5351958/Map-03.png" /> <img width="3840" height="3328" width_o="3840" height_o="3328" data-src="https://freight.cargo.site/t/original/i/aa5e6d9e6997ff3541084233bf0bb25d9332ec491a28f1ff6a77c00b91307f9b/Map-04.png" data-mid="227856456" border="0" src="https://freight.cargo.site/w/1000/i/aa5e6d9e6997ff3541084233bf0bb25d9332ec491a28f1ff6a77c00b91307f9b/Map-04.png" /> Users often felt overwhelmed by the complexity of the many sections and graphs, highlighting a general lack of guidance and intuitiveness in facilitating data interpretation. At the same time, they found that many graphs lacked key features or data, limiting flexibility in analysis. They needed more tools to explore data from different perspectives and dive deeper into insights. Examples of missing functionalities included the absence of trend visualisation (such as trend graphs and arrows) to indicate status and direction, limited graph customisation (e.g., switching between bar and line charts), and missing comparison parameters like average and median values. Additionally, several high-priority graphs were buried within the interface, requiring excessive scrolling, which led to users overlooking them. Some graphs lacked proper colour coding or additional visual elements to support interpretation. Despite the abundance of graphs, users still felt that essential data points were missing, particularly those related to patient population, comorbidities, and surgical areas. Workshop results and usability tests <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/ab7e73bb4c792a6312b14fdb954c63457e8df4c216d65948ea33163b1dbcac4a/Workshop-01.png" data-mid="228060043" border="0" src="https://freight.cargo.site/w/1000/i/ab7e73bb4c792a6312b14fdb954c63457e8df4c216d65948ea33163b1dbcac4a/Workshop-01.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/b35759a7230b223d7f8fc15604faff2d03259e2dbb2e95951dd46deb145b7e7d/Workshop-02.png" data-mid="228060042" border="0" src="https://freight.cargo.site/w/1000/i/b35759a7230b223d7f8fc15604faff2d03259e2dbb2e95951dd46deb145b7e7d/Workshop-02.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/4fdce1d5f21a91b841d4f1e97e77c1458feefb5ca1c3c77b016b025f98fe1bdb/Workshop-03.png" data-mid="228060041" border="0" src="https://freight.cargo.site/w/1000/i/4fdce1d5f21a91b841d4f1e97e77c1458feefb5ca1c3c77b016b025f98fe1bdb/Workshop-03.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/8cd317e2305784b84663f5fe8341420dc7de1838f6b080d53787640312d859fa/Workshop-04.png" data-mid="228060040" border="0" src="https://freight.cargo.site/w/1000/i/8cd317e2305784b84663f5fe8341420dc7de1838f6b080d53787640312d859fa/Workshop-04.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/b6c442680a3c8cc6877e7a1d853800daca25f6624e6291cf493c7c89a107f64c/Roles-01.png" data-mid="228497174" border="0" src="https://freight.cargo.site/w/1000/i/b6c442680a3c8cc6877e7a1d853800daca25f6624e6291cf493c7c89a107f64c/Roles-01.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/56fa1c9890a2b48269ae31dd2eba563ebd5563c571179629b82d10c2a34dc8d5/Roles-02.png" data-mid="228497175" border="0" src="https://freight.cargo.site/w/1000/i/56fa1c9890a2b48269ae31dd2eba563ebd5563c571179629b82d10c2a34dc8d5/Roles-02.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/c07a4a72ee3581a59fe9187f2c6708651cdb20e48d6075434ba6dba6f4147d3b/Roles-03.png" data-mid="228497176" border="0" src="https://freight.cargo.site/w/1000/i/c07a4a72ee3581a59fe9187f2c6708651cdb20e48d6075434ba6dba6f4147d3b/Roles-03.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/cc0fe5e4899bcace7de1184a89a686d4f4b46783ab2285ea76a9a1120d1f5ca9/Roles-04.png" data-mid="228497177" border="0" src="https://freight.cargo.site/w/1000/i/cc0fe5e4899bcace7de1184a89a686d4f4b46783ab2285ea76a9a1120d1f5ca9/Roles-04.png" /> The overall appearance and design system were outdated and lacked consistency. The interface contained unnecessary and visually cluttered elements, while key areas were not visually separated effectively. This increased eye strain and made it harder for users to scan the page for functionalities and data. Additionally, many colours did not provide optimal colour coding and were not fully accessible. Browse the galleries to explore the findings from usability tests <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/54b1a0e04b7dc098f92c87121ecc77ba83e279b0e5ba309872eb62dac1891b18/PF-01.png" data-mid="227857627" border="0" src="https://freight.cargo.site/w/1000/i/54b1a0e04b7dc098f92c87121ecc77ba83e279b0e5ba309872eb62dac1891b18/PF-01.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/fe8261c82c5f16daba2058419ab017a617ea5605f9307d412bd2e9a8daf953d9/PF-02.png" data-mid="227857626" border="0" src="https://freight.cargo.site/w/1000/i/fe8261c82c5f16daba2058419ab017a617ea5605f9307d412bd2e9a8daf953d9/PF-02.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/c794bf8a21499e9954fb77461ac7a1f2b6158560089bc16d79210e49eba2fa14/Result-01.png" data-mid="228060059" border="0" src="https://freight.cargo.site/w/1000/i/c794bf8a21499e9954fb77461ac7a1f2b6158560089bc16d79210e49eba2fa14/Result-01.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/fdd7c2562e8f78722264f1cf42a8c69e04ae9ef30d431d96bf422bdb30deabbe/Result-02.png" data-mid="228060060" border="0" src="https://freight.cargo.site/w/1000/i/fdd7c2562e8f78722264f1cf42a8c69e04ae9ef30d431d96bf422bdb30deabbe/Result-02.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/966661853629dd426813389648d7c33f4827352dc9862ae3e31e600be72b093f/Result-03.png" data-mid="228499146" border="0" src="https://freight.cargo.site/w/1000/i/966661853629dd426813389648d7c33f4827352dc9862ae3e31e600be72b093f/Result-03.png" /> The solution : With the new design, the information architecture was completely rearranged. The primary left navigation icons were replaced with clear items that include both icons and text, with the left navigation panel always open by default. All pages were grouped into five categories to reduce the number of main items, supporting the different user profiles and highlighting relevant content for each, aligned with their goals: Overview Compliance Surgery Anaesthesia Recovery For the secondary level of navigation, standard tabs were introduced, and their number was reduced compared to before by grouping similar graphs together in the same area. A new dropdown feature was added to select and switch between units, along with the ability to pin favourite units. Important functionalities, such as filters, were removed from the right bar and repositioned in a more prominent location on the interface. As a result, the right bar was completely removed, freeing up space for better graph visualisation. These graphs were also rearranged to be more accessible across the platform. New graph toggle switches video { width: 100%; height: auto; } .rounded-video { border-radius: 12px; /* Adjust the value as needed */ overflow: hidden; } New visual elements were introduced to improve data interpretation, such as additional coloured rings around the radar chart to highlight the different phases in the care pathway. New capabilities were also added to graphs, including a series of toggle switches to change graph visualisation, which helped reduce the number of graphs needed while enhancing data analysis and comparison. Trend visualisation button video { width: 100%; height: auto; } .rounded-video { border-radius: 12px; /* Adjust the value as needed */ overflow: hidden; } More trend visualisation options, including line graphs, trend arrows, and a special trend button, were added to the platform. These features help users easily assess the progression of the overall situation and critical medical parameters, making it easier to pinpoint both positive and negative trends and focus attention where needed. Checkboxes and radio buttons were introduced to allow users to hide or show specific graph elements, preventing overwhelming amounts of data and helping users focus on selected items. Graph checkboxes video { width: 100%; height: auto; } .rounded-video { border-radius: 12px; /* Adjust the value as needed */ overflow: hidden; } The internal organisation of graphs on each page was reviewed, with the prioritisation of certain graphs adjusted. For example, the occurrence rate graph was moved to the top of the overall page for better visibility. A new section dedicated to patient population data was introduced, featuring graphs that provide insights into gender, age, and comorbidities. Additionally, a new set of graphs focused on surgery data is currently in development. Heatmaps <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/6ae0edbce7efeec34b00b2a4b87c6de4b0893fc6522ab75e1bf83a196fe79e4a/RPPH-01.png" data-mid="227856381" border="0" src="https://freight.cargo.site/w/1000/i/6ae0edbce7efeec34b00b2a4b87c6de4b0893fc6522ab75e1bf83a196fe79e4a/RPPH-01.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/9141a1870dd91c73e2e6702177909f3e390fe042f11ef14fa237fb05e39e7045/RPPH-01-1.png" data-mid="227856380" border="0" src="https://freight.cargo.site/w/1000/i/9141a1870dd91c73e2e6702177909f3e390fe042f11ef14fa237fb05e39e7045/RPPH-01-1.png" /> A new design system was developed to modernise the interface, adopting a more minimal, flatter, and bolder style in line with current UI trends. The goal was to create a cleaner, more engaging experience while boosting consistency and accessibility across the platform. This allows users to focus on tasks rather than relearning the UI every time they switch contexts. For example, many graphical elements like frames and dividers were removed, and more whitespace and improved colour coding were introduced to facilitate easier scanning of the interface. Development sketches <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/a952e71099b2adbcfdb6bb727cdd89141de0d610a739170e11df9ef9ebf292c7/RPS-01.png" data-mid="227856363" border="0" src="https://freight.cargo.site/w/1000/i/a952e71099b2adbcfdb6bb727cdd89141de0d610a739170e11df9ef9ebf292c7/RPS-01.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/5d993107b38178a1a11bee0ed1e53377dccda6e88ab2248c618b3e3e9468183c/RPS-02.png" data-mid="227856361" border="0" src="https://freight.cargo.site/w/1000/i/5d993107b38178a1a11bee0ed1e53377dccda6e88ab2248c618b3e3e9468183c/RPS-02.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/26cf17a013fd7e71712b59a3577a4936a1f62e72dd600e2406a707dd2b081cd5/RPS-03.png" data-mid="227856362" border="0" src="https://freight.cargo.site/w/1000/i/26cf17a013fd7e71712b59a3577a4936a1f62e72dd600e2406a707dd2b081cd5/RPS-03.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/18da6bb34854b13d49531a45048b1aa7ddc3041706428f73868038a7f43d6b01/RPS-04.png" data-mid="227856360" border="0" src="https://freight.cargo.site/w/1000/i/18da6bb34854b13d49531a45048b1aa7ddc3041706428f73868038a7f43d6b01/RPS-04.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/218edc7d097af4baebf7ad913061ee215b91e7554615ed1b57c35747b2b75cdf/RPS-05.png" data-mid="227856359" border="0" src="https://freight.cargo.site/w/1000/i/218edc7d097af4baebf7ad913061ee215b91e7554615ed1b57c35747b2b75cdf/RPS-05.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/912ce23b4be6491bc950700ab499724886b7532d3a04bf34bbd397cd90aae39c/RPS-06.png" data-mid="227856358" border="0" src="https://freight.cargo.site/w/1000/i/912ce23b4be6491bc950700ab499724886b7532d3a04bf34bbd397cd90aae39c/RPS-06.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/6e46cf3de7c30173fd917ef81c43589d9ea0aeda17c665a2a5801420fc59933c/RPS-07.png" data-mid="227856357" border="0" src="https://freight.cargo.site/w/1000/i/6e46cf3de7c30173fd917ef81c43589d9ea0aeda17c665a2a5801420fc59933c/RPS-07.png" /> Browse the gallery to vexplore the new design system <img width="3840" height="3698" width_o="3840" height_o="3698" data-src="https://freight.cargo.site/t/original/i/a1cb0fe43cc61c9ea49f1f6b14e5d0e90f4679eb01bdc3f0d64fcba35645cc45/System-01.png" data-mid="227891409" border="0" src="https://freight.cargo.site/w/1000/i/a1cb0fe43cc61c9ea49f1f6b14e5d0e90f4679eb01bdc3f0d64fcba35645cc45/System-01.png" /> <img width="3840" height="3698" width_o="3840" height_o="3698" data-src="https://freight.cargo.site/t/original/i/76847a080183bc3cb17d0abec195c0df39a8557424487e5736ad37bd696559e7/System-02.png" data-mid="227956764" border="0" src="https://freight.cargo.site/w/1000/i/76847a080183bc3cb17d0abec195c0df39a8557424487e5736ad37bd696559e7/System-02.png" /> <img width="3840" height="3698" width_o="3840" height_o="3698" data-src="https://freight.cargo.site/t/original/i/401eb3d3668fd7ca5fbce8cc6c6bc674ff271fe642d3a87162d7bbcf65669b72/System-03.png" data-mid="227956763" border="0" src="https://freight.cargo.site/w/1000/i/401eb3d3668fd7ca5fbce8cc6c6bc674ff271fe642d3a87162d7bbcf65669b72/System-03.png" /> <img width="3840" height="3698" width_o="3840" height_o="3698" data-src="https://freight.cargo.site/t/original/i/d4793b5c3f08d9eecc9df46f68580aac9f9f559b987d7c599ffbc6df13f3b16b/System-04.png" data-mid="227956762" border="0" src="https://freight.cargo.site/w/1000/i/d4793b5c3f08d9eecc9df46f68580aac9f9f559b987d7c599ffbc6df13f3b16b/System-04.png" /> https://simonlouaza.com/Authentication Thu, 29 Sep 2022 10:39:43 +0000 Simon Louaza https://simonlouaza.com/Authentication Authentication The project focused on redesigning the registration and login flow to enhance the user experience. The goal was to address usability pain points and improve conversion rates. Research &amp; analysis / UX / UI / Prototype2022 G-Loot, later rebranded as Stryda, was a Stockholm-based esports company specializing in stats tracking, player identity, and competitions. It permanently ceased operations in 2023. New design <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/f0ed597211296ba27e5bcf3dae5753aa121df3047e517d27ff82b504e18f4093/Auth-01.png" data-mid="227004514" border="0" src="https://freight.cargo.site/w/1000/i/f0ed597211296ba27e5bcf3dae5753aa121df3047e517d27ff82b504e18f4093/Auth-01.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/f70b89ce8e7b015361755562a36ad50ebeea87e10afa79bb12aa130d50e994bc/Auth-02.png" data-mid="227004504" border="0" src="https://freight.cargo.site/w/1000/i/f70b89ce8e7b015361755562a36ad50ebeea87e10afa79bb12aa130d50e994bc/Auth-02.png" /> The problem : Research findings showed that users were eager to land on the platform, understand the core loop, and start playing. However, the previous registration flow had several issues that either slowed users down or, in some cases, prevented them from completing the registration or login process: Ineffective guidance: Many error messages were misplaced or conveyed misleading information. Additionally, key elements, such as password hints, were not properly highlighted. Lack of social authentication: Approximately 50% of users preferred social authentication, with Discord being a popular choice among gamers. Too many steps: The registration flow was too long, requiring users to go through excessive clicks and screens, making the process feel cumbersome. Poor age verification placement: The 16+ age requirement (age gating) appeared too late in the process, just before email confirmation, after users had already filled out multiple fields. Additionally, it required a full date of birth, forcing users to select three dropdowns, which many found unnecessary and intrusive due to privacy concerns. Technical issues: Research using Amplitude revealed backend problems that prevented users from receiving the email with the verification code. Outdated interface: The registration flow did not align with the platform’s newly designed system, making it feel outdated. Browse the gallery to explore the research findings on the previous flow <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/cf7b91ebfcc729e333613f41340d888acef9d074027408b015d5d3b5faaf321f/Pres-01.png" data-mid="228570818" border="0" src="https://freight.cargo.site/w/1000/i/cf7b91ebfcc729e333613f41340d888acef9d074027408b015d5d3b5faaf321f/Pres-01.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/005d44f1c7dc54dfda3035c8d6a73080f5502b04e6dd3b145fbc9ea98190c463/Pres-02.png" data-mid="228570817" border="0" src="https://freight.cargo.site/w/1000/i/005d44f1c7dc54dfda3035c8d6a73080f5502b04e6dd3b145fbc9ea98190c463/Pres-02.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/fcf9a92930e3aaa7ab31922cf9e331152d1c0504d36cbc6442a52bf358e5c177/Pres-03.png" data-mid="227004511" border="0" src="https://freight.cargo.site/w/1000/i/fcf9a92930e3aaa7ab31922cf9e331152d1c0504d36cbc6442a52bf358e5c177/Pres-03.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/3e53883a56f1c2abff3e671fca9113329b2755864ba09529a077c7cb38629e5d/Pres-04.png" data-mid="227004510" border="0" src="https://freight.cargo.site/w/1000/i/3e53883a56f1c2abff3e671fca9113329b2755864ba09529a077c7cb38629e5d/Pres-04.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/b50cff06e1596a053ab9996bf8b9e67e9efe8fa5d8a926bb967b475410bdcfd0/Pres-05.png" data-mid="227004509" border="0" src="https://freight.cargo.site/w/1000/i/b50cff06e1596a053ab9996bf8b9e67e9efe8fa5d8a926bb967b475410bdcfd0/Pres-05.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/d8cab54b7af7d578dd6e2b4fc9a8a894ae5dd0fc0df59a7262c00552d1a903ee/Pres-06.png" data-mid="227004508" border="0" src="https://freight.cargo.site/w/1000/i/d8cab54b7af7d578dd6e2b4fc9a8a894ae5dd0fc0df59a7262c00552d1a903ee/Pres-06.png" /> Watch the new flow and password hints below video { width: 100%; height: auto; } .rounded-video { border-radius: 12px; /* Adjust the value as needed */ overflow: hidden; } <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/211930a1102192ac6ca22e5ce3189093b1f6633213340a4fa285934faa58ab73/Flow.png" data-mid="228736840" border="0" src="https://freight.cargo.site/w/1000/i/211930a1102192ac6ca22e5ce3189093b1f6633213340a4fa285934faa58ab73/Flow.png" /> The solution : To better address user goals and pain points, the authentication flow was restructured for a more coherent experience. Improved age verification: The age-gating step was moved to the beginning of the registration flow to prevent unnecessary friction. Instead of requiring a full date of birth, a simpler age verification method was introduced, where users confirm their age by selecting a button indicating whether they meet the required age or not. Location handling: The location step was removed, as user location (mandatory for the gaming experience) is now automatically determined through IP geolocation. Social authentication: Users can now choose social authentication for both registration and login. Enhanced user guidance: A progress indicator now displays the number of steps remaining before completion. Password hints were fully redesigned to be interactive, offering better guidance with a new set of confirmation and error messages. Improved visual engagement: Visual elements and payoff messages were added to the right side of the interface to make the process more engaging and aligned with the company’s branding. video { width: 100%; height: auto; } .rounded-video { border-radius: 12px; /* Adjust the value as needed */ overflow: hidden; } Redesign strategy <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/2208cbb751d48be39782ad4a898fe79f26e32907a30dfba4502193abe6e04826/Strategy-auth-01.png" data-mid="227004507" border="0" src="https://freight.cargo.site/w/1000/i/2208cbb751d48be39782ad4a898fe79f26e32907a30dfba4502193abe6e04826/Strategy-auth-01.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/87c81dd43242c17d1d381af1fb9dcfcb1ef4cc669972276adea5c487b4afbf77/Strategy-auth-02.png" data-mid="227004506" border="0" src="https://freight.cargo.site/w/1000/i/87c81dd43242c17d1d381af1fb9dcfcb1ef4cc669972276adea5c487b4afbf77/Strategy-auth-02.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/0b474c19bad59b89a3f37a4bcfd03ec055c45439260c9089de9a3005d75e36f7/Strategy-auth-03.png" data-mid="227004505" border="0" src="https://freight.cargo.site/w/1000/i/0b474c19bad59b89a3f37a4bcfd03ec055c45439260c9089de9a3005d75e36f7/Strategy-auth-03.png" /> Research activity <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/5dbf8c6cfbbdb649f5dc27acdf886a636b253c51d256bcdc3e36243fbd311d80/Heatmap.png" data-mid="226268159" border="0" src="https://freight.cargo.site/w/1000/i/5dbf8c6cfbbdb649f5dc27acdf886a636b253c51d256bcdc3e36243fbd311d80/Heatmap.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/e77cbb70c9c2df1faa29a03e0b7d92f3c5f2c73b880a39ccc695effc22844fa4/Auth-3.png" data-mid="226264351" border="0" src="https://freight.cargo.site/w/1000/i/e77cbb70c9c2df1faa29a03e0b7d92f3c5f2c73b880a39ccc695effc22844fa4/Auth-3.png" /> Browse the gallery to view wireframe samples <img width="3840" height="3698" width_o="3840" height_o="3698" data-src="https://freight.cargo.site/t/original/i/831eae52867c98c51fa27102dfefd074973763b0f5465ea4b3d4937dcad053b7/Wireframes-auth-01.png" data-mid="227028031" border="0" src="https://freight.cargo.site/w/1000/i/831eae52867c98c51fa27102dfefd074973763b0f5465ea4b3d4937dcad053b7/Wireframes-auth-01.png" /> <img width="3840" height="3698" width_o="3840" height_o="3698" data-src="https://freight.cargo.site/t/original/i/52eadfa3115e5179c2b13ed960521bbe12561b72ef1ca26aa3843326801b5397/Wireframes-auth-02.png" data-mid="227028030" border="0" src="https://freight.cargo.site/w/1000/i/52eadfa3115e5179c2b13ed960521bbe12561b72ef1ca26aa3843326801b5397/Wireframes-auth-02.png" /> https://simonlouaza.com/Filters Fri, 07 Feb 2025 23:00:12 +0000 Simon Louaza https://simonlouaza.com/Filters Filtering Functionality The project focused on redesigning the filtering functionality by consolidating multiple components and steps into a single space, improving discoverability, usability, and reducing the learning curve. Research &amp; analysis / UX / UI2024 Encare is a HealthTech company based in Stockholm, specializing in the development of cloud-based solutions to enhance surgical care.EIAS, ERAS® Interactive Audit System, is a comprehensive software solution developed by Encare to support the implementation of ERAS protocols in hospitals. It offers functionalities such as data entry, analysis, and reporting. Enhanced Recovery After Surgery (ERAS) protocols aim to improve patient outcomes by reducing complications and shortening hospital stays. Previous filtering ecosystem <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/88495e510ad03a99a5258d1822a36fe91661b0e5953f1f2117404aea9180226c/Scheme-01.png" data-mid="228029362" border="0" src="https://freight.cargo.site/w/1000/i/88495e510ad03a99a5258d1822a36fe91661b0e5953f1f2117404aea9180226c/Scheme-01.png" /> The problem : The previous filtering ecosystem consisted of multiple components that were part of a shared flow but scattered across different areas of the interface. This made it extremely difficult for users to locate all elements, understand their connections, and effectively use the filtering functionality. Quick Filters: Misleadingly named, as they were simply ordinary filters placed in a modal. They were intended to highlight the most commonly used filters. Advanced Filters: A comprehensive list of filters categorized by the different phases of the surgical cycle, from admission to discharge and follow-up. Series: A feature that allows users to create control groups and compare different sets of filters. Users can create up to eight series. Filter Recap: A hidden popup, accessible via an item in the right bar menu, summarizing active filters. Bookmarks: A space for saving sets of active filters. Several components were tucked away in secondary spaces with unclear activation affordances. Additionally, the filter recap made it difficult for users to understand what filters were shaping the dashboard data. Instead, filter chips should have been displayed directly within the interface. The filtering mechanism also suffered from unintuitive logic. Quick filter selections would override selections for the same parameters inside each series, often without users realizing it. Moreover, filters applied an AND logic by default, frequently resulting in no valid data (e.g. selecting both “female” and “male” would yield no results, as no patient can be both). A more intuitive OR logic,&nbsp;which better aligns with users’ mental models, would have improved usability. Browse the gallery to explore the research findings <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/a031f44080cdb1c96e2a39870aef5a545d317578554b7370166df0c73d311fe3/Analysis-01.png" data-mid="228253177" border="0" src="https://freight.cargo.site/w/1000/i/a031f44080cdb1c96e2a39870aef5a545d317578554b7370166df0c73d311fe3/Analysis-01.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/add9b88b10bdc41d05bb8fa3bb4ad34d32562355fb64e802da6f5c36f2196922/Analysis-02.png" data-mid="228253176" border="0" src="https://freight.cargo.site/w/1000/i/add9b88b10bdc41d05bb8fa3bb4ad34d32562355fb64e802da6f5c36f2196922/Analysis-02.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/745091e48a2859eacb9cb29c2f88860a5f8bc54d34934ad7d9864772dd94e766/Analysis-03.png" data-mid="228253175" border="0" src="https://freight.cargo.site/w/1000/i/745091e48a2859eacb9cb29c2f88860a5f8bc54d34934ad7d9864772dd94e766/Analysis-03.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/2788ae16bf01b005753dc1f8181fdfd83904a87bc82b7ab84d94cf7786737d56/Analysis-04.png" data-mid="228253174" border="0" src="https://freight.cargo.site/w/1000/i/2788ae16bf01b005753dc1f8181fdfd83904a87bc82b7ab84d94cf7786737d56/Analysis-04.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/e0f0be88e18e95d3a2c63a38d1f3ddbb2f3c9dc3f959c018719070774941e276/Analysis-05.png" data-mid="228253172" border="0" src="https://freight.cargo.site/w/1000/i/e0f0be88e18e95d3a2c63a38d1f3ddbb2f3c9dc3f959c018719070774941e276/Analysis-05.png" /> The solution : In the new design, quick filters, advanced filters, and series creation were merged into a single modal box that functions similarly to a web browser. Users can create multiple series, similar to browser tabs, and assign a unique set of filters to each one. Browse the gallery to view the redesigned flow <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/ff74c2ec6fc32b5cdfa4712413b884ad296c583c8fe3e7c6669f7ba99bd03470/Scheme-02.png" data-mid="228244326" border="0" src="https://freight.cargo.site/w/1000/i/ff74c2ec6fc32b5cdfa4712413b884ad296c583c8fe3e7c6669f7ba99bd03470/Scheme-02.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/382e4e25a9388e029d300a17a6a20d35bb45f50a88f51d5cb23a1f91c14c88b3/Scheme-03.png" data-mid="228214025" border="0" src="https://freight.cargo.site/w/1000/i/382e4e25a9388e029d300a17a6a20d35bb45f50a88f51d5cb23a1f91c14c88b3/Scheme-03.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/2e2fee8a4b771657865af2cedf8e3a69ece44517e5b71860c8522d555165391a/Scheme-04.png" data-mid="228214024" border="0" src="https://freight.cargo.site/w/1000/i/2e2fee8a4b771657865af2cedf8e3a69ece44517e5b71860c8522d555165391a/Scheme-04.png" /> Navigation was completely redesigned to improve usability. Previously, users had to select checkboxes from multiple filter sections, resulting in an overwhelming list of matching filters. Now, a two-column menu layout provides a clearer overview with minimal scrolling. Filters are categorized according to the different stages of the surgical process. Several key usability improvements were introduced: Simplified filter selection: Instead of using dropdowns to define filter logic (include/exclude), users can now activate filters directly via clickable filter chips. Clear filter recap: A summary of active filters is always visible on the right side of the modal box. Streamlined saving process: Users can now save filter sets instantly, without first applying them or opening an additional modal to name them. Persistent filter visibility: Filter chips are now displayed directly on the interface, making it easier to understand which filters are shaping the data. Explore the new filtering functionality <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/2a14eaccf03ce9714f151eaafd4181ffd684a1d78d2277ef33b7e7ee9e1adb95/Fdesign-01.png" data-mid="228551833" border="0" src="https://freight.cargo.site/w/1000/i/2a14eaccf03ce9714f151eaafd4181ffd684a1d78d2277ef33b7e7ee9e1adb95/Fdesign-01.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/a7e0c52fb21e360b6a80fabd099cb8504f5e2ba6979a9851ef9ad6c76e52b385/Fdesign-02.png" data-mid="228551830" border="0" src="https://freight.cargo.site/w/1000/i/a7e0c52fb21e360b6a80fabd099cb8504f5e2ba6979a9851ef9ad6c76e52b385/Fdesign-02.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/f67d6f3811ebfdf0af813304fb1ae0c336cd564619614d15ba63f53d0be67ee8/Fdesign-03.png" data-mid="228551826" border="0" src="https://freight.cargo.site/w/1000/i/f67d6f3811ebfdf0af813304fb1ae0c336cd564619614d15ba63f53d0be67ee8/Fdesign-03.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/6dbf7c670b9b56e342d89ce56c9cd81cd8db605b5759f707a8fdc8edb04199e3/Fdesign-04.png" data-mid="228551822" border="0" src="https://freight.cargo.site/w/1000/i/6dbf7c670b9b56e342d89ce56c9cd81cd8db605b5759f707a8fdc8edb04199e3/Fdesign-04.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/7f4afd3a4a9a3ee83f71040077e5e59054f875665dce6286285bd97b2635a27e/Fdesign-05.png" data-mid="228498954" border="0" src="https://freight.cargo.site/w/1000/i/7f4afd3a4a9a3ee83f71040077e5e59054f875665dce6286285bd97b2635a27e/Fdesign-05.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/727b154b311fb494e9099d461c81df65269d6f64dcd8c58d691543b8933a4f1b/Fdesign-06.png" data-mid="228498953" border="0" src="https://freight.cargo.site/w/1000/i/727b154b311fb494e9099d461c81df65269d6f64dcd8c58d691543b8933a4f1b/Fdesign-06.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/3f093649fc4f59e7f723f9c4a0eeefe53b861ae5f9a30e33354a74167b33c0bd/Fdesign-07.png" data-mid="228498952" border="0" src="https://freight.cargo.site/w/1000/i/3f093649fc4f59e7f723f9c4a0eeefe53b861ae5f9a30e33354a74167b33c0bd/Fdesign-07.png" /> Users frequently requested the ability to share filters with colleagues instead of starting the process from scratch each time. To address this, a new sharing functionality was introduced. The former Bookmarks space was renamed to the more intuitive Saved Filters modal, where users can easily share filters by clicking the Share button. They can enter colleagues’ names to send them the selected filters. Filter sharing flow <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/7e1325ec09d2cf92934c508862a56d9be5a4c1ae1e4b3494b3fc56b25451b66b/Fdesign-17.png" data-mid="228551607" border="0" src="https://freight.cargo.site/w/1000/i/7e1325ec09d2cf92934c508862a56d9be5a4c1ae1e4b3494b3fc56b25451b66b/Fdesign-17.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/76c1d7c3a93a65296fbcf411af26d4d32221704ee19aa8a0eb62cb4fd6f356d7/Fdesign-19.png" data-mid="228551605" border="0" src="https://freight.cargo.site/w/1000/i/76c1d7c3a93a65296fbcf411af26d4d32221704ee19aa8a0eb62cb4fd6f356d7/Fdesign-19.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/3bc85e20b75a79d2d319ee9f7de1119b24980ead413620076514e0d477ac2cc4/Fdesign-18.png" data-mid="228551606" border="0" src="https://freight.cargo.site/w/1000/i/3bc85e20b75a79d2d319ee9f7de1119b24980ead413620076514e0d477ac2cc4/Fdesign-18.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/ad99159387b901c55f71ce73b9f351dca5a2e1a84991c0bcf4fcdda30cb03a0f/Fdesign-20.png" data-mid="228551604" border="0" src="https://freight.cargo.site/w/1000/i/ad99159387b901c55f71ce73b9f351dca5a2e1a84991c0bcf4fcdda30cb03a0f/Fdesign-20.png" /> A new option was developed, allowing users to apply AND logic for specific filtering edge cases. This functionality is accessible via the Advanced Logic button in the filter modal. Within the modal, users can also see a recap of active filters along with a drag-and-drop area. Users can drag filters into this area to enforce AND logic and receive guidance on potential incorrect combinations when necessary. Advanced AND logic flow <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/63ed4348d861429cf0d1c1d9aca818197810d5587eeb54e78c40fbe177f4f49a/Fdesign-12.png" data-mid="228553271" border="0" src="https://freight.cargo.site/w/1000/i/63ed4348d861429cf0d1c1d9aca818197810d5587eeb54e78c40fbe177f4f49a/Fdesign-12.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/174e9e278f51219c3bd46afbf50dd3445270530d74ccda5c42ea7a27b74b6a8c/Fdesign-13.png" data-mid="228553267" border="0" src="https://freight.cargo.site/w/1000/i/174e9e278f51219c3bd46afbf50dd3445270530d74ccda5c42ea7a27b74b6a8c/Fdesign-13.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/da4a7a95584f46c1b18a3684ef5ffc41b5f80c73d76acef28f91557bddfb3b0c/Fdesign-14.png" data-mid="228553263" border="0" src="https://freight.cargo.site/w/1000/i/da4a7a95584f46c1b18a3684ef5ffc41b5f80c73d76acef28f91557bddfb3b0c/Fdesign-14.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/7c5b1d3984b25e6a70ecf2a0e4d693b66b19463abcb003e575bbb4e25dffe6f3/Fdesign-15.png" data-mid="228553260" border="0" src="https://freight.cargo.site/w/1000/i/7c5b1d3984b25e6a70ecf2a0e4d693b66b19463abcb003e575bbb4e25dffe6f3/Fdesign-15.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/a81c685a478f5a0177a61485af5649b710090eea5a32f154bbe0e0efc946ed98/Fdesign-16.png" data-mid="228553256" border="0" src="https://freight.cargo.site/w/1000/i/a81c685a478f5a0177a61485af5649b710090eea5a32f154bbe0e0efc946ed98/Fdesign-16.png" /> Finally, the newly developed EIAS Design System was applied to all new filtering components to enhance the experience, improve scanability, and allow users to navigate different parts more easily when searching for filters. Development sketches <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/27494c6479ca1caa30b9f05275ac570ac1da32b46b4a02e493c9595d33f56008/Fsketch-01.png" data-mid="227497442" border="0" src="https://freight.cargo.site/w/1000/i/27494c6479ca1caa30b9f05275ac570ac1da32b46b4a02e493c9595d33f56008/Fsketch-01.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/7d0364eed51403e550a4a73bc3272fcb3b5eb4bca88c622a88efa847cb4089ab/Fsketch-02.png" data-mid="227497443" border="0" src="https://freight.cargo.site/w/1000/i/7d0364eed51403e550a4a73bc3272fcb3b5eb4bca88c622a88efa847cb4089ab/Fsketch-02.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/f9c7e601ae8ee802f9b1e6527d197eec3d7c2a1e09875750ec9780614b05ecc9/Fsketch-03.png" data-mid="227497441" border="0" src="https://freight.cargo.site/w/1000/i/f9c7e601ae8ee802f9b1e6527d197eec3d7c2a1e09875750ec9780614b05ecc9/Fsketch-03.png" /> Samples of the previous filtering ecosystem <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/118ac2a44830c065230118e15f9ec81276b996dc324b8104d4f7466aad356002/Filters-01.png" data-mid="228497640" border="0" src="https://freight.cargo.site/w/1000/i/118ac2a44830c065230118e15f9ec81276b996dc324b8104d4f7466aad356002/Filters-01.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/e42e5c32c972215633c601ebb07dc206c86dd751006b0def1199f1b079af6217/Filters-02.png" data-mid="228497639" border="0" src="https://freight.cargo.site/w/1000/i/e42e5c32c972215633c601ebb07dc206c86dd751006b0def1199f1b079af6217/Filters-02.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/9b45357f27e68f1e963a471aba117dfd2629d836c8e3c7f277e533beada60a05/Filters-03.png" data-mid="228497637" border="0" src="https://freight.cargo.site/w/1000/i/9b45357f27e68f1e963a471aba117dfd2629d836c8e3c7f277e533beada60a05/Filters-03.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/1146f1fb4fd5b5a67595af05f27bc08b95c9cdd854e0b4d16233ed2c1a09bce6/Filters-04.png" data-mid="228497636" border="0" src="https://freight.cargo.site/w/1000/i/1146f1fb4fd5b5a67595af05f27bc08b95c9cdd854e0b4d16233ed2c1a09bce6/Filters-04.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/312468cef1a99750da38fee1ce2b2591213bf0d82d3d30eb3fc69c6d011a8fbf/Filters-05.png" data-mid="228497635" border="0" src="https://freight.cargo.site/w/1000/i/312468cef1a99750da38fee1ce2b2591213bf0d82d3d30eb3fc69c6d011a8fbf/Filters-05.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/05e8b47f294e89ec3d3cdea4c956417d333a21f5d660eab27f33237d761cb6a5/Filters-06.png" data-mid="228497634" border="0" src="https://freight.cargo.site/w/1000/i/05e8b47f294e89ec3d3cdea4c956417d333a21f5d660eab27f33237d761cb6a5/Filters-06.png" /> https://simonlouaza.com/Dashboard Fri, 07 Feb 2025 21:44:31 +0000 Simon Louaza https://simonlouaza.com/Dashboard Dashboard The project focused on redesigning the dashboard layout and expanding its capabilities. Investigations into the three main user profiles were conducted to establish more precise user goals and offer a more engaging experience with tailored dashboard content and graphs based on these profiles.Research &amp; analysis / UX / UI / Prototype2023 Simployer is a Norwegian company specialising in human resource (HR) management solutions and services. It provides a comprehensive suite of tools that support organisations throughout the entire employment cycle, from onboarding to off-boarding. &amp;frankly is a Stockholm-based company owned by Simployer that developed an employee engagement tool. The platform enables organisations to capture real-time feedback through pulse surveys, helping managers and teams understand and improve engagement levels. Users and company hierarchy <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/c6a728e3d25dd837cb77b0deded4a47ee1e977d448567f6026b1178ce877a3af/Scheme--frankly.png" data-mid="227972744" border="0" src="https://freight.cargo.site/w/1000/i/c6a728e3d25dd837cb77b0deded4a47ee1e977d448567f6026b1178ce877a3af/Scheme--frankly.png" /> Browse the gallery to explore the new dashboard layouts, highlights, customization, and filtering functionalities <img width="3840" height="4544" width_o="3840" height_o="4544" data-src="https://freight.cargo.site/t/original/i/994aa0c99eea05be326688922eb7dfb3766ff5ca487ba02ecc9f546940d1663b/Frankly1.png" data-mid="227014552" border="0" src="https://freight.cargo.site/w/1000/i/994aa0c99eea05be326688922eb7dfb3766ff5ca487ba02ecc9f546940d1663b/Frankly1.png" /> <img width="3840" height="4544" width_o="3840" height_o="4544" data-src="https://freight.cargo.site/t/original/i/27558a9c3bd5aa595aca9655ffa4921c8fc420c7fd09b8096bd531dce5355ee9/Frankly2.png" data-mid="227014532" border="0" src="https://freight.cargo.site/w/1000/i/27558a9c3bd5aa595aca9655ffa4921c8fc420c7fd09b8096bd531dce5355ee9/Frankly2.png" /> <img width="3840" height="4544" width_o="3840" height_o="4544" data-src="https://freight.cargo.site/t/original/i/a3369fa779574185f45ee9965b643af30f8a77d014ffb93a9d6dd1b4b7fa7451/Frankly3.png" data-mid="227014530" border="0" src="https://freight.cargo.site/w/1000/i/a3369fa779574185f45ee9965b643af30f8a77d014ffb93a9d6dd1b4b7fa7451/Frankly3.png" /> <img width="3840" height="4544" width_o="3840" height_o="4544" data-src="https://freight.cargo.site/t/original/i/db06d50963950b8de7658f188473114b7b9fd3cb3c78235ffa35136471262256/Frankly4.png" data-mid="227014528" border="0" src="https://freight.cargo.site/w/1000/i/db06d50963950b8de7658f188473114b7b9fd3cb3c78235ffa35136471262256/Frankly4.png" /> <img width="3840" height="4544" width_o="3840" height_o="4544" data-src="https://freight.cargo.site/t/original/i/afdd98d35a12d20d54d0143df03446376259b12dac27357a689f60c7939f3034/Frankly5.png" data-mid="227014529" border="0" src="https://freight.cargo.site/w/1000/i/afdd98d35a12d20d54d0143df03446376259b12dac27357a689f60c7939f3034/Frankly5.png" /> The problem : Based on pre-existing research, the previous interface offered limited capabilities. A workshop was conducted to identify and prioritise user goals, with the aim of reorganising existing elements and developing additional critical features. The workshop results highlighted new potential alternatives, particularly the need for admins and managers to have a better overview of different teams, more flexibility in setting KPIs, and the ability to customise the layout of various widgets to align with internal goals. One of the primary goals was the ability to quickly assess both positive and negative trends as a general summary, as well as the ability to drill down into specific pages. Another request was the inclusion of wider benchmark comparisons, such as countries and company sectors, which were missing in the current interface. Additionally, there was a need for insights to help users better understand the data, along with action suggestions for specific cases, especially for new users. Workshop activity and layout configurations <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/5a46aa32bdc0ddf79df79c23f794ff0f4b7518efa8d690036a6333602a097f64/Frankly28.png" data-mid="226341604" border="0" src="https://freight.cargo.site/w/1000/i/5a46aa32bdc0ddf79df79c23f794ff0f4b7518efa8d690036a6333602a097f64/Frankly28.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/3aa9f0f364aefcdbe765254d9c5301fc3d33b13378ccaa78d6391ac67fa7d56a/Frankly29.png" data-mid="226341603" border="0" src="https://freight.cargo.site/w/1000/i/3aa9f0f364aefcdbe765254d9c5301fc3d33b13378ccaa78d6391ac67fa7d56a/Frankly29.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/c4c3fa8a4ebd2512b405cb01bbda028c2140f20994a561ff48bc2dc121d0ac86/Frankly30.png" data-mid="227890574" border="0" src="https://freight.cargo.site/w/1000/i/c4c3fa8a4ebd2512b405cb01bbda028c2140f20994a561ff48bc2dc121d0ac86/Frankly30.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/d2643cc379a3ef29c862c8e500e3398a1dd4d8118a8a7f8224b4eb51e3d4d4e4/Frankly31.png" data-mid="228244335" border="0" src="https://freight.cargo.site/w/1000/i/d2643cc379a3ef29c862c8e500e3398a1dd4d8118a8a7f8224b4eb51e3d4d4e4/Frankly31.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/4f5974bee46d53c2ea1f329ede4760373c1a27adc86f01a421c799a2392862a2/Frankly11.png" data-mid="227013977" border="0" src="https://freight.cargo.site/w/1000/i/4f5974bee46d53c2ea1f329ede4760373c1a27adc86f01a421c799a2392862a2/Frankly11.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/73086800e277e8272935c8ff14d9a27ce8c195d250f590b2187d7d4164c46ff5/Frankly12.png" data-mid="227013976" border="0" src="https://freight.cargo.site/w/1000/i/73086800e277e8272935c8ff14d9a27ce8c195d250f590b2187d7d4164c46ff5/Frankly12.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/bd6e31b086cd3d832a188171fb97866917e24513bb242bc29471ac538c6b50a4/Frankly13.png" data-mid="227013980" border="0" src="https://freight.cargo.site/w/1000/i/bd6e31b086cd3d832a188171fb97866917e24513bb242bc29471ac538c6b50a4/Frankly13.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/13370d5403c5eaa37c970062e16f801f80fcc4d53b7968db2c7c7aa15d005f3e/Frankly14.png" data-mid="227013979" border="0" src="https://freight.cargo.site/w/1000/i/13370d5403c5eaa37c970062e16f801f80fcc4d53b7968db2c7c7aa15d005f3e/Frankly14.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/42168c393d14eb3a4a51fdd8752458eb3c1881bc3e518fa6a4eab999a237d4ae/Frankly15.png" data-mid="227013978" border="0" src="https://freight.cargo.site/w/1000/i/42168c393d14eb3a4a51fdd8752458eb3c1881bc3e518fa6a4eab999a237d4ae/Frankly15.png" /> Examples of the redesigned widgets <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/78f89b23d444f95588fc61813ca69d51cae4fadcf325035bb2815b03ce29d43b/Frankly6.png" data-mid="227016359" border="0" src="https://freight.cargo.site/w/1000/i/78f89b23d444f95588fc61813ca69d51cae4fadcf325035bb2815b03ce29d43b/Frankly6.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/64b5c9308854cfba41548eb3c712f845da3ac42297ddcbbf5684b72a684f955f/Frankly7.png" data-mid="227016358" border="0" src="https://freight.cargo.site/w/1000/i/64b5c9308854cfba41548eb3c712f845da3ac42297ddcbbf5684b72a684f955f/Frankly7.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/2ec79909b93d2a7b7cb0cdf6ccab493d3191402fcc6c566badab8d2c66dc0899/Frankly8.png" data-mid="227016362" border="0" src="https://freight.cargo.site/w/1000/i/2ec79909b93d2a7b7cb0cdf6ccab493d3191402fcc6c566badab8d2c66dc0899/Frankly8.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/0fc834ff7407eb935c6e9abb144f885bb7215013ade3ef1608066c0ffdb0f292/Frankly9.png" data-mid="227016361" border="0" src="https://freight.cargo.site/w/1000/i/0fc834ff7407eb935c6e9abb144f885bb7215013ade3ef1608066c0ffdb0f292/Frankly9.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/e6c6ad150dfce34336d46670d017bfd48e5644e2ed373fa328b001fd6717fd7b/Frankly10.png" data-mid="227016360" border="0" src="https://freight.cargo.site/w/1000/i/e6c6ad150dfce34336d46670d017bfd48e5644e2ed373fa328b001fd6717fd7b/Frankly10.png" /> The solution : In the new design, many improvements were introduced, including: Additional trend visualisations, including trend arrows, were added to many elements, such as the engagement score datapoint. Aggregated data results were presented in new summary visualisations, highlighting both the best and worst performances. Links to related pages for further analysis of the results were provided in every widget. The benchmark functionality was expanded to include additional comparison data for company sectors and countries, along with corresponding visualisations throughout the platform. The benchmark is now also applied to questions. Users can use the toolbar in the top-right corner to open the sidebar and select specific filters for the benchmark comparison. Additional emotional evaluation tags,&nbsp;with colour coding, were introduced for questions, helping to understand trends (negative, positive, stable) and how they compare across different teams. This makes it easier to identify what’s going well, what needs attention, and where to focus further investigations and actions. The layout of the KPIs widget for admins and managers was reorganised to accommodate more datapoints, split into three columns to emphasise the most critical KPIs. It now includes a new layout with negative and positive trend indicators, making it easier to assess the situation. A new customisation feature in the top-right toolbar allows users to reorder widgets on the dashboard, prioritising the most important ones by dragging them up and down within the sidebar. For the simplified KPIs layout, users can select up to three KPIs to display on the dashboard widget. A left-side insights panel was added to highlight areas for improvement and suggest actions or additional guidance, including tailored interactive material for users. Additionally, the design was modernised by removing unnecessary visual elements, resulting in a cleaner, more streamlined look. Previous interface <img width="3840" height="2912" width_o="3840" height_o="2912" data-src="https://freight.cargo.site/t/original/i/f290677d8c09c664dd631b05c9615fd9b1d08368b2eeb9845d3be6b23624a714/Old-01.png" data-mid="228644408" border="0" src="https://freight.cargo.site/w/1000/i/f290677d8c09c664dd631b05c9615fd9b1d08368b2eeb9845d3be6b23624a714/Old-01.png" /> Development sketches <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/9c6b65b47d05530aae10a33634ede826ccc908e1dc2bee83f4be972d31e1fc9d/Frankly16.png" data-mid="227013994" border="0" src="https://freight.cargo.site/w/1000/i/9c6b65b47d05530aae10a33634ede826ccc908e1dc2bee83f4be972d31e1fc9d/Frankly16.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/23fe5bcc2e61db1d8231cdcbd6577974ce1035a4107cc8cc14c4102236b37e1c/Frankly17.png" data-mid="227013993" border="0" src="https://freight.cargo.site/w/1000/i/23fe5bcc2e61db1d8231cdcbd6577974ce1035a4107cc8cc14c4102236b37e1c/Frankly17.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/71eed366ed2bd510fef248f93bbbff60744362269285af0468a8b132796d0e9f/Frankly18.png" data-mid="227014002" border="0" src="https://freight.cargo.site/w/1000/i/71eed366ed2bd510fef248f93bbbff60744362269285af0468a8b132796d0e9f/Frankly18.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/d9aaba904d408efc8c5999271ba48b367fdcfc6b34ec237e941adf2e190bf2d1/Frankly19.png" data-mid="227014003" border="0" src="https://freight.cargo.site/w/1000/i/d9aaba904d408efc8c5999271ba48b367fdcfc6b34ec237e941adf2e190bf2d1/Frankly19.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/710277980b98bd0dd0178abe97c0c8143ed216677ade0ab023cd1f2c564523ac/Frankly20.png" data-mid="227014001" border="0" src="https://freight.cargo.site/w/1000/i/710277980b98bd0dd0178abe97c0c8143ed216677ade0ab023cd1f2c564523ac/Frankly20.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/4a9186fdef9fe2f5e310625edcc083f86ffe4333d7ea9d0671af17cdf6a38a2e/Frankly21.png" data-mid="227014000" border="0" src="https://freight.cargo.site/w/1000/i/4a9186fdef9fe2f5e310625edcc083f86ffe4333d7ea9d0671af17cdf6a38a2e/Frankly21.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/7a10d6a36c8a76534fbc242b84cbdbf15b7d84596b3b620e86f4731c878a7d49/Frankly22.png" data-mid="227013998" border="0" src="https://freight.cargo.site/w/1000/i/7a10d6a36c8a76534fbc242b84cbdbf15b7d84596b3b620e86f4731c878a7d49/Frankly22.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/6a95eecceec30ab14f0402128764d3de5e6c9cd97e1bce777aac63721699d90f/Frankly23.png" data-mid="227013999" border="0" src="https://freight.cargo.site/w/1000/i/6a95eecceec30ab14f0402128764d3de5e6c9cd97e1bce777aac63721699d90f/Frankly23.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/3d8919d1046abce94ab17a7a4b63fa436dd8a8c723e69e70d1b8cd983021af13/Frankly24.png" data-mid="227013997" border="0" src="https://freight.cargo.site/w/1000/i/3d8919d1046abce94ab17a7a4b63fa436dd8a8c723e69e70d1b8cd983021af13/Frankly24.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/845f69e32afa87a74e4bca5b4f32ca65af577e6d7097d3a966f080deede53dbe/Frankly25.png" data-mid="227013996" border="0" src="https://freight.cargo.site/w/1000/i/845f69e32afa87a74e4bca5b4f32ca65af577e6d7097d3a966f080deede53dbe/Frankly25.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/78e03e285be852c2272fc687b0db972464615961f2f1214addac7252f36c3882/Frankly26.png" data-mid="227014004" border="0" src="https://freight.cargo.site/w/1000/i/78e03e285be852c2272fc687b0db972464615961f2f1214addac7252f36c3882/Frankly26.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/7e8be1ac99e0b79667e511413a6c4367d67066d525da40280349ae92f480c77f/Frankly27.png" data-mid="227013995" border="0" src="https://freight.cargo.site/w/1000/i/7e8be1ac99e0b79667e511413a6c4367d67066d525da40280349ae92f480c77f/Frankly27.png" /> https://simonlouaza.com/Wallet Thu, 29 Sep 2022 11:39:26 +0000 Simon Louaza https://simonlouaza.com/Wallet Wallet The project scope included the initial design and subsequent redesign of the wallet page for G-loot. The wallet was expanded to support additional currencies and allows users to easily navigate to related pages for using and purchasing new currencies.Research &amp; analysis / UX2021 / 2022 G-Loot, later rebranded as Stryda, was a Stockholm-based esports company specializing in stats tracking, player identity, and competitions. It permanently ceased operations in 2023. <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/6a02c3c27d725a69016e0554c2bd389ea4c2374a89104eba62212984c2cdb9a1/Currencies.png" data-mid="226974140" border="0" src="https://freight.cargo.site/w/1000/i/6a02c3c27d725a69016e0554c2bd389ea4c2374a89104eba62212984c2cdb9a1/Currencies.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/3af23f03fcc70d7afc4c38a0e908b9564f069c0060f9c24293533beee0fc2d4c/Layout.png" data-mid="226974139" border="0" src="https://freight.cargo.site/w/1000/i/3af23f03fcc70d7afc4c38a0e908b9564f069c0060f9c24293533beee0fc2d4c/Layout.png" /> The problem : Four new currencies were introduced, each linked to new activities on the platform. It was crucial to establish a new page structure that could accommodate all of them while clearly explaining the core loop associated with the currencies. Tokens: Used to enter Brawls (a type of competition). Coins: Used to make purchases in the shop and earned by winning Brawls and other types of competitions. Tickets: Used to participate in monthly tournaments and earned by winning weekly Brawls. Prize Money: Real money that users can withdraw, obtained from tournament winnings. Research revealed that the previous wallet card layout was ineffective in conveying information about the different currencies and how to use them. Key details were hidden inside tooltips, and users often overlooked the info icon in the top-right corner of each currency card. Instead, they mistakenly clicked on the currency icon, expecting more information. Additionally, the height of the cards required users to scroll to view all currencies, causing those at the bottom to be frequently overlooked, especially on smaller screens, which were the most commonly used devices. Browse the gallery to view the final design <img width="3840" height="3216" width_o="3840" height_o="3216" data-src="https://freight.cargo.site/t/original/i/70f86c3f04986565e590e3fe9dece7569fda3cd2fc989e7999fb66bc0dbf60a5/Wallet-01.png" data-mid="227028038" border="0" src="https://freight.cargo.site/w/1000/i/70f86c3f04986565e590e3fe9dece7569fda3cd2fc989e7999fb66bc0dbf60a5/Wallet-01.png" /> <img width="3840" height="3216" width_o="3840" height_o="3216" data-src="https://freight.cargo.site/t/original/i/719d2fa77262e34990cef64625b9ff0a97713b633c941149d49f86d486a1cfb7/Wallet-02.png" data-mid="227028037" border="0" src="https://freight.cargo.site/w/1000/i/719d2fa77262e34990cef64625b9ff0a97713b633c941149d49f86d486a1cfb7/Wallet-02.png" /> <img width="3840" height="3216" width_o="3840" height_o="3216" data-src="https://freight.cargo.site/t/original/i/1f018cce8c8d3bc9d488880353f21b217fbdfb1aafab979035154f344d78b54a/Wallet-03.png" data-mid="227028036" border="0" src="https://freight.cargo.site/w/1000/i/1f018cce8c8d3bc9d488880353f21b217fbdfb1aafab979035154f344d78b54a/Wallet-03.png" /> The solution: The currencies are now stacked in a horizontal layout, reducing the height of each currency card. This structure ensures that the cards remain visible across different screen sizes. The redesigned page welcomes new users with an introductory message, which can be dismissed afterward. <img width="3840" height="3000" width_o="3840" height_o="3000" data-src="https://freight.cargo.site/t/original/i/ea4f94b4846e22b521a556f450ad6b366b9b9b501570f066e885a2f88a94af3a/Flow-01.png" data-mid="226974141" border="0" src="https://freight.cargo.site/w/1000/i/ea4f94b4846e22b521a556f450ad6b366b9b9b501570f066e885a2f88a94af3a/Flow-01.png" /> <img width="3840" height="3000" width_o="3840" height_o="3000" data-src="https://freight.cargo.site/t/original/i/c7d249331483f1850c10c4c465e865188e945e52a5fa5760ead966999a5fce73/Flow-02.png" data-mid="226974142" border="0" src="https://freight.cargo.site/w/1000/i/c7d249331483f1850c10c4c465e865188e945e52a5fa5760ead966999a5fce73/Flow-02.png" /> Additional information is embedded within specific dropdowns. Currency details are structured using a 'use' and 'get' approach, clearly explaining what each currency is and how users can earn and spend them. Redesign strategy <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/0318a69c472256b8b89502053a9f74c3053c3f20754ba66757199cfa19557ba6/Strategy-01.png" data-mid="226979874" border="0" src="https://freight.cargo.site/w/1000/i/0318a69c472256b8b89502053a9f74c3053c3f20754ba66757199cfa19557ba6/Strategy-01.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/42f74e3c841aaa73e0a6f3f5b5568d6b117096a2d60569fd6bd159087cdf513e/Strategy-02.png" data-mid="226979873" border="0" src="https://freight.cargo.site/w/1000/i/42f74e3c841aaa73e0a6f3f5b5568d6b117096a2d60569fd6bd159087cdf513e/Strategy-02.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/a03e37728f5a34702d4cf8f4e5a787668206e67e02b00a6186819ba9971e61c6/Strategy-03.png" data-mid="226979872" border="0" src="https://freight.cargo.site/w/1000/i/a03e37728f5a34702d4cf8f4e5a787668206e67e02b00a6186819ba9971e61c6/Strategy-03.png" /> The redesign reduced misclicks and helped users focus on key elements that provided valuable information about the currencies. Usability tests confirmed that the improvements made it easier for users to understand the platform's complex core loop and newly released features. The wallet became more than just a storage space, it evolved into a hub for user guidance. Previous designs <img width="3840" height="3216" width_o="3840" height_o="3216" data-src="https://freight.cargo.site/t/original/i/ad18b7163fb6bad272c8bdb2606c77a0a3826b312f5ff6bd1dbab3f21fdf4fa6/Old-wallet-01.png" data-mid="226974154" border="0" src="https://freight.cargo.site/w/1000/i/ad18b7163fb6bad272c8bdb2606c77a0a3826b312f5ff6bd1dbab3f21fdf4fa6/Old-wallet-01.png" /> <img width="3840" height="3216" width_o="3840" height_o="3216" data-src="https://freight.cargo.site/t/original/i/61f83fc4087447570af2061504fa6229f3d46e430241aed912289aca28ca0db0/Old-wallet-02.png" data-mid="227855991" border="0" src="https://freight.cargo.site/w/1000/i/61f83fc4087447570af2061504fa6229f3d46e430241aed912289aca28ca0db0/Old-wallet-02.png" /> Development sketches <img width="3840" height="2566" width_o="3840" height_o="2566" data-src="https://freight.cargo.site/t/original/i/66e8fca5962891c05544895e64199383277256f91e450a4de8affcff9a1ed025/Wallet-sketch-01.png" data-mid="226974149" border="0" src="https://freight.cargo.site/w/1000/i/66e8fca5962891c05544895e64199383277256f91e450a4de8affcff9a1ed025/Wallet-sketch-01.png" /> <img width="3840" height="2566" width_o="3840" height_o="2566" data-src="https://freight.cargo.site/t/original/i/41f7389959fb03927c243384e31309f229048ae49ef0d873d21887779a7f582e/Wallet-sketch-02.png" data-mid="226974148" border="0" src="https://freight.cargo.site/w/1000/i/41f7389959fb03927c243384e31309f229048ae49ef0d873d21887779a7f582e/Wallet-sketch-02.png" /> <img width="3840" height="2566" width_o="3840" height_o="2566" data-src="https://freight.cargo.site/t/original/i/dbebd720d186705779224eea738cc7dbb8f093f4be9932e93b52911ce03358f5/Wallet-sketch-03.png" data-mid="226974151" border="0" src="https://freight.cargo.site/w/1000/i/dbebd720d186705779224eea738cc7dbb8f093f4be9932e93b52911ce03358f5/Wallet-sketch-03.png" /> <img width="3840" height="2566" width_o="3840" height_o="2566" data-src="https://freight.cargo.site/t/original/i/6b197bd9802e2b116e9b7239e8aade8a868272c5a181f4783ac4bf4fdb835d1e/Wallet-sketch-04.png" data-mid="226974150" border="0" src="https://freight.cargo.site/w/1000/i/6b197bd9802e2b116e9b7239e8aade8a868272c5a181f4783ac4bf4fdb835d1e/Wallet-sketch-04.png" /> <img width="3840" height="2566" width_o="3840" height_o="2566" data-src="https://freight.cargo.site/t/original/i/d4bd5be086a45fcd855e53e1986e766d75295d6566d2005238f266860f0dfd6f/Wallet-sketch-05.png" data-mid="227504100" border="0" src="https://freight.cargo.site/w/1000/i/d4bd5be086a45fcd855e53e1986e766d75295d6566d2005238f266860f0dfd6f/Wallet-sketch-05.png" /> Heatmap comparison <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/960667202a6378f5bf3116fa5eeca6480d4d9250d09b83ab4a1ab530223f4223/Hotjar-01.png" data-mid="227856015" border="0" src="https://freight.cargo.site/w/1000/i/960667202a6378f5bf3116fa5eeca6480d4d9250d09b83ab4a1ab530223f4223/Hotjar-01.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/33350cf675b24b2032ef21876a7c0f3a0608334771a665ff0e1aa664c873a2b4/Hotjar-02.png" data-mid="227856014" border="0" src="https://freight.cargo.site/w/1000/i/33350cf675b24b2032ef21876a7c0f3a0608334771a665ff0e1aa664c873a2b4/Hotjar-02.png" /> Browse the gallery to view wireframe samples <img width="3840" height="3698" width_o="3840" height_o="3698" data-src="https://freight.cargo.site/t/original/i/95e73e49b2d709fc049b132b4d0e92ddcfea614bf7446bbeb537da03eacff35a/Wireframes-01.png" data-mid="227421743" border="0" src="https://freight.cargo.site/w/1000/i/95e73e49b2d709fc049b132b4d0e92ddcfea614bf7446bbeb537da03eacff35a/Wireframes-01.png" /> <img width="3840" height="3698" width_o="3840" height_o="3698" data-src="https://freight.cargo.site/t/original/i/077d2cc7886cde8da395ba47a479bc09282639b13752be05e91e89fd235f984a/Wireframes-02.png" data-mid="226974144" border="0" src="https://freight.cargo.site/w/1000/i/077d2cc7886cde8da395ba47a479bc09282639b13752be05e91e89fd235f984a/Wireframes-02.png" /> https://simonlouaza.com/Performance Fri, 07 Feb 2025 21:45:48 +0000 Simon Louaza https://simonlouaza.com/Performance Performance Review The project involved designing a new performance review tool, later called People Development, and completing an initial mock-up prototype. Features were fully defined, and in some cases, expanded. Additionally, a new design system proposal was applied to the interface. The goal was to develop a simpler, more effective management tool that facilitates dialogue between managers and employees while merging various performance review activities into a single, easy-to-use platform for tracking team member performance.Research &amp; analysis / UX / UI2023 Simployer is a Norwegian company specializing in human resource (HR) management solutions and services. It provides a comprehensive suite of tools that support organizations throughout the entire employment cycle, from onboarding to off-boarding. New design <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/6b5772692fdab4d9fd5f740abad2a7e6280cea046f56f005b04339e474673ed3/PR-01.png" data-mid="228643835" border="0" src="https://freight.cargo.site/w/1000/i/6b5772692fdab4d9fd5f740abad2a7e6280cea046f56f005b04339e474673ed3/PR-01.png" /> The problem : At the start of the project, the previously developed mock-up was incomplete, providing only a structural draft and a superficial overview of the different functionalities. Several features and elements were undefined. Additionally, the wireframes were at a medium-fidelity stage and had not yet incorporated a final design system. Browse the gallery to view samples of the mock-up <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/d4f36a8e88050ac1435652e775b5d6655ea4d0926be5bd018adb537444f206e5/PR-22.png" data-mid="228643833" border="0" src="https://freight.cargo.site/w/1000/i/d4f36a8e88050ac1435652e775b5d6655ea4d0926be5bd018adb537444f206e5/PR-22.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/624bad285f4f45cf5835cd442914e7d322eb9c18c74eef62fe6b1a8920d92931/PR-23.png" data-mid="228643832" border="0" src="https://freight.cargo.site/w/1000/i/624bad285f4f45cf5835cd442914e7d322eb9c18c74eef62fe6b1a8920d92931/PR-23.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/657d789fef4236ebc7db6caee80ff46f799c6404c1c84cf3107de207c667266f/PR-24.png" data-mid="228643831" border="0" src="https://freight.cargo.site/w/1000/i/657d789fef4236ebc7db6caee80ff46f799c6404c1c84cf3107de207c667266f/PR-24.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/468735f5e3177c7e9ebf3621969bada2a681f24ef5daa1552d0ca62b8f070138/PR-25.png" data-mid="228643830" border="0" src="https://freight.cargo.site/w/1000/i/468735f5e3177c7e9ebf3621969bada2a681f24ef5daa1552d0ca62b8f070138/PR-25.png" /> The solution : The new design aimed to shift the tool from a rigid, structured performance review approach to a more flexible 1:1 meeting format. The goal was to empower managers to lead performance meetings independently, providing them with more guidance and flexibility while reducing their dependency on HR. It also encouraged managers to initiate more frequent performance review cycles, allowing for a flexible schedule tailored to their needs and employees’ goals. The tool consisted of six main features: Meeting creation: Enables 1:1 meetings and performance appraisals. Action points: Allows follow-ups after meetings with reminders and deadlines. Goals section: Helps set user expectations and track results. Template library: Provides pre-made templates for structured meetings. Reports section: Analyses results (out of scope for this project). Magic panel: Offers support for focused meetings, meeting templates, micro-learning, and smart suggestions. Browse the gallery to explore the template creation flow <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/88b30dd9ae144ba08b1923db4a7a9284d442e19e827c1ffe36d027231a2ed638/PR-08.png" data-mid="228643906" border="0" src="https://freight.cargo.site/w/1000/i/88b30dd9ae144ba08b1923db4a7a9284d442e19e827c1ffe36d027231a2ed638/PR-08.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/253edf8541a76e716bc46c3c3ff6c9c2c3ade1f4b34f505feec778906542925a/PR-09.png" data-mid="228643907" border="0" src="https://freight.cargo.site/w/1000/i/253edf8541a76e716bc46c3c3ff6c9c2c3ade1f4b34f505feec778906542925a/PR-09.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/a0337b2fb9af6f02d7196b60f308ae0da523849a7bc2693415b4ad0a9bbbeba0/PR-10.png" data-mid="228643908" border="0" src="https://freight.cargo.site/w/1000/i/a0337b2fb9af6f02d7196b60f308ae0da523849a7bc2693415b4ad0a9bbbeba0/PR-10.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/f977d3b63fbb91cbbc2cc3a74b6ed037bffc698ed69135ad92b6aee40120d030/PR-11.png" data-mid="228643909" border="0" src="https://freight.cargo.site/w/1000/i/f977d3b63fbb91cbbc2cc3a74b6ed037bffc698ed69135ad92b6aee40120d030/PR-11.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/26e492c9531d568b16d9ad4aeed4d96911dc2411fc0bba799e6f5af685bcc881/PR-12.png" data-mid="228643910" border="0" src="https://freight.cargo.site/w/1000/i/26e492c9531d568b16d9ad4aeed4d96911dc2411fc0bba799e6f5af685bcc881/PR-12.png" /> A new dashboard welcomes users and provides an overview of their current schedule, tasks, and deadlines. The core feature of the meeting template creation is a Notion-inspired approach, allowing users to create or edit meeting templates more easily and freely. Several editable question block components were introduced, enabling users to seamlessly add different types of responses, rating questions, action points with deadlines, and standard text. Browse the gallery to view the block components <img width="3840" height="3464" width_o="3840" height_o="3464" data-src="https://freight.cargo.site/t/original/i/26142e4c9f1762c2234055eef9f14a82d34a82972b2d5d4a0dc58940ffebcf8a/PR-13.png" data-mid="228643929" border="0" src="https://freight.cargo.site/w/1000/i/26142e4c9f1762c2234055eef9f14a82d34a82972b2d5d4a0dc58940ffebcf8a/PR-13.png" /> <img width="3840" height="3464" width_o="3840" height_o="3464" data-src="https://freight.cargo.site/t/original/i/4f15b7cc530227d99dcb80703f1439d80884d91b6d4d231df5f8e48158b825d6/PR-14.png" data-mid="228643928" border="0" src="https://freight.cargo.site/w/1000/i/4f15b7cc530227d99dcb80703f1439d80884d91b6d4d231df5f8e48158b825d6/PR-14.png" /> <img width="3840" height="3464" width_o="3840" height_o="3464" data-src="https://freight.cargo.site/t/original/i/ee099638b2ddb1ce156fcded6e3e8162d46bd804d74f33da0d663198cb44ea22/PR-15.png" data-mid="228643927" border="0" src="https://freight.cargo.site/w/1000/i/ee099638b2ddb1ce156fcded6e3e8162d46bd804d74f33da0d663198cb44ea22/PR-15.png" /> <img width="3840" height="3464" width_o="3840" height_o="3464" data-src="https://freight.cargo.site/t/original/i/e6d6621fb5cadf01f0e482208bc646722f5226712694c5f158b4b292ba25141d/PR-16.png" data-mid="228643926" border="0" src="https://freight.cargo.site/w/1000/i/e6d6621fb5cadf01f0e482208bc646722f5226712694c5f158b4b292ba25141d/PR-16.png" /> <img width="3840" height="3464" width_o="3840" height_o="3464" data-src="https://freight.cargo.site/t/original/i/630cd7afa0586c5e43d4de35830e35dbd94b3d3a549213097a9fb7802d5c1aa5/PR-17.png" data-mid="228643925" border="0" src="https://freight.cargo.site/w/1000/i/630cd7afa0586c5e43d4de35830e35dbd94b3d3a549213097a9fb7802d5c1aa5/PR-17.png" /> <img width="3840" height="3464" width_o="3840" height_o="3464" data-src="https://freight.cargo.site/t/original/i/2a193f40610e651a9af5bc0a6103c4e309ca7af6a064d18c18ce85ea4a392e2f/PR-18.png" data-mid="228643924" border="0" src="https://freight.cargo.site/w/1000/i/2a193f40610e651a9af5bc0a6103c4e309ca7af6a064d18c18ce85ea4a392e2f/PR-18.png" /> The new Magic Panel is a right-hand expandable sidebar that provides guidance and tips on drafting templates and conducting meetings more effectively to improve performance. It also includes a direct connection to the Simployer E-learning platform, allowing users to access interactive learning materials. Magic panel sidebar <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/621d1ed267cc0ed5c390f2f28eec7f6365630e3ec5b2caa35e442530b951c6d1/PR-07.png" data-mid="228643911" border="0" src="https://freight.cargo.site/w/1000/i/621d1ed267cc0ed5c390f2f28eec7f6365630e3ec5b2caa35e442530b951c6d1/PR-07.png" /> View additional details <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/50a89da02de881cf5b5832ff41cc188c2f213e845466331dc451b51a1888c7a6/PR-02.png" data-mid="228643950" border="0" src="https://freight.cargo.site/w/1000/i/50a89da02de881cf5b5832ff41cc188c2f213e845466331dc451b51a1888c7a6/PR-02.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/49ccba59bcc2e13ea2c0e641b13e7f9081b463b3621ca96dca3024f09703f857/PR-03.png" data-mid="228643949" border="0" src="https://freight.cargo.site/w/1000/i/49ccba59bcc2e13ea2c0e641b13e7f9081b463b3621ca96dca3024f09703f857/PR-03.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/02cbc721a4cb85c513f860c6bdad0ff7eccebef6d3256e038b561bcd27cdab54/PR-04.png" data-mid="228643947" border="0" src="https://freight.cargo.site/w/1000/i/02cbc721a4cb85c513f860c6bdad0ff7eccebef6d3256e038b561bcd27cdab54/PR-04.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/cc428629bdc99819f2cde704e5333b3d974bd6345b1a4b4f9f0bee646f7b6aa4/PR-05.png" data-mid="228643948" border="0" src="https://freight.cargo.site/w/1000/i/cc428629bdc99819f2cde704e5333b3d974bd6345b1a4b4f9f0bee646f7b6aa4/PR-05.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/8608c6015bc760fcd8377b5a350c413c640de42142fa2441966e887c89b2ee31/PR-06.png" data-mid="228643954" border="0" src="https://freight.cargo.site/w/1000/i/8608c6015bc760fcd8377b5a350c413c640de42142fa2441966e887c89b2ee31/PR-06.png" /> Explore the flow for answering templates <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/868dd74959ef35307a4c490b314ece111fd32e0b7222fd0561e9633294c392f4/PR-19.png" data-mid="228991184" border="0" src="https://freight.cargo.site/w/1000/i/868dd74959ef35307a4c490b314ece111fd32e0b7222fd0561e9633294c392f4/PR-19.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/5e602bbc133b59d9f68fe55d580434f6292afa13de3d2c381c18092dd93892bc/PR-20.png" data-mid="228643952" border="0" src="https://freight.cargo.site/w/1000/i/5e602bbc133b59d9f68fe55d580434f6292afa13de3d2c381c18092dd93892bc/PR-20.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/ec4f59c9d174203d65d93330f729b75e12410508f41efeac1b01532c8aa90727/PR-21.png" data-mid="228643951" border="0" src="https://freight.cargo.site/w/1000/i/ec4f59c9d174203d65d93330f729b75e12410508f41efeac1b01532c8aa90727/PR-21.png" /> https://simonlouaza.com/Sandbox Sat, 27 Aug 2022 21:02:14 +0000 Simon Louaza https://simonlouaza.com/Sandbox Sandbox This project aimed to redesign the main Sandbox interface and improve the user experience of sub-editors like the Level Explorer and Asset Browser.&nbsp;CryEngine Sandbox is a suite of tools that enables real-time creation, editing, and in-game preview of all aspects of a game. Research &amp; analysis / UX / UI / Prototype2020 / 2021 Crytek is a Frankfurt-based video game developer and publisher known for creating first-person shooters (FPS) and game development technology. CryEngine is Crytek’s proprietary game engine, used to develop their own games and licensed to other studios. New design <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/fe17f708db894e28280facc07662b7cfce7186f7f247a3f53502bcf1c72e1815/Sand-02.png" data-mid="227391462" border="0" src="https://freight.cargo.site/w/1000/i/fe17f708db894e28280facc07662b7cfce7186f7f247a3f53502bcf1c72e1815/Sand-02.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/ca8bbb6eaf94852847722338f72b6e5da40ea9d2a284b9e896bf99eb3cff84b1/Sand-01.png" data-mid="227391463" border="0" src="https://freight.cargo.site/w/1000/i/ca8bbb6eaf94852847722338f72b6e5da40ea9d2a284b9e896bf99eb3cff84b1/Sand-01.png" /> The problem : As highlighted by the research, Sandbox had several issues, including an overly complex and nested information architecture, unintuitive editor workflows, and a design system with multiple accessibility problems. The software’s interface significantly impacted the learning curve, making it difficult for new users to become comfortable without external onboarding or guidance from experienced users. The software’s approach was heavily feature-oriented, allowing excessive user customisation to the point where the interface, actions, and toolbars prioritised flexibility over a goal-oriented workflow. This hindered the onboarding process and the execution of core tasks within the different editors. Browse the gallery to explore the research findings, in collaboration with Lead Researcher Alex Card <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/1a5d074f6435456d43a60cfeae02872de65641d4a0f219009ca991dee9371bec/Strategy-Sandbox-18.png" data-mid="227715391" border="0" src="https://freight.cargo.site/w/1000/i/1a5d074f6435456d43a60cfeae02872de65641d4a0f219009ca991dee9371bec/Strategy-Sandbox-18.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/773c3d06d72e0c88a00209f09c592bc3d9ca3ea9df8e8a7a510f5f8871849019/Strategy-Sandbox-19.png" data-mid="227715390" border="0" src="https://freight.cargo.site/w/1000/i/773c3d06d72e0c88a00209f09c592bc3d9ca3ea9df8e8a7a510f5f8871849019/Strategy-Sandbox-19.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/8d9d311c619d6ef1f7e018b319c6fab67f3263c870d5f578f92600c51b548da6/Strategy-Sandbox-20.png" data-mid="227715389" border="0" src="https://freight.cargo.site/w/1000/i/8d9d311c619d6ef1f7e018b319c6fab67f3263c870d5f578f92600c51b548da6/Strategy-Sandbox-20.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/1bd1e589270366a8fa28c1b33f242a90a2d575081b664bce83ba3934de97c8a1/Strategy-Sandbox-21.png" data-mid="227715388" border="0" src="https://freight.cargo.site/w/1000/i/1bd1e589270366a8fa28c1b33f242a90a2d575081b664bce83ba3934de97c8a1/Strategy-Sandbox-21.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/03a6742a9805030cbf4f3a5aa7c436cde8c83151a8c277d1356000c6021d5a5e/Strategy-Sandbox-22.png" data-mid="227715387" border="0" src="https://freight.cargo.site/w/1000/i/03a6742a9805030cbf4f3a5aa7c436cde8c83151a8c277d1356000c6021d5a5e/Strategy-Sandbox-22.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/6f415a6efef2fd9033c8b80b77cb7cbebef778825841787e793adbb56ef93ccf/Strategy-Sandbox-23.png" data-mid="227715386" border="0" src="https://freight.cargo.site/w/1000/i/6f415a6efef2fd9033c8b80b77cb7cbebef778825841787e793adbb56ef93ccf/Strategy-Sandbox-23.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/7f928f83981078c8a1bfe546a6a47c8d031c97e81c54dd4caff1ce6f091d1283/Strategy-Sandbox-24.png" data-mid="227715385" border="0" src="https://freight.cargo.site/w/1000/i/7f928f83981078c8a1bfe546a6a47c8d031c97e81c54dd4caff1ce6f091d1283/Strategy-Sandbox-24.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/f459257557c115d7336ca7e55e18ab982abd0ed02ee39035a73975784a00d924/Strategy-Sandbox-25.png" data-mid="227715384" border="0" src="https://freight.cargo.site/w/1000/i/f459257557c115d7336ca7e55e18ab982abd0ed02ee39035a73975784a00d924/Strategy-Sandbox-25.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/f9a5a2073f06988764c29fa7b2e1ce6d796c1441a4592cf21d4bfdeba4617c23/Strategy-Sandbox-26.png" data-mid="227715383" border="0" src="https://freight.cargo.site/w/1000/i/f9a5a2073f06988764c29fa7b2e1ce6d796c1441a4592cf21d4bfdeba4617c23/Strategy-Sandbox-26.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/0c223207a33e7055b1f0f0fd119950782603e1a41ca8627aec872d987f9d88ef/Strategy-Sandbox-27.png" data-mid="227715382" border="0" src="https://freight.cargo.site/w/1000/i/0c223207a33e7055b1f0f0fd119950782603e1a41ca8627aec872d987f9d88ef/Strategy-Sandbox-27.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/77277bf68c4bdde7697aea591efbb3c0bc58d330923ddfc6f0c6cdb78169a6dd/Strategy-Sandbox-28.png" data-mid="227715381" border="0" src="https://freight.cargo.site/w/1000/i/77277bf68c4bdde7697aea591efbb3c0bc58d330923ddfc6f0c6cdb78169a6dd/Strategy-Sandbox-28.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/7257b043cc548d23f8f51a33aab86c174c5fbeccaec41ba604f9ce6eafe2f3a5/Strategy-Sandbox-29.png" data-mid="227715380" border="0" src="https://freight.cargo.site/w/1000/i/7257b043cc548d23f8f51a33aab86c174c5fbeccaec41ba604f9ce6eafe2f3a5/Strategy-Sandbox-29.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/5bbc3ad94993b379caaf88574bd744ed1d5195013e30b5ed28b9e87205de559f/Strategy-Sandbox-30.png" data-mid="227715379" border="0" src="https://freight.cargo.site/w/1000/i/5bbc3ad94993b379caaf88574bd744ed1d5195013e30b5ed28b9e87205de559f/Strategy-Sandbox-30.png" /> Previous interface <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/35416cb1efeb21ecc9dabc67714a6753862fad22e113685edeff2c4fa7196e86/Sand-03.png" data-mid="227396895" border="0" src="https://freight.cargo.site/w/1000/i/35416cb1efeb21ecc9dabc67714a6753862fad22e113685edeff2c4fa7196e86/Sand-03.png" /> The solution : The interface redesign was driven by several key improvements: Reorganised information architecture: Elements were reprioritised between primary and secondary areas for a more intuitive structure. Enhanced user guidance: The learning curve for new users was reduced by making affordances more accessible and structured while limiting excessive interface customisation. Optimised panel content: Unnecessary hierarchy levels were removed to maximise the content displayed within panels. Streamlined workflows: Sub-editors were redesigned with a more intuitive and direct approach to simplify key workflows. Improved accessibility: Better colour contrast, fewer background layers, and semi-transparent overlays in the perspective view were introduced for a clearer and more user-friendly experience. Browse the&nbsp;zoomed-in map <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/11fde877e667a5adc508c51aadf6dbcdb9d4011676f7cd1f76e293b632399179/Sand-04.png" data-mid="227390815" border="0" src="https://freight.cargo.site/w/1000/i/11fde877e667a5adc508c51aadf6dbcdb9d4011676f7cd1f76e293b632399179/Sand-04.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/d4a06983b9243d7983597e4f721ec3e785740049bef550ae161e929affa51b44/Sand-05.png" data-mid="227390959" border="0" src="https://freight.cargo.site/w/1000/i/d4a06983b9243d7983597e4f721ec3e785740049bef550ae161e929affa51b44/Sand-05.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/78542950bef2cb8b34deb2cb99d1000febf82db9174de59789920a287c919351/Sand-06.png" data-mid="227390817" border="0" src="https://freight.cargo.site/w/1000/i/78542950bef2cb8b34deb2cb99d1000febf82db9174de59789920a287c919351/Sand-06.png" /> New interactions and animations were developed to provide additional guidance and make the interface more intuitive and engaging. Main menu video { width: 100%; height: auto; } .rounded-video { border-radius: 12px; /* Adjust the value as needed */ overflow: hidden; } Warning messages .rounded-video { border-radius: 12px; /* Adjust the value as needed */ overflow: hidden; } Saving confirmation and notifications .rounded-video { border-radius: 12px; /* Adjust the value as needed */ overflow: hidden; } The information architecture for both the asset browser and the Level Explorer was redesigned to improve navigation through large asset databases, making it easier to add assets to projects.A prominent plus button was added to open the core menus and new double-column menu was introduced, along with a toolbar featuring essential actions for importing, managing, and organising assets. A new filtering functionality allows users to search for specific assets more efficiently. Given the high volume of assets used in game development and the common multi-screen setups of many users, where one screen is often dedicated to a specific editor, the Level Explorer now supports multiple database columns. This enhancement provides a better overview of all active elements without excessive scrolling or the need to open multiple overlapping Level Explorer windows. Browse the gallery to explore the new Asset Browser flow <img width="3840" height="3698" width_o="3840" height_o="3698" data-src="https://freight.cargo.site/t/original/i/1842948ae4622350831a9c0db38e12946b32e95605628d50103e66e6a55b7c4a/Assetb-flow-01.png" data-mid="227447233" border="0" src="https://freight.cargo.site/w/1000/i/1842948ae4622350831a9c0db38e12946b32e95605628d50103e66e6a55b7c4a/Assetb-flow-01.png" /> <img width="3840" height="3698" width_o="3840" height_o="3698" data-src="https://freight.cargo.site/t/original/i/8355d761468123cda155ef326b89166cbacf1447eb70f8eeb168fd573170105f/Assetb-flow-02.png" data-mid="227421747" border="0" src="https://freight.cargo.site/w/1000/i/8355d761468123cda155ef326b89166cbacf1447eb70f8eeb168fd573170105f/Assetb-flow-02.png" /> <img width="3840" height="3698" width_o="3840" height_o="3698" data-src="https://freight.cargo.site/t/original/i/4dee4089de10f1f0501fd414e1391421a8892a19b3e79ee49b570b3a8df9fd01/Assetb-flow-03.png" data-mid="227421746" border="0" src="https://freight.cargo.site/w/1000/i/4dee4089de10f1f0501fd414e1391421a8892a19b3e79ee49b570b3a8df9fd01/Assetb-flow-03.png" /> Browse the gallery to view the new Level Explorer design <img width="3840" height="4130" width_o="3840" height_o="4130" data-src="https://freight.cargo.site/t/original/i/b85219180a6936da8a746ad55fe9b2482a2907b8b8d7070341155e0ba87add65/BB-01.png" data-mid="227462007" border="0" src="https://freight.cargo.site/w/1000/i/b85219180a6936da8a746ad55fe9b2482a2907b8b8d7070341155e0ba87add65/BB-01.png" /> <img width="3840" height="4124" width_o="3840" height_o="4124" data-src="https://freight.cargo.site/t/original/i/5ae45a3cb3fe47c183a916abebf1adf5f3cd860ae776ad5da4e0f0dbddbf000a/BB-02.png" data-mid="227462006" border="0" src="https://freight.cargo.site/w/1000/i/5ae45a3cb3fe47c183a916abebf1adf5f3cd860ae776ad5da4e0f0dbddbf000a/BB-02.png" /> <img width="3840" height="4124" width_o="3840" height_o="4124" data-src="https://freight.cargo.site/t/original/i/c39eee1afb9bd46f33d57c5b3a24e20be677d781556f1fdb14ac30808cfcabb2/BB-03.png" data-mid="227462005" border="0" src="https://freight.cargo.site/w/1000/i/c39eee1afb9bd46f33d57c5b3a24e20be677d781556f1fdb14ac30808cfcabb2/BB-03.png" /> <img width="3840" height="4124" width_o="3840" height_o="4124" data-src="https://freight.cargo.site/t/original/i/df8b81ad45c4e891edc02d93bc8043264ac362740d13e8bcd317a76df65ca041/BB-04.png" data-mid="227462004" border="0" src="https://freight.cargo.site/w/1000/i/df8b81ad45c4e891edc02d93bc8043264ac362740d13e8bcd317a76df65ca041/BB-04.png" /> <img width="3840" height="4124" width_o="3840" height_o="4124" data-src="https://freight.cargo.site/t/original/i/d7763547d9d7e23f120a30f3e850ebd9339ded687e7c404224a465e07c105b34/BB-05.png" data-mid="227462003" border="0" src="https://freight.cargo.site/w/1000/i/d7763547d9d7e23f120a30f3e850ebd9339ded687e7c404224a465e07c105b34/BB-05.png" /> <img width="3840" height="4124" width_o="3840" height_o="4124" data-src="https://freight.cargo.site/t/original/i/d0ee717d9364fee4e76b86a2e38f65aed9e83fe7f6d8f9607611ae21aa37d73f/BB-06.png" data-mid="227462002" border="0" src="https://freight.cargo.site/w/1000/i/d0ee717d9364fee4e76b86a2e38f65aed9e83fe7f6d8f9607611ae21aa37d73f/BB-06.png" /> <img width="3840" height="4124" width_o="3840" height_o="4124" data-src="https://freight.cargo.site/t/original/i/08f74cd9ddc7b2b99f3271dd8121fa5dfae9996d8f3b41c8f7f64f2b9dbec53b/BB-07.png" data-mid="227462001" border="0" src="https://freight.cargo.site/w/1000/i/08f74cd9ddc7b2b99f3271dd8121fa5dfae9996d8f3b41c8f7f64f2b9dbec53b/BB-07.png" /> <img width="3840" height="4124" width_o="3840" height_o="4124" data-src="https://freight.cargo.site/t/original/i/e4f99edb3a20d04e10f58730eb4d2ea96842d3fe08d5bcea5bdddb20d9c9eebc/BB-08.png" data-mid="227462000" border="0" src="https://freight.cargo.site/w/1000/i/e4f99edb3a20d04e10f58730eb4d2ea96842d3fe08d5bcea5bdddb20d9c9eebc/BB-08.png" /> Development sketches <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/17a3c3fc8668b3877d28896d52c5f871301508f489a4f2bce66ee13ac8811118/Mindmap-03.png" data-mid="227463321" border="0" src="https://freight.cargo.site/w/1000/i/17a3c3fc8668b3877d28896d52c5f871301508f489a4f2bce66ee13ac8811118/Mindmap-03.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/8a28b3bcdf17a4e58757b08d739fc4c046df5381dabae2606713d439a1460d2e/Sand-sketch-01.png" data-mid="227390823" border="0" src="https://freight.cargo.site/w/1000/i/8a28b3bcdf17a4e58757b08d739fc4c046df5381dabae2606713d439a1460d2e/Sand-sketch-01.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/5257adc9d90c3647047672a9ba024156d58c56eafa2378a722efb3067320bd01/Sand-sketch-02.png" data-mid="227390824" border="0" src="https://freight.cargo.site/w/1000/i/5257adc9d90c3647047672a9ba024156d58c56eafa2378a722efb3067320bd01/Sand-sketch-02.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/a6428898fa50b07c7aef05382fdbc9a4b0a375dc2a7898e91d1f6269c926344a/Sand-sketch-03.png" data-mid="227390822" border="0" src="https://freight.cargo.site/w/1000/i/a6428898fa50b07c7aef05382fdbc9a4b0a375dc2a7898e91d1f6269c926344a/Sand-sketch-03.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/c3730481e513e39c889e0d36b01fbd60718abc1c935e4acf88bf70a37d6c0267/Sand-sketch-04.png" data-mid="227390821" border="0" src="https://freight.cargo.site/w/1000/i/c3730481e513e39c889e0d36b01fbd60718abc1c935e4acf88bf70a37d6c0267/Sand-sketch-04.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/75a02a8009cba421720dbfaa20332672092f209b769688d61fceadf19a7574a7/Sand-sketch-05.png" data-mid="227390820" border="0" src="https://freight.cargo.site/w/1000/i/75a02a8009cba421720dbfaa20332672092f209b769688d61fceadf19a7574a7/Sand-sketch-05.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/ca3d0e65235e26227548308e72e6476a3e8bbb90dfa7e972b788714e49af1f13/Sand-sketch-06.png" data-mid="227390819" border="0" src="https://freight.cargo.site/w/1000/i/ca3d0e65235e26227548308e72e6476a3e8bbb90dfa7e972b788714e49af1f13/Sand-sketch-06.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/4e1f2bc5eb3abfa65cfe3a9890803e7a865e2647dfff0ece42e69400c8c6f40f/Sand-sketch-07.png" data-mid="227504192" border="0" src="https://freight.cargo.site/w/1000/i/4e1f2bc5eb3abfa65cfe3a9890803e7a865e2647dfff0ece42e69400c8c6f40f/Sand-sketch-07.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/f50a4dcbd3d29b67bed0a0bb1a8a0053413c8c4e38f02adbd41fa300ffffc91f/Sand-sketch-08.png" data-mid="227447223" border="0" src="https://freight.cargo.site/w/1000/i/f50a4dcbd3d29b67bed0a0bb1a8a0053413c8c4e38f02adbd41fa300ffffc91f/Sand-sketch-08.png" /> https://simonlouaza.com/Payments Sat, 15 Oct 2022 20:23:08 +0000 Simon Louaza https://simonlouaza.com/Payments Payments The project involved the redesign of the payment portal, with a special focus on the mobile experience. The goal was to streamline the purchase process and investigate the high rate of cart abandonment. Research &amp; analysis / UX / UI / Prototype2022 G-Loot, later rebranded as Stryda, was a Stockholm-based esports company specializing in stats tracking, player identity, and competitions. It permanently ceased operations in 2023. New design <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/1030e6eeed9f884dad322d2a78481a1040363d2d48cabe31dbcd9c13a2a74084/01P.png" data-mid="226321104" border="0" src="https://freight.cargo.site/w/1000/i/1030e6eeed9f884dad322d2a78481a1040363d2d48cabe31dbcd9c13a2a74084/01P.png" /> The problem : The research highlighted significant issues with dropout and cart abandonment. Further investigation revealed that these problems stemmed from the transition of the platform from a gambling company to a freemium esports model. Users were attempting to cheat or enter expired or fake credit card information to pay for subscriptions and coins, the main currency used on the platform. The two primary issues were card denials and multiple registered cards. <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/c63cbf8f55c3702f91de80b62cce33da8fd0902398a52834af2ef8362d7f0cf3/P06.png" data-mid="227009248" border="0" src="https://freight.cargo.site/w/1000/i/c63cbf8f55c3702f91de80b62cce33da8fd0902398a52834af2ef8362d7f0cf3/P06.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/5ad2e1f3d79bb620d732098c98ae6d48862e51fe51aa303af5bd06f861820115/P07.png" data-mid="227856058" border="0" src="https://freight.cargo.site/w/1000/i/5ad2e1f3d79bb620d732098c98ae6d48862e51fe51aa303af5bd06f861820115/P07.png" /> Other usability problems were identified, such as ineffective error messages, lack of field confirmations, and no option to go back if a transaction failed. Additionally, users were unable to edit their payment methods. There were also backend issues that caused the process to stall in some cases. Watch the Add Payment flow video { width: 100%; height: auto; } .rounded-video { border-radius: 12px; /* Adjust the value as needed */ overflow: hidden; } The solution : Although the primary issue of cart abandonment was largely due to the transitional period, where users had to adjust to the core change in the platform’s business model, improvements were suggested for the other issues. A new payment edit functionality was introduced, limiting the number of payment methods to a maximum of three. Error messages were improved to provide clearer guidance. Previous research showed that a light mode design provided users with a greater sense of security and reassurance when making payments. As a result, a light theme, in contrast to the G-Loot platform’s dark theme, was adopted for the payment portal. Desktop interface <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/c9d9a97aae33c37c7d0911bf6716c40354085dfcb6d0402894edad3c3296d815/P02.png" data-mid="227009250" border="0" src="https://freight.cargo.site/w/1000/i/c9d9a97aae33c37c7d0911bf6716c40354085dfcb6d0402894edad3c3296d815/P02.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/c8f75b8f69f72ed7b8210d09a4fb720c5623e078579482fb4418ce80937856f9/P03.png" data-mid="227009255" border="0" src="https://freight.cargo.site/w/1000/i/c8f75b8f69f72ed7b8210d09a4fb720c5623e078579482fb4418ce80937856f9/P03.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/c57e2bcb08b664371bf5174312b461df4f750b8e36dd9fae93ba069e1465b617/P04.png" data-mid="227009254" border="0" src="https://freight.cargo.site/w/1000/i/c57e2bcb08b664371bf5174312b461df4f750b8e36dd9fae93ba069e1465b617/P04.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/669b09ab6eba9c79865741d0f84a81291ec36f7626c800ec491ac1b7876f6fd0/P05.png" data-mid="227009253" border="0" src="https://freight.cargo.site/w/1000/i/669b09ab6eba9c79865741d0f84a81291ec36f7626c800ec491ac1b7876f6fd0/P05.png" /> Additional trust-building elements, such as a shield icon, were introduced. New strategies and animations for the mobile version were developed to prioritise task areas while ensuring the purchase amount remains visible at every stage of the process. Watch the Select Payment flow .rounded-video { border-radius: 12px; /* Adjust the value as needed */ overflow: hidden; } https://simonlouaza.com/DRS Tue, 27 Sep 2022 19:12:01 +0000 Simon Louaza https://simonlouaza.com/DRS DRS Editor The Dynamic Response System ​(DRS) is a CryEngine editor that enables users to implement dialogues in a game and link them to specific events. This project aimed to redesign the DRS editor to reduce cognitive friction and improve interface learnability. Research &amp; analysis / UX / UI / Prototype2021 Crytek is a Frankfurt-based video game developer and publisher known for creating first-person shooters (FPS) and game development technology. CryEngine is Crytek’s proprietary game engine, used to develop their own games and licensed to other studios. Browse the gallery to view the new interface <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/5903f309dcb45ea8b40254a831c3e28acd214438093d47d0a00006e8cac887a5/DRS-5.png" data-mid="227504056" border="0" src="https://freight.cargo.site/w/1000/i/5903f309dcb45ea8b40254a831c3e28acd214438093d47d0a00006e8cac887a5/DRS-5.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/d8118b38a7b967181fd0c12587356dbb8a648f1ee91ddfe69842cbaed41a17b6/DRS-4.png" data-mid="227504055" border="0" src="https://freight.cargo.site/w/1000/i/d8118b38a7b967181fd0c12587356dbb8a648f1ee91ddfe69842cbaed41a17b6/DRS-4.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/9daf64189ca4d66807766375af72e2dc1d8867d1770ae6ed0b153e8d375a920b/DRS-6.png" data-mid="227504054" border="0" src="https://freight.cargo.site/w/1000/i/9daf64189ca4d66807766375af72e2dc1d8867d1770ae6ed0b153e8d375a920b/DRS-6.png" /> The problem : The DRS Editor presented an unintuitive interface that was causing several usability issues. The inability to be self-explanatory, due to hidden functionalities and actions, was affecting the learning curve for new users and the dialogue management by experienced users. The DRS is divided into three main sections: The Dialog Database: where lines of dialogue for game characters are stored. The Responses: where lines can be associated with specific in-game events. The Variables: used to create complex event flows. In the previous dialog database, dialogue lines were listed as uneditable items, with no clear affordances indicating they could be edited. Users had to right-click on a line to discover a popup with various editing options. Additionally, each line contained several properties, which users could only edit by right-clicking each individual property. These property affordances were not differentiated, and dropdown menus appeared the same as text inputs, for example. Watch the new Dialog Database flow video { width: 100%; height: auto; } .rounded-video { border-radius: 8px; /* Adjust the value as needed */ overflow: hidden; } There was no clear button to suggest the action of creating a new line in the editor, and batch editing (editing multiple lines at once) was not allowed, which caused significant frustration among users.Grouping lines into folders was not possible, preventing users from organizing the database in a more efficient way. Both the Responses and Variables sections featured a highly nested and unintuitive layout, lacking primary call-to-action elements and self-explanatory features to guide users through the process. Previous interface <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/583c67ec02266e17558b9ad69ac4ace89f277e6b19af5f5c7aed34e6f4ee5012/Drs-old-01.png" data-mid="228004074" border="0" src="https://freight.cargo.site/w/1000/i/583c67ec02266e17558b9ad69ac4ace89f277e6b19af5f5c7aed34e6f4ee5012/Drs-old-01.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/e2558651164d1f1e1892f8a08e64b86c41eb35aca9a776252842397dfbefabc5/Drs-old-02.png" data-mid="228004073" border="0" src="https://freight.cargo.site/w/1000/i/e2558651164d1f1e1892f8a08e64b86c41eb35aca9a776252842397dfbefabc5/Drs-old-02.png" /> The solution : The goal of the redesign was to make all primary actions immediately accessible and enhance flexibility in managing the dialog database. A main toolbar with editing capabilities was added, along with a prominent new ‘Add Line’ button. New filter .rounded-video { border-radius: 8px; /* Adjust the value as needed */ overflow: hidden; } Line properties were redesigned to adopt distinct styles based on their function, such as dropdown menus and input fields. Affordances were redesigned to more clearly convey their function and usage, making them more self-explanatory. Filter selection .rounded-video { border-radius: 8px; /* Adjust the value as needed */ overflow: hidden; } Batch editing and folder creation were introduced, along with the ability to filter lines according to various parameters, facilitating more effective organization of the database and search activities. Filter editing .rounded-video { border-radius: 8px; /* Adjust the value as needed */ overflow: hidden; } The new layout for the Responses section was divided into three areas, creating a sequential workflow. Each section can be hidden depending on the user’s stage, allowing them to focus solely on the activities of interest. Additional fields and affordances were added to enhance guidance, along with visual cues, such as the tree structure in the list sections. Filter deletion .rounded-video { border-radius: 8px; /* Adjust the value as needed */ overflow: hidden; } The Variables section adopted a similar approach to the Responses section, featuring a two-area layout and using the same tree structure to visualize complex dialog line interactions across different scenarios. Watch the new Responses flow video { width: 100%; height: auto; } .rounded-video { border-radius: 8px; /* Adjust the value as needed */ overflow: hidden; } Usability tests <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/baaeeb2ab2e99064a05f44949be86203cc065c30e2781b8b2d3cb985bec6b5ef/Usab-01.png" data-mid="227504969" border="0" src="https://freight.cargo.site/w/1000/i/baaeeb2ab2e99064a05f44949be86203cc065c30e2781b8b2d3cb985bec6b5ef/Usab-01.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/f5d60d92e08d4db5098c1901dc14ac879252486bdb223b47c0137ad76f66d882/Usab-02.png" data-mid="228004143" border="0" src="https://freight.cargo.site/w/1000/i/f5d60d92e08d4db5098c1901dc14ac879252486bdb223b47c0137ad76f66d882/Usab-02.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/7d3cbe7a4c90c2d6043a8c2a525af68a6e23828d1d5cd63ed42d0e61456bc7d5/Usab-03.png" data-mid="228004141" border="0" src="https://freight.cargo.site/w/1000/i/7d3cbe7a4c90c2d6043a8c2a525af68a6e23828d1d5cd63ed42d0e61456bc7d5/Usab-03.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/28cb133609c9cef11917165125b8e25c818dda6f0e9695d309c252eb322c6efe/Usab-05.png" data-mid="228004144" border="0" src="https://freight.cargo.site/w/1000/i/28cb133609c9cef11917165125b8e25c818dda6f0e9695d309c252eb322c6efe/Usab-05.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/fbc44df3b0987a6a0d3a18cdf9222d32854588f1f2f589a05da88f071614893b/Usab-04.png" data-mid="228004142" border="0" src="https://freight.cargo.site/w/1000/i/fbc44df3b0987a6a0d3a18cdf9222d32854588f1f2f589a05da88f071614893b/Usab-04.png" /> https://simonlouaza.com/Toolbar Sat, 27 Aug 2022 21:02:12 +0000 Simon Louaza https://simonlouaza.com/Toolbar Toolbar Editor The project focused on redesigning the CryEngine Toolbar Editor to enhance the user experience by making workflows more intuitive, ensuring a clear separation of task areas, and modernising the editor’s outdated appearance. Research &amp; analysis / UX / UI2020 Crytek is a Frankfurt-based video game developer and publisher known for creating first-person shooters (FPS) and game development technology. CryEngine is Crytek’s proprietary game engine, used to develop their own games and licensed to other studios. Browse the gallery to view the new workflow and goals <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/10d9be60029145668abd296cfa5430db401bad83f205b6a052f5d59cc5345f4e/Tool-01.png" data-mid="227202140" border="0" src="https://freight.cargo.site/w/1000/i/10d9be60029145668abd296cfa5430db401bad83f205b6a052f5d59cc5345f4e/Tool-01.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/8f198c78bdf0825de51920111fae2ed66f69ee9c77ebc7a6679fc0f69c4ad9b9/Tool-02.png" data-mid="227202141" border="0" src="https://freight.cargo.site/w/1000/i/8f198c78bdf0825de51920111fae2ed66f69ee9c77ebc7a6679fc0f69c4ad9b9/Tool-02.png" /> The problem : The editor allows users to create custom toolbars and assign them to specific windows and editors within the CryEngine interface. Users can choose from a wide range of commands to build toolbars that suit their needs. In the previous editor, all key activities, such as creation, naming, selection, editing, and deletion of toolbars, took place within a very small space at the bottom of the command database list, making the process highly unintuitive and confusing. It was unclear which action was in progress or what stage it was at (e.g., whether a toolbar was saved or still in the creation process). Guidance elements, as well as confirmation and error messages, were completely absent. Unlike the command database, saved toolbars were stored in a dropdown, preventing users from having a stable overview of the toolbar list and making selection difficult. This also increased the risk of unwanted selections or accidental dropdown closures. Adding commands to a toolbar was rigid and lacked discoverability, requiring multiple clicks. Users had to right-click repeatedly to access menus for adding or removing commands, making the process cumbersome. Browse the full gallery the view the new design <img width="3840" height="3998" width_o="3840" height_o="3998" data-src="https://freight.cargo.site/t/original/i/a39823c03f0647121f1ff7f524b1719af3b0b9701e550dbe0120419418f656ca/Tool-31.png" data-mid="227716111" border="0" src="https://freight.cargo.site/w/1000/i/a39823c03f0647121f1ff7f524b1719af3b0b9701e550dbe0120419418f656ca/Tool-31.png" /> <img width="3840" height="3998" width_o="3840" height_o="3998" data-src="https://freight.cargo.site/t/original/i/c2430fb1537092ca077bb0976f3c28666d8f5be571b22b2222f9382c4b0d42c8/Tool-32.png" data-mid="227716110" border="0" src="https://freight.cargo.site/w/1000/i/c2430fb1537092ca077bb0976f3c28666d8f5be571b22b2222f9382c4b0d42c8/Tool-32.png" /> <img width="3840" height="3998" width_o="3840" height_o="3998" data-src="https://freight.cargo.site/t/original/i/4c7eac5eb5bd69b4dbcd7401e99dd6453268581cbc5bde814f1a4066a9ed23ab/Tool-33.png" data-mid="227716109" border="0" src="https://freight.cargo.site/w/1000/i/4c7eac5eb5bd69b4dbcd7401e99dd6453268581cbc5bde814f1a4066a9ed23ab/Tool-33.png" /> <img width="3840" height="3998" width_o="3840" height_o="3998" data-src="https://freight.cargo.site/t/original/i/fe8037dae9d1bd2b18c899c9300d20886b20da0ba42af755ada2a58ce685aa8e/Tool-34.png" data-mid="227716108" border="0" src="https://freight.cargo.site/w/1000/i/fe8037dae9d1bd2b18c899c9300d20886b20da0ba42af755ada2a58ce685aa8e/Tool-34.png" /> <img width="3840" height="3998" width_o="3840" height_o="3998" data-src="https://freight.cargo.site/t/original/i/a21267f4c02e90a202e0802662a6ab3fd4198c17098a0f6098e5154af8b6b486/Tool-35.png" data-mid="227716107" border="0" src="https://freight.cargo.site/w/1000/i/a21267f4c02e90a202e0802662a6ab3fd4198c17098a0f6098e5154af8b6b486/Tool-35.png" /> <img width="3840" height="3998" width_o="3840" height_o="3998" data-src="https://freight.cargo.site/t/original/i/bacc35aee6b75aa3c9462a3ea31a1996290b27d849bd8ea9fd6310676926a038/Tool-36.png" data-mid="227716106" border="0" src="https://freight.cargo.site/w/1000/i/bacc35aee6b75aa3c9462a3ea31a1996290b27d849bd8ea9fd6310676926a038/Tool-36.png" /> <img width="3840" height="3998" width_o="3840" height_o="3998" data-src="https://freight.cargo.site/t/original/i/d16bdc5a275d12fa60b63d708f14f6e6ec81e7633750517523025293c9b52368/Tool-37.png" data-mid="227716105" border="0" src="https://freight.cargo.site/w/1000/i/d16bdc5a275d12fa60b63d708f14f6e6ec81e7633750517523025293c9b52368/Tool-37.png" /> <img width="3840" height="3998" width_o="3840" height_o="3998" data-src="https://freight.cargo.site/t/original/i/2bd229caad1861141bc534629285673ca7543c83c8b3ec42addd4c15f090d30f/Tool-38.png" data-mid="227716104" border="0" src="https://freight.cargo.site/w/1000/i/2bd229caad1861141bc534629285673ca7543c83c8b3ec42addd4c15f090d30f/Tool-38.png" /> <img width="3840" height="3998" width_o="3840" height_o="3998" data-src="https://freight.cargo.site/t/original/i/2239f6d997f8190a1ffe17cbf23ab945dfa1e556a91b5a569e0a12d229e66e29/Tool-39.png" data-mid="227716103" border="0" src="https://freight.cargo.site/w/1000/i/2239f6d997f8190a1ffe17cbf23ab945dfa1e556a91b5a569e0a12d229e66e29/Tool-39.png" /> <img width="3840" height="3998" width_o="3840" height_o="3998" data-src="https://freight.cargo.site/t/original/i/4b7ce0e443ac1b833680e13100c27e16dfc8ec7e636044ee351e4a07e98f8c3c/Tool-46.png" data-mid="227716096" border="0" src="https://freight.cargo.site/w/1000/i/4b7ce0e443ac1b833680e13100c27e16dfc8ec7e636044ee351e4a07e98f8c3c/Tool-46.png" /> <img width="3840" height="3998" width_o="3840" height_o="3998" data-src="https://freight.cargo.site/t/original/i/e5d247eda02e34a58f55663ff1126d93faef4d6aa51e7ae9eabebdaf4045d82f/Tool-47.png" data-mid="227716095" border="0" src="https://freight.cargo.site/w/1000/i/e5d247eda02e34a58f55663ff1126d93faef4d6aa51e7ae9eabebdaf4045d82f/Tool-47.png" /> <img width="3840" height="3998" width_o="3840" height_o="3998" data-src="https://freight.cargo.site/t/original/i/4bc6dce7c64c36927fccd2a837bd61968fc8fa3ff1b212aff79bc875c5444b11/Tool-40.png" data-mid="227716102" border="0" src="https://freight.cargo.site/w/1000/i/4bc6dce7c64c36927fccd2a837bd61968fc8fa3ff1b212aff79bc875c5444b11/Tool-40.png" /> <img width="3840" height="3998" width_o="3840" height_o="3998" data-src="https://freight.cargo.site/t/original/i/5c0f6eeb4dcb0ca79fd6b357d375eec2849a6b425ec9ca7e2a99c2c25255d2bc/Tool-41.png" data-mid="227716101" border="0" src="https://freight.cargo.site/w/1000/i/5c0f6eeb4dcb0ca79fd6b357d375eec2849a6b425ec9ca7e2a99c2c25255d2bc/Tool-41.png" /> <img width="3840" height="3998" width_o="3840" height_o="3998" data-src="https://freight.cargo.site/t/original/i/671f150d97d020403149e8f567e624da4ef09aa8401d8c09c44010f2033d862b/Tool-42.png" data-mid="227716100" border="0" src="https://freight.cargo.site/w/1000/i/671f150d97d020403149e8f567e624da4ef09aa8401d8c09c44010f2033d862b/Tool-42.png" /> <img width="3840" height="3998" width_o="3840" height_o="3998" data-src="https://freight.cargo.site/t/original/i/fb4a0127ca400c8534dd9d26233b27ec177c4e2dc5205a49594468da9c2ab592/Tool-43.png" data-mid="227716099" border="0" src="https://freight.cargo.site/w/1000/i/fb4a0127ca400c8534dd9d26233b27ec177c4e2dc5205a49594468da9c2ab592/Tool-43.png" /> <img width="3840" height="3998" width_o="3840" height_o="3998" data-src="https://freight.cargo.site/t/original/i/96b63caaf3aa4768660f00037230f07947d12a52b05b315279508ae44a98d98e/Tool-44.png" data-mid="227716098" border="0" src="https://freight.cargo.site/w/1000/i/96b63caaf3aa4768660f00037230f07947d12a52b05b315279508ae44a98d98e/Tool-44.png" /> <img width="3840" height="3998" width_o="3840" height_o="3998" data-src="https://freight.cargo.site/t/original/i/cec64bbd6054085506df636d389456ff81eed41f15cbb725b2fd18659d43e704/Tool-45.png" data-mid="227716097" border="0" src="https://freight.cargo.site/w/1000/i/cec64bbd6054085506df636d389456ff81eed41f15cbb725b2fd18659d43e704/Tool-45.png" /> The solution : In the new design, the toolbar editor window is divided into two sections. On the left, users can navigate, search, and select commands to add to toolbars. On the right, they can create and edit multiple toolbars simultaneously using a new, clearly visible plus button. Commands can be easily dragged and dropped from the left database area to the toolbar section on the right. Each toolbar includes an input field for renaming, and a trash icon on the right allows for quick deletion. This new setup ensures the toolbar list remains always accessible, making creation and editing more seamless. Additionally, the interface now features more intuitive affordances and guiding elements to enhance usability. Finally, the new CryEngine design system was applied to the toolbar editor, modernising its appearance and ensuring visual consistency across the platform. Previous editor <img width="3840" height="3818" width_o="3840" height_o="3818" data-src="https://freight.cargo.site/t/original/i/fa9e8c56e2ae99b278fdc30368edca7c10c321f9cd8fc4b68a3f6faededfb942/Toolbar-scheme.png" data-mid="227260971" border="0" src="https://freight.cargo.site/w/1000/i/fa9e8c56e2ae99b278fdc30368edca7c10c321f9cd8fc4b68a3f6faededfb942/Toolbar-scheme.png" /> Browse the galleries to explore development sketches <img width="3840" height="3328" width_o="3840" height_o="3328" data-src="https://freight.cargo.site/t/original/i/bbfa2dcd0d43f2b4eaf3ddd8318cb5722e92f43273650fa62e09ad49f3286b0c/Tool-sketch-01.png" data-mid="227258119" border="0" src="https://freight.cargo.site/w/1000/i/bbfa2dcd0d43f2b4eaf3ddd8318cb5722e92f43273650fa62e09ad49f3286b0c/Tool-sketch-01.png" /> <img width="3840" height="3328" width_o="3840" height_o="3328" data-src="https://freight.cargo.site/t/original/i/f53718846953381eebad15f17060dffa79613f1ec50df258ea556988644ec2ac/Tool-sketch-02.png" data-mid="227258124" border="0" src="https://freight.cargo.site/w/1000/i/f53718846953381eebad15f17060dffa79613f1ec50df258ea556988644ec2ac/Tool-sketch-02.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/dfec8b6f4581a3f822999b54d8067b7b8024a1f1ad3e558c4a4de57de72ce42d/Tool-sketch-03.png" data-mid="227258123" border="0" src="https://freight.cargo.site/w/1000/i/dfec8b6f4581a3f822999b54d8067b7b8024a1f1ad3e558c4a4de57de72ce42d/Tool-sketch-03.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/6b31a82c04c7bc8190acacd1e22e1536cfa3ac2181b9df2614fb9381a1cbd3e3/Tool-sketch-04.png" data-mid="227258122" border="0" src="https://freight.cargo.site/w/1000/i/6b31a82c04c7bc8190acacd1e22e1536cfa3ac2181b9df2614fb9381a1cbd3e3/Tool-sketch-04.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/7ada6372c1725d8735b12d2cfad7b61c4ca02ce11968730920c7fe8a6c7ceb8c/Tool-sketch-05.png" data-mid="227258121" border="0" src="https://freight.cargo.site/w/1000/i/7ada6372c1725d8735b12d2cfad7b61c4ca02ce11968730920c7fe8a6c7ceb8c/Tool-sketch-05.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/fe414a25e6a73c827bc3b309c433bf2966a5ef1f802055ac330966f392c686ad/Tool-sketch-06.png" data-mid="227258120" border="0" src="https://freight.cargo.site/w/1000/i/fe414a25e6a73c827bc3b309c433bf2966a5ef1f802055ac330966f392c686ad/Tool-sketch-06.png" />