Everything You Need to Build a Financial Services and Cryptocurrency App in Adobe XD
From bank apps to money transfers to online shopping apps, digital products have to work with multiple currencies like never before. Now the game has changed again, with cryptocurrencies as part of the landscape. If you’re building an app that involves money, Adobe XD is an all-in-one design and prototyping tool that can help you create your vision, especially with UI elements from our latest free kit.
UX designer and developer Oykun Yilmaz has created the Cooin UI Kit for Adobe XD to arm you with everything you need to quickly and effectively create a personal financial services app. Download Cooin for free here, and give it a try this weekend with some helpful tips from the designer below.
Getting started with the Cooin UI Kit in Adobe XD
Here are the quick steps you should follow to get started with Adobe XD and the Cooin UI Kit:
- Step 1: Download the latest version of XD and the UI kit. Download the latest version of Adobe XD.
- Step 2: Download the Cooin UI Kit. Click here to download Cooin. It includes everything you need to design an app that works with digital currencies, enables money transfers, uses an e-wallet, and more.
- Step 3: Explore the UI kit and everything it offers. Cooin includes flows for buying and selling digital currency, viewing currency values in line charts, creating personal wallets, and sending and requesting digital currencies. It contains common form elements, graphs, charts, light and dark themes, and more.
- Step 4: Start designing. Use the UI kit as a starting point to create your own iOS or web app. All elements are put together using Adobe XD’s handy shared colors, character styles, and symbols to allow you to quickly update the whole project from a single point of reference.
- Step 5: Simply wire screens together to create an interactive prototype you can share.
- Step 6: Share on Twitter and Behance with the hashtag #MadeWithAdobeXD.
Oykun’s top tips for building a cryptocurrency/financial services app with the Cooin UI Kit
Top design considerations for working with cryptocurrencies
The word cryptocurrency may be heard by many people, but not everyone understands it. Because of this, people are inevitably confused and cautious.
We, as designers, should keep this in mind when designing applications that connect average users to this complicated world. We should design simple and familiar user experiences with clean and friendly user interfaces that make people feel comfortable and secure while using the product.
It is important to simplify the experience and interface as much as possible, and help people easily engage with this new digital currency concept.
Designing an app that uses money
It may sound cliche, but keep it simple. It is okay to go experimental with unusual animations for an entertainment app that is targeted primarily for young ages, but when it comes to dealing with money, it should be easy to understand and quick to use. Users should feel in complete control with the app.
Apps that deal with money are used by everybody from every age, background, location, etc. Accessibility and simplicity play important roles. We can achieve that by following some simple rules such as: using familiar/easy-to-read font families, keeping things high contrast for good readability in any light conditions, and keeping UX simple with as few clicks required as possible.
Designing data visualizations in apps
If your app is for a finance professional, you know they will expect to see detailed tables and charts that give as much information as possible. However, if it is for an average user, simpler visualizations with limited data are better. Here are some best practices when visualizing data:
- Keep it simple by choosing the simplest way to show the data. Don’t use over-complicated and unnecessary charts.
- Strive to be human and relatable. Instead of just delivering a number like 87, support it with a friendly message such as “87. That’s 9 percent better than last week.” Give your users some context using regular language.
- Make sure to use the right chart for the data.
- Be careful with the colors you use; for example, don’t use green for negative values. Follow common understandings of colors.
- Add hierarchy to the data with font size, font weight, color, etc. Show as little as possible for the top level, and give more data as you work your way down layers.
Designing a digital wallet
As a common rule, it’s important to make your users feel secure and 100 percent in control while using your application. Primary actions should be clear, and it is important to use the right spacing and font size for your currency section since some currencies typically use more digits than others (for example, $100 vs. ¥10,000).
Designing for payments and money transfers
Create as few steps as possible to complete a transfer. It’s good to keep up with the latest technologies to make this happen. In today’s fast-moving world, people are impatient, and completing a money transfer should not take 10 steps, especially with technologies such as fingerprint scan and face scan on smartphones. Make use of single digital currency codes and make sure they only need their email address to make a transfer.
About Oykun Yilmaz
Oykun Yilmaz is a London-based
Oykun is still a hobbyist developer and a serial maker of side projects as well. At the heart of all his creations is a commitment to building digital products that prioritize simplicity and beauty.
More UI kits, including an e-commerce solution to put your new currency elements to work
If you’re building a full e-commerce product with Oykun’s currency UI kit, check out Meagan Fisher’s Pawtastic UI Kit for marketing one-pagers, screens for multi-step booking and onboarding experiences, and elements to complete purchases. Then, download these additional free UI kits to build travel, gaming, smartwatch, and dashboard experiences for apps and websites, or check out our favorite, free XD UI Kits for 2019.
If you’re new to the tool, read our guide for everything you need to get started in Adobe XD. You’ll learn how to design and prototype in the app and how to fully utilize the UI kit resources available. Finally, for UX insights sent straight to your inbox, sign up for Adobe’s experience design newsletter.