The artefact that I chose is Jenius, a digital mobile banking app from Indonesia. I might say, it's just like Monzo in the UK. I chose this app because I use it a lot and Jenius had just recently changed its overall interface. Therefore, coming from its old design, I will try to re-create the new interface by using sketching **and wireframing method.
Analysis of the Old Interface
***Image 1: The Old Interface of Jenius**
This photo contains interfaces of the old Jenius app, which are splash screen interface, home interface, and navigation-bar menu interface. (Ariyolo, 2018)*
The old interface of Jenius has everything needed to do 'the basics' of mobile banking. However, as a user, I feel like the journey to finish a task was too long. Sending a money, for instance, which is a feature that is supposed to be the main use of banking, is not shown the first thing in the home page. User have to open the navigation bar menu to find the 'Send It' option and it will direct to a page for sending money. Other than it was too long to send a money, let's also just admit that a navigation bar menu is a bit out-dated now.
Jenius also has a feature to buy, sell, and save money in many currencies other than IDR, such as USD, GBP, JPY, and many more. However, in the old interface, it was really confusing to do that. This is such a drawback since this feature is actually the value proposition of Jenius compared to other digital mobile banking in Indonesia.
Re-creating the New Interface
The first method that I use to re-create the new interface of Jenius is by sketching. Here, I may not try to re-create all the journeys when user is using the app, but rather just focusing on the main features and the features that I like the most from the app. I also tried not to be too specific while sketching and drew the interface as rough as possible, because sketching is not prototyping and should be open to many possibilities of improvement during prototyping step (Buxton).
***Image 2: Sketches of the New Interface of Jenius***
Here, I wanted to create a universal button for transaction, either to send money, pay on counter using QR code, or top up e-wallets. This button should appear in all main menus and has to be easy to spot. Thus, a big circle in the middle of all menus in the bottom is the answer. This way, user don't have to look for the menu each time they need to do a transaction.
In the Home menu, it should show the balance that the user have in many currencies as well as a button to see its transaction history, a button to buy/sell the money in that currency, and adding a saving in a new currency. Besides that, user can also see some insights of their spending, whether they spent most on grocery, utility bills, or anything else.
In the Wealth menu, user can see their active balance in different currencies, their inactive savings (deposit), and the balance that they have in each debit cards (note that Jenius user can have more than one physical debit card and one virtual debit card). In the old interface, user has to click on different menus to see these. Now, with the Wealth menu, they can at least see the summary of each sub-menu and click on it if they needed to see more details or take an action in it.
Lastly, in the Cards menu, user can see their active physical and virtual debit cards as well as its details, its limit of transaction, and which currency are they linked to. User can also edit their limit of transaction and which currency they want their each debit card connect to.
After completed the discovery phase and gathered enough information about the user’s goals and motivations from sketching, I decided to do Wireframing. I chose Wireframing because I can focus more on the content prioritization and functionality. Besides, in prototyping, it is easier and will save a lot more time to test and get immediate feedback in the wireframing phase rather than making changes in a hi-fi mockup (Yadav, 2019).
***Image 3: The New Interface of Jenius app's Wireframes***
Compared to that I drew in my sketch, I added more Insights of the user's transaction history in the Home menu, which are transaction's insight in the past week and within the same month. I also added the interface of the transaction button, which consist of several transaction options. Here, the transaction options were actually inspired by my own experience in using the original new interface of Jenius app. I also added option to link the debit cards to the currency savings that the user have. This is actually a feature that I wish exist in the real app.
Reflection
After completing this challenge, I felt that sketching and wireframing should be the first 2 stages in prototyping. As someone who was skeptical about doing wireframing, thinking that it would be just a waste of time, apparently it is not! Wireframing takes a very short time as I don't have to think of the colors and the shape of each content, which usually both are the biggest factors of me taking a quite sometime to finish a UI design. The only prototyping I have done in my life are just for hackathons, which was why I thought that I should get right into making a hi-fi mockup to get everything done quickly. And surprisingly, after finishing the wireframe, I can see which colors, icons, and shapes I would like to put in my design because now I have a picture of how my overall design will look like.
In the future, I would like to be able to analyze not only from the perspective of a user's journey of an existing app, but also its design system, such as its padding, fonts, colors, etc.
BUXTON, Bill. ‘What Sketches (and Prototyptes) Are and Are Not' **[online]. Available at: https://www.cs.cmu.edu/~bam/uicourse/ [accessed 13 October 2021].
YADAV, Parveen. 2019. 'Wireframes in UX Design — What, Why, When and How?' Prototypr [online]. Available at: https://blog.prototypr.io/wireframes-in-ux-design-what-why-when-and-how-ff07bb513c89 [accessed 22 October 2021].
22 / 10 / 21
Sarah Shafira Novianti
GDO710 Development Practice
MA User Experience Design, Falmouth University
Figure 1. Rona ARIYOLO. Jenius: Karya BTPN yang Menggebrak Perbankan Indonesia. Ariyolo.id [online]. Available at: https://www.ariyolo.id/ulasan-jenius-produk-dari-bank-btpn [accessed 22 October 2021].
Figure 2. Sketches of the New Interface of Jenius photo by the author.
Figure 3. The New Interface of Jenius app's Wireframes photo by the author.