Helping you navigate complexity with confidence.

Craig DuBois is a product designer living and working outside of historic Boston, Massachusetts. He’s quite fond of CSS, SVG, Animation, and Symmetry. Learn More

Expertise

  • Graphic Design

    Not just aesthetics but understanding and communicating the objectives and vision behind the product. Methods include researching the target demographic, ideation, and iteration.

  • HTML/CSS

    Proficient in modern web standards and capable of crafting code from static designs or building with common front-end frameworks like Bootstrap. (Plus, my love for CSS exceeds the limitations that are inherently baked into the language—and knowing those limitations allows for proper planning.)

  • Information Architecture

    Helping you navigate your way through complex digital environments. Your product should be easy to find and understand. Nothing says clear information architecture like a coherent and consistent experience across a variety of interactive channels.

  • SVG

    From creating graphics in Illustrator or Sketch to fine-tuning and optimizing the files on the command line, implementing SVGs can help cut down file size and avoid loss of fidelity whether you’re using icons or infographics, and I can help with that.

  • Responsive Design

    Embracing device-agnostic web design. Despite countless viewport sizes, I believe in approaching web design with the understanding that screen resolutions and connection speeds are out of our control and we should welcome this unpredictability with a mindset and approach of adaptability.

  • Branding & Style Guides

    Bringing it all together into a unified vision, and incorporating the branding guidelines of your product into a cohesive style guide for extensibility and consistency.

Process

  • Ideation

    Understanding, exploring and researching users and constraints, allowing for a range of creative possibilities and mental modeling. Fully grasping the problem—and who you’re solving it for—is essential.

  • Sketching

    Brainstorming and visual problem-solving. Conceptualization comes in many forms, be it a whiteboard, a pencil and paper, or even that favorite software program. (This might be my favorite part!)

  • Wireframing

    Storyboarding, layout and iterating on concepts, and creating a variety of low-fidelity or high-fidelity mockups, depending on the direction and feedback.

  • Prototyping

    Converting wireframes into code. And to fully understand the restraints, sometimes it’s easier to hop right into that text editor and design directly in the browser.

  • Art Direction

    Setting type, optimizing icons, and coordinating colors—just a few of the details that go into surfacing a contextually-relevant UI.

  • Testing

    How does it look and feel? Time to verify that the layout and performance work as expected across multiple devices (with the understanding that not all browsers render content equally).

Work

  • Association of Psychology Postdoctoral and Internship Centers (APPIC)

    Re-designed the companion marketing site for a web app serving doctoral students in psychology; replaced bitmaps with SVG, upgraded iconography and typography, converted site to be mobile-friendly and responsive, while reducing a 1–2 month development timeline down to 2 weeks.

    • a screenshot of the MyPsychTrack marketing website
    • a photograph of a whiteboard sketch of part of the MyPsychTrack marketing website
    • a screenshot showing two mobile layouts side-by-side of the MyPsychTrack marketing website
    • a photograph of some notes regarding the development of the MyPsychTrack marketing website

    View Demo

  • Kapco Global

    Improved the information architecture, layout, and visual design of a Sharepoint portal for employees, solving navigation issues and clarifying task choices on the dashboard. Worked closely with the developer while providing low and high-fidelity wireframes that incorporated specs on how to implement the redesign through the web development process, including optimized CSS that paired to production code.

    • a photograph of some low-fidelity wireframes for the Kapco Global Sharepoint portal
    • a photograph of some low-fidelity wireframes for the Kapco Global Sharepoint portal
    • a photograph of some low-fidelity wireframes for the Kapco Global Sharepoint portal
    • a screenshot of the Kapco Global Sharepoint portal
  • Association of University Programs in Health Administration (AUPHA)

    Overhauled the visual design, behavior and code for the template export of a school survey platform for the Association of University Programs in Health Administration, and reduced a 5–6 month design and development timeline down to 2 months.

    • a screenshot of a HAMPCAS Program Page Demo wireframe
    • a screenshot of a HAMPCAS Program Page Demo wireframe
    • a screenshot of the HAMPCAS Program Page Demo
    • a screenshot showing two mobile layouts side-by-side of the HAMPCAS Program Page Demo

    View Demo

  • Liaison

    Built responsive customer support forms using Bootstrap and Salesforce that generated support tickets, reducing the call and email volume from applicants and admissions officers.

    • a screenshot of the Boston University Support Form for Liaison
    • a photograph of some notes regarding the development of the Boston University Support Form for Liaison
    • a screenshot of the Boston University Support Form for Liaison
    • a photograph of some notes regarding the development of the Boston University Support Form for Liaison