Design Challenge by the Company
The rise of cryptocurrencies has gained attention in the past few years, but participation has been unappealing to many because of the volatility of these assets and currencies. We intend to solve this problem by building a stablecoin product that is backed 1 to 1 by the Canadian Dollar. The target audience of this product are financial institution users. On the stablecoin website, the user should be able to login, purchase/redeem the stablecoin, and view the account history.
Role: Research 🔎, Ideate 💡, Sketch ✏️, User Interface Design (UI) 🎨
Platform: Web 🖥
Design Challenge Requirements
Ideation and Sketching 💡✏️
High Fidelity 👓
Login Screen 📥
• Users are able to use their email address and password that they have set up to login to CryptoNet.
Purchase and Redeem 🔁
• Stablecoin is clearly highlighted in green to help users know that they are going to buy QCAD at par with the Canadian Dollar.
• Users can also select their preferred banking institution and method of payment: a) bank deposit or b) wire transfer.
• When everything is selected, the CTA button will turn blue indicating that it is live and users can proceed to the next screen.
Wire Transfer Request 💸
• It is very important for users to remember or copy down the Reference Code because it plays a crucial role in the purchasing process.
• I have decided to use the eye-catching RED color to remind users that they no longer need to grab the pen and paper or even memorize the Code, as I have created a copy button to provide a simple copy and paste feature.
• I have also layered on a check box section for users to check and confirm that they have copied the reference code before allowing the proceed button to go live.
Amount and Account Name 💹
• Users can also adjust the purchase amount if there is a change of mind.
• I have added in more controls to push users to match the account name with the name registered for their bank account. Again, I chose red to highlight this reminder to the users.
• Similar to the previous screen, a check box is required to be marked before users can proceed with the next process.
Transfer and Recipient 💵 ↔ 🏦
• Transfer and Recipient details are laid out in the process to assist users’ with the wire transfer creation.
• I made sure that they didn’t forget the importance of the Reference Code.
• Once all fields are filled, the bank will then have received the payment request and users can then return to CryptoNet to click on “I’ve sent the fund”.
• The bank will then have received the payment request and users can then return to Mavennet to click on “I’ve sent the fund”.
• A confirmation message will appear to notify the user that an email is on its way once the funds have arrived.
Reflection 🤔💭
Overall, I had a great time doing this design challenge. I had no idea how purchasing crypto works, so I had to spend some time doing some research on existing crypto exchange platform to get a better understanding about the purchasing process (especially via wire transfer).
Time Limit ⏰ (I had about 36 hours), I was able to complete the task with research, ideate, sketch and mock up high fidelity screens.