Designer
Developer
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.
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.
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 2012.com, 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.
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.
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
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.
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 (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
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.
Experimental Technologies
Among other things, at Microsoft, I had the opportunity to work on interaction patterns at the front lines of research & development.
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
Tonhyakae.com
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.
Full size front page of Tonhyakae.com - Photographer & Blogger
Responsive states for smaller devices
Screen capture from the about page
DancingClassrooms.org
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
Site Architecture and Planning
Graphics for Dancing Classrooms
Typography and Layout for Dancing Classrooms
Bridgelynx
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
Calendar Interactions in Bridgelynx Medical Documentation tool
Form Interactions in Bridgelynx Medical Documentation tool
eMindful
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 Dashboard
Selecting classes to add to schedule
Earning milestones over time to increase engagement
The One Percent Challenge -- Earn rewards for increased engagement
Filter classes by category
UW Design 2012.com
Web Design (Graduate Capstone Project)
Process
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.
Concept
We spent less than a week developing a concept for our information architecture and some ideas about visual direction.
Wireframe
Daily iteration over the decided-upon architecture occurred for the subsequent week, as mood boards were assembled for final visual direction.
Prototype
With the fundamentals in the bag, we started to play with interactions and motion over the course of 2 – 3 weeks.
Database
While making progress on the programming, we also had to assemble data: photographs of students, project images, links to portfolios, etc.
Visuals
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 (left), Wireframes (center), Final Poster / Visual Direction (right)
Imagining the brand applied to various surfaces
Results
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 — Animated Fragmented Type
All the rage in 2012: Scroll-Based Animations
“The Work” Section — navigate by project type or degree
“The Cast” Section — navigate by photo, name or discipline
Reception
The project was well received within the design community and featured on several blogs from around the world.
Credits
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
Arduino–Powered
Beer–Sensing
Smart Table
Electronics / Product Design
Process
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 (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
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 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)
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
The final product
Credits
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
Brainstorming
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.
Early brainstorming centered around utilizing 2D and 3D space in new ways
Wireframes
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 interactions in specific detail to get good feedback
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
Log in screen, close up
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
Various data visualizations
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
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 on the final product
Another sample — Data is better with interactivity
Wahlautomat:
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.
The physical voting machines (when present) were dated and difficult to use.
Process
We examined a variety of potential user personas in order to more closely understand their needs.
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.
Exploring architectural options for user flow
Early wireframes exploring a touch interface
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