︎

Hello 👋️ I’m Jessica,
NYC based Product Designer and Creative Technologist

I solve problems through product building and management with my interdisciplinary and transdisciplinary practice which involves computing, design, art, and business. 

👾 tech         💭 design                🎮 media             💸 business


Select Projects

I bridge the gap between product and experience design.

My work is at the intersection of emering media and purposeful applications. 


PRODUCT SERVICE DESIGN ⎤
Design + Tech ⎤
Management ⎤

MI: Mycelium Intelligence “Exploring AI and Nature's Network."

June 2024

This installation showcases the parallels between mycelium networks and artificial intelligence, emphasizing connectivity, adaptability, and collaboration. Surrounded by the ambient sounds of these earthy-growing connections, participants interact with generative visuals projected on sinewave panels and bricks made from myco-foam, a material grown from mycelium. These panels serve as both visual displays and audio insulators, while the bricks demonstrate eco-sustainable building possibilities.

Experiential Designer
January 2024
Subject Matter Expert 
Organizational Design for Digital Transformation

Organizational Design for Digital Transformation online course by Cambridge Judge Business School, Executive Education
Jun-Sep 2023
Client: University of Cambridge - Judge Business School
thru Emeritus 

Role: Organizational Design for Digital Transformation Consultant
Social Return

Digital Strategy
Product Design
Design Thinking
Scroll through the slides for the excutive summary, perception on digital disruption, value proposition,  execution plan, digital value creation, market assessment, and methodology.
Jan-Mar 2017




     
                                      
Equitable AI CoP
May 2023 - Present 
The Equitable AI CoP fosters an inclusive global community of artificial intelligence (AI) entrepreneurs, developers, government officials, academics, international development practitioners, and private sector stakeholders with a vested interest in advancing gender-equitable AI. The program is implemented by the Atlantic Council’s GeoTech Center, which studies how technology can be used for the benefit of society and assesses the connections between technology and geopolitics.


The Equitable AI Community of Practice provides participants with spaces to build professional relationships with each other, share learnings and good practices for inclusive and equitable AI, and work together to brainstorm solutions to challenges in achieving gender equity in and through AI across international development.
Filed under:
AI, Tech, SME
SAGE
JAN - MAY 2021
Sage is an app that helps home cooks efficiently find ingredients in their city, including necessary information, and usage tips.
Case Study

ROLE Designer, Researcher, Ideation, Presenter, Result analysis
TOOLS Figma, UsabilityHub
PROCESSES
Design Thinking
Product Design
UX/UI Design
User Research
Personas
A/B testing
ADA


Pitch deck 

Scroll down for the full case study


Case Study



Objective

Ingredient Finding Mobile App


Outcome
Clickable Prototype

Process


Interviews


Personas



Design


MVP Features Matrix

Userflow Chart


Early sketches | Wireframes





A/B Testing


Usability Hub Tests
I tested a series of our wireframes with usability hub and asked the users to:
  1. navigate the wireframes
  2. complete the task of looking up the availability of ingredient “ajwain seeds” in the area.

Version 1.0.0

Version 1.0.1

Testing results

  • 80% of our user pool falls into the age range 20–40. This reflects our personas and target user age group, but we still included a few users from an older age group to consider these other perspectives.
  • The results offered us a few interesting discoveries. The majority of the users are able to navigate through the frames until the ingredient page, where they have to click on the drop-pin icon to find the ingredient on the map. Only 57% of the users on that page successfully completed this step. This suggests that perhaps the icon itself is not clear enough to communicate its function and that perhaps we would need texts to accompany the icon or a separate button with texts.
  • This has also brought to our attention that perhaps a shortcut button to the map search should be included on the home page, potentially in place of the “drop a pin” button. In addition, we also realized that the burger menu on the home page could also cause confusion because its function is unclear. It almost serves as a stand-in button-for-all at this moment. In our next iteration, we could consider replacing the burger menu with a user profile button. More iterations and tests are needed for us to fully determine the changes in this area.

