I recently updated my portfolio after working as a designer professionally for almost seven years. I thought it would be fun to look back at previous iterations of my portfolio to see how it has changed over the years.
Fototrackr is a tool for tracking goals via Instagram. The idea surfaced when I was thinking about New Year’s resolutions. People often make resolutions to improve large, macro level things they don’t like about themselves, such as “lose weight” or “get a better job”… but for me, I like to break things down into specific small goals like learning a new skill, visiting a new city, trying new foods, and so on. So Fototrackr was a way to list out all of the things I wanted to do and keep track of each one as I ‘complete’ it by uploading photos on Instagram.
How it works is very simple:
- Sign in to the site via your Instagram account
- Add goals to the goals page. Each goal is assigned a goal number.
- Do awesome stuff
- Upload a photo to instagram and tag it with the goal number
- Return to Fototrackr to see and share your progress via your goal profile page
Goal Profile Page
Unfortunately, after I worked on the site for a while I realized that some quirks in the Instagram API ToS would prevent Fototrackr from being approved to leave sandbox mode, so it won’t go live in is current form. But it was still a fun little weekend project.
This summer I planted my first vegetable garden, with moderate success. The hardest thing as a beginner gardener is to know a) what to plant, b) when and where to plant it in your yard, and c) how often to water it.
When I was planning out the garden I looked around for an app I might use to learn about plants and manage my garden, but all of the existing offerings on the Android app store looked terrible and had mediocre reviews.
I decided to use this as a design exercise, with the goal of creating a fun and user-friendly app targeted at beginner gardeners. I had a lot of fun working with a warmer color palette and the use of public domain line drawings for a ‘down to earth’ aesthetic (pun intended). In my day job I work on data analysis tools for Enterprise customers, largely for the desktop, so working on a consumer mobile app (even if it’s just a pretend one) was a nice change of pace.
My favorite innovation is the plant diary, is a feed where you can take photos of the plant as it develops, log when you water it, add notes, etc. This summer my corn plants grew over 6′ tall, it would have been fun to take regular photos from the same angle to watch it grow.
Managing the Garden
When I was first starting to search for a house, I consulted online forums to find out which real estate search engine was recommended, and learned that pretty much everyone uses a mishmash of sites to take advantage of differing feature sets. In my searches, I have personally used Zillow for property and rent estimates as well as properties out of the U.S., Trulia for its superior mapping features and wider reach, and Redfin for its superior mobile app.
But all of these sites fell short when it comes to truly personalized search, particularly if we were targeting investor users. Since every investor has different priorities, ideally sites that cater to them should allow sorting and filtering by custom, weighted criteria including:
- list price
- list price vs # of bedrooms ratio
- neighborhood crime statistics
- school ratings
- walk score
- cost per door (for investment properties)
- comparison of price to zillow or redfin’s estimated value
- potential rent
- data about nearby businesses (for example, number of restaurants, distance to a grocery store, etc)
Trulia does offer a lot of this data, but only in its property listing page, not from the search results. I can understand why they designed it this way (as we noted when working on StreetSavvy, using crime statistics in an algorithmic way can be politically charged). Even so, it does save a lot of time to have all of this data surfaced to the search results page, instead of having to click back and forth.
Trulia ++ is a chrome extension (unreleased) that runs on top of the search results on Trulia. Using Chrome devtools I was able to locate the JSON array of search results and run each property through my own analysis with rules like:
- calculate a total score based on # of bedrooms, bathrooms, location, crime stats, etc. compared against price
- give multifamily properties a higher weighting than single family
- hide single family homes if over 150K
- hide auctions
I then display the results in a custom sidebar juxtaposed with the Trulia map.
Each search result has the a lot information crammed into a small space, including the property type, delta between list price and Zestimate, crime and school ratings, and more.
Leavethe.us is an international job search tool. I originally created it in 2012, and then later refined the interface for a more modern experience.
I developed the site after I realized that the Indeed.com API provided the ability to query its job database by country, a feature not offered by the company’s main website. After the first version was ready I posted it on the IWantOut subreddit on reddit.com and received some feedback that I incorporated into the site.
V1 Interface (circa 2012)
Like most people, I love to travel. When I have time to kill I often find myself clicking around Kayak’s Explore feature, just to daydream about future vacations and see what kind of flight deals are out there for the next few months.
At one point it occurred to me that I was missing a key piece of information – that in order to truly find the best deals, I needed to be able to compare not only the price of flights, but also how far each flight went for a given amount of money. This makes intuitive sense, as a flight out of San Francisco that costs $500 may or may not be a good deal depending on whether it is going to LA or to Tokyo. But for some reason, no existing airfare search site formalizes this mental math by providing an actual distance to price ratio for their search results.
So, in order to make this happen, I made a chrome extension to run on top of Kayak Explore that runs the Haversine distance formula for every flight search result and replaces the raw fare price amount for each result with the price expressed as miles per dollar. This allows me to compare all flights on equal footing, and making it clear that a flight from SFO to New Delhi for $405 (18 MPD) is an objectively better deal than one from NYC to Hongkong for $532 (15 MPD).
I then created Rocket Fares to share my best finds with the world (and also to get more practice with WordPress Development).
Finally, I automated the entire process, so I can create a new post directly from the chrome extension… including sourcing images and adding affiliate links to purchase tickets (My First Content Farm!)
This summer I participated in the first annual Fishackathon, a two day event that brings coders together to work on projects for sustainable fishing and ocean preservation. The hackathon was held in many cities across the US, and was sponsored by the U.S. State department in participation with local aquariums.
As part of this event we got to eat, sleep, and code inside the Monterrey Bay aquarium which was a once in a lifetime experience.
My group tackled the West Africa problem statement, which was the need for a technological solution for managing fisheries on the west coast, primarily in Ghana. Before writing any code or even sketching out designs, we reached out to the creators of the problem statement to understand more about the needs of this unfamiliar user group. We learned that smart phones are not very wide spread (though most people have feature phones), internet access is unreliable, and many of the fisherman are illiterate, so we needed to take all of these into consideration for the design.
The end result was Fish DB, a mobile web app featuring a simple graphical interface that let fishermen register their boats, apply for fishing licenses, and report illegal fishing. We also implemented submission by text for users without smart phones, and an admin interface so that program administrators could manage incoming requests and reports.
My role in the project was to collaborate on the design, and I was also the primary programmer for the Ruby on Rails web app. After winning the local event at the Monterrey Bay Aquarium, our group advanced to the final round where were delighted to be selected as the grand prize winner for the whole United States!
Article on Berkeley ISchool website: http://www.ischool.berkeley.edu/newsandevents/news/20140616fishackathon
StreetSavvy is a mobile web-based mapping tool that aims to improve the pedestrian experience by helping users make informed decisions about which route to walk.
We created StreetSavvy based on the premise that existing mapping tools do not have enough information relevant for pedestrians who are concerned about safety. With standard Google Maps, users request walking directions between two defined locations and they are presented with a choice of three routes. But Google does not provide any additional information to help users choose between these routes aside from the time it takes to get from point A to point B.
That may be enough information for some situations, but as we learned through our research, what is defined as “safe” or “not safe” is extremely specific to the individual, and changes frequently depending on situation. Unfamiliarity with an area, the time of day, the weather, the location of certain businesses, how many people you are with….all of these factors may influence whether a particular situation feels safe or unsafe.
StreetSavvy was developed as a Masters final project and it won the 2014 Chen Awards in the “Enhancing User Experience” category.
Fuzzy Logic is a web-enabled teddy bear that transforms the physical world into an interactive learning environment. This project was a group effort for a course in Interactive Device Design in Berkeley’s Citrus innovation lab. For my part of the project I was responsible for designing and developing the Fuzzy Logic Android app, which let the user configure the device and also acted as the communication hub between the bear and the web.
You can read more about our project and process here:
Color Song takes song lyrics from media wiki and color codes them by parts of speech to create interesting patterns.