Converting Dollars to Crypto

upLink solves this problem by providing users a central location to not only buy crypto but also hold it in your wallet and an option to start trading as well.

Product & Engineering Flow

Building the product was a complex challenge as there were many different implications to consider from the UI side but also engineering. We were dealing with peoples hard earned dollars and needed a secure way to handle the transaction, and properly move the funds on the blockchain.

Working with Developers

As a startup, everyone is accustomed to wearing multiple hats & being a part of a small team. So in building out the flow map for each engineering end point, I had to match a UI screen along with it.

UI Design

The first part of the design process is always the fun one for me, I love exploring different layouts, fonts and color options to provide a great user experience but also making the product fun and exciting to use. These first versions were my attempt in making the product fun, easy to use and standing out from the competition - as everyone in crypto loves using neon green, black and pixelated font faces.

After collaborating with the team, we decided on an MVP design. Now the next step for me was dissecting the UI in the form and taking it apart to truly determine the correct design elements, help text and visual hierarchy.

‍

After another round of revisions we launched with the final product below on fiat2ai.com. One of the additions that come from this round of testing was the add on to our project token ($AI). Since we were encouraging users to purchase BNB on the BSC chain, we added our own token as well because it was also available to purchase on that same blockchain.

Email Notifications

Each touchpoint in the product flow is important to the user. We didn't want to overwhelm the user with too much data on the front end, so we determined that an email sequence was critical to the upLink experience as it was a way to slowly onramp the user to Web3 with bits and pieces of information instead of pasting all the instructions and help text on one screen.

MVP Release

After we beta tested to a small group of members in our community, we implemented their feedback with the version we launched to the public. We used HotJar for user tracking and session recording and Typeform to gather feedback from the community. We paid close attention to the time users spent on the site to where they were hung up the most, that allowed us to make copy edits to text areas and make improved ui changes as well.

Pivoting with user feedback

After being live with uplink for 30 days, we were overwhelmed not just with the positive feedback from our community of users but from the support of other token projects as well. Other tokens reached out to us and asked if they could hold their token on upLink as well, since we had done a spectacular job on making crypto purchases easy.

We added our own AI token as an option to buy aside from the popular BNB coin. Other projects saw that and wanted their own uplink site with their own token. Thus, we are now pivoting from B2C to B2B. We're working on turning the website into a standalone embed widget that any project can use on their own site for their own token.

‍

Rebranding upLink

With the success of the launch and the interest from other projects, we decided it was time for a rebrand. upLink would now be its own product instead of a supported product in the FlourishingAI suite. This meant we needed to redesign upLink with its own branding - completely unique from the call backs to the FlourishingAI brand (colors, fonts and layout).

In Conclusion

upLink is in the middle of a relaunch! The new website will be launching in April and I will be coming back here to discussing post release and where the product will be going next.

TOOLKIT

Figma for wire framing & design.

Draw.io & Miro for wireframing & documentation.

React.js as the language used to build uplink.

HTML & CSS used for the email templates.

Illustrator for the logo and branding.

SendGrid for emails.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

1. Item 1
2. Item 2
3. Item 3

Unordered list

• Item A
• Item B
• Item C

Bold text

Emphasis

^Superscript

_Subscript