A mobile friendly credit card input field based on Luke Wroblewski's UI. Creates a single continuous field for entering all data from a credit card. Keeps a mobile user in a single number input keyboard through the entire data entry.
Supports Visa, Master Card, Discover, and American Express icons, as well as a CVV icon.
The Growable Textarea Directive allows a textarea element to match the height of its content. This prevents the textarea from scrolling. The textarea is always the right size, allowing all text to be visible.
Style Sheet Factory, is an AngularJS library that provides an easy way to manage CSS rules on the DOM. It can allow directives to provide their own self contained styles, as well as write event based CSS rules.
The popup directive small container that allows you to position HTML content to an event on an element. For example, a tooltip that appears when an input gains focus, or something more complex like a time picker utility.
<button ng-click="myPopup.show($event)>Open Popup</button>
<popup api="myPopup">I am a popup</popup>
The modal directive is a fullscreen container that allows you to position HTML content over the top of your page. If you include an event that triggers the modal when showing, the modal will animate out from the origin of the event.
<button ng-click="myModal.show($event)>Open Modal</button>
<p>I am a modal. Isn't that special?</p>
<button ng-click="myModal.hide()">Close Modal</button>
Snap Tournament is a web application for managing large scale game tournaments. The idea came from attending tournaments at game conventions (e.g. GenCon, Origins, PAX Unplugged, etc). These conventions always ran daily tournaments, with final championships involving 100+ participants. Management of them took place largely in cumbersome spreadsheets. I felt there just had to be a better way.
I wanted my solution to be built on several major principals:
The application should feel friendly and familiar to the people running tournaments. Asking all the appropriate necessary questions, without burdening people with too many options. Tournament attendees should be able to find their information without help.
The application should be faster than their current process. Since attendees would be viewing the site from slower mobile phones and overburdened cell/wifi networks, caching and limiting application size was important.
The application needed to be platform and device agnostic. Whether used from a small touch screen device, or a full-fledged desktop; all features and abilities of the tool should be accessible.
This project was too large for me to take on myself, so I recruited my friend Justin Kirby to develop the back-end and API, as I developed the frond-end. We also found a partner from an event management company (Cascade Games LLC) willing to guide and help us generate requirements.
We began by interviewing our partner with Cascade Games (Liz). She was an invaluable resource and helped us understand the individual components of a tournament event frequently overlooked.
From our research, we generated a list of features and requirements. We ran pointing sessions and slimmed down our list to a reasonable set for a minimum viable product.
From here, I began mocking up our application using Balsamiq. I am a fan of the tool for its rapid ability to prototype. Mockups come out quickly, with a focus on layout and feature functionality. Its sketch like quality and lack of polish helps not waste time on style. I also subscribe to Bill Buxton's approach to design. Keeping fidelity low, until ideas pass the rigor of review and discussion.
After mocking up, iterating, and reviewing a fair amount of the application, I pivoted to web development. HTML's defaults and box model marry nicely with mockups. CSS allows you to layer on styling later, while you initially focus on structure and layout. Fidelity can be increased without duplicating efforts by remaining in a mockup tool for too long.
We were able to complete an alpha version of the application, which we used to run the Ascension World Championship at Gen Con 50. The application was a huge success at the event. Cascade Games found our implementation to save between five and seven minutes per round. This translated to almost an hour off the total time for the tournament.
Development of the tool stalled shortly after the tournament. This was a wonderfully fun personal project which I am still looking for partners and opportunities to continue.
I play a lot of boardgames with my friends, and often find things missing from the games. Whether it's a decent way to track score, or a better mechanic for choosing who goes first. GeeGee Gamekit was created to fill those gaps.
I made the app responsive, by hiding delete functions (in scoreboard and dice roller) behind a swipe gesture on smaller screens. Imagery also scales to screen size (in spinner and timer) to offer the best visibility.
After finishing development on my updated device, I tested my app on older versions of Android. I found that many of the modern (but widely supported) web styles and properties weren't available in WebView until Android 5.0. Unfortunately, I had to target my app for this tiny segment.
There are a lot of list/task apps available. Everynote, OneNote, Google Keep to name a few. All of these apps force you to tediously peck out items on the software keyboard. With Mic List, I focused on speed and simplicity of entering items.
Most list items I generate are short (less than 5 words per item). Things like: wash car, clean fridge, take out trash, etc. If it's a grocery list, they're even shorter: bananas, milk, bread. I wanted a way of creating these kinds of lists as fast as possible. I did that, with dictation.
Items are entered by pressing a mic button and saying what you want to add. A pause in speech will add the item to your list, then immediately listen for your next item. Speech-to-text isn't perfect, and there are times it doesn't enter what you're saying correctly. That said, I found it was faster/easier to say the item again until I got it right. After, I could go back and quickly remove the incorrect entries.
While I use this app several times a week, and with great utility, I feel it's not yet ready for market. I'm continuing development until then.
After creating the FlashLight app, I wanted to make something heavily themed. One of the alarm sounds in Android at the time was a corny rooster crow. The sound birthed the idea of a rooster/farm themed timer app.
The theme is based off the quintessential American farm. A red wood barn, brown picket fence, chicken eggs, and (of course) the rooster. Chicken clucks and short crows are also incorporated.
A timer is a short-term need. Long term needs are solved with alarms. So, I focused on providing the simplest interface for sub four-hour timer needs. Things like taking a nap (1 hour), boiling an egg (10 minutes), or brewing coffee in a press pot (4 minutes).
To reduce buttons, I settled on: one hour, ten minutes, one minute, and ten seconds. Entering time required less cognitive load and created a theme appropriate pecking gesture.
There's no undo/delete button. If a person enters a wrong time, their only option is to clear it, and start again. To alleviate mistakes, I added audial and haptic feedback to every button press. With four of five senses being used, I found I didn't miss often, and flow was retained.
Rooster's utility has largely been replaced with additions to the Android OS. But it remains in my heart as a fun and helpful learning experience.
I created my FlashLight app as a way of learning some basic Android development. With thousands of flashlight/torch apps on the market, I didn't want it to be just another of the same. Rather than focusing solely on producing the most amount of light, I decided to concentrate on "just enough" light.
There are tons of situations where you need just a little bit of light. Navigating a bedroom where others sleep, checking on a sleeping baby, reading something without ruining your night vision, etc. I wanted a tool that was more than just blinding light, and useful in these situations.
FlashLight controls brightness in two ways. One, by drawing a colored circle to the screen. And two, by changing the screen's brightness. Both are adjusted through one fluid gesture. Swipe up the screen for a larger circle and more light. Swipe down the screen for a smaller circle and less light
Color is another important feature. While white light gives you the best range of brightness, red light helps you see at night. Blue green, offers the best dark adaptation recovery. Also, photographers often paint with light in night photos. To address this, I added a color picker that spans the entire color gamut a screen can produce.
Lastly, in situations where the most amount of light is needed, the ability to turn on the camera flash was added. I didn't want to clutter the screen with more buttons. I settled on a double-tap gesture to toggle between screen light and camera flash.
The need for a flashlight app has been reduced with additions made to Android OS. Still, I find an almost daily need for FlashLight's screen light features.
Over 15 years of experience designing applications that best meet customer goals:
Leading stakeholder requirements workshops
Developing persona, user stories, lexicons, goals, and functional specifications
Creating wireframes, pixel-perfect mockups, styling, and finalized templates
Developing custom web based user interfaces and reusable components
Leading usability testing, analytics, and research
Managing design teams to reach their full potential
Ability to work with teams in agile environments.
A daily intrinsic motivation to stay current on new ideas, methods, development tools, code, libraries, visual design, art, and science.
Solution Software Engineer/Designer – Consultant, Reston, VA
January 2020 – Present
Design workflows, wireframes, and working prototypes that the software team can use to build out their next suite of products and features.
Leading surveys and requirements gathering meetings with customers and stakeholders.
Provide onsite support for deployment of software solutions in customer spaces.
Leveraging customer feedback and industry knowledge to drive product refinement and new innovations
Design Lead/Solution Support – Consultant, Reston, VA
October 2017 – December 2019
Lead and managage design team which services corporate, and customer, branding and web development needs. Participate in meetings, provide team estimations, tasking, and ensure goals are met.
Worked closely with stakeholders, customers, and product managers to guide, shape, define, and design the next set of tools and applications.
Redesigned team workflow and tasking process. Led to better time estimation, better status reports for project owners and management, fewer mistakes, and faster execution.
Instituted a peer review process. Led to better team accountability, higher quality deliverables, and fostered customer trust.
Provided onsite support for customers. Account maintenance, feedback, and requirements gathering. Has lead to feature improvements, expanded our customer base, and revealed requirements for our future offerings.
Chief UX/UI Architect – Consultant, Herndon, VA
May 2012 – October 2017
Led requirements gathering workshops with end-users, customers, developers, and product owners.
Created user personas and stories, and leveraged them to aid in feature brainstorming sessions, prioritization, triage, and preventing scope creep.
Designed wireframes, working prototypes, pixel-perfect mockups, and gathered feedback of new applications in an agile process with customers.
Documented user scenarios, and feature specifications.
Designed an enterprise level data entry and due diligence application which defined a new customer workflow, and lowered time to onboard in a high turnover industry.
Designed a web based call center application for a custom voice solution.
Redesigned legacy products into a single, unified communication and notification platform.
Instituted an early requirement of “mobile first” design across our product line.
Web/Graphic/Interaction Designer – Consultant, Reston, VA
May 2005 – May 2012
Started as a web/graphic designer to build out the corporate brand.
Work closely with in-house stakeholders to improve the logo design, letterhead, marketing materials, corporate brand, and product presentations.
Established and maintained the design of the company’s product line.
Designed, developed, deployed, and maintained several iterations of the corporate website.
Worked closely with multiple customers to build out their presence. Created logos, websites, site content, business cards, and letterhead.
Onboarded new web/graphic designers to take over some of these responsibilities.
Migrated to an Interaction Designer role, and instituted user centered design practices, and usability testing of our products.
Built a user testing room that leveraged microphones, cameras, and screen sharing.
Performed usability testing on our product line. Conducted surveys, interviews, administered tests, and analyzed results.
Worked with security teams to create themed “hacker” games for local security conferences. Included exploitable websites, decryption problems, and scoreboard visuals used to track player progress.
Web Designer/Developer – SAP America, Newtown Square, PA
2003 – May 2005
Worked with marketing teams to create rich HTML email campaigns. Coded and styled emails by hand. Ensured they adhered to corporate design standards.
Designed and developed a web based marketing Campaign Management System (CMS). Worked with stakeholders on requirements gathering. Worked with a database engineer to build out the backend data structures and interactions. Built a FAT client with Adobe Flash that worked as a data entry tool for marketers. Allowed managers to track the progress and success of marketing campaigns
Instructional Designer – Carrier, Syracuse, NY
2002 – 2003
Developed a web based test application that allowed instructors across all their training facilities to quiz students on compressor failures. Instructors could easily change questions through a text file. Quizzes were automatically scored and aggregated.
Developed web based instructional tools for reading and understanding circuit diagrams. Circuit diagram animations were created in Adobe Flash, and could be dynamically loaded into a player. Students could play - pause - and scrub animations, as well as zoom and pan.
Taught classes on the design of better PowerPoint slides.
Created a web based Swiss tournament application for board game conventions (snaptournament.com)
Developed several PWA and Android Applications (Flashlight, Rooster, GeeGee Gamekit, MicList, Shards Tracker)
Participate in local Meetups (Angular DC, NOVA Makers, NOVA Creatives, NoVA UX, NoVa.JS)
User Experience Professionals Association, design conference (2021)
Future Compute, MIT technology conference (2019)
Power Tools manager training courses (2018)
Edward Tufte Presenting Data and Information, one-day course (2018)