KeyLead replaced signatures with touch id and checks with smart phones. By providing the banking services electronically, KeyLead eliminated the need for the physical presence of the management in the companies to sign off on the banking tasks of the company. However, user feedback indicated that the application needs to be easier to use.
We followed the Design Thinking Process through which we iteratively empathized to define the problem, ideated and prototyped solutions, and tested the ideas and prototypes.
Design Thinking Process Model iterates over empathizing with users, defining the problem, ideation, prototyping, and testing.
Initial feedback recieved through usability testing with clients and stakeholder interviews revealed that the KeyLead application is difficult to use. Some of the key pain points are summerized below.
- Navigation and menus are too long and need organization.
- The flows are too long and complicated.
- The flows were different in the android and iOS application.
- The terminology originally used in the application were too complicated (either too technical or derived from direct translation of English words which did not make sense in Persian).
- The application originally was designed following material design guidelines at the time that were intended for English cultural and language settings, which made the application unintuitive for its regional user population.
- There were also requests for adding the possibility of managing personal accounts in addition to the company's on the same application.
At the time when I started working on this project, Material Design for Android phones & Human Interface Guidelines for iOS phones provided very limited guidelines regarding designing for a different language and cultural setting. Commonly at the time, designers and developers would flip the entire view (ltr -> rtl) since the writing direction flipped in Persian language (rtl) as opssoed to English (ltr). I challenged this practice by asking the question: Does everything need to flip simply because the writing and reading direction is flipped? A good way to think about the answer would be thinking about how the majority of people are right-handed and that does not change if the writing direction is flipped.
Another Challenge was the issue of inconsistencies in design and flows across the Andoid and iOS application that was rooted in the differences in Meterial Design guidelines and Human Interface Guidelines. For example, bottom navigation bars (tab bars in iOS) were only added to Material Design in March 2016. And long after this update in Material Design, bottom navigation bars were associated with iOS applications which made it harder to convince the developmenet team to implement it (and learn how to do so).
In order to respond to the challenges stated above, I had to question the state of things at the time, the common practices at the time, and even the Material Design Guidelines and Human Interface Guidelines.
This required more usability testings, interviews, and research through resources and papers talking about globalization and localization of software. I also saught help from the community through asking questions on the ux.stackexchange. Some of these questions were awarded popular.
Questioning the Status Quo
Ideation was a long iterative process. I used sketching and index cards as a means for communicating design ideas and alternatives with the team and testing the decisions. I backed up my proposed designs in research and tests with the users. I created Lo-fi prototypes which eventually turned into wireframes, and once it was decided that they are nearly final, I started iterating on the mockups. At the time, I used the InVision App to make my prototypes interactive.
Lo-fi prototype of KeyLead mobile application
Mockups were created from lower fidelity prototypes through an iterative process that involved validating the design decisions by testing with users and receiving the stakeholders' feedback.
The intermediate outcomes of the process were lo-fi mockups, the purpose of which were to focus on the design and flows before getting set on the details.
Lo-fi mockups for KeyLead Android: lo-fi mockups focus on the experience and flows rather than the visual details.
For creating the hi-fi mockups, it becomes crucial to include details about each bank's brand. KeyLead was initially designed for Bank Ayandeh in Iran. However, other banks in Iran also adopted KeyLead. Therefore, I had to design different sets of hi-fi mockups, each representing the brand of the client bank. A similar process was followed to create iOS mockups from the lo-fi prototypes of KeyLead.
The visual details of KeyLead application is different when designed to be used by different banks. On the left, the login and first page of KeyLead for Bank Ayandeh (Android) is depicted. The same pages for Bank Shahr is depicted on the right.
Some changes were needed when the design was to be used in different platforms. Therefore, the hi-fi mockups created had to be translated into iOS and Android design languages.
Designing for Different Platforms
The hi-fi mockups were created in both Android and iOS versions. The picture shows how the same page would look like in iOS and Android.
Prototypes are great communication tools. However, I also use annotations to communicate specific details about prototypes to the developers, specially when it comes to implementing accessible interfaces. Below you can see some examples of the annotations made for reading order and descriptive texts (similar to alt texts in web interfaces).
Communication with Developers
Finally, I used InVision to make the prototypes interactive. The interactive prototype built using the generic lo-fi mockups is accessible through
this link.
