Portfolio

How do you measure good design?

No one sets out with the goal of creating a bad product. Without the understanding of user behavior and a user-centric design process, most product teams run the risk of creating friction with their designs.

Santa Clara University Design System

Summary: After SCU’s move to a redesigned website, the design and development teams needed some tools to help support continuous improvement. The toolkit was designed to provide a UI pattern library and brand/aesthetic guidelines while automatically deploying front-end assets to the web. For developers, it served as a fast prototyping mechanism in which designs could be tested in HTML/CSS.

The design system follows Atomic Design principles by breaking UI elements into individual content types. Those content types are then used with layouts to create new designs or prototypes.

This slideshow requires JavaScript.

The DS was designed to solve a few challenges in our workflow:

  1. Front-end Asset Build: Gulp transpiles Bootstrap 4 code with a number of customizations that are made in SCSS (which is subsequently passed to PostCSS for optimization). Vendor JavaScript is also combined with toolkit-specific and webapp-specific JS and emitted into compressed formats, including maps. For developers, these are rebuilt on the fly so changes can be tested instantly.
  2. Prototyping: Designers can use simple syntax and partials to create new layouts locally thanks to Fabricator.js, which builds the Toolkit documentation. The result is HTML-native prototypes that can be tested quickly and in any environment.
  3. Documentation and Guidelines: Colors, fonts, content types, and rules for using them are documented within the Toolkit, which is published for transparency and accountability. This helps us maintain consistency across digital properties. These are Markdown files that are compiled by Fabricator.
  4. Accessibility: In order to ensure accessibility for those utilizing our Toolkit, we’ve built our content types to be accessible along with providing context-specific classes and tools to allow our content creators to be more accessible. We’ve also incorporated a11y linting into our build chain, giving us a programmatic check for accessibility.

Undergraduate Bulletin

Summary: The Undergraduate Bulletin at SCU was a 600-page print document (and workflow) that cost thousands of dollars and a fair amount of trees to produce. For 2017-2018, we modernized the workflow to become digital only, producing a gorgeous eBook-style website, an automatically generated PDF, and ePub options for students, faculty, and staff. We borrowed from open source documentation patterns built on GitBook to deliver the new bulletin with no cost.

Screenshot of the Santa Clara University Undergraduate Bulletin

Technology: GitBook for building the website, PDF, and eBook formats. The Bulletin content was edited by a multi-disciplinary user team in Google Docs and converted Markdown.

Undergraduate Admissions at SCU

Summary: SCU’s Admissions team looked to improve their user experience. We focused on gorgeous illustrations while maintaining simple and intuitive functionality.

screenshot-2016-10-20-22-54-06


The Arts at SCU

Summary: Santa Clara looked to celebrate its new commitment to the arts with a bold landing page. We delivered a gorgeous, mobile-friendly page on a limited budget.

This slideshow requires JavaScript.

Technology: Lofi wireframes were converted to CSS/HTML wireframes.


IssueHQ

Summary: Developed IssueHQ, a responsive web application for ticket triage using Material design and Meteor (Node.js/HTML/CSS).


Santa Clara University Website

Summary: As a project lead on the in-house web team, assisted with the launch of the completely redesigned Santa Clara University website. Designed the prospective student experience, worked with content administrators to improve UX, and contributed new design elements.

Screenshot 2016-01-25 21.30.31


Timeboard

hSexxKu

Timeboard helps teams communicate.


Santa Clara University School of Law

Summary: Responsible for the discovery, design, development, and implementation of an all-new website based on WordPress. Delivered with a budget under $1000.

Screen Shot 2015-06-13 at 6.44.14 PM