Comments are off for this post.

Graduated! Interaction Design Specialization from UCSD!

I'm so excited to announce my graduation from the University of California San Diego Design Lab. I've spent my weekends over the past 2+ years studying for the Interaction Design Specialization and learned so much from it. Please see my Capstone project on Medium.

No Comments

Winning the Capital One Hackathon

CapTap is the winning app we designed for unifying communities, which leverages Capital One's new developer APIs. Its customer is the users that are flocking to the growing real estate market of mixed-use condo living; It provides a secure and seamless transaction experience that benefits the residents, builders and merchants in these mixed-use developments.

The key technologies driving this application are Vault - Capital One's secure document exchange API - plus Capital One's 2 oAuth APIs. And the key facets driving the user experience are:

  • simple user profile creation
  • a wallet-free transaction experience.

The CapTap team included 2 Full-Stack Developers, 1 iOS developer, a Scrum Master, a Biz Dev leader and myself (UX Designer/Product Manager).

My participation included facilitating brainstorming and development/design discussions; wireframing flows; UI design and asset preparation; whiteboarding; and serving as team presenter to present the project to the Capital One Hackathon's judges and audience.

Our final deliverables were:
- A web application where a customer enters a code provided by the condo association;
- an iPhone app which:
-- gets paired with the account profile (by detecting a QR code);
-- communicates via a beacon to a merchant app
-- has a simple interface for accepting a charge from a merchant;

Wondering what the 1st place prize was? An Amazon Echo Show!

Comments are off for this post.

Compare and Contrast – A Technique for Better Specs


By providing compare and contrast opportunities in our specs, we are infusing ux into the ux/ui hand-off experience.

When we are in the process of providing specs for a product enhancement, the developers are already familiar with the product (assuming they built the original product).

Since they are familiar with the current product, it facilitates their cognitive comprehension of the desired changes if we provide them with a compare and contrast spec that is annotated. The result being that we are working with their current mental model and then gently ushering them into the new design. The annotations help quickly identify the differences. And the side-by-side presentation allows them to

  1. not work from memory, and
  2. be able to quickly identify the differences visually.

Compare and contrast is a teaching strategy employed at all levels of curriculum, since it’s so effective at scaffolding knowledge. By bringing this technique into software development, we can make the process more delightful for everybody involved - especially the engineering staff that needs to interpret the specifications. But similarly for stake holders that need to understand and sign off on designs before they get moved to the development stage.

Since employing this technique in my specs, I find that there is much less back-and-fourth, much less “mansplaining” and simply a lot more calm around the design handoff process. If you haven’t tried it yet, I strongly suggest you do.

Comments are off for this post.

Reducing the Cognitive Load – My UX Strategy

During my years as a school teacher working with second language learners in inner city schools, I gained a terrific understanding of how the brain works. This was important to me because it affected my student’s success: If I didn’t understand their process of constructing knowledge, then I couldn’t effectively teach them new concepts.

In a nutshell, the brain constructs knowledge as such: it has a foundation of comprehension - then it moves into a state of instability as it tries to assimilate a new concept - and finally, it reaches a new level of comprehension. Thus, it goes from 1) knowing, to 2) not being sure, to 3) knowing.

As a UX designer, being armed with this knowledge of how the brain works pushes me to create user experiences that are intuitive. Why? Because the middle stage of learning is by nature a painful stage - as humans, it is normal for us to feel insecure when we are not certain. Uncertainty creates worry and/or anguish - it is a period of emotional struggle for most users.

Thus, as an empathetic user experience designer, my goal is to alleviate feelings of discomfort in my software designs. To accomplish this, I manage the cognitive load throughout the lifecycle of my product so my users spend as little time as possible in the middle stage of the learning process - the painful stage.

Managing the Cognitive Load - Some Examples

To manage the cognitive load means to be aware of the user’s emotional state throughout the use of our product. If the user has to struggle - because we simply must introduce a new convention - then we want to be sure that at the most challenging points of the journey the cognitive load is light. This way their brains will be nimble and agile, as will be their emotional state.

