I was given an assignment to reimagine the referral page of a local bank's mobile app for consumers.
While making significant changes to the layout of the page to create a more user-centred design, I decided to retain the original style of the app by keeping the same colour scheme. This is so that real improvements made to this page will not require design changes on other pages. I also tried to stay true to the brand's official font style, but unfortunately, I had trouble downloading it.
Besides altering the layout and rearranging the content, I also made the texts more concise without losing the key message(s).
This is the original page with some thoughts:
Here's a look at my proposed new design:
I am not professionally trained in visual design, but I feel that the line division between the pink and the white helps to draw the user's eyes to the code, which I assume is the main objective of the user entering this referral page. Simply by tapping on the code, the code is copied to clipboard, ready to be pasted on chat conversations for sharing. Tapping on "Share now" will open options to the various messaging apps the user has installed, with the most used one appearing first, before suggesting the people he/she would send the code to, by recency of their conversations.
The successful referral journey at the bottom of the page is inspired by Booking.com's mobile app. I think it is a smart design to motivate users to complete all 10 referral chances. After all, it's human to want to complete unfinished tasks - psychologists call it the Zeigarnik Effect. A reminder (that is not too frequent because it can get on the user's nerves - stop asking me to update my iOS, Apple!) is just what is needed to prompt the user to take action.