Version 2.0


Info page                    List to share




Version 2.1

Onboarding



User testing synthesis



Testing results ︎︎︎

After reviewing the testing results, we decided on the following as the guiding principles for our design
Design Principles

Accessibility, Aesthetic- Confirmation & Consent, Usability Effect,  Hierarchy of Needs

Aesthetic Principles

Highlighting (such as making a button green to be pressed), Iconic Representation (icons across the page for similar indication of ingredient, map, home, back…)

Information Display Principles

Progressive Disclosure (For the ingredient page) Feedback Loop (adding info on map + reusing it in the ingredients search) Chunking (combining many units of information into a limited number of units or chunks, so that the information is easier to process and remember. ie: recipes, ingredients, cuisines)


Reflection


One of the challenges that have surfaced during the creation of our wireframes has been how best to approach (or avoid) design iteration without a clear brand identity. There is a balance to be struck between the focus on usability at this stage, and the need for certain basic design elements that can be used to inform the user in important ways through emphasis, de-emphasis, color coding, imagery, iconography, etc. It is rather easy to get hung up on even the most simple methods for indicating the brand mark (“why is it a circle?”), color hierarchy (“why green?”, “lets stay away from red”), tints, drop shadows, etc. Without a clearly defined brand identity, these decisions risk taking on a lot of undue significance and attention when it appears that our primary concern at the wireframe stage is with how well our product functions.
As designers, we always strive for the perfect combination of form and function (except when we don’t), but this is easier said than done, and so this feels like an important inflection point.
A Matchbox Dream

Immersive experience
Projection mapping
Interaction design

Apr - May 2021
‘A Matchbox Dream’ immersive experience lies somewhere between dreams and reality. Intense and colorful visuals portraying the vivid dreams one gets, with the possibility of staying in the moment by interacting with the surrounding environment through touching surfaces that activate light and sound. Entering a space of dream and reality immerses the participant in the built environment and set design elements.



Spring 2021
Created for MFA DT projection mapping studio




Installation Description


Concept
The installation is a depiction of the in-between space between dream and reality. The aim is to have the participant immersed in the dreamscape while experiencing reality through physical elements (interactive sculpture, headpiece, interactive frame, hologram window). The physical elements are interactive, further playing on the duality of the real and the virtual.

Description

This projection focuses on 3 main elements:
Projected visuals
Interactive objects/surfaces
Physical set design
 
Interactive

Interactive Objects:
Sculpture
Frame
Art piece

Worked with Bare Conductive Arduino MP3 Touch Board, conductive paint,copper wires sticker, mesh textile, white spray paint, and silver colored paper, boxes, paper printouts, other set design elements such as a long mirror, peacock feathers, and rose gold decorative curtain. Added a headpiece used on top of a styrofoam head which serves as a face.

Created a big 3 dimensional sculpture to give the space more life and depth.

Using the MIDI Bare conductive for interactivity and initiating color changes and animation. By touching a surface, it will activate a light trigger through madmapper. In addition, sounds through the microphone trigger animation on a white surface, using Mad mapper. 
I designed and printed out directive notes for the user to “Touch Here” and “Explore”. Positioned them beside trigger touch points.

Including a 3D element in the space, a sculpture I created and added my ‘Future Earth - 2019’ headpiece on top of it. The headpiece contains built in light. The sculpture has an extension spot in front of it, which is connected to an arduino touch board which is in turn connected to MadMapper and causes an animation to play on the styrofoam head.

I also created 2 touch spots on a frame and hung it up on the wall. Touching any of the 2 black painted circles will in turn cause a flowy animation to begin playing inside the frame. 

As for the art piece, an animation plays on its surface when speaking into the microphone.

Visuals 
I used 6 originally created animations.

Hologram on the window using mesh.

I created all my animation assets on After Effects. Used bright, warm colors: yellow, orange, blue, pink, red, and green.

Media


Projection mapping immersive installation with interactive elements.


Installation plan



Tech diagram

