Marco Segreto

Frontend Software Engineer designs and programs great web interfaces.

Projects

IDEO shape

shape

IDEO's shape is a collaborative innovation toolkit to help ideate, prototype, and share new ideas with your team an company. It allows users to place different types of content on a variable grid and includes collaboration features such as realtime text editing, commenting, notifications, and chat.

Shape was built with a React frontend, and a Ruby on Rails backend API. We setup elasticsearch to allow all the content to be searched, and realtime collaboration features with ActionCable. The front end includes a design system to keep consistent UI.

Technology

  • React
  • MobX
  • Ruby on Rails
  • Postgres
  • datx

cloud.gov

cloud.gov

The cloud.gov platform is a Platform-as-a-Service for government agencies to help them easily deploy web services built on CloudFoundry

The cloud.gov platform has an extensive front end dashboard letting users fully manage their application and teams. This was built as a single page app with React and a design system style library. Cloud.gov also has a homepage and documentation static site.

Technology

  • HTML/CSS
  • React
  • Flux
  • Go/Hugo
  • CloudFoundry

US Web Design Standards

US Web Design Standards

The US Web Design Standards (WDS) is a design system created to bring more accessible, consistent, and usable design to government websites.

The team built the standards by researching with various government agencies to determine needs for a design system. Every component in the WDS was individually user researched and checked for accessibility. Research was also done with government developers to determine the right coding interface for the design system.

Technology

  • HTML/CSS
  • JavaScript
  • Jekyll

Peace Corps & Let Girls Learn

Peace Corps Donate

Peace Corps .gov wanted a new design and implementation for their donation platform as well as a new site for Michelle Obama's Let Girls Learn compaign.

We used Python's Django to create a robust donation platform that integrated with their payment provider as well as a newly designed front end based off of user research with Peace Corps site users. The Let Girls Learn site was created and published separately and included designing a parallax image experience to create a focus on the amazing imagery of the initiative.

Technology

  • HTML/CSS
  • JavaScript/jQuery
  • Python/Django

Finding Echo

Finding Echo UI

Finding Echo is a JavaScript game built in one month for the js13k game competition. The game is less the 13kb minified and zipped.

The premise of Finding Echo is a dolphin is stuck in a cave in the deep ocean where there is no light. The dolphin has to use his echo location abilities to find his dolphin friends so they can escape.

Technology

  • HTML/CSS
  • JavaScript

Minted Address book

Minted Address book

An online address book that allows customers to add or upload all their contacts and print them automatically on the envelopes for their cards.

Allows adding addresses through online form, uploading excel or csv, posting FB messages to their friends, or sharing a link. Customers can then pick addresses to print on their envelopes, select various font options and will see a preview of the printed result.

Technology

  • HTML/CSS
  • JavaScript
  • Backbone
  • Python
  • Bottle

Links

Minted Inspiration boards

Minted Boards

Pinterest-style boards for customers to add uploaded images and Minted products to. Lets customers create a board for inspiration by using a drag and drop interface.

The address book was created with JavaScript and backbone, and used complex positioning algorithms to ensure boards looked good regardless of image dimensions uploaded.

Technology

  • HTML/CSS
  • JavaScript
  • Backbone
  • Python
  • Bottle

Ottico

Ottico homepage

Ottico, which means optical in Italian, is my personal photography gallery site. Ottico was created as a site to organized and share all my photography, and was started while I was working in Italy. The design focuses on the idea of looking at the world through the lens of a camera, and what can be revealed through this lens. The site uses the design pattern of graceful degradation to give a good UI experience even to users who have old browsers and javascript disabled.Users with more advanced systems will be presented with a more powerful interface

Technology

  • HTML/CSS
  • JavaScript
  • PHP/MySQL
  • Codeigniter

Links

textmap

textmap homepage

The final class in the design major at San Francisco State required students to research and develop a full sample prototype for a common problem. My problem was the absence of any map for the blind on SF State's website. My research led me to a map that was represented with textual information based on landmarks which would be inputed by users through Google Maps. This prototype shows how such a map on the SF State's library website could function to give a blind person a text version of a map, which could be read back to them by screenreader software.

Technology

  • HTML/CSS
  • JavaScript
  • jQuery

Speaking & Writing

Web Design Standards Performance Guide

To implement this guide a team was assembled to do user research with different government agencies to see where website performance was falling short. The team also researched different open source tools for performance tracking and started to make some decisions on how to best guide people. More details on the research can be found on the research report.

The research showed that most teams were not consistently tracking performance as a project evolved and would benefit from doing so. Performance tracking became the focus of the guide, with a bulk section on how to implement performance tracking on almost any team. Additonally, there's guidance on HTTP/2 and a glossary of performance concepts.

Code For America Summit Accessibility Panel

Code for America is a non-profit working to improve government technology through it's year-long fellowship program and volunteer city brigade programs. I was part of a panel discussion with three other experts talking about web accessibility particularly related to the US Web Design Standards.

For the panel, we discussed how to effectively ensure a government style system, such as the Web Design Standards, can remain accessible for all that use it. A main point of the discussion was how to design and develop with accessibility in mind from the start of the project, continually keeping it at the forefront as new parts are added. This contrasts with a more typical approach of fixing accessibility issues at the end of a project before launch. I've found the tactic of keeping accessibility in mind from the start and throughout a project is the most effective method of ensuring the project is always accessible.

18F Blog: How we share style across multiple sites

The cloud.gov, a PaaS for government, front end has multiple different site's that all need a universal style and consistency. In order to keep the styling code for these different sites without having repition, a style library was needed that could be brought into each of the different sites. This led to the creation of cg-style or cloudgov-style, an npm deployable style library.

Having found that many other 18F and government projects also required sharing styles between multiple sites or repositories, I wrote a blog post to articulate the benefits and difficulties of maintaining a shared style library. It discusses the CSS architecture, how we used SVG to create adaptable icons, how we distributed the library to make it easy to include and update, and the continuous integration and release process for the library.

18F CSS Coding Styleguide

A technical document to provide 18F and government developers with guidance on best practices for writing CSS. In order to address the problem of hard to maintain CSS at 18F , I did user research interviews with developers on the 18F team to find what the largest problems were in CSS codebases. I found that code style was inconsistent, there were bad practices around having too high of specificity and organization and naming conventions were not well defined.

After having looked for comprehensive style guides that reflected 18F's values and character and not finding anything that matched well, it was decided I would write an 18F CSS Styleguide to be used internally and shared around the government. This guide includes general CSS formatting guidance, how to architect CSS, naming schemes and much more on how to write great CSS. The CSS guide was eventually folded in with a larger front end guide for 18F.

Marco Segreto

San Francisco, CA, USA