Inter-American Foundation

An inside look at my UI/UX Design Process

The Story

Inter-American Foundation (IAF), an independent U.S. government agency, was created by Congress in 1969 to channel development assistance directly to the organized poor in Latin America and the Caribbean. The IAF has carried out its mandate by responding with grant support for the most creative ideas for self-help received from grassroots groups and nongovernmental organizations. It also encourages partnerships among community organizations, business and local government directed at improving the quality of life for poor people and strengthening democratic practices.

The Problem

IAF would like to create a digital space for their community organizations to be able to ask questions and get answers from each other. This space can have functionalities like twitter, quorums or forums. The Q&A space will initially be for the 250 active English/Spanish speaking grantee organizations. And in due time, the digital space would be available to graduated grantee organizations, fellows, and partners in multiple languages.

The Goal

  • Connect community organizations in a peer to peer network.
  • Expedite getting answers to questions. (for community organizations)
  • Build trust and foster communication in that peer to peer network.
  • Gather, analyze, maintain, and monitor data

My Role

I was part of the team and responsible for user research, wireframe, prototyping, and visual design. These are then presented to the client through on-site visits and presentations.

 

The Design Process

1. Stakeholder Interview

We kicked the project off with Stakeholder interviews and collected the following data :

  1. IAF grantees want to communicate with each other about technical questions, best practices and resources mobilization
  2. In the Dominican Republic and Peru, IAF partners communicate with grantees mostly by phone, WhatsApp, email and sometimes Facebook
  3. The leading smartphone operating system in Latin America is Google’s Android
  4. In the Dominican Republic smartphone market, Android account for 41%, iOS account for 36% and Blackberry for 13%
  5. One way to include users with varying levels of access to technology is to create multiple ways to interact with the platform (i.e email notifications, SMS, website, etc)

2. Communication Platform Analysis

For Competitor Analysis, I used some of the Q&A websites such as Quora, Yahoo Answer, Twitter, Facebook and WhatsApp with SWOT Analysis.

 

3. Stepping into the shoes of the user

You can’t build a great car without knowing how to drive.

Similarly, you can’t build a great user experience without knowing exactly what users want.

From User Researched and Interviewed, we gathered data and started to building up personas using Empathy Mapping grouping the users by:

  • Thoughts and Emotions: Beliefs, convictions, motivations, worries and goals
  • Environment: How is s/he affected by workplace, social setting, similar products?
  • Social Influences: Who does s/he listen to most? Friends? Bosses? Co-workers? Outside influencers?
  • Behavior: How s/he acts, and how s/he wants to be seen and thought of; In the workplace and public spaces.
  • Pain: Fears, frustrations and perceived obstacles.
  • Gain: Wants, needs and what s/he believes constitutes success.

 

4. Getting some structure: Designing the Information Architecture and wireframing.

The goal with designing the interface was to empower the users to communicate with other users on the real time, with Q&A histories, and conversations by group or subject and take action on it quickly.

 

If a picture is worth 1000 words, a prototype is worth 1000 meetings.. - TOM & DAVID KELLEY-

 

This process starts with designing an information architecture — this is basically a representation of all information that needs to be tracked by the user, and how it should be organized hierarchically.

Putting together a complete wireframe was important because there can be a lot of things to think about, a lot of individual use cases to solve for. A wireframe puts a structure to all the fragmented problems and thought processes running through the designer’s head.

With the information architecture in place, we put together a wireframe that allowed easy access to all relevant information between grantees, and any action they need to take can be done right from within this interface.

 

5. Sketching & low-fidelity prototyping (website)

If a picture is worth 1000 words, a prototype is worth 1000 meetings.. - TOM & DAVID KELLEY-

I transitioned from my pen and paper prototypes towards low-fidelity using InVision

 

Question for low-fidelity Usability Testing

We conducted remote usability testing with one of the IAF Contractors in Peru, via Skype, with the live prototype up and running..

The Feedback:

  • This platform would not be intuitive for grantees to use
  • This is a very oral culture, so how can we do things that don’t require writing?
  • 80-85% of the grantees have smart phones

 

6. Sketching & Wireframes (Mobile App):

From usability test feedback, we started the project all over again for mobile app platform. We used WhatsApp and Blackberry Messenger as our platform reviews.

 

7. Nailing the visual design.

Visual design is exceedingly important to a product’s success. Why? First impressions matter. Studies have shown that users form opinions based on visual design in less than 50 milliseconds. Plus, first impressions are persistent. It’s very hard to shake that first impression you create with a customer.

A visually appealing design primes the user for good expectations even before they start using your product. Once that first impression is created, the user leans toward viewing the entire product through a positive lens.

It’s important to have a consistent visual experience as well. Good design has to extend right from your website or app to your entire product in order to maintain that positive impression

With all this in mind, and after much experimentation, we carefully put together the above visual design for IAF Roots Communication. Now, since visual design is a creative process there’s no definite set of steps to designing something that looks good. However, we decided to use basic visual design principles as guidelines to structure our process.

Here are the things we took into account:

 

TYPOGRAPHY: Readability of UI elements is one of the basic things that you need to ensure. We have been using the Proxima Nova font so far in many of my products. We carried this over to IAF Roots Communication and it worked out beautifully.

 

COLOR SCHEME: Choosing the right color scheme is like dressing up really well. When people have nothing else to go on, they will immediately judge you based on what you’re wearing. If you want that kind of judgement in your favor when people look at and use your product, it’s important to choose a color scheme that is visually appealing.

I use IAF Website color scheme dark blue for this app, to make the website and the app have consistency color with white background. This gave it a clean, professional look.

 

ICONS: Icons play a role of giving important visual information which text by itself cannot achieve. We needed to choose icons that were not only meaningful, but complemented the rest of the design choices.

We had a debate in our design team about whether to choose hollow icons or solid icons. We ended up choosing a set of hollow icons which we concluded were better for representing real-world objects such as group chatting and voice texting. This is more for the grantees who cannot write and read.

 

VISUAL HIERARCHY: While the layout, hierarchy and grouping of different elements were decided in the wireframing process, we needed to visually distinguish these elements in the visual design stage so that the user could know where to find what. Plus, we needed to make the most important elements stand out, so that they were more visually accessible.

For example, the aforementioned informational complexity in each sales order had to be handled carefully by visually distinguishing each and every element. This involved subtle changes in color, font and style so that elements were distinct and separate and did not blend with each other.

 

8. The Outcome

  1. A mobile App. With this mobile app, IAF’s grantees can communicate directly with other grantees
  2. IAF Dashboard, can monitor the conversation through peer-to-peer.

 

Conclusion

Mobile App for Group Chat with ability to share videos, images, audio texting and group chat is complex. It can be hard work. I think we successfully distilled that complexity into something that is really simple to use, and made some lives easier in the process. At the risk of sounding a little boastful, we think that’s pretty awesome.

I hope you took something away from this post. Tell me what you think by emailing me. And if you liked it, don’t forget to recommend it to your network!

 

Please click me

 

Loading...
Loading...