francis nguyen

creative developer and data visualization specialist

Oblige

design • development

Experience the Tourne Jacket and other handmade products in collaboration with Oblige Seattle through their new website.

Atlas of Me

design • development

A Google Chrome extension that leverages cognitive cartography and creates personalized spatial analogies of unfamiliar distances, areas and locations.

Fridgit

design • development

Re-imagination of a smart refrigerator concept focused on reducing food waste and allowing users to make responsible decisions about foods.

Spacewar 2015

design • development

Live multiplayer game where players navigate ships around a central star's gravity well and try to shoot down other players. Placed at Facebook Hackathon Seattle.

Health Indicator Report

development

Analyzing and visualizing a dataset with R and D3.js to explore questions about Urbanization and Health Indicators in various countries.

Creative Developer, Research Assistant, Datavis Geek


Hi, I'm Francis. I'm a recent grad from the University of Washington where I studied a mix of engineering and design in the Informatics program with a focus in Human Computer Interaction. Currently, I'm a post-bac researcher in the UW DataLab working with Jessica Hullman.


I am passionate about the intersection of technology, data visualization, and education. More specifically, I’m interested in how data visualization and visual techniques (animation, color, etc.) increase human perception and aid human cognition and understanding of complex topics. I believe in the power of education and want to lend a hand in crafting the future of it.


Between school, spending time in cafes and being part of the local music scene, I love drinking/talking about coffee, discovering new music, and playing Super Smash Bros. Melee.


If you'd like to chat or if anything interests you, I'd love to hear from you.


LinkedIn / Resume


born in
Redmond, WA
house
current residence
Seattle, WA
spaceneedle
studied at
U of Washington
UW Logo
inspired by
Educators
Teacher
favourite coffee
V60 Pour Over
Hario v60
smash bros. main
Fox
StarFox Melee
favourite animal
Giraffes
Giraffe
currently reading
Book
Radius Banner

Radius

Building a concept re-branding of a familiar 90's children toy. UI-Engineering for a re-design of Skip-it for highly athletic young adults.

When

Summer 2015


Made With

jQuery, JS, GSAP, HTML/SASS, Grunt


More At

radiusathlete.com & vimeo

About

Process

Oblige Banner

Oblige

Conceiving a new brand and experience to a clothing designer.

When

Winter 2015


Made With

jQuery, JS, HTML/SCSS


More At

Live Site

About

Oblige is a clothing, accessory and experience design company based out of Seattle. Shortly after finding a manufacturer in Seattle and releasing a soft opening of their first product, the Tourne jacket, Oblige reached out to me to help them build an online web presense. I worked with them to develop and deploy an online shop and website as their main online touch point with customers to experience the brand and the products.

oblige-jacket-1 oblige-jacket-2 oblige-jacket-3 male-jacket-1 male-jacket-2 male-jacket-3

Various shots with the signature Tourne jacket.

Building Oblige

I discussed with one of the co-founders what they wanted the brand to exude. After seeing the jacket and some ideas for branding, we decided on sleekness, elegance, and inspiration. Using the jacket as a focal point, we choose to use a monochrome palette, thinking that accented hues would detract from the all-black products. Leveraging social media, word of mouth and FOMO to drive traffic to the website, the site was designed mobile first, relying entirely on scroll for the user to navigate through different images. The site was built to feature one product at a time, to focus on the high-quality, elegant feel of each individual product's design.

oblige-site

Choosing to build the page from the ground up, with minor plugins, I hosted the service on a Digital Ocean droplet, and leveraged some basic jQuery and HTML/SASS to put the site together, as I wanted to reduce load time as much as possible. For the carousel, I used a lightweight library called Sly.js, and utilized some basic scroll throttling from Underscore. For the same reason of keeping load time as low as possible, I chose to use SVGs and their correlating animations and transitions for many icons due to their lightweight file size. As to not utilize potentially laggy animations, I built out each SVG animation with CSS transitions and animations over JS based ones. The animations and motion design was configured in such a way to be as clean as possible, while still providing context to navigate from the splash page to the product product.

glasswing-oblige glasswing-oblige glasswing-oblige obligeteaser

Placeholder site and banner before official site launch.

Spacewar Banner

Spacewar 2015

Making a live, multi-player game with Socket.IO where players navigate around a gravity well and try to shoot down other players.

When

Spring 2014


Made With

Node.js, Socket.IO, jQuery


More At

Demo

20XX: Space Wars

In a future where dueling spaceships is a hobby... just kidding! Space Wars was originally a vintage vector graphics arcade game released in the 1970's. The game featured two players navigating a black screen, “space”, while attempting to shoot the other down with bullets. The main catch was a “star” in the middle, gravitating both players and bullets alike into the central black hole where they disappeared. As a result, players had to strategically aim and time shots as well as navigate around the star to hit their opponent.