Equipment list

  • BenQ Projector x1 (3200 ANSI Lumen High brightness and 13,000:1 High Contrast)
  • Bare Conductive MP3 Touch Board x1
  • Mesh screen
  • Copper wire tape
  • Conductive paint
  • Shure SM58 Microphone - USB cable
  • Speaker - Amazon Echo
  • Laptop
  • Ambient light x1
  • Medium projector tripod
  • Lightning to HDMI adapter
  • HDMI Cable
  • Micro Usb 2.0 to USB cable
  • Cable connectors
  • Pro Sony camera
  • Iphone camera
  • Go pro camera
  • Samsung phone camera
  • Phone tripods x2


Set Design

  • Own creation headpiece - Future Earth 2019
  • Styrofoam head
  • Peacock Feathers
  • Wall frame
  • Decorative Silver paper
  • Boxes
  • Crepe paper
  • Rose Gold Decorative Curtain
  • White medium box
  • Printouts / White paper
  • White spray paint
  • White sheets x2
Impact Entrepreneurship Fellowship

Design Thinking
Product Design
Entrepreneurship
Exploring the challenge of "How might we help enhance resource flows to support (immigrant) artistic communities in NYC?" through design thinking, equity-centered design, research, data analysis, personas, ashoka innovation landscape, systems map, theory of change, and value proposition map.

Sep - Dec 2020
Supporting Immigrant Artists Impact Project  





Case Study


The Challenge

The research started off by a different challenge statement which was questioned and refined until I came to the current “how might we?”

Did many iterations on the questions I assumed there's a need to solve and resorted to the current after identifying potential areas with challenges

I narrowed the scope down to immigrant artistsand did further refinement & research, which lead to identifying our key challenge areas
Exploring the challenge of "How might we help enhance resource flows to support (immigrant) artistic communities in NYC?"


This challenge stems from a variety of systemic issues that have prevented immigrant artists from gaining the physical resources, financial resources, and skill-based resources they need to succeed and thrive.

Spaces support
as in places to perform, places to work, places to live, places to exhibit
Financial
Monetary day-to-day finances, or project financing
Economic: as artists are often not seen as economic drivers in society, hence they are often left out of the decision making process to "fund".
Closing the gap of finding access to innovative financing mechanisms for funders
Skills based support
Understanding the industries within the arts & culture and how they need help, which is more than competitions with a one time $ prize
Integrating them into the existing business landscape & providing them with the networks of support and opportunities for enhaning their skills of promoting themselves & their work.
Problem Analysis
Asked myself the question, why is this an unmet need?

Arts and culture is often left out of the initial funding process for public service and data is usually geared toward providing evidence through quantitative measurement
such as lives saved, people fed, number of houses created. There is little data centered on the need for arts and culture & the social resturn on investment in that area.

Mapping Empowerment
Barriers & Design Principles

My research design is based on and geared towards having community based decision making
and having an equitable process of data collection

How can we empower artists and what are the inter-relational elements that we can have some control on?

Theory of Change

Barriers
The barriers to this population are deep, and are embedded in systemic structures that fight against these populations to have sustainable futures in America. As it is, artists themselves in America are often not considered as "essential" when it comes to government funding, city planning, or business development. They struggle to meet basic needs and get access to resources. Many artists are considered "gig workers" often holding multiple jobs at a time that do not have benefits. They must pay for their own healthcare and find their own ways to save for retirement.
Funding sources are complicated and often require certain levels of citizenship that immigrant artists may not have. These populations might struggle with forming partnerships as there is a barrier between them and institutions that can be attributed to language barriers, conversation barriers, and just general access issues to these business populations. Furthermore, when the government or businesses are looking into who to accept into America, there is little data that proves the case of economic value through artists.

created these design principles in repsonse to the barriers that are facing immigrant artisits in general
creating support netwoks -- setting up a co-production/collaboration with existing business can help artists overcome the financial barrier of regular income
language barriers for immigrants artists and the way to overcome them would be by having access to sources in different languages
systemic government issues of funneling support and distrubution of funds from other entities

