YouTrip
2.0 - The Next Gen
I spearhead project 2.0 and design the new homepage.
Role
Product Designer
Duration
3 Months
Whoo! I can’t believe I’m finally writing this. It’s been a long time coming – really. I can confidently say that these past two years at YouTrip have been nothing but the best. I’m honoured to be given the opportunity to own the design of project 2.0 – YouTrip’s biggest project ever. It was a wild and unforgettable year filled with blood, sweat, and tears (ok, maybe not blood), but it’s exactly the type of hard work that I signed up for. Well now, enough small talk. Let’s get started shall we?
Background
YouTrip is a multicurrency wallet that gains its superpower when paired up with the YouTrip card, a Mastercard that can be spent just about anywhere in the world. In mere minutes, Singaporeans and Thais can sign up for YouTrip gain access to the wallet where they can store up to 10 popular currencies. 24 hours a day, 7 days a week, our users can exchange from one currency to another as many times as they want. On top of that, YouTrip’s card is a regular Mastercard. Through Mastercard’s international network, the YouTrip card can be used in over 210 countries and/or territories.
Now here’s the exciting part – there is no markup. Seriously, our users are subject to Mastercard’s wholesale exchange rate (competitive with the google rate) and nothing else. Essentially, YouTrip is a money changer in your pocket. Say I plan on visiting the grand canyon or I’m a big user of Amazon US; when I see that USD is lower than usual, I can instantly convert my SGD to USD and lock in the best rate in advance.
YouTrip’s current revenue model comes from our users spending with the YouTrip card. For every purchase that they make, YouTrip charges a ~2% fee from the merchant. To keep it simple, the more money our users spend, the more money we make. The benefit of this model is that it’s scalable. YouTrip can increase its revenue stream primarily through two ways: 1: Facilitate user spending and 2: Increase monthly active users. With 2.0, YouTrip hopes to hit 2 birds with 1 stone.
YouTrip’s Goal
First we (the product team) need to take a step back and achieve absolute, unwavering alignment with the company’s objective. It’s of utmost importance that 2.0 is the solution we need, not simply what we want. Otherwise, we risk solving a non-existent problem or creating a suboptimal solution. After liaising with numerous stakeholders YouTrip's aspirations for 2.0 is summarized into 3 points:
- 🚀 Evolve beyond a spending card
- 🥇 Deepen market leadership and increase MAU
- 🤝 Standardize design system
“Evolve beyond a spending card” is for the ages. As YouTrip grows bigger and more ambitious, we’re trying to add more awesome and complex features such as P2P, money lending, and loyalty programmes. One such blocker for us is the dated app. Version 1.0 is a simple supporting app of the YouTrip card where you only top up, exchange, and view past transactions. The next app needs to be able to accommodate all the exciting new features in a intuitive and cohesive way.
While YouTrip is already the market leader for cross-border payments in Singapore, we need to keep on innovating and improving to keep the position. Competitors are entering the market with new products, so it’s important for YouTrip to stay one step (preferably more) ahead. We can achieve this by introducing attractive features and making YouTrip’s app a better experience for everyone.
Standardizing the design system is important because it enables the first 2 points. YouTrip traditionally had no formal design system resulting in inconsistencies across different features, especially old and new, and consequently hurting usability. An official design system not only solves this but also makes YouTrip more scalable as it increases the velocity of design and development, and makes it easier to onboard new teammates. With 2.0 I have the rare opportunity to start completely fresh, and the team can make this happen by rigorously documenting the design system.
User Goal
Regardless of what internal endeavours Youtrip has, our users are still the most important stakeholder. This, we kick off project 2.0 by validating our assumptions of what current and potential users like, dislike, what they expect and desire, and most importantly how they feel about YouTrip.
Working with the marketing and data team, we blasted out a massive NPS survey to 300000+ users. Youtrip achieved an NPS of X, more or less industry average. It’s not bad per se, but it falls way short of where we want to be.
We also conduct an extensive, good old fashioned user study with 30+ participants coming from Singapore, Thailand, Malaysia – the next market we’re expanding into. We ask open-ended questions about their spending behaviour, attitude and expectations towards virtual banks, and what draws them towards or away from a financial product. If you’re interested in learning more about the target demographic, check out the image below.
The insight we accumulated from the NPS survey and the user study help paint a clear picture about our users goals, and can be summarized as:
- 🍰 Convenient and effortless spending
- 🤑 Save every cent possible
- 👐 Transparency and trust
2.0 Direction
Now, it’s time for us to forge a solution that can satisfy our two bosses: Youtrip’s goals and the user’s goals.
Here are the 4 core items that define the direction of YouTrip 2.0.
- 💸 More SEA wallet currencies:
- By adding more SEA wallet currencies, YouTrip will become even more usable and attractive for users in our target demographic
- 🧠 Intelligent and seamless app:
- So smooth that using it is an overall pleasant experience. Furthermore, the app should be intelligent and feel more like a companion than a tool.
- 📈 Sense of saving money:
- Our users need to know that they are saving money with YouTrip. This knowledge shouldn't be left up to our users guesstimating
- 🏎 Friction-free onboarding journey:
- To make YouTrip more easily enjoyable, we want to smooth out the onboarding process so users can become YouTrip experts in no time
Each feature of 2.0 – be it the homepage, exchange, or even the FAQ – should be solving one or more of these core items.
Design Direction
YouTrip’s 2.0 project, being a complete redesign of the app and brand, gives us the opportunity to create an official design direction. Having an overarching design direction is vital for us to ensure that all our designers are working on the same page and create designs that are consistent. We leveraged our insights from past data, user interviews, NPS surveys, market trends, etc. to come up with these four pillars:
- 1. Designed for millennials & Gen Z
- Our core demographic are millennials and Gen Z, and our design should reflect that by being innovative and engaging. In 2.0, we want our users to feel:
- A sense of human touch
- Lots of fun
- Occasional randomness and surprises
- Intelligence, a feeling of sci-fi and high-tech
- 2. K.I.S.S (Keep it simple, stupid)
- A design principle first used in the UX Navy in the 1960s, KISS (Keep it simple, stupid) suggests that simplicity is key and that we should avoid any unnecessary complexity. For 2,0, we want YouTrip to be:
- Easy to navigate
- Complete transparency – no hidden rules/limitations
- Ability to self-serve, minimize CS requests
- Readability over 100% accuracy
- 3. Save every cent
- One of the ways YouTrip goes head to head with competitors is by offering the best rate, but what’s more important is that our users know we’re helping them save more money. For 2.0, we want our users to feel:
- We’re providing them with the most competitive exchange rate
- They can save even more with YouTrip (merchant deals, etc.)
- A please feeling after spending money
- 4. Friction-free onboarding journey:
- Being a small-ish virtual wallet startup, not everyone knows or trusts YouTrip. A common concern we hear from current and potential users is that they hesitate to leave their money with YouTrip or use YouTrip for large purchases. To build trust with our users, 2.0 needs to:
- Respect user’s privacy
- Full transparency
- Security and stability
- Error prevention and handling
Each feature of 2.0 – be it the homepage, exchange, or even the FAQ – should be solving one or more of these core items.
Key Takeaways from 1.0
Reinventing the wheel is not what UX design set out to do; We focus on what’s good, what’s not so good, and how we can make it all great. YouTrip launched with version 1.0 back in 2018, the good ole pre-covid days. Over the next 3 years, the knowledge we gained from a multitude of sources (data, product performance, user studies, focus groups, customer feedback, competitive analyses, etc.) has helped us to identify and rigorously document YouTrip’s 1.0 is good at and what it’s not so good at.
I’m going to do a little information dump here to get it all out of the way. It’s much deeper in reality, but here’s are the simplified key takeaways from 1.0:
- Clear call-to-action
- Transaction history and wallet balances visible at first glance
- No BS – We are what we say we are
- Navigation is readable
- Top up & exchange are self-explanatory
- Exchange rate on par or better than competitors
- Offers the same benefits as competing FX products while keeping simplicity
- Adamant promise of trust and reliability
- └ YouTrip never failed to uphold their promises since inception
- Some information is left out in favour of simplicity
- └ Detailed transaction history
- └ Detailed exchange rates and breakdown
- └ Users are forced to find information in FAQ
- Some information is left out due to oversight
- └ Wallet and spending limits are not conveyed in the app
- └ Promotional information is only available on social media
- └ Information left out is often not found even in the FAQ
- Monthly statements and transaction breakdowns aren’t available
- └ Users have to resort to taking unwieldy screenshotting
- └ Significant number of users using YouTrip for work need to file claims
- No budgeting and monthly breakdown
- └ Difficult for users to track their monthly spending
- └ Users want more control over their money
- Lack of two-factor-authentication for online purchases
- Account login is relatively insecure (4 digits PIN)
- No lost card flow
- Some highly demanded SEA (MYR, KRW, THB, etc.) currencies are unavailable
- No incentive to use YouTrip for non-FX purchases (especially during COVID-19)
- └ No cashback on purchases, merchant offers, and loyalty programs
- Spending limits too low for dedicated user base
- Can’t be used in any mobile wallets (apple pay, google pay, samsung pay)
- Users have to jump through hoops to access some critical information
- └ Can’t compare an exchange rate both ways
- └ No historical exchange rate chart
- Lack of virtual card
- └ YouTrip is useless before the physical card arrives
- Unusable at some merchants (Wechat, AliPay, Amazon, etc.)
- └ Not accepted in some regions
- Transaction update can be slow
- └ Edge cases may take up to 5 days
- └ Account balance not always immediately updated
- Cards used to top up YouTrip are automatically saved and cannot be removed
- └ Can only ‘save’ one card at a time
- Needs additional topup options
- └ Paynow, Grabpay, Amex, Paypal, etc.
- App design and UX is not standardized, so there are a lot of inconsistencies in the app lowering quality and causing confusion
- Onboarding
- └ Can take up to 2 working days just to pass KYC
- └ Up to 2 weeks to start using, depend on when the physical card arrives
- └ Singaporeans overseas can’t get the card shipped to them
- └ People aren’t convinced that their money is safe with YouTrip and hesitate to top up or store money
- └ Minimum top up amount is high
- Offboarding
- └ Users can’t withdraw money out of YouTrip
- └ New users don’t want to deposit much money in the scenario that they don’t end up using YouTrip much
- Frequent downtime and maintenance
- └ Downtime and maintenance is not communicated effectively
- └ Vital system messages are only found on Twitter
- Occasional crashes due to old code
- Users can’t connect with support staff from within the app
- Inadequately trained support staff failed to provide users with relevant solutions
Standardizing the design system is important because it enables the first 2 points. YouTrip traditionally had no formal design system resulting in inconsistencies across different features, especially old and new, and consequently hurting usability. An official design system not only solves this but also makes YouTrip more scalable as it increases the velocity of design and development, and makes it easier to onboard new teammates. With 2.0 I have the rare opportunity to start completely fresh, and the team can make this happen by rigorously documenting the design system.
While YouTrip is already the market leader for cross-border payments in Singapore, we need to keep on innovating and improving to keep the position. Competitors are entering the market with new products, so it’s important for YouTrip to stay one step (preferably more) ahead. We can achieve this by introducing attractive features and making YouTrip’s app a better experience for everyone.
Glossary
I’ll try my bestest to avoid as much jargon as possible, but just incase I can’t keep my promise and you want to know what the heck SmartExchange™ means, here’s a glossary:
Top up:
The act of adding money into your YouTrip account.
Exchange:
Converting one currency for another in the YouTrip app.
Peer-to-peer (P2P):
Transferring money between YouTrip users.
Credit:
Upcoming feature for users to borrow money.
Wallet:
A store of value for a specific currency.
Wallet currency:
YouTrip has 10 currencies with wallets. Users can exchange money between these wallets to their respective currencies.
Non-wallet currency:
A currency on the MasterCard network (over 140) that is not a wallet currency. Users can still spend in these currencies without markup, but can’t exchange beforehand.
SmartExchange:
SmartExchange automatically exchanges money when required. If you make a USD purchase with an empty USD wallet, SmartExchange will take from non-USD wallets to pay for your USD purchase. Only applicable to wallet currencies.
Monthly active users (MAU):
Number of unique users using YouTrip each month.
Net Promoter Score (NPS):
A measure of customer experience. More info
Designing the Homepage
The value of a beautiful homepage needs no explanation; It’s the first thing a user sees (sans onboarding) in just about any app you can think of. Consider this: if the app were a person, the homepage is the face!
The challenge comes when I try to make the homepage not only beautiful but also functional. The homepage is the sole entry point to most of YouTrip’s features, notably the bread and butter functions (top up, exchange, and send), so it’s important that the outcome is both cohesive and intuitive. Ideally, I want the users to just know where everything is without much of a learning curve.
Concept V1 - Low Hanging Fruits 🍒
Changes
Note: Changes pertaining to more than one category will be placed under the best match.
Designed for emotion
- “Quick pay” area to facilitate P2P transactions
- Usage of flat colours for a more modern feel and better clarity between sections
- Rounded corners for a friendlier vibe
K.I.S.S
- Total wallet balance for enhanced clarity – valuable to Smart exchange users who just want to top up and spend
- New page dedicated to displaying all non-wallet currencies in an easy-to-digest format
- Wallet display now has flags for recognizability
- ‘Top Up’ button moved inline with wallets as the core CTA
- Introduction of coloured transaction icons for more distinct categorization
Save every cent
- Introduction of a marketing banner section to showcase deals and promotions
- Marketing team can upload custom material from the backend and will be updated for specified user group
Build trust
- Persistent scheduled maintenance and outage banner for transparency
Futureproofing
- Exchange feature moved to bottom navigation in anticipation of historical exchange graphs
- P2P feature moved to bottom navigation in anticipation of cross-border remittance feature
Pain Points
- Conservative design feels dated and lacks delight
- Design feels like 1.0 with a new theme rather than next-gen 2.0
- Hard to view all currencies at once especially with more currencies planned
- Total balance has technical limitations
Concept V1 performed well at achieving its primary objective: tackling the lowest hanging fruits. However, outside of general usability improvements, the design was simply unremarkable. The star of Version 1 is the marketing banner section as it promises to drive ecommerce transactions.
In Concept V2 I attempt to introduce sci-fi elements with a delightful twist to reflect YouTrip’s direction.
Concept V2 - YOLO 🚀
Changes
Designed for emotion
- Sci-Fi animations upon entry for a WOW! factor
- Introduction of a bold fullscreen background that support static images, animations, and videos
- Displayed background is completely changeable from the backend and updates for all specified users
- Transaction list tucked away in it’s own card and displays 2 to 3 of the most recent transaction; can be expanded to fullscreen with a tap or swipe
- Top up, exchange, and P2P combined under a large “U” action button
- “U” Action button supports gestures for more advanced users
K.I.S.S
- Wallet currencies now offer an exploded view where users can get a detailed view of their finances
- Additional entry point to Top Up wallet in exploded view
- Pressing and holding a wallet gives users a shortcut to the exchange page the relevant currency prefilled
- Introduction of a profile button that contains settings and everything user-related
- Reworked ‘Total Balance’ into ‘Estimated Total Balance’ for transparency;
Save every cent
- Marketing banner section size reduced to display more items
Futureproofing
- Settings removed from navigation bar to make space for 2.0 features (Credit)
Pain Points
- Exaggerated Sci-Fi elements is too much for a financial app because it starts to feel like a videogame
- Fullscreen moving background may pull attention from the CTA points
- Reduced transaction list means an extra step for ~20% of users who launch the app to view their past transactions
- Newly planned expansion into Malaysia and Phillipines forecast more small viewport users who won’t be able to see either the fullscreen background or their most recent 2 transactions.
- Call to action buttons not as prominent at first glance
Concept V2 is how I envisioned YouTrip if it was straight out of a Sci-Fi cyberpunk world. The over-the-top design elements help test the limits of what we can (and can’t) viably do to a financial app. An internal showing was met with mixed feedback; some people loved the WOW! factor while others thought it was ludicrous. However, one thing was certain: everybody was onboard with the delightful experience this vision brings.
In Concept V3, I explore how I trim down the over-the-top elements of Concept V2 while preserving its magic.
Concept V3 – Magic Is Real 🎩
Changes
Designed for emotion
- Fullscreen background replaced with smaller expandable dynamic background
- Dynamic background can be expanded to reveal full picture and photo credits (if applicable)
- New virtual card section that can reveal card information for online purchases
- YouTrip card can be locked and unlocked conveniently from the homepage
- Optional dark mode for our emo fans
- Chat-bubble-esque “YouTrip Bot” to communicate simple messages to the user
K.I.S.S
- Top Up and Exchange returned to homepage as the key CTA
- Empty wallets hidden by default on exploded view (can be shown with “Unused” button)
- “View Other Currencies” button made more prominent for user education
Save every cent
- “YouTrip Bot” will clearly communicate when actions such as Top Up, Exchange, and P2P are complete
Futureproofing
- Additional estate on navigation bar for upcoming features (Deals page and money lending)
Pain Points
- Lackluster small viewport support
- Slight learning curve for returning customers
Concept V3 the chosen one that will ultimately shape the future of YouTrip. It’s like Exodia where you combine the problems solved by V1 and the magic of V2, then season it with a little bit of viability.
A sharing with stakeholders, was met with great feedback. V3 seemed to have found the balance between next-gen and keeping it simple. The next step will be using feedback I got to make minor adjustments to concept V3 and make it real.
Latest Version – MORE VIABILITY SAUCE! ⚡
Changes
Designed for emotion
- Chat-bubble-esque “YouTrip Bot” to communicate simple messages to the user
- Fleshed out low-scope design of dynamic background for 2.0 launch
Build trust
- “YouTrip Bot” will clearly communicate when actions such as Top Up, Exchange, and P2P are complete
Save every cent
- Worked with marketing team to define requirements for marketing banner section
The New Homepage, Explained
The latest version of the homepage is split up into 5 different sections:
1. Dynamic background container
This section is home to the dynamic background that promises to deliver a multitude of emotions to the user. The background is configurable live from the backend and supports static images, animations, and videos. The content can be related to travel, events, and promotions. Down the line, we hope to implement some location-based content.
The user can tap the background to expand the background and display the full uncovered content. To the bottom-left are the credits, if applicable. If the content is produced by YouTrip, it can link to the company’s socials. For promotional material, it can be linked to promotion details.
The bottom-right has an easy access light/dark mode toggle.
To the top-right is the user’s icon. This icon is used for social-related features such as P2P. Tapping it reveals the user’s profile and the app settings.
2. Virtual card
The virtual card helps facilitate e-commerce transactions by making the user’s 16-digit card number, expiry date, and CVV easily accessible. Tucked away behind default, user can reveal the information by tapping the eyecon (heh, get it? eye icon). The user can also conveniently lock and unlock the card here.
But the exciting part is that the virtual card is available right after signing up. Once the user’s application is approved in seconds, they can start using YouTrip before their physical card even exists. This promises an awesome onboarding experience where users don’t have to wait days or even weeks before they start YouTrippin’.
3. Main action container
The total balance is the wallet’s aggregated value in SGD. This is valuable to our SmartExchange users because they need to know whether they have enough to keep spending. As the total balance fluctuates along with exchange rate, tapping the number will reveal an explanation that this number is only approximate.
Top Up and Exchange remains YouTrip’s bread and butter, so they’re placed in a location that users can access quickly.
The wallet list got numerous upgrades: Flags so currencies are easier to recognize, exploded view to see more wallets at once, and most importantly a way more transparent way display non-wallet currencies. This is going to help out 70% of our users who have never performed a non-wallet currency transaction. Why? We found out that most users didn’t even know about non-wallet currencies.
The marketing banner is a flexible space where YouTrip’s marketing team can create promotions from the backend and have them displayed on the homepage. It’s a flexible ordeal – everything is customizable down to the key visual, the order of promotions, the CTA, and more. This solves a key pain point where users aren’t aware of the deals YouTrip are offering.
4. Transactions container
The transaction history aims to display 2 to 3 items depending on the user’s viewport. The new icons feature more colours for better categorization and paves the road for our planned budgeting feature. The search entry point allows users to find exactly what they need fast.
2.0 also introduces logic to clean up the title of transactions. For example, a TaoBao purchase for Singaporeans will appear as “Taobao.com” rather than the regular “ALI*www.taobao.com,HANGZHOU”. Of course, all details will be displayed if the user taps on the transaction.
5. Navigation bar
Items of lesser importance have been removed from the navigation bar to make room for upcoming features.
FIN.
At the time of writing, 2.0 is still under development. I’d love to tell you more about the numbers behind OKRs and everything else, but that would require me to reveal more than I’m supposed to. And, I’m stopping here otherwise it would be wayyy too much. I also worked on Top Up, Exchange, P2P, Perks, Transaction list, Search, Profile, and Credit, for starters. If you’d really love to dig deeper, give me a shout!
So yeah – this about wraps up how YouTrip’s future direction and homepage was created. If you really read this big-ass wall of text, I’m eternally grateful. And also a little bit confused. I mean, don’t you have something better to do? Just kidding 😊, thank you, thank you, and thank you!
Back to the homepage, I’m proud of my creation and the vision that it represents. I’m even more proud that my prototype was shown to investors and was received amazingly. But what made me the most proud? The team. I’m most proud to have the unwavering support of incredible people throughout the journey. Special thanks to my 2.0 partner and product manager @Dickson Chu, design teammate @Jeffrey Lee, and of course my boss intern @Crystal Chiu.
What I Learned
I usually list specifics, but I learned so much in this project that it’s a little difficult!
- I learned that managing expectations is the key to working with multiple stakeholders who all want something different from you at the same time.
- I learned when, where, and how to compromise.
- I learned how to create a new design system.
- I learned how to manage a direct junior.
- And I learned that being in the MTR really gets my brain juices flowing.
Next Steps
As exciting as it is, 2.0 isn’t YouTrip’s endgame. In fact, there is no endgame. My next step is to explore new opportunities that can help bring bring significant value for our users, pull ahead of competition, or propel YouTrip beyond a spending card.
And your next step? If you have any questions or just want to chat, you can reach me anytime through Linkedin. If you’re reading this because I applied for your opening, then what are you waiting for? Let’s get working! ! 🙂
