Business Card Caddy App

UX/UI Design and Development

Business Card Caddy is an app that makes a process of sending, receiving, and tracking referrals simple and fast. It removes the pain of losing an important contact and allows members to keep an organized list of their referrals thanks to a clearly structured and intuitive interface.

bni card app iphone mockup
bni card app screens

Business Requirements and Goals

After going through several team meetings during with the members, they explained us the frustrations of completing referral-related tasks, we wrote down a list of problems that our app would have to solve. With Asana we created user stories that helped us to identify users’ problems in details and come up with possible solutions to solve these problems.

Personae

The design team developed personae to establish a clear target audience, to determine what features will be useful for this audience, and to communicate user-related findings to the rest of the team. Using InDesign, we worked with a page layout, imagery, and typography to design visually appealing persona documents that would communicate their characters to the rest of the team.

bni card app persona Eve
bni card app persona Norman

Customer Journey Framework

Using personae, we created a customer journey framework to showcase the whole experience of using the Business Card Caddie app from customer’s perspective. We worked in Illustrator to design self-explanatory infographics that demonstrated user’s thoughts and feelings, as well as touch points, channels, and timeframes.

BNI Card customer journey

Sketching

Our team started out with low-fidelity sketches of user-flows on paper to help us visualize the basic structure of mobile screens. Sketches allowed us to communicate our process of thinking and problem-solving to the rest of the team, and to review and evaluate this process all together.

bni card app sketches

Wireframes

Having decided on the main structure and set of user-flows, we created wireframes that contained a more detailed information than mentioned in sketches. Using Sketch, we designed screens that indicated functions of each element, type of language, as well as kind of imagery being used. 

To make sure that the design works properly, we also made a low-fidelity prototype with Invision to test out user-flows and the interaction between elements.

bin card app user flow

High Fidelity Mockups

Trying to be pixel-perfect, we designed high-fidelity mockups with Sketch to provide a finalized look of the interface that would be used in a prototype for user-testing. Visually finalized mockups allowed us to reveal problems that were not so obvious in grey-colored wireframes.

Clickable Prototyping

To see the product in action, the design team made a high-fidelity prototype with Invision. This prototype served as a product with which users could interact quickly, and allowed us to foresee any failures. It also contributed to a better communication with the product development team, so that they could have a better understanding on how the app should look and behave.

User Testing

Having conducted remote unmoderated user testing, we discovered that overall the app created a positive impression and looked modern and straightforward to users. Even those people who did not know about the organization and were not members themselves had a clear idea about the app and believed that it was designed «to organize different business cards and referrals».

However as in any user testing, we found out that some of the design decisions should be reconsidered. For example, one of the users had concerns regarding the difference between Sort By and Filter options, which served the same purpose from the user’s point of view. Also there was a confusion regarding terminology used («referee» vs «referral»), which might have occurred because the user was not familiar with the referring system.

On a more positive note, it was great to discover a valuable suggestion to have a possibility to create a new Referral right on the Referrals tab for the sake of a better user experience. We were also pleased to hear that people found the design modern, clean, and very comfortable to look at.

Development

Learnings & Outcomes

Business Card Caddie app eliminates pain points that members face by offering features, such as Power Teams, Referrals tracking, and Business Card lists. The app unifies the community and allows each member to build new business relationships and actively participate in the growth of their network.  Our team carefully took into consideration problems that often occurred with organization of referrals and turned those problems into a positive experience that encourages the members to initiate referrals and get referred more often than before.

©2019 A.Y.Technologies

Log in with your credentials

Forgot your details?