Iggy

Designed and maintained the Iggy brand and web properties, including the company website, documentation site, customer dashboard, and various other web projects. Deployed product prototypes and data visualizations using HTML, CSS, React, and Node.js.

• 

  Address Insights
  PREV NEXT

  ×

  Address Insights

  The Address Insights project is a web app that takes a user-provided address or location and returns with a detailed analysis of geographical and intrastructural features in the area. Using Iggy's rich datasets with various types of visualizations (maps, charts, etc.), this made it easy to understand how a location compares to other areas in a larger context.

  

  

  

  
• 

  Data Application Demo
  PREV NEXT

  ×

  Data Application Demo

  An animated demo sequence of how Iggy's datasets can be used with other types of location information to build location awareness in apps. This was initially used as a booth demo to quickly communicate Iggy's product values to attendees.

  
• 

  Enrich UI
  PREV NEXT

  ×

  Enrich UI

  The Iggy platform UI that served to enable users to quickly and easily access Iggy's datasets. It allowed for the upload of addresses or locations to be visualized and “enriched” with user-selected Iggy dataset features.

  

  

  
• 

  Data Explorer
  PREV NEXT

  ×

  Data Explorer

  The public-facing demo of the Iggy Quality Control Explorer. This was a demo that let visitors explore a limited subset of Iggy's dataset features. This made it easy to preview a dataset from Iggy's catalog and allowed for easy visualization and inspection of the underlying data.

  
• 

  Quality Control Explorer (QCX)
  PREV NEXT

  ×

  Quality Control Explorer (QCX)

  An internal tool designed to allow for the exploration of Iggy's datasets for purpose of performing quality checks. This made it easy to load any dataset Iggy's catalog and allowed for easy visualization and inspection of the underlying data.

  

Strava

Worked as part of the engineering team to prototype and build visual elements, page layouts, and page interaction. Lead in implementing HTML, CSS, and JavaScript best practices to develop and maintain the Strava design system style guide.

• 

  Strava.com

  strava.com
  PREV NEXT

  ×

  Strava.com

  The Strava website went through several design iterations over the years. With each iteration, the layout and elements were optimized to reduce friction when going through the account creation process.

  

  strava.com ExternalLInk
• 

  Strava Web Application
  PREV NEXT

  ×

  Strava Web Application

  The Strava Activity Feed uses a modular design to display different types of content, including activities, group events, and others.

  In this most recent iteration of the feed, we refactored the feed card components to adhere to a design system. Modular components could be rearranged in a number of ways allowing for some flexibility when displaying different kinds of activity entries.

  
• 

  Strava Challenges

  strava.com/challenges
  PREV NEXT

  ×

  Strava Challenges

  

  strava.com/challenges ExternalLInk
• 

  Routebuilder & Routes
  PREV NEXT

  ×

  Routebuilder & Routes

  The Routebuilder was designed to help people create bike and ride-friendly routes around their local area using historical activity data.

  The design of this web application included features for viewing multiple data layers including poplar "Segments" and an activity heatmap.

  
• 

  Local Guides

  strava.com/local
  PREV NEXT

  ×

  Local Guides

  Leveraged athlete-created routes from the Strava Routebuilder to generate popular routes.

  

  strava.com/local ExternalLInk
• 

  Developer App Directory

  strava.com/apps
  PREV NEXT

  ×

  Developer App Directory

  The Developer App Directory was created to promote third-pary apps built using the Strava API.

  

  strava.com/apps ExternalLInk
• 

  Community

  strava.com/community-standards
  PREV NEXT

  ×

  Community

  

  strava.com/community-standards ExternalLInk

Engine Yard

Maintained the Engine Yard website. Design of web graphics and front-end coding for various Engine Yard projects and applications. Graphic design for various marketing needs, including ads, brochures, signage, posters, and other assets.

