https://mariafraga.me Maria Fraga Mon, 24 Jul 2023 11:00:19 +0000 https://mariafraga.me en https://mariafraga.me/Home Fri, 21 Jul 2023 17:13:22 +0000 Maria Fraga https://mariafraga.me/Home https://mariafraga.me/Schola-Online-1 Mon, 24 Jul 2023 10:25:59 +0000 Maria Fraga https://mariafraga.me/Schola-Online-1 <img width="72" height="72" width_o="72" height_o="72" data-src="https://freight.cargo.site/t/original/i/5187710afbf9471c9b11aab4db6b75e834ecb7012dbf9478c139553a91b37f7d/iconoir_cancel.svg" data-mid="186165478" border="0" data-scale="3" data-icon-mode src="https://freight.cargo.site/w/72/i/5187710afbf9471c9b11aab4db6b75e834ecb7012dbf9478c139553a91b37f7d/iconoir_cancel.svg" /> <img width="3000" height="2250" width_o="3000" height_o="2250" data-src="https://freight.cargo.site/t/original/i/8fe327a80752823f06135b7ff50740fd8d219c1bd5fc0b8168697dfd1fb92fe7/White-Clay.png" data-mid="210865230" border="0" src="https://freight.cargo.site/w/1000/i/8fe327a80752823f06135b7ff50740fd8d219c1bd5fc0b8168697dfd1fb92fe7/White-Clay.png" /> 👋 Introduction Schola is an academic digital platform created for EDHEC Business School. The purpose of this product is to manage the academic courses teached at EDHEC, including planning, grading and the assessment of the school year. My Role Ideate and design new screens for current and future actions across the platform &amp; product family, while working closely with the cross-development team and external stakeholders. The Team Me as Product UI UX Designer, 2 Developers, 2 QA Testers, 1 Project Manager, 1 Tech Lead, 1 Chief of IT Project The Client EDHEC Business School Timeline October 2022 - Currently 🔑 Design Process Agile UX Methodology focuses on the development and delivery of specifications created for each sprint, based on key pain points defined in user stories. Together with a small cross functional team, we engage in the research and discovery of new insights while collaborating with the stakeholders. Besides daily meetings and weekly reviews, our team uses softwares such as Confluence, Monday and Figjam to manage and present some of the requirements, stories and bugs in the duration of each sprint. <img width="4828" height="1874" width_o="4828" height_o="1874" data-src="https://freight.cargo.site/t/original/i/2bd9d91e5658cc89bbd4bc81830ad30376035bbd5cc7dbe4705b5d5c3d63a916/Group-993.png" data-mid="210385614" border="0" src="https://freight.cargo.site/w/1000/i/2bd9d91e5658cc89bbd4bc81830ad30376035bbd5cc7dbe4705b5d5c3d63a916/Group-993.png" /> Agile UX Methodology | Collaborative Design Process 🤔 Selected Stories Due to the ongoing status of the project, the following chapters include some of the primary user stories that contextualize the developement of the product at hand: <img width="481" height="481" width_o="481" height_o="481" data-src="https://freight.cargo.site/t/original/i/11eace708f5b55faaeee46569462a66a9cd5b61be1d240a544802eda8c1fd1c0/Mask-group.png" data-mid="202359594" border="0" src="https://freight.cargo.site/w/481/i/11eace708f5b55faaeee46569462a66a9cd5b61be1d240a544802eda8c1fd1c0/Mask-group.png" /> UX StructureIntroduction to Schola Insights, UX models and the design of the structure of the product <img width="481" height="481" width_o="481" height_o="481" data-src="https://freight.cargo.site/t/original/i/0d87388c185462c76cbf4362413023c6da403a288d17afda22943a411f669361/Mask-group-1.png" data-mid="202359593" border="0" src="https://freight.cargo.site/w/481/i/0d87388c185462c76cbf4362413023c6da403a288d17afda22943a411f669361/Mask-group-1.png" /> Product designDesign System Customisation and development of an Atomic Design System &amp; Style sheet Introduction to Schola | UX Structure ContextWhen introduced to the briefing and technical requirements of the project, the priority became understanding the behaviour and needs of the users. This approach required two stages, starting with the analysis of the users current platforms - pains, likes and needs - through user interviews and surveys, followed by the creation of archetypes based on their goals and insights. Afterwards, a primary UX structure was created, reflecting the discoveries made during the first stage.&nbsp; <img width="2528" height="2136" width_o="2528" height_o="2136" data-src="https://freight.cargo.site/t/original/i/36f5e2c1e758d6972b389619cf0a6bd8dc0ffa936ec3eb81dba0a05b4170c512/Group-970.png" data-mid="210307029" border="0" src="https://freight.cargo.site/w/1000/i/36f5e2c1e758d6972b389619cf0a6bd8dc0ffa936ec3eb81dba0a05b4170c512/Group-970.png" />Current Softwares per Task | UX Research <img width="2540" height="2136" width_o="2540" height_o="2136" data-src="https://freight.cargo.site/t/original/i/1384c9bbe8300c5080a0b7ccc65d6bf1694926021521ad87acb837fd06fbc2f7/Group-969.png" data-mid="210307031" border="0" src="https://freight.cargo.site/w/1000/i/1384c9bbe8300c5080a0b7ccc65d6bf1694926021521ad87acb837fd06fbc2f7/Group-969.png" />Insights on Softwares | UX Research <img width="4815" height="1878" width_o="4815" height_o="1878" data-src="https://freight.cargo.site/t/original/i/f20d47d5e4b897a4feafdfbefc03db53074038643b5ede86679373147a142dc1/Group-946.png" data-mid="210271596" border="0" src="https://freight.cargo.site/w/1000/i/f20d47d5e4b897a4feafdfbefc03db53074038643b5ede86679373147a142dc1/Group-946.png" /> <img width="2623" height="2136" width_o="2623" height_o="2136" data-src="https://freight.cargo.site/t/original/i/bf40a590795e05efb35e5f02b09bace1ab4a5d8ed8f513ea937da9e0ba250ed3/Group-837.png" data-mid="201682913" border="0" src="https://freight.cargo.site/w/1000/i/bf40a590795e05efb35e5f02b09bace1ab4a5d8ed8f513ea937da9e0ba250ed3/Group-837.png" />Schola Introduction for Teachers | Wireframes <img width="2528" height="2136" width_o="2528" height_o="2136" data-src="https://freight.cargo.site/t/original/i/980fdc23f6a4d41990798905b14e6262ef2610b55cc64aa4e5dc98bd64f155c5/Group-838.png" data-mid="201682914" border="0" data-scale="97" src="https://freight.cargo.site/w/1000/i/980fdc23f6a4d41990798905b14e6262ef2610b55cc64aa4e5dc98bd64f155c5/Group-838.png" />Schola Introduction for Staff | WireframesWhat we learned After launching the first staging environment of Schola, sharing the website with a wider range of users for further feedback, these are the main chapters of findings concerning the design process: Usability: Users found the platform easy to use and the behaviours easy to replicate across different types of access, resulting in a 98% success rate when completing a task; Performance: Besides the detection of small bugs in the technical performance of the platform, the loading time per page was an average of &gt;2 seconds; Design: After assuring the recognition of the main behaviours and actions by its users, the next chapters consisted in the modernisation of the look and feel of the platform, minimising some of the action indicators such as buttons and updating the product’s UI components according to the new Schola Logo. Design System | Product Design Context The next stage of the design process consisted partially of the further development of the design system and the creation of a style sheet based on the rebrand of Schola. As a starting point of the project, the development team agreed on utilising the react UI toolkit, customising the components according to the design system that would be designed based on the expected behaviour and necessities of Schola users.&nbsp; <img width="5257" height="2439" width_o="5257" height_o="2439" data-src="https://freight.cargo.site/t/original/i/da6e5b7df0eb22c4992957a36d7eb7efaf1231d92fab55418846b3abd4d58d8d/design-system.png" data-mid="201683510" border="0" src="https://freight.cargo.site/w/1000/i/da6e5b7df0eb22c4992957a36d7eb7efaf1231d92fab55418846b3abd4d58d8d/design-system.png" /> When considering the customisation of the design system, some principles such as accessibility and standardisation are crucial to acknowledge during the design process. To keep these values in mind, attributes such as variable assets, standard properties, focus state in components and interactive prototypes were supported in the design file, allowing an efficient communication with the dev team and stakeholders. <img width="2528" height="2137" width_o="2528" height_o="2137" data-src="https://freight.cargo.site/t/original/i/5bc243836a8f5a020b6113e1e5b2f0b605ed076ee572fe5cc7f9bd4ffb57d537/Group-975.png" data-mid="210363969" border="0" src="https://freight.cargo.site/w/1000/i/5bc243836a8f5a020b6113e1e5b2f0b605ed076ee572fe5cc7f9bd4ffb57d537/Group-975.png" />Design System | Variable Components and states <img width="2528" height="2137" width_o="2528" height_o="2137" data-src="https://freight.cargo.site/t/original/i/b91b19bcccbfefc2daefc0aef7d9eec91203cd09dc483416e15394ef9fb5e8e2/Group-978.png" data-mid="210363970" border="0" src="https://freight.cargo.site/w/1000/i/b91b19bcccbfefc2daefc0aef7d9eec91203cd09dc483416e15394ef9fb5e8e2/Group-978.png" />Design System | Focus State in Components Data &amp; Results | Feedback Considerations After two releases of Schola, with the last release predicted for the end of June 2024, collected metrics show a positive impact in the success rate of user’s tasks and an increase in the accessibility of the content presented in the platform. This product also allowed the client to detach almost completely from external LMS and E Learning platforms, reducing its liability and overall maintenance costs. <img width="2524" height="1650" width_o="2524" height_o="1650" data-src="https://freight.cargo.site/t/original/i/2c05bbeda21af91c67f005cff8cfdc7663532ebf7e8c7aaaf70f87407a74b73b/Group-840.png" data-mid="201683727" border="0" data-scale="93" src="https://freight.cargo.site/w/1000/i/2c05bbeda21af91c67f005cff8cfdc7663532ebf7e8c7aaaf70f87407a74b73b/Group-840.png" /> <img width="2525" height="1650" width_o="2525" height_o="1650" data-src="https://freight.cargo.site/t/original/i/c322f5d051a87a15d82a132695c2f848b5d7bedcc1c0e8fb63abc7ca00d879e2/Group-833.png" data-mid="201683728" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/c322f5d051a87a15d82a132695c2f848b5d7bedcc1c0e8fb63abc7ca00d879e2/Group-833.png" /> <img width="5257" height="2296" width_o="5257" height_o="2296" data-src="https://freight.cargo.site/t/original/i/f0c3e43cf744f1a26207bcce1a3204e2037a87b07796265e9cd5674bd877743f/Group-830.png" data-mid="201684034" border="0" src="https://freight.cargo.site/w/1000/i/f0c3e43cf744f1a26207bcce1a3204e2037a87b07796265e9cd5674bd877743f/Group-830.png" /> https://mariafraga.me/Hello-Feedback Fri, 21 Jul 2023 17:13:23 +0000 Maria Fraga https://mariafraga.me/Hello-Feedback <img width="72" height="72" width_o="72" height_o="72" data-src="https://freight.cargo.site/t/original/i/5187710afbf9471c9b11aab4db6b75e834ecb7012dbf9478c139553a91b37f7d/iconoir_cancel.svg" data-mid="186164457" border="0" data-scale="3" data-icon-mode src="https://freight.cargo.site/w/72/i/5187710afbf9471c9b11aab4db6b75e834ecb7012dbf9478c139553a91b37f7d/iconoir_cancel.svg" /> <img width="3000" height="2250" width_o="3000" height_o="2250" data-src="https://freight.cargo.site/t/original/i/1652b6002d9688f0043ca39420bfe79ca924ff33d9f6aecf906735c1194f5161/Cover_Mercer.png" data-mid="210797833" border="0" src="https://freight.cargo.site/w/1000/i/1652b6002d9688f0043ca39420bfe79ca924ff33d9f6aecf906735c1194f5161/Cover_Mercer.png" /> 👋 Introduction This platform is the backoffice of the App HelloFeedback, an app used in enterprise environments to rate colleague’s values, such as proactivity, engagement and other assets. With this product, users are able to obtain analytics, manage access and define settings that will ensure the critically constructive communication between colleagues in the workplace, based on their experience, skills and teamwork abilities. My Role Responsible for research, conceptualisation, design and delivery of key modules and required features. The Team Me as Product UI UX Designer, 1 Project Manager, 3 Developers The Client Mercer Consulting Timeline Aug 2023 - Oct 2023 😱 Problem Statement Mercer Staff users found multiple issues when trying to succeffully complete their tasks within the backoffice Platform. 🔑 Design Process Starting by breaking down the briefing for the project, the research consisted in 1x1 interviews with 2 types of users - staff and managers, followed by the analysis of the collected data and supporting outputs. <img width="3872" height="1509" width_o="3872" height_o="1509" data-src="https://freight.cargo.site/t/original/i/e23ba1208ab3e821066b9305f4a34485526b26cb3e476dbc1362c96ce488d3b2/Mask-group.png" data-mid="210454708" border="0" src="https://freight.cargo.site/w/1000/i/e23ba1208ab3e821066b9305f4a34485526b26cb3e476dbc1362c96ce488d3b2/Mask-group.png" /> 🤔&nbsp;Breaking down the problem <img width="481" height="481" width_o="481" height_o="481" data-src="https://freight.cargo.site/t/original/i/d2a2e904aec2453f86080808c5e599cf4c5aaf6753e1237ad0cbb8927694251b/Mask-group-2.png" data-mid="201535661" border="0" src="https://freight.cargo.site/w/481/i/d2a2e904aec2453f86080808c5e599cf4c5aaf6753e1237ad0cbb8927694251b/Mask-group-2.png" /> UX StructureProduct Research Insights, user flows and wireframes considered as baseline for the product. <img width="481" height="481" width_o="481" height_o="481" data-src="https://freight.cargo.site/t/original/i/d7dde5706db52a38da90c8af14b036053a51b82172dceb39b3760686499412de/Mask-group-3.png" data-mid="201535662" border="0" src="https://freight.cargo.site/w/481/i/d7dde5706db52a38da90c8af14b036053a51b82172dceb39b3760686499412de/Mask-group-3.png" /> AccessibilityData visualisation Restructure and redesign of the data visualisation components. &nbsp;<img width="481" height="481" width_o="481" height_o="481" data-src="https://freight.cargo.site/t/original/i/ca9223857e11a5433e489f8d328f133b9c927f37490c4a9a5a87a33e3cd934c7/Mask-group-1.png" data-mid="201521363" border="0" src="https://freight.cargo.site/w/481/i/ca9223857e11a5433e489f8d328f133b9c927f37490c4a9a5a87a33e3cd934c7/Mask-group-1.png" /> AestheticUI Consistency Style Sheet and product family UI. <img width="481" height="481" width_o="481" height_o="481" data-src="https://freight.cargo.site/t/original/i/d451a0c3d877c594b37065fb48e6ed00b186a730138dcf85b31576f6b97ce601/Mask-group.png" data-mid="201535714" border="0" src="https://freight.cargo.site/w/481/i/d451a0c3d877c594b37065fb48e6ed00b186a730138dcf85b31576f6b97ce601/Mask-group.png" /> UsabilityOnboarding UX Transparency and accessibility throughout user’s interactions Product Research | UX StructureProblem Statement When logging into the platform, the users felt lost when trying to find the data that they required to succefully complete their task. How can we define a structure that highlights the main points of access while maintaining the sustainable integrity of the product? Research Methodology In the first stage of research, while being interviewed, users shared their main tasks and goals within the platform and what frustrations they carried throughout. As a follow up, a survey that featured a ranking system detailed a series of actions that were currently performed in the platfotm. This survey was submited and shared with the users and external stakeholders so that the main actions could be prioritised and later analysed through user flows. <img width="1870" height="1581" width_o="1870" height_o="1581" data-src="https://freight.cargo.site/t/original/i/b10b167d07d25cb63ba66c86b8a69c6e124e693bc0cd86ed3bcef9f59a8d622c/Group-1059.png" data-mid="210510878" border="0" src="https://freight.cargo.site/w/1000/i/b10b167d07d25cb63ba66c86b8a69c6e124e693bc0cd86ed3bcef9f59a8d622c/Group-1059.png" />Opportunity Scoring | Main Accesses The complete survey detailed each action that was available within these accesses, which allowed the proritisation of actions, later adapted into user stories with technical requirements and further specifications. <img width="1882" height="1581" width_o="1882" height_o="1581" data-src="https://freight.cargo.site/t/original/i/c935b25753b0d41f3923cd01a868b5b7e7f93b219bade5d05bc8e421f9210070/Group-1055.png" data-mid="210509372" border="0" src="https://freight.cargo.site/w/1000/i/c935b25753b0d41f3923cd01a868b5b7e7f93b219bade5d05bc8e421f9210070/Group-1055.png" />User Flow Diagram | Assign New Role In the mapped user flow, used as an example, we were able to detect where redundant actions could be occurring. This led to the need to analyse the user’s journey in detail. <img width="1851" height="1597" width_o="1851" height_o="1597" data-src="https://freight.cargo.site/t/original/i/e22b34a66167d37af11f383613eeffa1c9e288d342312b9d9a11a03a1ec0a210/Group-1054.png" data-mid="210509370" border="0" src="https://freight.cargo.site/w/1000/i/e22b34a66167d37af11f383613eeffa1c9e288d342312b9d9a11a03a1ec0a210/Group-1054.png" />User Journey | Assign New Role In the mapped user journey, we consider the feelings, pains, opportunities and insights that occur during the process. This exercise was repeated for actions that carried frustrations for the users within the platform. <img width="1870" height="1581" width_o="1870" height_o="1581" data-src="https://freight.cargo.site/t/original/i/8fd2e4a5ef4ada029b95f619a8ede5fd9761562fa8ea720d0b6bb6b8159aabee/Group-1057.png" data-mid="210510029" border="0" src="https://freight.cargo.site/w/1000/i/8fd2e4a5ef4ada029b95f619a8ede5fd9761562fa8ea720d0b6bb6b8159aabee/Group-1057.png" />Product Map&nbsp;| Navigation System To create the structure for the navigation system, we constructed an hierarchy that translated the main points and the actions that were discovered to be the most valuable for users within each category. <img width="3876" height="1510" width_o="3876" height_o="1510" data-src="https://freight.cargo.site/t/original/i/1eaa45443651c5d419692b6452b7ec2137bfef7e17d70b786aacd1e0361f3cd5/Group-1060.png" data-mid="210511269" border="0" src="https://freight.cargo.site/w/1000/i/1eaa45443651c5d419692b6452b7ec2137bfef7e17d70b786aacd1e0361f3cd5/Group-1060.png" /> What we learned After sharing the UX structure prototypes with the users and external stakeholders, the feedback that was gathered revealed an improvement in the navigation within the platform, with most of the users showing the ability to finish their tasks without requiring any guidance or feeling doubt during the process. For the next stages of the design process, some small changes were expected in the structure of the platform as the requirements were revised for the second stage of the project, considering the sustainability and consistency of the product family as a priority. Data Visualisation | Accessibility Problem Statement Live Analytics concerning the actions that took place by the users on the app Hello Feedback were recognised as one of the main action on the platform, being prioritised by all types of users. However, the readability of such data was compromised on the current UI. How can we clearly highlight this valuable data and make it accessible to all types of users? Research Methodology Through the collected insights from the users and the analysis of the overall experience within the platform, the next stage of the design process consisted in the redesign of the data components according to the user’s needs. Data visualisation can be expressed in different formats, per example, charts are a common way of expressing data, as they depict different data varieties and allow data comparison. In each method, application of color accents, iconography and other types of accents allow the data points to be recognised by the users instantly, making the information easier to process.&nbsp; <img width="3873" height="1504" width_o="3873" height_o="1504" data-src="https://freight.cargo.site/t/original/i/5bb3500c74585fca703ce4f703d545a18378d200b07f87ddb2b285e695e06343/Group-1061.png" data-mid="210511343" border="0" src="https://freight.cargo.site/w/1000/i/5bb3500c74585fca703ce4f703d545a18378d200b07f87ddb2b285e695e06343/Group-1061.png" />Previous Data Visualisation | Main Dashboard For the correct implementation of each method of visualisation, it’s imperative to consider the accuracy and helpfulness of the data in display, carefuly choosing which method can sustainably showcase the necessary information to the users. <img width="1903" height="1508" width_o="1903" height_o="1508" data-src="https://freight.cargo.site/t/original/i/4b7464db3071a24c6dcd4628efafeedd2b3e05e6ebcde7142dfa53d0caf0fc2b/rows.png" data-mid="200749636" border="0" data-scale="97" src="https://freight.cargo.site/w/1000/i/4b7464db3071a24c6dcd4628efafeedd2b3e05e6ebcde7142dfa53d0caf0fc2b/rows.png" />Tables visualisation | Wireframes Tables were re-constructed to be responsive, readable, sortable and functional. The search engine was also optimised so that would offer recommendations based on the input - smart search. <img width="1975" height="1507" width_o="1975" height_o="1507" data-src="https://freight.cargo.site/t/original/i/5499c29f41347c1204f4c48858921cfe5b9992d4c94ae3aecff4579c0d52ea02/cards.png" data-mid="200749637" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/5499c29f41347c1204f4c48858921cfe5b9992d4c94ae3aecff4579c0d52ea02/cards.png" />Graphs &amp; Lists | Structure &amp; UI For graphs, the different methods of data visualisation were reconsidered, as in type of data and chart. Lists were also improved to increase their readability and overall accessibility. <img width="3872" height="1504" width_o="3872" height_o="1504" data-src="https://freight.cargo.site/t/original/i/a2b58fc64d48fc4f1a714e7e959581955b2cf612582130d18750c9778dfb7f0b/Group-1064.png" data-mid="210707615" border="0" src="https://freight.cargo.site/w/1000/i/a2b58fc64d48fc4f1a714e7e959581955b2cf612582130d18750c9778dfb7f0b/Group-1064.png" />Data Visualisation | Progressive Disclosure What we learned As we considered the scalability of the data, anticipating user needs on data depth, complexity, and visualisation on different devices, the components that were previously created for the platform suffered a 360º approach, adapting each point of data access to the type of data visualisation that would correctly and effectively communicate the desired information, considering their visibility, methodology and behaviour. UI Consistency | AestheticContext The App Hello Feedback was designed in 2022, featuring design elements and colour schemes that were only applied to the app itself. When developing the Backoffice platform, a style sheet was designed so that both products subsist as one, by not only sharing data but a design system. <img width="1871" height="1581" width_o="1871" height_o="1581" data-src="https://freight.cargo.site/t/original/i/8d5c2fbe455f620da0bc0b12366116376cb1b50474c93ca984509e62a2e93e78/app-UI.png" data-mid="200756828" border="0" src="https://freight.cargo.site/w/1000/i/8d5c2fbe455f620da0bc0b12366116376cb1b50474c93ca984509e62a2e93e78/app-UI.png" />Hello Feedback App | Main App <img width="1920" height="1585" width_o="1920" height_o="1585" data-src="https://freight.cargo.site/t/original/i/19e4ff18aee3e5159ab001dab4e7c9286392ec145aca1d8c50c7d2b014567e06/style.png" data-mid="200756823" border="0" src="https://freight.cargo.site/w/1000/i/19e4ff18aee3e5159ab001dab4e7c9286392ec145aca1d8c50c7d2b014567e06/style.png" />Hello Feedback | Style Sheet <img width="3873" height="1311" width_o="3873" height_o="1311" data-src="https://freight.cargo.site/t/original/i/7d6ba4a72012c2890da217bdeefe8d79038a77c77031887d12bf000006989c45/new1.png" data-mid="210781016" border="0" src="https://freight.cargo.site/w/1000/i/7d6ba4a72012c2890da217bdeefe8d79038a77c77031887d12bf000006989c45/new1.png" />Hello Feedback | UI Components Onboarding | UsabilityContext When optimizing the interactions within the platform, one of the concerns was maintaining the clarity in each action conducted by the users&nbsp;The concept of UX onboarding includes several methods that assure transparency and usability are privileged in the design process, carried out through the creation of visual prompts that allow users to receive feedback of the actions that they follow through in the platform. UX Onboarding | Empty Slate UX Onboarding | Pop Up Alert Data &amp; Results | Feedback Considerations Following the delivery stage of the project, metrics showed an increase in usability, engagement and accessibility. Users feedback also reflected a positive engagement with the product and the developed features. <img width="1918" height="1367" width_o="1918" height_o="1367" data-src="https://freight.cargo.site/t/original/i/86102d10c76604416ca757169257c4381d67f521dea7101aa0ad31e7984167b9/Group-842.png" data-mid="201794175" border="0" data-scale="87" src="https://freight.cargo.site/w/1000/i/86102d10c76604416ca757169257c4381d67f521dea7101aa0ad31e7984167b9/Group-842.png" /> <img width="1951" height="1391" width_o="1951" height_o="1391" data-src="https://freight.cargo.site/t/original/i/449867c7c93dc9123645d899faa4ef675fe4f840d4990993cfaedd85efa55024/Group-843.png" data-mid="201794174" border="0" data-scale="88" src="https://freight.cargo.site/w/1000/i/449867c7c93dc9123645d899faa4ef675fe4f840d4990993cfaedd85efa55024/Group-843.png" /> <img width="2690" height="2018" width_o="2690" height_o="2018" data-src="https://freight.cargo.site/t/original/i/21aae9e18fe514fd1683afec8645e38e48dcddfdbf66ab029ec36a98a75ed422/Desktop-Mercer.png" data-mid="186060417" border="0" src="https://freight.cargo.site/w/1000/i/21aae9e18fe514fd1683afec8645e38e48dcddfdbf66ab029ec36a98a75ed422/Desktop-Mercer.png" /> https://mariafraga.me/KLx-Website-1 Fri, 21 Jul 2023 17:13:23 +0000 Maria Fraga https://mariafraga.me/KLx-Website-1 <img width="72" height="72" width_o="72" height_o="72" data-src="https://freight.cargo.site/t/original/i/5187710afbf9471c9b11aab4db6b75e834ecb7012dbf9478c139553a91b37f7d/iconoir_cancel.svg" data-mid="186165085" border="0" data-scale="3" data-icon-mode src="https://freight.cargo.site/w/72/i/5187710afbf9471c9b11aab4db6b75e834ecb7012dbf9478c139553a91b37f7d/iconoir_cancel.svg" /> <img width="3000" height="2250" width_o="3000" height_o="2250" data-src="https://freight.cargo.site/t/original/i/b7a5b408aa2ac05479a9e83b7928985f27aa655db881c75dcb554d7d06a1cc10/Cover_new.png" data-mid="210789625" border="0" src="https://freight.cargo.site/w/1000/i/b7a5b408aa2ac05479a9e83b7928985f27aa655db881c75dcb554d7d06a1cc10/Cover_new.png" /> 👋 Introduction From the Crédit Agricole Group, KLx is an IT consulting company that focuses on banking &amp; fintech industry solutions. To communicate their technological focus and human engagement, we created an universe were people and tech come together. Design Process Ideate, define and design solutions for the requisites developed with the stakeholders of the project. The team Me as Product UI UX Designer, 2 Developers, 1 Project Manager The Client KLx IT Consulting | https://www.klx.pt Timeline December 2022 - June 2023 🔑 Design Process Composed by two key phases of the product design process, the double diamond allowed the team to align goals for each sprint with its stakeholders. This process was accompanied by daily meetings, sprint overviews with design review sessions and user insights. <img width="3871" height="876" width_o="3871" height_o="876" data-src="https://freight.cargo.site/t/original/i/d2db0bfd1b2b63fe6265c44aa25718ef7e1bacbcd4e28dadda3c2138d6c4d91a/double.png" data-mid="202571269" border="0" src="https://freight.cargo.site/w/1000/i/d2db0bfd1b2b63fe6265c44aa25718ef7e1bacbcd4e28dadda3c2138d6c4d91a/double.png" /> 🤔 Design Process Stages <img width="481" height="481" width_o="481" height_o="481" data-src="https://freight.cargo.site/t/original/i/629ea12a0381a6425eee22b0cd2bbd027ca65ca647d035efe7071afca7391b93/Mask-group.png" data-mid="202648111" border="0" src="https://freight.cargo.site/w/481/i/629ea12a0381a6425eee22b0cd2bbd027ca65ca647d035efe7071afca7391b93/Mask-group.png" /> First DiamondResearch &amp; Define Foundational research to define the scope and product requirements <img width="481" height="481" width_o="481" height_o="481" data-src="https://freight.cargo.site/t/original/i/25f0214cef9d6035f51e2da1bbddbace394108171a762346b6864f194d5036ab/Mask-group-1.png" data-mid="202648112" border="0" src="https://freight.cargo.site/w/481/i/25f0214cef9d6035f51e2da1bbddbace394108171a762346b6864f194d5036ab/Mask-group-1.png" /> Second DiamondDevelop &amp; Deliver Design wireframes, final UI and handoff files for the project at hand Research &amp; Define | First DiamondContext The Discovery phase was composed by foundational research based on existing data, metrics and competitor analysis for a better understanding of the market. After the first stage was complete, the define stage which was composed by different methodologies with the goal of defining the product requirements and the scope began. <img width="2547" height="1695" width_o="2547" height_o="1695" data-src="https://freight.cargo.site/t/original/i/e1ad23304894594ad171015db3dfca1f688ca15eadd2a1b8eba771a54f5153cf/product1.png" data-mid="202571444" border="0" src="https://freight.cargo.site/w/1000/i/e1ad23304894594ad171015db3dfca1f688ca15eadd2a1b8eba771a54f5153cf/product1.png" /> <img width="2527" height="1695" width_o="2527" height_o="1695" data-src="https://freight.cargo.site/t/original/i/f51f55b17e49a5862c32cefab027501114b907389b8d43f4b9719322feff17d1/product2.png" data-mid="202571445" border="0" src="https://freight.cargo.site/w/1000/i/f51f55b17e49a5862c32cefab027501114b907389b8d43f4b9719322feff17d1/product2.png" /> The Scope A new KLx website that inspires change in the banking sector through technological endorsement, attracting new talent and strengthening their core bonds. A product that is designed &amp; structured for the next years to come without the risk of carrying outdated information. Develop &amp; Deliver | Second Diamond Context The next stage consisted on the development of the structure of the product. In this stage, the team focused on the creation of the map of the website, the definition of flows whenever an action is expected and the design of the wireframes that embody these processes. <img width="3891" height="1505" width_o="3891" height_o="1505" data-src="https://freight.cargo.site/t/original/i/b9dcf35eef737afdf024b2bcfda020fd496ddbdbc766195ccfb8cb71b41a88a8/wireframes.png" data-mid="202571570" border="0" src="https://freight.cargo.site/w/1000/i/b9dcf35eef737afdf024b2bcfda020fd496ddbdbc766195ccfb8cb71b41a88a8/wireframes.png" /> <img width="3871" height="1760" width_o="3871" height_o="1760" data-src="https://freight.cargo.site/t/original/i/98fd66403119401e9816ae36bb746c581db86937e5c06f93b50d2b702aa19529/screens.png" data-mid="202571579" border="0" src="https://freight.cargo.site/w/1000/i/98fd66403119401e9816ae36bb746c581db86937e5c06f93b50d2b702aa19529/screens.png" /> <img width="2523" height="2003" width_o="2523" height_o="2003" data-src="https://freight.cargo.site/t/original/i/d12274c844214c726199ab4a4e5c63ec2b3a72030f7c2473ed7b47a05ba6f684/mock2.png" data-mid="202571583" border="0" data-scale="91" src="https://freight.cargo.site/w/1000/i/d12274c844214c726199ab4a4e5c63ec2b3a72030f7c2473ed7b47a05ba6f684/mock2.png" /> https://mariafraga.me/Sign-Up-Form Mon, 24 Jul 2023 11:00:19 +0000 Maria Fraga https://mariafraga.me/Sign-Up-Form <img width="72" height="72" width_o="72" height_o="72" data-src="https://freight.cargo.site/t/original/i/5187710afbf9471c9b11aab4db6b75e834ecb7012dbf9478c139553a91b37f7d/iconoir_cancel.svg" data-mid="186165306" border="0" data-scale="3" data-icon-mode src="https://freight.cargo.site/w/72/i/5187710afbf9471c9b11aab4db6b75e834ecb7012dbf9478c139553a91b37f7d/iconoir_cancel.svg" /> <img width="1576" height="1182" width_o="1576" height_o="1182" data-src="https://freight.cargo.site/t/original/i/c6a70942d9605fc4b7d22b9d829162aeb8740a683577858a632ce6118014c9ae/01.png" data-mid="185912702" border="0" src="https://freight.cargo.site/w/1000/i/c6a70942d9605fc4b7d22b9d829162aeb8740a683577858a632ce6118014c9ae/01.png" /> 👋 Introduction Created by Us is an Online Platform dedicated to connect humans through their experiences, goals and interests. By reaching out to people beyond the user's echo chamber, this platform allows its users to find meaningful connections that may or may not be romanticised, according to their preferences. Briefing This design is the first of the series Daily UI. As the name stipulates, this design was created in a a day, following the user flow of a Sign Up Form dedicated to an Online Platform. Design Process This project started with defining the functionalities and structuring the design with the actions expected in the product. The final UI respresents the use case that served as inspiration for this page. <img width="1576" height="1182" width_o="1576" height_o="1182" data-src="https://freight.cargo.site/t/original/i/84070dd75460f2a0c9ca7cde1db3e27c35799cfe4b379d3b579133db435b6012/02.png" data-mid="185912701" border="0" src="https://freight.cargo.site/w/1000/i/84070dd75460f2a0c9ca7cde1db3e27c35799cfe4b379d3b579133db435b6012/02.png" /> <img width="1576" height="1182" width_o="1576" height_o="1182" data-src="https://freight.cargo.site/t/original/i/762a44e7d0a8adbd38e4bf2761254dff39b90f7318061bd0460a5184d8a993ba/03.png" data-mid="185912703" border="0" src="https://freight.cargo.site/w/1000/i/762a44e7d0a8adbd38e4bf2761254dff39b90f7318061bd0460a5184d8a993ba/03.png" /> https://mariafraga.me/Social-Player Mon, 24 Jul 2023 09:07:58 +0000 Maria Fraga https://mariafraga.me/Social-Player <img width="72" height="72" width_o="72" height_o="72" data-src="https://freight.cargo.site/t/original/i/5187710afbf9471c9b11aab4db6b75e834ecb7012dbf9478c139553a91b37f7d/iconoir_cancel.svg" data-mid="186165424" border="0" data-scale="3" data-icon-mode src="https://freight.cargo.site/w/72/i/5187710afbf9471c9b11aab4db6b75e834ecb7012dbf9478c139553a91b37f7d/iconoir_cancel.svg" /> <img width="1576" height="1182" width_o="1576" height_o="1182" data-src="https://freight.cargo.site/t/original/i/622a74a917b6a29b7f3324bd1356352e36e5376bd9975a6bd5d8c7c6390d1ed7/Social-Player.png" data-mid="185909815" border="0" src="https://freight.cargo.site/w/1000/i/622a74a917b6a29b7f3324bd1356352e36e5376bd9975a6bd5d8c7c6390d1ed7/Social-Player.png" /> 👋 IntroductionWhen it comes to making friends, there is no better bond then sharing an interest. This Social Media App - Social Player - was created for people who listen first and then speak. By joining Social Player, users can connect through their playlists, which can be uploaded from any digital music service available. Briefing Social Player was designed for a combination of requisites from the Daily UI Challenge, formed by a Music Player, Settings Design, User Profile page and Social Share button. Design ProcessWhen analysing the diferent actions that the former requisites compiled, the concept of a social audio was the best product to display alternative components associated with the use case. <img width="1576" height="1182" width_o="1576" height_o="1182" data-src="https://freight.cargo.site/t/original/i/0c0373be7eb6e288164d2e15504fb82f07c1e6aa60a1ed61a9793c8bea433ee5/social-2.png" data-mid="185947763" border="0" src="https://freight.cargo.site/w/1000/i/0c0373be7eb6e288164d2e15504fb82f07c1e6aa60a1ed61a9793c8bea433ee5/social-2.png" /> https://mariafraga.me/Times-Three-App Mon, 24 Jul 2023 10:22:51 +0000 Maria Fraga https://mariafraga.me/Times-Three-App <img width="72" height="72" width_o="72" height_o="72" data-src="https://freight.cargo.site/t/original/i/5187710afbf9471c9b11aab4db6b75e834ecb7012dbf9478c139553a91b37f7d/iconoir_cancel.svg" data-mid="186165441" border="0" data-scale="3" data-icon-mode src="https://freight.cargo.site/w/72/i/5187710afbf9471c9b11aab4db6b75e834ecb7012dbf9478c139553a91b37f7d/iconoir_cancel.svg" /> <img width="1576" height="1182" width_o="1576" height_o="1182" data-src="https://freight.cargo.site/t/original/i/79ed7dd6976f2d05fc75830c08a0a1e49d810119284c8f9b072db541889ade94/Times-Three.png" data-mid="185910378" border="0" src="https://freight.cargo.site/w/1000/i/79ed7dd6976f2d05fc75830c08a0a1e49d810119284c8f9b072db541889ade94/Times-Three.png" /> 👋 IntroductionFacing the new age of widespread AI tools such as chat GPT, designed to get users to jump through challenging tasks without much thought, an issue is created when logic and thought are not only a task but means for knowledge to be formed. Times Three is an AI powered Tool that is designed to help with Academic studies, approved for Acadameic Usage without compromising the learning process. BriefingThis design is part of the Daily UI Challenge - Design an app Icon. With this briefing, I was able to create a concept that would fit today’s social issues and target an user archetype - college students. Design ProcessAs part of the design process, I created a landing page that showcases the main points of the use case as well as a short Logo Guideline wich specifies the style and usages of the design. <img width="1576" height="1182" width_o="1576" height_o="1182" data-src="https://freight.cargo.site/t/original/i/74f68295516bbe0874c07c06c491ecf6fddf944f26573d0ce0b52deff3e445b7/o4.png" data-mid="185947559" border="0" src="https://freight.cargo.site/w/1000/i/74f68295516bbe0874c07c06c491ecf6fddf944f26573d0ce0b52deff3e445b7/o4.png" /> <img width="1576" height="1182" width_o="1576" height_o="1182" data-src="https://freight.cargo.site/t/original/i/b9e59ab139ce3c9e744796a52187c506d193d5adef6cc7c56aabe6d28b0a3913/04ui.png" data-mid="185947611" border="0" src="https://freight.cargo.site/w/1000/i/b9e59ab139ce3c9e744796a52187c506d193d5adef6cc7c56aabe6d28b0a3913/04ui.png" />