Work / Web

Managed and designed UI elements for the MO2 system using Figma. The design followed VueJs principles and remained up-to-date with code changes.This comprehensive Figma board encompassed an extensive array of assets, including color schemes named after the MO2 CSS variables, components featuring both light and dark mode versions, and an array of imagery and illustrations, providing a centralized design resource. + UI Library Overview

I successfully set up and maintained documentation for MO2, right within the project. This allowed our team to access it easily while working on new features. I tried out various Markdown frameworks like Fractal, Pattern Lab, and Storybook. But, the one that really clicked with MO2 and saved us from duplicating Vue.js components was VuePress. In this documentation, I also explain how to ensure accessibility for each component. This ensures that developers don't overlook this crucial aspect of the process.

Utilized Figma during the initial stages of developing new features for MO2. Created well-structured Figma boards presenting mockups, systematically versioned to track progress and retain previous solutions. Integrated detailed comments during collaborative meetings, outlining the desired functionality and how the tools should operate. These comments played a crucial role in the iterative design process, providing clear guidelines. These mockups established a strong foundation for the subsequent development phase, ensuring alignment of the design with project goals. + Figma Design Process

Worked on TicketWindowUX, a research project focused on simplifying live event streaming for local artists and event producers. The initial phase involved extensive meetings and iterative mockups to align with the client's requirements.Transitioned to web design, utilizing Bootstrap to facilitate future modifications by the developers already familiar with the framework. Used Adobe XD, HTML, SASS, and Bootstrap to create an intuitive solution, keeping in mind the project's short-term nature (approximately three months each). + Streaming Solution Overview

Worked on the short-term research project Heart-i CHF, an innovative platform designed to assist healthcare providers in monitoring patients with congestive heart failure. The app's goal was to facilitate the prompt and effortless collection of patient data using their smartphones. It allows patients to conduct daily check-ins and communicate with their doctors through instant messaging.I was involved in the second phase of the project, responsible for developing high-fidelity mockups, illustrations, and animations. Additionally, I undertook the task of designing the brand identity, ensuring it effectively represented the client's vision, especially since the first phase was highly technical, and they couldn't yet experience the product. + Design Evolution

This is a very interesting part of the work for me, as I’m the one designing and later building the views with VueJS. If I notice that a new UI element was created in the process and it will be used elsewhere, I create a VueJS component as a core with basic functionalities and all design structures, allowing developers to work on them later without worrying about breaking the design. This is also a crucial point for checking inconsistencies, working on accessibility, and conducting testing across various browsers and platforms. MO2 is designed for both dark and light modes. I faced the challenge of building the UI for both modes while following accessibility standards aiming for at least AA compliance and striving for AAA as much as possible. I also created the CSS variables and applied them throughout the system. + Design & Component Creation

Worked on HubSpot/Salesforce templates for email marketing and landing pages. Encountered a significant difference in the way templates functioned on each platform. To address this challenge, I developed basic HTML files that could be used on both platforms and ensured seamless usage across them. I also made sure that even users with limited knowledge of HTML/CSS could duplicate the templates and easily edit the content. HubSpot allowed for greater flexibility in creating templates, particularly with small components. As a result, the marketing team chose HubSpot as their main platform, given that it doesn't require any coding knowledge. + Template Integration

Worked on the second phase of InStream, a tool designed for homeowners to monitor their water usage and gain insight into water quality. This was a short-term project for research, they already had a brand identity and as the UI designer of the project I was responsible for building the views that were built utilizing Google Material Design framework. The main objective of this phase was to initiate data collection at the earliest possible stage. + UI Design Overview

Created well-structured graphs in SVG for development use in various parts of MO2. The first phase involved mocking up graphs while gathering feedback from PM and stakeholders. The second phase entailed creating prototypes so we could check with other internal users if the graph was somehow useful and clear. At times, I built them using Figma, while at other times, I created something in HTML/SVG/JS closer to the final product, enhancing interaction. + MO2: Interactive Graphs