• 

  The Engine Yard Logo

  Brand Design and Illustration
  PREV NEXT

  ×

  The Engine Yard Logo

  As a graphic designer, contracting with the startup, Engine Yard, I was tasked with creating their initial brand and logo. Using the design trends at the time, with collaboration with the founders.

  
• 

  EngineYard.com

  Website Design and Maintenance
  PREV NEXT

  ×

  EngineYard.com

  As the lead graphic designer at Engine Yard, my responsibilities included creating designs for and maintaining the Engine Yard website.

  
• 

  JRubyConf 2010

  Brand Design and Illustration
  PREV NEXT

  ×

  JRubyConf 2010

  Engine Yard was very involved with growing the Ruby on Rails community, and supported several conventions and conferences around that community. One of these events was JRubyConf.

  For the 2010 conference, I had the opportunity to create promotional material for the event. This included the JRubyConf logo as well as accompanying illustrations that were produced as give-away posters.

  

Netsprout, Inc.

Designed and created accessible websites, applications, and web UIs using standards based XHTML and CSS. Built and implemented HTML and CSS templates for Ruby on Rails web applications.

• 

  BreastCancerTrials.org

  Website Design and Implementation

  breastcancertrials.org
  PREV NEXT

  ×

  BreastCancerTrials.org

  

  breastcancertrials.org ExternalLInk
• 

  The Webby Awards

  Design Implementation and Maintenance

  webbyawards.com
  PREV NEXT

  ×

  The Webby Awards

  

  webbyawards.com ExternalLInk
• 

  CocoaBella Chocolates

  Website Design and Implementation
  PREV NEXT

  ×

  CocoaBella Chocolates

  

Other Projects

• 

  Tales of the Urban Wild

  Promotional Website • 2023

  talesoftheurbanwild.com
  PREV NEXT

  ×

  Tales of the Urban Wild

  The promotional website for "Tales of the Urban Wild: A Puma’s Journey."

  

  talesoftheurbanwild.com ExternalLInk
• 

  Center for Biological Diversity

  Promotional Illustrations and Collateral • 2019
  PREV NEXT

  ×

  Center for Biological Diversity

  One of the things that the Center for Biological Diversity (CBD), a non-profit organization, is to communicate to the public the importance wildlife crossings and habitat connectivity.

  Wildlife Crossing Coloring Sheets

  These illustrations were created as coloring sheets to be given out at events to promote one of the causes that the CBD is working towards.

  

  

  Promotional Wildlife Stickers

  Stickers were also created as a free handout to promote the organization.

  

  

  
• 

  FFXIV Cross-Hotbar Simulator

  xivbars.josebenedicto.com
  PREV NEXT

  ×

  FFXIV Cross-Hotbar Simulator

  Final Fantasy XIV (FFXIV) is an MMORPG that involves players executing actions – assigned or mapped to buttons or keys – to interact with the world, which includes overcoming enemy encounters.

  During combat, actions will need to be triggered in sequence to maximize damage or healing abilities. Mapping and remapping actiosn to buttons can be cumbersome when done in game. Using React.js, I created this tool to help visualize and plan keyboard and controller layouts, as well as allow players to share their layouts to others.

  

  Drag and Drop Interface

  Actions can be dragged onto the "hotbar" layout.

  Sharing

  Custom hotbar layouts can be shared with others using a params-based url that contains the data for which actions to load onto the layout.

  xivbars.josebenedicto.com ExternalLInk
• 

  TiffanyYap.com

  Professional Website • 2018

  tiffanyyap.com
  PREV NEXT

  ×

  TiffanyYap.com

  TiffanyYap.com is a professional website for the Environmental Scientist, Tiffany Yap. The goal for the creation of this website was to provide a landing site that showcases Tiffany's prior works and publication.

  The website is designed to be a single page site composed of sections for publications, blog posts, and social media links. It is designed to be responsive so that it can be accessed from any web browser.

  

  tiffanyyap.com ExternalLInk