spacewar1 spacewar2

Img courtesy of https://en.wikipedia.org/wiki/Spacewar_(video_game)

While this timeless rendition of Space Wars was originally designed for 2 players, my hackathon team and I decided to make this a much larger multiplayer experience at Facebook’s Regional Seattle Hackathon. Not only did we want to re-develop a browser version of the original, we wanted to see the ensuing chaos from having tens of players on screen. Utilizing Socket.IO’s support of web sockets, we connected up to 30 players concurrently at the hackathon. As one of the developers, I wrote the physics engine, helped on defining the packet protocol and some of the front-end work to render the spaceship shapes using HTML5 Canvas.

spacewar3

Process

Wanting to experiment with a new library at the time, we wrote a Node.js server to route a series of connections with web browsers via support from the JavaScript library Socket.IO. Socket.IO makes connection of web sockets remarkably easy, so we learned it pretty intuitively at the hackathon. Realizing we wouldn't have enough time to create a sprite sheet or use Unity, we employed HTML5 Canvas to draw the both the player and the bullets, and also built the physics and collision detection engines from scratch. In the time frame of the hackathon, we managed to create different game rooms via sessions, as well as implementing secure web sockets.

Whenever the player inputs navigation (arrow keys) or fires a bullet (spacebar), the web browser sends the server the throttled value of the key-press event. The server then processes the data and updates a “master” version of the game stored on the server. It then sends updates to each of the players involved, in order to guarantee that gameplay is synchronous. While this entire process occurs, the local players' inputs are updated on their client in order to provide a seamless user experience when dealing with latency.

Future Work

Though our team thought we would just work on the game as a part of the hackathon, we briefly brainstormed a list of things we would do differently, or features to build out. One of the biggest was improving the latency issues that we had. While the game worked fine locally on the same network with a large number of players, it would run many times slower given users were geographically further apart. Therefore, the most important algorithm that we wanted to implement was lag compensation. Should time allow and one of us decides to pull the project out to continue working on, lag compensation would be at the top of the list.

Atlas of Me Banner

Atlas of Me

Generating and presenting personalized spatial analogies to aid comprehension of unfamiliar measurements.

When

Spring 2016


Made With

d3.js, Leaflet, Google Chrome API, jQuery


More At

atlasofme.tk or Medium

About

How often do you encounter measurements while reading online news articles or other text documents? Imagine that today you encounter an article that describes forest fires breaking out in Spain just 4.3 miles from a well-known city. The reporter informs you that the fires have already consumed 5,000 acres of land. The fire sounds close to the city, and destructive, but how close, and how much destruction? Can you really relate to these statistics?

Designers and journalists often try to create spatial analogies to address these problems in understanding: re-expressing unfamiliar measurements in terms of measurements that are more familiar to their user. For example, a reporter might mention 4.3 miles is the distance from the University of Washington to the Space Needle, however if you are not familiar with Seattle, you will have no idea what these benchmarks mean! This is because our experience of space is individualized.

To scale spatial measurement analogies to each individual person, I helped develop a chrome extension, Atlas of Me. It generates spatial analogies for a user based on an address that they specify. The extension identifies measurements and country measurement, and provides the spatial analogy when the user clicks on any particular measurement. As one of the researchers on the project, I collaborated with Yeaseul Kim and Jessica Hullman to implement our Flask backend API and chrome extension interface.

Distance analogies for different areas.

Distance analogies for a user in New York City, Berkeley CA, and Detroit MI.

How People Experience Space

To design Atlas of Me, we had to understand what makes spatial analogies useful. Through consulting research on the psychology of space, known as cognitive cartography: the study of how we experience and build mental models of spatial information. The work indicates the importance of landmarks necessary since we rely on them for for orienting and navigating in space.

To form the set of landmarks generally significant to users, we scraped around 240,000 locations through Yelps API. This gave us names and latitude and longitudes of locations which provides distance landmarks for us, landmarks used to generate distance analogies, say 4.3 miles or 800km. For area analogies, we decided to focus on other types of landmarks: public parks, campgrounds, botanical gardens, arenas and stadiums from our Yelp dataset. We also added US States as many US citizens have some understanding of their own state and surrounding states in terms of area.

Map Data

U.S. maps depicting all landmarks (left) and area landmarks(right) in our dataset.

Visualizing the Analogies

Finally, after aggregating all of our distance and area landmarks, we present the best analogy for each measurement and location that Atlas parses in an article. In order for the user to contextualize their distance analogy, we display the submitted location of the user and the selected landmark. For the distance analogies, we decided to use Leaflet to generate the map. This allows us to use our predefined latitude and longitude locations that were scraped via the Yelp API. For our area analogies, we present the landmark’s area and polygon using D3.js.