Leading to 3 main topics to tackle
How can we create more community centric networks of support for artists
How can we create a blended capital/finance model to help emerging artists to have more sustainable income
How can we provide security and a better standard of living and resources such as housing, insurance, visa (right to live and practice in US)?

Research Methods
I used a combination of primary sources through interviews of arts organizations and arts leaders in NYC as well as secondary research through data collected in NYC Open Access Data, New York City Department of Cultural Affairs, and articles/blogs on data collection in the arts
existing data, input from experts in the field
online research for existing organizations and efforts providing services, solutions, or support

Stakeholders in a nutshell
Arts and culture actors in New York City: musicians, museums, visual artists, literary artists, craftsmen etc. that need support with funding. Including small organizations and community led projects.
Policy makers or funders
Arts & arts support organizations fully or partially rely on funds from private and public institutions to carry out their activities.

Interviewees


Value Proposition Canvas


Equity-Centered Design

Machine Learning Stunning Afterglows
FEB-MAY 2021
Image Machine Learning training using StyleGan model. Python coding & Tensorflow
Filed under:
ML, Design, Coding

Overview

I’m working with my own photos of “sunsets” which I’ve taken over the years. These photos have been taken in several countries and regions in the world. Sunset time is special to me and it gives me hope of a day gone and a new day coming. It’s also very dreamy and romantic to see how the sky’s colors change. Most of the sunsets in NYC are beautiful and the colors are stunning especially when it turns pink but this is only because of pollution. The more the air pollution, the more the sky turns pink when the sun is setting.

I hope to use the machine learning from the colors of the sky at sunset time to show variations of patterns in relation to pollution, and also use these patterns to predict more beautiful sunset skies.

Concept Exploration

  • Air index quality affects afterglow colors in sunsets especially in populated and dense areas, where air pollution is higher.
  • Comparing and contrasting between lesser density areas and afterglow colors.
  • Leveraging this tool for creating unique stunning sunset backdrops for design.

Dataset


