Ramenpay
A financial payment app design that gives employees subject to a two-week pay cycle access to their hard-earned wages their way and purchase necessities
Timeline
3 weeks
Team
3 UX & 1 UI
Tools
Adobe XD, Illustrator
My Role
UI Designer & Project Lead
Skills
Mood Board, Style Tile, Style Guide
Logo Design, Animation Design
Prototype
OVERVIEW
About
Ramenpay is an on-demand wage financial wellness benefit product offered to employees through employers to meet the ever-changing money needs of employees. The current two-week pay cycle was introduced at the advent of the "Industrial era" and has not changed until now. Ramenpay is bringing wages to the 21st century! It enables employees subject to a two-week pay cycle the ability to withdraw their accumulated but unpaid wages the very same day, and purchase necessities with their unpaid wages. Ramenpay gives employees access to their hard-earned wages their way. Now, without getting exploited by high-interest and fees bearing credit, any day can be a payday.
Challenge
According to research, almost half of Canadians are living paycheque to paycheque. And they are not able to access their wages between paydays. That's more people than the population of the Netherlands.
Quick Peek to the Solution
We were instructed to design a mobile app for Ramenpay that can allow employees to redeem the wages they already earned between paydays. The goals of this mobile app are:
-
Communication purpose: clearly explain the app purpose during the onboarding process;
-
Create a registration process: all employees to sign-up (link their employee IDs & bank accounts);
-
Build a dashboard: a dashboard to show employees their available wages to withdraw;
-
Create a shop directory: allow employees to search for merchants that are relevant to them;
-
Generate payment: generate barcodes for employees to use at the merchants' point-of-sale.
PLANNING
Meeting the Users
After the UX team completed the user research, they identified two personas that would benefit from an app like Ramenpay.
Leanne
Leanne is a single mother in her forties. She works full time as the head waitress at Boston Pizza. She makes minimum wage. More than anything, Leanne wants to support her two children and give them the most enriching childhood as possible. They are living paycheque to paycheque and she is no longer eligible to use her credit card or take out more loans. She needs a way to get money between paycheques to support her kids and pay off any unexpected expenses.
Chris
Chris is a young guy who is almost in his thirties. He is a school teacher with a girlfriend whom he lives with. Together, they have a mortgage and are living the Canadian dream. Their household income is 110,000 and they are comfortable. However, unexpected expenses are not in their budget. If their home needs repairs, they have no money set aside to pay for it. Between student loans and paying off their houses and car, there isn’t much money to go around. Chris needs a way to access quick cash to pay for unexpected household repairs and other emergencies.
VISUAL RESEARCH
Why
As a UI designer, I started our visual research process with an inception sheet. An inception sheet is great for designers to use as it helps set a solid base for the design.
Starting with "Why", I focused on understanding the business plan of Ramenpay. In this project, the "Why" is to design an Android app (our research showed that medium-to-low income users are more likely to use an Android phone.) that allows users subject to a two-week pay cycle to access their wages in their own schedule and purchase necessities.
The visual language of this "Why" can be explored in the following five categories:
Mood: Emphasized on financial wellness and a new any-day payday concept, the mood of Ramenpay should be safe, modern, and flexible. Also, because many Ramenpay's users are medium-to-low income people who live in debt, Ramenpay should convey a relieved, optimistic, and rational feeling.
Colour: Based on the mood, the colours of Ramenpay should be reliable, professional, calm, and encouraging.
Shape: Organic and curvey reflect the money flow.
Space: An overall open and balanced space can generate a flexible and relieved mood.
Movement: The movement of the app is simple and smooth, very easy for users to navigate and move around.
Mood Board
I created two mood-boards. While they are both modern and relieving, they have different design directions.
I used blue as the primary colour in Mood Board 1 since it is favoured by many people. A non-threatening colour, blue calls to mind feelings of calmness or serenity. It is often described as peaceful, tranquil, secure, and orderly. Blue is a sign of stability and reliability. The wavy lines also add some flexibility and make it more user-friendly.
Mood Board 2 is in a fancy dark mode. The violet and blue colours add some calm emotion. It’s a bit luxurious but the idea is to give Ramenpay confidence and a feeling that these users will have financial freedom in the future.
Mood Board 1
Mood Board 2
Style Tile
With the colours and mood in place, I set to continue my exploration of the design and worked on two sets of style tiles to get a better idea of what the app should look like.
I presented them to our client and he picked the white mode. Before the user research, we thought this app would contain some infographics on a dashboard. After the user research, the UX team removed them and made it more simple. So I updated my style tile accordingly.
Style Tile 1
Style Tile 2
Final Style Tile
Style Guide
I also worked on a Style Guide for the client. The Style Guide showcases the logo. I created (more details in the next section), colours, typography, and icons/buttons based on the visual preference from the Style Tile. The picture sizes, sample fields, fab variation and other design components are also included.
Logo Design
Because Ramenpay did not have any logo or branding, I did some logo exploration for our client. The logo should be simple, bold and versatile that can be applied anywhere for marketing purposes and people should be able to easily recognize it.
The idea behind the top 2 categories is to incorporate letter R (ramen) & letter P (pay) in a noodle-ish way. Design 1.1 & 1.2 can be viewed as one single noodle that shaped in R & P. Design 1.3 follows the same idea. The bunny ears on top refer to the chopsticks that people use when eating ramen. Design 2 incorporates R&P in a different way. The curvy tail reflects a single bouncy noodle. Design 3 has a very different approach. The idea comes from the fish cake in ramen. The spiral can be viewed as one single noodle or the fingerprint for financial security (Ramenpay allows users to use fingerprint to login).
I also put a circle around and filled with yellow colour to make them look like a coin since Ramenpay is a finance app. In terms of marketing, the logo can go with any colour, even black and white, depending on the context and environment. Our client loved 1.1. The capped point reminded him of noodles.
Logo Exploration
Final Logo
FINAL DESIGN
High-fidelity Wireframe
As the UX team finishing their mid-fi design, I moved on with the high-fi stage. I started with the home page since it's the start of the show. The home screen must be strong and clean and allow users to find their balance immediately. While there are many numbers and information on the home screen, visual hierarchy is significantly important here. Users like Leanne and Chris who live on paycheques seriously worry about their available wages and more care about the remaining days left before the next paycheque, rather than the date of payday. The rest screens follow the same design direction and patterns. Below are some examples of the main functions of Ramenpay.
Home_Mid-fi
Home_High-fi
Registration / Sign In
Home
Account
Make A Purchase
Animation Design
To make the whole user experience more delightful and engaging, I came up with some animation ideas. Loading Animation 1 comes from the idea of cashflow and the loading of savings. Loading Animation 2 represents the idea of a rolling coin. Loading Animation 3 matches the name of 'Ramenpay'. Loading Animation 1 was applied in our final design. Animations were also applied in the floating fab and during the registration process. To view the complete prototype, please click on Ramenpay Mobile Link.
Loading Animation 1
Loading Animation 2
Loading Animation 3
Floating Fab Animation
Registration Process Animation
THE END
Final Thoughts
Ramenpay is a great experience for me to build the visual hierarchy by colours and fonts, especially in a small space like a phone screen. I also enjoyed the animation design very much. Not only does animation design makes the user experience delightful, but it also makes my design process interesting. Our client was very satisfied with our final product as well.