To keep the cognitive load light, we rely on patterns, or conventions, so our users are constantly in a state of knowing. They travel through our designs feeling confident - there are conventions such as back buttons and undo; there is efficient messaging when mistakes are made to gently guide them back onto the correct path; there are concise labels and brief instructions; there is hierarchy to content emphasized by visual design.

Here’s a small example of how I both prevent my users from making a mistake and how I nudge them back onto the correct path if they do make a mistake. When a user has to create a password for a login, I tell them ahead of time the criteria required for a successful password; then if the user attempts to create a password that does not meet that criteria, I give them a gentle reminder as to what the password requirements are - hopefully catching their mistake and giving them a specific error message identifying which part of password has not matched the criteria, such as “must be at least 6 characters long”.

Similarly, in my app Eat Sleep Poop App, I present a novel UI interface - one that simply requires one tap to create an event. Such an interface is not conventional - and the likelihood of users feeling insecure or confused by it, is high. Users expect to tap twice to complete forms, such as “selection + submit = event created”. However, based on my ux research and my desire to design a product that is faster to use, I created the pattern “selection/submit = event created” - thus allowing event creation to occur with one tap (my goal was to make it easier than picking up a notepad and writing down the event; and faster than my competitors apps that require 2 or 3 taps to log an event).

In order to lighten the cognitive load for my users, I relied upon common conventions to pepper the experience surrounding the 1-tap interface. For example, any button on the 1-tap screen that requires more than one tap is a More button ( … ) or an iOS slider; there is a standard tab bar navigation at the bottom of the screen; there is a standard top navigation; there are Headers and color coding to define sections; there is an Undo convention - in case their 1-tap is a mistake; there is a count that appears in the bottom tab bar signaling where the data has been logged. All those conventions are common, so my users are not thinking about them. This means their brains are not busy analyzing data - they are not in a state of learning - yet - because all these conventions fit into their base layer of knowledge. This creates an advantage for me, allowing me to take risks with their emotional state; allowing me to introduce a novel, unconventional pattern - knowing that they will be full of confidence when they meet my new pattern.

Ultimately, until my 1-tap UI pattern becomes familiar to my users, they will experience a moment of struggle when they interact with it. They will pause, they will think, they will take a moment to decide - and based on our understanding of how the brain works - we know they will have a moment of insecurity, perhaps anguish - but they will be able to handle it. It won’t feel overwhelming because their cognitive load is light, and thus their emotional state is positive and confident, as they learn to use the Eat Sleep Poop App 1-tap interface.

Comments are off for this post.

The Double-D Rule

The double-D rule is simply: Differences are Difficult

When designing interfaces, it's important to remember that inconsistencies create challenges for users. If our users have already used a feature in our application, such as a left side navigation, don't suddenly move the navigation to the right side of the page. It's one more point of cognitive load the user will have to absorb - even if it's the exact same menu, just shifted, it's still forcing the user to think - and thus taking up some useful processing that would be best applied to newer/different concepts. Conclusively, don't create differences; rather, be consistent.

Comments are off for this post.

Honda UI defeats Audi UI — with a Shortcut

One simple user interface (UI) feature that Honda has built into its car audio system has increased its ease of use and thus made it safer: the instant-on shortcut for powering up the radio. It's a very simple shortcut that allows the user to skip having to hit the POWER ON button to get started listening to the radio. The POWER ON button is still there, and I actually used it for years before realizing the shortcut existed in my Honda Fit. For comparison, I tested a 2012 Audi to see if the shortcut also exists in that car's stereo interface; it does not.

Noteworthy is how the architecture for the navigation changes when the shortcut is introduced. No longer do we have the POWER ON button being the supreme ruler over the other functions; rather, it has to share the leadership with roll with the AM/FM shortcut function. (see Diagram, below)

Honda Audio Navigation Hierarchy

Honda Audio Navigation's Shortcut is Makes the User Inputs More Democratic