1st dataset: 1470 photos, 629 frames extracted from 2 videos using opencv [by Aarati Akkapeddi https://colab.research.google.com/drive/1WWHNG4YqGSHfIYIUrC2tmoPQ3HOgU--e]

I have 2 videos which I transformed to images to add to the dataset. In total I planned to have around 2000 images for lengthy periods of training.

This dataset included photos taken in the U.S (several states), Lebanon, Spain, France, Turkey

Resized to 256x256

All in jpg format



2nd dataset: 787 frames, taken in New York City on June 25, 2019

extracted from 2 videos using opencv [by Aarati Akkapeddi]

Resized to 256x256

All in jpg format


Training Process


  • I trained dataset 1 for 20 hours
  • Downloaded pkl files
  • Interpolation
  • Generated a new dataset with generate.py code and selected names it dataset 2
  • I started re-training on the same worksheet, trained dataset 2 for 16 hours
  • Interpolation
  • Then used the last pickle file from dataset 1 training (000266.pkl) to train it with dataset 2 images. (cross pollination). Used the learning from the last dataset onto the latest training.
  • Interpolation
  • Downloaded pckl file 000048 from the last combined training (14th).








Outcome 


Seeds from training dataset 1



Seeds from training dataset 2



Noticeable Outcomes

  • The Fine Styles — Color Scheme is preserved in outputs 1, 2, 3
  • There's adaptive normalization in 1 & 2
  • Comparison between the sunset output in Lebanon (mostly) and NY. Less dense areas were definitely lighter in sunset colors. While pink and orange were mostly in new york sunsets since the air is more polluted.
  • StyleGAN has generated realistic images
  • Slight loss in style and content in training 3


Further Development


  • I WANT TO INTERPOLATE USING DIFFERENT INPUTS AND MANIPULATE OUTPUTS USING EXISTING LEARNING TOOLS
  • EXPERIMENT INTERACTIVITY THROUGH PROCESSING - P5.JS
  • I AM DESIGNING SUNSETS, EACH DESIGN IS UNIQUE AND YOU CAN OWN IT

Applications to look into
  • Image Classification

Upload a picture, and the model tries to classify it depending on what it “sees” on the picture. This model uses transfer learning and is based on MobilenetV2.
  • Style transfer

Blending image style adding these sunset images as backdrops. Using image style to create a sunset.
  • Learning and experimenting with deep-learning challenges and approaches for sky images

First images sample


Process

I have a primary 870 images dataset. I began training with a portion of this set and hope to add all of the images to it.

I used the styleGAN training code and ran into a couple of errors in the first 3 trials after I finally was able to get an output.

The code is still running for a better outcome and I’ll upload more outputs in the upcoming week.


Early stage outcome 



We can notice the clarity of the images becoming better with time & getting closer from looking real.



The below image looks interesting. Since most of the time the sky is positioned upwards and it seems like there’s a typical way we see sunsets, yet here it’s kind of rotated. I’m searching for more interesting findings; in general the colors and shapes seem close to the reality of true sunsets.


Bibliography

A. Implementation and Concept Research


I- What dust and pollution don't do

It is often written that natural and manmade dust and pollution cause colorful sunrises and sunsets. Indeed, the brilliant twilight "afterglows" that follow major volcanic eruptions owe their existence to the ejection of small particles high into the atmosphere (more will be said on this a bit later). If, however, it were strictly true that low-level dust and haze were responsible for brilliant sunsets, cities such as New York, Los Angeles, London, and Mexico City would be celebrated for their twilight hues. The truth is is that tropospheric aerosols --- when present in abundance in the lower atmosphere as they often are over urban and continental areas --- do not enhance sky colors --- they subdue them. Clean air is, in fact, the main ingredient common to brightly colored sunrises and sunsets.


Afterglow colors are affected by smoke, air quality, and other factors. The stunning hues when affected by smoke are mostly pinkish

Source: https://www.spc.noaa.gov/publications/corfidi/sunset/#:~:text=Typical%20pollution%20droplets%20such%20as,are%20on%20the%20order%20of%20.&text=Similarly%2C%20the%20vibrant%20oranges%20and,more%20than%20soften%20sky%20colors.

II- Machine Learning which sunsets are considered beautiful from social media data


Source:
  1. https://twitter.com/Senor_Sunset
  2. Luminar: Sky replacement tool - AI Powered Tool - picture editor
  3. Adobe photoshop https://www.theverge.com/2020/9/21/21449124/photoshop-sky-replacement-tool-ai-machine-learning
  4. SunsetWx - Sunset and sunrise forecasts. Sunset & Sunrise Predictions: Model using an in-depth algorithm comprised of meteorological factors. https://sunsetwx.com/
  5. https://twitter.com/sunset_wx?ref_src=twsrc%5Etfw%7Ctwcamp%5Eembeddedtimeline%7Ctwterm%5Eprofile%3Asunset_wx&ref_url=https%3A%2F%2Fsunsetwx.com%2F
  6. Sunsets, Fraternities, and Deep Learning http://obsessionwithregression.blogspot.com/2016/05/sunsets-fraternities-and-deep-learning.html

Image-to-Image Translation with Conditional Adversarial Networks https://arxiv.org/abs/1611.07004


B. Air Quality Index - Pollution Levels NYC


Air quality index in NYC 5 and ozone at current concentrations in New York City. Health Department estimates show that each year, PM2. 5 pollution in New York City causes more than 3,000 deaths, 2,000 hospital admissions for lung and heart conditions, and approximately 6,000 emergency department visits for asthma in children and adults.



Get in touch for more info & resources on this project


Audio Reactive VJ

Projection Mapping, Audio Reactive, Design
Nov 2020


Interactive visuals

PROJECTION MAPPING

©2022 Jessica Jabr –  All Rights Reserved
Copyright of Original Works © 2022 Jessica Jabr

  Spotlight                          ︎ ︎ ︎ ︎︎