Area Analogies

A text article containing a distance, alongside three personalized spatial analogies generated by for a user in San Jose, Seattle, and Chicago

Area Analogy 1 Area Analogy 2

An area analogy reexpressing 1,600-acre for a user in Seattle and an area analogy of France for a user in California. The area of France is reexpressed in terms of the area of the user’s state.

Fridgit Banner

Fridgit

Designing a solution to food waste and energy conservation, allowing users to make better decisions with how they store and use food.

When

Winter 2015


Made With

jQuery, JS, HTML/SASS, Illustrator, Sketch


More At

Live Site

About

Fridgit is a smart refrigerator and companion mobile app designed to assist users reduce their food waste and encourage them to make responsible decisions about the foods they have. Fridgit is a project built for a computer science HCI class at UW where my group and I were tasked with designing a solution to food waste.

Having never formally learned the iterative design process before, I used the class as an initial foray into the field of human centered design, where I focused on user research, visual design, and UI engineering. I designed various concepts and visual content for the project and helped lead the other members of my group through the design process. I worked alongside three computer science students who were all interested in learning more about design.

Fridgit Render

Problem

According to Natural Resources Defence Council, 40 percent of food in the United States today goes uneaten. Americans throw out the equivalent of $165 billion each year. This includes leftovers getting spoiled, fresh produce and other processed goods. Many people usually forget about the foods that they have, don’t know much about proper food storage, or end up buying too much food to consume themselves.

After some initial research and digging around, we found that American households waste around 25 percent of the food products they buy. Many people usually forget about the foods that they have, don’t know much about proper food storage, or end up buying too much food to consume themselves.

Process

Without much understanding of the knowledge of food storage and food waste in households, we interviewed students and young working professionals and performed contextual inquiries in their homes to get a better idea of their needs, concerns, and problems. This proved extremely informative, as each provided us access to their refrigerators and food shelves, walking through them with us and describing their thoughts behind each food item.

We had each user answer a semi-structured interview to see what kind of problems they were already thinking of and to see if we could dig up any underlying assumptions in how they viewed the problem of food waste. We asked questions of how often they threw out food, and for what reason. We asked for walkthroughs of their pantry and the schedule of an average week of eating, cooking and storing food.

We discovered some key themes behind food storage and food waste: users are forgetful of their current inventory and often buy food they already had, users are generally uneducated regarding food storage, and are unsure of how long food can keep without spoiling. We identified this as a intention-behaviour gap; people don’t intend to waste food, but a mixture of forgetfulness and context made them waste food. We used these insights to design our app and fridge mechanics.

Fridgit Process 1

Sketches, storyboards, initial paper prototypes

How it works

Two internal cameras and weight sensors are used inside the Fridgit to dynamically update its inventory on an embedded computer. Fridgit also tracks how long food items have been in the fridge, how long they have until they spoil, food usage statistics, and features a manual add feature when adding leftovers or take-out foods. The companion app auto-updates a shopping list of food items when Fridgit notices that you’re running out of a particular food.

Final Product

Fridgit Phone 1 Fridgit Phone 2 Fridgit Logo Fridgit Design Guide

Health Indicator Report

Analyzing and visualizing a dataset with R and D3.js to explore questions about Urbanization and Health Indicators in various countries.

When

Spring 2014


Made With

D3.js, R, HTML/SCSS


More At

Demo

Mortality rates, access to affordable healthcare, gross national income (GNI), and the enrollment rates of tertiary education facilities are very important to the welfare of a state, but how much do these indicators vary in developed versus developing nations? Working on this project with 3 other students, we chose to investigate this question further by looking at data from the World Databank. Specifically, data was gathered from 10 different countries - 5 developed and 5 developing, and we tracked 9 indicators, including Total Urban/Rural population, mortality rates, and GNI.

When first coming across the massive dataset, the first thing on the agenda was to get comfortable with the data. It was crucial to know what data was missing, which indicators were necessary, and how to approach the data. We proceeded to scrub the data of null values as they would affect statistical tests, and organized the data into separate CSV files for each country and into one large master dataset. I imported them all into R to run both general statistical summaries and correlation tests. We then took each of the indicators and plotted the correlation matrices between each of them.

For the rendering of initial exploratory charts, I found that keeping the relevant countries in a master dataset was a more effective method for generating charts. By adding extra contextual information like the country name as well as whether it was developed or undeveloped, it was easier to visualize the categorical differences in the data. Eventually, in an attempt to make the data exploration more accessible to viewers, I created interactive charts that could be viewed online using D3.js.