Ben John Smith . com

Portfolio of work


Freelance Work

UW Design

Smart Table

Student Spotlight

State of State Funding




There’s a solution for everything

Bachelor of Design

My formal education is in Interaction Design at the University of Washington, where the program was centered around rigorous iteration, testing and critique.

The highly visual program was infused with focus on communication, psychology, and human emotion. Attention to detail was the name of the game.

I personally like to see my work in motion and infuse life and activity into every micro-interaction.

Messaging on Windows

Exploring the future of notifications and messaging on Windows 10

In the Field

I spent the better part of 5 years working at Microsoft as a Designer on the Windows team. I worked on Windows apps, controls, phone, cloud content, Office suite, web surfaces, and a variety of other teams.

Now I build apps for Adobe.

Design Samples

From Sketch, to Wireframe, to Final Design

Some Stuff I've Made

As a designer I build new experiences as well as redesign existing products. My focus is on the experience of the people that are using what you are making.

While I spend most of my time on software, I have a passion for physical products (especially electronics) and spatial / environmental experiences.

See the following projects for examples of my design work:

Where there’s a will there’s a way

A Hobby and a Passion

I started writing HTML 3.2 in the late 90s, and haven’t stopped playing with programming languages since. I appreciate readable, modular, efficient code. (who doesn't?)

There is something immensely satisfying about taking a project from concept to reality.

UW Design

UW Design, my Graduate Capstone project — go there now

Design in Code

Programming is a vastly underrepresented tool for working on new designs and interactions. Make prototyping an integral part of your design workflow and fill the gaps between ideas and products.

Programmed Project Samples

From JavaScript to ActionScript — I enjoy writing code

The Wild West: Browser Wars

As primarily a web designer, I am more than capable of working in HTML, CSS, Object-Oriented JavaScript, and PHP. Frameworks come and go, but jQuery is forever ❤

Here are some projects that have a live, programmed component:

Control Patterns &
App Design at Microsoft

Work Experience

Control Patterns

For the release of Windows 8 and beyond, I spent most of my time working on controls and commanding patterns for apps as well as the Windows general ecosystem.

Adobe Photoshop in Windows 8

Exploration of Adobe Photoshop with Windows 8 (touch) commanding model. Download [swf] [exe]

This included building real patterns to implement in Windows apps (Photos, File Explorer, Groove Music, Calculator, etc.) as well as imagining new patterns for apps not yet on the Windows Universal App platform.

Various App Explorations and Control Designs for Windows

Various App Explorations and Control Designs for Windows

Using Notifications and Messages in a Windowed desktop Messaging Explorations

Using Notifications and Messages in a Windowed Desktop

One of my favorite methods of exploring new control interactions and commanding models is to prototype. I wrote several compact apps for Windows that simulated creative, command-heavy experiences. We learned a lot about how to integrate apps with large control sets into a touch or touch/mouse ecosystem.

Live demos available on request.

Screenshots of Apps I wrote for Microsoft

A sample of the apps I wrote for Windows (some for internal use, others to prototype commanding patterns)

App Design: Photos

As a designer, I owned the Photos experience. I worked on the Camera, Photo Library, and all peripheral experiences (building albums, sharing photos, editing, etc.)

Sketch Explorations of Photos Editing and Collections/Sharing

Sketch Explorations of Photos Editing (left) and Collections/Sharing (right)

This always involved designing simultaneously for all Windows form factors (PC, Phone, Tablet, etc.) and rigorous usability testing in the lab with real customers.

Imagining Rich Photo Metadata on the Phone

Imagining Rich Photo Metadata on the Phone

Rich Photos Explorations -- Beyond the Photo

Rich Photos Explorations — Beyond the Photo

As was the case with most projects, I built a working prototype to simulate any possible design choices (colors, spacing, layout, etc.) in real-time

Using this tool, we were able to test our interfaces interactively with a real audience to see how users might react to our new product.

Robust Photos App Prototype for exploring multiple design choices in real time Albums allow users to capture events and meaningful related photos

Robust Photos App prototype for exploring multiple design choices in real time. Open the demo

Experimental Technologies

Among other things, at Microsoft, I had the opportunity to work on interaction patterns at the front lines of research & development.

Sketching possible interactions for hover with creative apps like Adobe Photoshop Fresh Paint: Creative App for Windows, with hover

Imagining creative experiences with “hover”

The full catalogue of work I was able to produce during my tenure at Microsoft is too lengthy for this format, but if you catch me in person, ask me about:

  • Accessibility & Inclusive Design
  • Usability Testing
  • Internal Apps
  • Prototyping Workshops
  • Files & the Cloud

Freelance Web Design

Work Experience

See the
real thing

This website was made for Seattle based Photographer Tonhya Kae.

The project had unique challenges due to the angular layout of text and images, and the unpredictable nature of CMS-powered sites.

Tohnya Kae Photography - Full

Full size front page of - Photographer & Blogger

Tohnya Kae Photography - Phone

Responsive states for smaller devices

Tohnya Kae Photography - About Page

Screen capture from the about page

Dancing Classrooms is a New York based organization that teaches youth ballroom dancing classes and puts on community events where the children can perform what they've learned.

This project was a collaboration with Lippincott, who provided the branding and type.

Dancing Classrooms NY -- Ballroom Dancing for Youth

Dancing Classrooms NY -- Ballroom Dancing for Youth

Site Architecture and Planning for DCNYC

Site Architecture and Planning

Graphics for Dancing Classrooms

Graphics for Dancing Classrooms

Typography and Layout for Dancing Classrooms

Typography and Layout for Dancing Classrooms


Bridgelynx is a medical services tool that helps healthcare workers take accurate notes and administer proper care.

As the sole designer and front-end developer, I took this project from concept to implementation.

Bridgelynx Medical Documentation Tool

Bridgelynx Medical Documentation Tool

Calendar Interactions in Bridgelynx

Calendar Interactions in Bridgelynx Medical Documentation tool

Form Interactions in Bridgelynx

Form Interactions in Bridgelynx Medical Documentation tool


See the
real thing

Over the course of several years (and multiple iterations) I have worked as the sole designer and front-end developer for eMindful and their suite of products.

eMindful offers live mindfulness classes for tens of thousands of consumers and corporate clients.

eMindful Life -- Live Mindfulness Classes

eMindful Life Dashboard

Selecting classes to add to schedule

Selecting classes to add to schedule

Earning milestones over time

Earning milestones over time to increase engagement

The One Percent Challenge -- Earn rewards for increased engagement

The One Percent Challenge -- Earn rewards for increased engagement

Filter classes by category

Filter classes by category

UW Design

Web Design (Graduate Capstone Project)


This project needed to go from branding to reality in 7 weeks. To accomplish this goal, I led a team of several other students while handling the architecture, interaction and programming.

Hover the nodes on the image below to see more about our process over that period.

UW Design Process Notes


We spent less than a week developing a concept for our information architecture and some ideas about visual direction.


Daily iteration over the decided-upon architecture occurred for the subsequent week, as mood boards were assembled for final visual direction.


With the fundamentals in the bag, we started to play with interactions and motion over the course of 2 – 3 weeks.


While making progress on the programming, we also had to assemble data: photographs of students, project images, links to portfolios, etc.


With the data in place and the site constructed and operational, we applied polish to the UI and worked out any visual inconsistencies.

Debug & Optimize

Once complete, there was a brief period of time to stress test before going live.

I didn’t cheese it — this is the exact stack of notes I kept during this process, ordered left to right 😉

In order to prepare for the Senior Show, we applied the branding and the website (via an interactive kiosk) to the exhibition space.

Sketches for web architecture planning, Wireframes, Final Poster

Sketches for web architecture planning (left), Wireframes (center), Final Poster / Visual Direction (right)

Imagining the brand applied to various surfaces

Imagining the brand applied to various surfaces


Below you'll find some samples of the final implementation, released on time just before the beginning of the Senior Show Exhibition.

Click here to visit the existing site.

Front page of the website - Fragmented Type

Front page of the website — Animated Fragmented Type

Front page of the website - Fragmented Type

All the rage in 2012: Scroll-Based Animations

The Work Section

“The Work” Section — navigate by project type or degree

The Cast Section

“The Cast” Section — navigate by photo, name or discipline


The project was well received within the design community and featured on several blogs from around the world.

Critical Reception


The site is powered by PHP/MySQL and written in HTML/CSS/JS.

As mentioned above, this was a team effort:

  • Ben Smith — project lead / programming / design / planning
  • Nicole Yeo — design / planning
  • Katie Suskin — design / planning
  • Ellen Peterson — planning
  • Emily Christianson — photos
  • Amy Grimm — photos
  • Inness Wragg — database mgmt
  • Alana Robinson — database mgmt

Smart Table

Electronics / Product Design


The design prompt for this student project required us to address a “situation” concerning a physical environment or object. Then, more importantly, construct a device using Arduino, sensors and activators that could alter or enhance the situation.

Loosely put, the idea was to build something that did something.

Final Product Lights turn on as a newly emptied portion of beer is placed down

Final product (left), Lights indicate the amount of beer removed from each person's glass (right)

We began by brainstorming in a variety of areas of interest: Social spaces, navigation/wayfinding, awkward public interactions, etc.

Early brainstorming of concepts

Early brainstorming of concepts

Eventually we formulated a plan to enhance the social drinking experience — specifically the act of sharing a pitcher of beer amongst friends (something that we had quite a bit of experience with).

Sketching and planning in Metrix: the Hacker Space (Seattle)

Sketching and planning in Metrix: the Create Space (Seattle)

With a plan in place, it was time to familiarize ourselves with Arduino technology, programming, and integrating with sensors.

Playing with sensors (Force Sensitive-Resistors, to be exact)

Playing with sensors (Force Sensitive-Resistors, to be exact)

Early experimenting with Arduino and LEDs

Early experimenting with Arduino and LEDs

Armed with an understanding of the technology, we purchased the necessary components and started assembly of the prototype.

Once we were certain that the wiring was sound, we covered the device and began rounding out the rough edges.

Putting everything together

Putting everything together

The final product

The final product


This project was a 2-person collaboration with Patrick McLean

Special thanks to Metrix Create Space for assistance with sensors and actuators.

Student Spotlight
University Portal

Experimental Web Design


The objective of this project was to create a University portal where students could manage their college experience.

The idea was to push the boundaries of what we consider to be traditional web design. Inspired by the (then) new HTML5 and CSS3 capabilities, I chose to experiment as much as possible.

Sketch brainstorming: 3d Sketch brainstorming: 2d

Early brainstorming centered around utilizing 2D and 3D space in new ways


Exploring interactions to a great level of detail was critical to getting good feedback during the daily critiques at this phase. I used a browser window for context.

Click here to view the pdf with all wireframe slides.

Wireframing close-up

Wireframing interactions in specific detail to get good feedback

Wireframing full view

Every interaction was explored thoroughly

Look & Feel

Once I was certain that the interactions were fleshed out to an adequate level of detail, it was time to work on applying color and layout changes to the final design.

Not focused on usability, rather this design was intended to explore a spatial experience for a web portal, in order to push the boundaries of traditional web design.

The look and feel template in Adobe Photoshop

The look and feel template in Adobe Photoshop

Log in screen

Log in screen, close up

The Classes widget The Calendar widget

The widgets provide useful tools for registering and attending classes

The State of
State Funding

Interactive Infographic

Finding the Pattern

For this design project, we were assigned an organization that possessed meaningful data, but had yet to analyze or present it in any meaningful format.

The data set that I chose came directly from the University of Washington. I looked at historical data for funding as well as other educational metrics (degrees earned, attendance, demographics, etc.)


Thanks to CEDR, Census, and UW for providing data

Over the course of several weeks with constant critique, we arranged the data in different ways in order to find meaningful relationships and interesting patterns

Early Data visualization Early Data visualization

Various data visualizations

Early Data visualization

More data visualizations

Establishing Visual Design

While data representation evolved, we also rigorously critiqued visual design, until we found colors, typography, and layouts that both suited the data, and were aesthetically refined.

Establishing a final visual style, refining layouts and spacing

Establishing a final visual style, refining layouts and spacing

Final visual design

Screenshot of final design

Information through Interaction

With a final design for all charts, graphs, and pages, it was time to start putting things in motion. I personally used Adobe Flash CS5 to put together the final infographic.

This component of the class was optional, but encouraged.

A sample of some of the interactions available

A sample of some of the interactions available on the final product

Data is better with interactivity

Another sample — Data is better with interactivity

German Voting Kiosk

Interface Design

Project Guidelines

While I was studying abroad in Schwäbisch Gmünd, Germany, I had the opportunity to work with several students at Hochschüle Für Gestaltung on this project.

The prompt was to find an outdated interface somewhere in the world and find a way to improve it. We decided to improve the voter experience during political elections.

Voting booth Locals voting in a community center

The physical voting machines (when present) were dated and difficult to use.


We examined a variety of potential user personas in order to more closely understand their needs.

Various user personas

An examination of potential voter user personas

After a few weeks of research, we began exploring possible UI for a touch-screen kiosk.

We wanted this device to be capable of educating voters on their choices, as well as providing an intuitive, accessible, non-biased interface for making their selections.

Sketch wireframes

Exploring architectural options for user flow

Early wireframes

Early wireframes exploring a touch interface

Continued wireframes

Continuing to refine the wireframes and flow

Final Product

Once the design was more or less finalized, we began work on assembling an Arduino-powered kiosk that was capable of running our flash prototype.

This kiosk was placed in an exhibition of work where students and educators could freely come and interact with the physical structure.

Rendering of the voting kiosk

Rendering of the voting kiosk

You've reached the bottom of the page.

Back to the top