Drawing from the research, I created medium-fidelity wireframes to illustrate what screens could look like for tasks such as generating reports (top) and entering loan repayment receipts (above). I refined the design with HCI methods and user testing.

Micro-what?

Microfinance helps the poorest of the poor by giving them access to much needed credit to build a new home, pay for education or create a self-sufficient business to improve their lives. For our capstone project for Carnegie Mellon’s Master of Human-Computer Interaction program, my colleagues and I designed Mambu, a new vision for enabling microfinance throughout the world. Mambu is an online portfolio management software for growing microfinance institutions, the product of an intensive design process to isolate a viable opportunity for emerging markets.

Research

We conducted contextual inquiries and expert interviews with staff, domain experts and clients in the field in Mozambique, and secondary research to understand the banking domain and potential opportunities. I researched mobile and financial design patterns as well as emerging technologies in the domain, and guided the design based on the research.

Generated an activity model based on research to identify and determine how to support critical activities and tasks.

Design Process

We used a combination of service design, human-centered software engineering and human-computer interaction methods to ensure that the software would support the core needs of MFIs. We created diagrams, storyboards and wireframes and validated concepts with users at key points. l led interaction design decisions for the project, conducting user testing with methods such as cognitive walkthrough, which I deemed applicable to refine system interaction.

Concept Video

I created this video sketch to illustrate the main ideas reflected within our final design concept. More details can be found at http://mambuonline.com.

“I think that you have done a wonderful job. I’m sure that you have a brilliant future waiting for you.”

—Unsolicited client feedback

Created a flow model to map out the coordination, interaction and responsibilities of roommates shopping for a couch.

Designing a digital whiteboard for collaborative shopping

My team and I used the contextual research and design process to design a tool for online shopping. We designed the Get•It•Board to allow group members to post and organize online finds, and discuss them as a group. I contributed to every phase of the research, design and evaluation process. I worked with teammates to generate literally hundreds of concepts through brainstorming and to choose the items that best tackled the problems isolated in the research. We used the contextual design process to analyze the workflow of roommates looking for a couch and identify breakdowns in the process that could be supported by an online system. We realized that simply equipping a collaborative system with voting or star ratings actually limited the types of interactions that were part of the process, so we designed a digital whiteboard where users could post their online shopping finds and get a richer discussion going.

Expanded item view. Placement on the board would indicate where the particular item stood in the rankings. Any user could move a magnet to any area on the whiteboard, leaving a comment along the resulting path.

Eliminating the email confirmation step streamlines the process from sign-up to system engagement. The user will not have to break from the flow of the site, and thus their attention will remain engaged with the system.

The tradeoff, of course, is that the email is not confirmed. But this could be done later, whenever the user naturally logs into their email account. Once the system has the user’s attention and is getting them to sign up, it’s critical to take steps that ensure that the system will retain their attention.

A solution to the tradeoff would be to display the user’s email address prominently on the screen after sign-up that precedes logging into the system, with a “Hey, that’s not my email address!” link so the user can still verify their email without having to log into their email account.

Anything that makes the sign-up process fun and easy should be considered, but the tradeoffs should always be considered as well.

Harvest does not require first-time users to confirm their email address to start using their account, but rather logs them in as soon as they finish the sign-up form. This shortens the path to using the system, creates positive affect and begins the formation of mutual trust—all important elements for first-time users. This screen could include the user's email address so that they could verify the information before logging in.

Unfortunately when I went to the same URL at a later time, http://joshcoe.harvestapp.com/first_login redirected to http://joshcoe.harvestapp.com/home, a page where I could not log in. A link given to first-time users that could be clicked more than once should at least redirect to a page where existing users can log in.

I was surprised to find that Twitter automatically shortened my URL.

The automatic “bitlying” of URLs is unexpected and a bit jarring for the first-time user. My first thought: “Where did my URL go?” Then, when I tried to replicate the effect with another URL, it didn’t shorten. I tried several different URLs to no avail. What are the factors that cause a URL to be automatically shortened? The complete obliqueness of this feature can cause frustration for the user.

The positive aspect of this is enhanced interface simplicity: The system simply predicts when it thinks a URL should be shortened, and takes care of the shortening for you. The auto-shortening feature parallels Twitter’s modus operandi of absolute simplicity.

But every positive has a negative: The system can’t read the user’s mind. Common use cases exist wherein the user would want enhanced control over URL shortening, especially in a business environment.

