Momentum Multiply Money App
I did this wire-framing exercise using the Multiply Money App. I chose this app as I use it quite frequently and I think that it is an interesting variation on a banking app.
User flow: transfer money
The Multiply app is for a loyalty programme supported by medical aid company, Momentum. When one spends money at certain retailers credit is earned which reflects in the “savings wallet” on the app. This credit can then be transfered to the “payment wallet” and spent using the linked Momentum Multiply credit card. I have not used my earned credit before and was keen to investigate how it works.
UI elements
The UI elements observed in this flow include buttons, text input fields and a pop up keyboard.
Lo-fi wireframes
I first did quick sketches of the user flow to get a sense of the steps and noticed that the actionable buttons tend to be lower down on the mobile screen.
Task analysis
The process of transferring funds was really straight forward and much easier than I anticipated. The app design is very clean and simple, but I do feel that the use of icons is not completely successful. The icon for withdrawal versus credit are not really clear if seen in isolation and the tiny icon a bit meaningless. A simple plus or minus sign would be more accessible. The colour use for these icons also has no recognisable relationship with the meaning.
Mid-fi Wireframes
User flow click-through indicated by colour. Link to view the Figma working prototype.
Conclusion
This was a fun exercise and I enjoyed executing it in Figma. It was interesting to notice patterns in the UI that effect accessibility such as position of the primary and secondary navigation. When creating an interactive prototype I also realised that there were quite a few extra steps to the flow that I hadn’t thought of when doing the lo-fi mock-ups which is a useful learning.