The obvious benefit of an unshortened URL is that anyone who sees the address can recognize the site name, which gains trust and leads to more clicks. So let’s say your company, CompanyName, has a new product that they want to showcase, the Widget. If the new products page exists a couple of folders deep within your domain, would your URL get shortened? It depends. URL example 1 (http://www.companyname.com/introducing-the-wonder-widget) would get bitlyed, while URL example 2 (http://www.companyname.com/wonderwidget) would not. Even in example 2, Twitter displays an ellipsis (…) instead of the wonderwidget text. It’s hard to imagine a business that would want bitlying to happen, as displaying the brand name in the URL would be critical. The user may also prefer to display the entire product name in example 2 rather than the ellipsis, but Twitter’s current system seems to make this impossible.

The user may wish to control the way that Twitter shortens URLs, e.g., in order to display domain names for branding purposes.

An easy solution for this would be to add auto-shortening options to the Settings page. An easier solution would be to maintain a default setting of not shortening URLs that match the URL listed in the user’s profile. The second option would be more in line with Twitter’s brand of being automatic and not requiring the addition of more settings, while satisfying the case of the business professional.

What do you think? Let me know.

Wouldn’t it be great if you could update your contact information in all of your social networks at once? What if you could take that idea a step further, and automatically sync your info with organizations’ databases? No more filling out forms in the hospital waiting area. Or anywhere. Ever.

Meet the Social vCard (Sv), a possible key to each of these aims.

vCards are electronic business cards that contain name and address information, phone numbers, URLs, logos, photographs, and even audio clips. The Sv would be similar; but whenever you update the Sv, your personal information on social network systems could be automatically updated. You could choose which information that you’d want to sync to each specific network. For instance, I could choose to sync my name, email address and phone number with Facebook, but only my email for Twitter.

Similar steps have been taken with the OpenID initiative, to allow users to sign into any site with one ID. But OpenID doesn’t leave flexibility for syncing different amounts of information over different accounts. And why not make the ID tactile, readable in the real world? Imagine filling out a hospital form by simply scanning your Sv at the sign-in sheet. Awesome!

The Sv could even be tied to users’ personal ID cards, such as drivers’ licenses. If someone fraudulently tried to use your contact information, they could be flagged and could face consequences, which would deter identity theft.

I came up with the Sv concept during a post-partying bout of insomnia.

What do you think? Let me know.

There should be an intuitive way to permanently ban a site from becoming a Top Site in Apple Safari 4.0.

The design: My favorite feature of Apple Safari 4.0 is Top Sites, where the user can select from a grid of their most visited sites whenever they start Safari or open a new tab.

In this column, Redesigning the best, I consider systems with excellent user interfaces, and I try to determine how to improve one aspect of the user experience.

The problem: Common use cases exist wherein the user does not want certain pages to show up in their Top Sites. For instance, if the computer is used by multiple people, the user might want to extend the courtesy of not filling up Top Sites with pages that would not be used by anyone else.

My redesign: In Mac OSX, holding down the alt key changes options of certain menus; for example, if you right-click an application on the dock and hold the alt key, Quit changes to Force Quit. Apple should extend this design pattern to Safari’s Top Sites. When the user holds the alt key in edit mode, the X above each site should visually change (e.g., to a red circle with a line through it) to signify that the site would be permanently banned upon clicking. Although this redesign would not have an initial visual appearence, it would utilize a common keyboard shortcut, thus being intuitive for the power users who would be most likely to use the feature.

What do you think? Let me know.

As a Hapa and a designer, I'm offended by the denotation of the Asian race with the color yellow.

Designers must consider all aspects of a design, including not only aesthetic but also cultural factors. The graphic designer who created the Asians for Mike Bloomberg logo ostensibly chose vivid primary colors to go with Mayor Bloomberg’s workmanlike no-bullshit brand. But perhaps they did not consider the cultural tradeoffs of assigning the color yellow to the Asian race.

The standard Mike Bloomberg NYC is a classic dark blue and red combination. Why not stick to one color palette for all of the groups? This would not only strengthen the brand but also make all of the groups feel like one unit. This is how Asian Americans for Obama branded themselves, for example. No cultural faux pas brought on by color choice here:

If you really want to choose a different color palette for every group, at least represent Asians with a color that is not equated with cowardice in American culture. Perhaps gold, as Goldsea Asian American Daily suggests. At the very least, switch the colors around so the text Asians for is red and Mike Bloomberg is yellow. Of course, the designer wouldn’t assign the color yellow to a political candidate who must exude strength. So why assign the color to a race, especially when this color has been the cause of so many racial slurs for Asian Americans through history?

On Mike Bloomberg's Facebook fan page, a voter joins the discussion.

Asians aren’t the only group that got stuck with an unfortunate color, natch. The Women for Mike Bloomberg logo is a bright neon pink.

What do you think? Let me know.

Georgia Tech and SCAD Atlanta’s ARhrrrr, An augmented reality shooter.

BMW UK | New BMW Z4 | The BMW Z4 in 3D Augmented Reality.

Kotaku – Augmented Reality Camera Game Coming to DSi – Ghostwire.

GE | Plug Into the Smart Grid | Augmented Reality.

Gizmodo – Augmented Reality App Puts a 3D Starship Enterprise In The Palm Of Your Hand – Experience the enterprise.

Make: Online : Uncomfortably augmented reality.

Augmented Reality: Can the ‘Stars Wars’ Effect Sustain Engagement? – Advertising Age – DigitalNext.

Augmented Reality Devices: See the Online World While Walking the Real One.

Augmented Reality & The Web: Present and Future Scenarios.

AugmentedAdvertising (AugmentedAdvert) on Twitter.

Interactive demo

“Reduced object visibility may inversely impact usability unless care is taken to allow the users ways to find objects and inspect their state as needed.”

Jakob Nielsen

Here are some guidelines to consider when creating a web form:

1. Don’t require too much. The designer should consider what information is absolutely necessary, and only require that information. It is hard to believe that the system in the example—a site to get a free t-shirt—has any reason to require a Title field. The main goal is to get the user to sign up for an account. So, as many fields as possible should be removed or made optional.

Any additional information, such as gender or t-shirt size, could be gathered after the user has signed up.

Also consider alternatives to forms. Allowing users to upload a vCard instead of filling in a form could streamline the process.

2. Make requirements visible. If a field is required, call it out with a red asterisk or other identifier when the user lands on the page, not after they have filled out the form and tried to submit it.

Here's a subtler example of form design that could be improved. This is a site for actors that requires gender, but they only allow "male" or "female" and have not accounted for members of one sex who identify as the opposite sex, etc. The gender field should be removed from the signup form altogether to disallow the user from thinking about gender issues when they should be signing up for your site.