Brace finance is a DeFi powered fintech platform that transition the future of banking by performing essential financial activities using both fiat and cryptocurrencies. The platform allows users to pay, save, spend, invest and earn interest on their assets from one account.
how it started
I became part of Brace Finance by joining their product team as a UI designer in mid 2022. As Brace is an expanding startup with a compact team, I took responsibility for the marketing website and conveyed the company's objectives visually upon my arrival. I reported directly to the Head of Product at Brace Finance. Additionally, I oversaw the handover of projects to developers, ensuring that design choices were properly communicated and that implementation proceeded smoothly.
The main objective was to increase conversion rates and entice user to download the app. The final design is user-centric with a modernised look. It is simple, sleek with engaging animations.
HOW IT LOOKS.
THe Process
During the first week of joining Brace and the product team, I was briefed on the product's functionality, features, and Brace's market positioning. I conducted research on existing finance websites, gathered inspiration, and studied the current mobile design system, which helped me create a web style guide.
Following that, I began sketching and wire-framing my ideas for the landing page structure. The team then conducted user testing sessions with potential viewers, and we recorded these sessions for future reference, storing the documentation in the company's Google drive.
Finally, we incorporated user feedback and made iterations based on their input, leading to the launch of the final design.
MOODBoard
I’ve assembled various images from the website(s) I intended to draw inspiration from, in addition to unrelated components that contributed to the design.
STYLE GUIDE
Creating this was simple and straightforward based off the existing design system, my goal was to create a modern yet classy, imagery like website. I was able to do that by creating unique icons style using the main and complementary brand colours, a real powerful imagery that showcase community.
hero section
A visible navigation was the easiest choice to make to be able to showcase the features and other important options, including a secondary group call to action to download the product.
In the hero area, on the left-hand side, I've crafted an engaging title and subtitle that suitably convey what Brace Finance provides and other crucial details. Below the download prompt are additional advantages of utilising Brace Finance, reinforcing the notion that the tool is highly efficient.
On the right hand side a QR code to engage users to download the app and illustrations of different transactions one can carry out on Brace with a powerful imagery that invokes an happy feeling within the viewers.
features section
This is where the viewers can learn about the different features and products Brace has to offers with active illustrations from the app. This was pretty much my favourite section to design (You should see the live prototype). The first carousel section explain the features of Brace ( Send, Pay, Fund, withdraw). The section has a Call to action to help learn more
The second section displays the different products on Brace finance, I decided to Bento grids to give a compact feels and visually pleasing experience. The illustrations inspirations were gotten from the app and with other visual elements.
Also, it’s easier to get a good view of how the product works so they decide if they want to actually see what was done based on the cover image and the heading text.
app screenshot
In this section, on the left hand side user get to see how the app looks in a 3D mockup resting on a brand element while on the right hand side get to input their mobile number to get a download link. This section was added just to make it interesting
solutions SEction
This section directly succeeds the prior section, enabling audiences to thoroughly examine who Brace targets to address the issue using their solution. A brand blue backdrop incorporating a visual pattern element is employed to accentuate the section's significance to the viewers' perception. The icons have been crafted to align with the brand's theme and convey visually the assorted headings to the users.
lifestyle ease section
This section is directly after the previous section explaining to viewers brace is designed to ease their lifestyle with examples of users using the products and transactions being carried out. It was designed to be very interactive with a loop animation of the cards. The first container of cards move to the left whilst the second container move to the right.
faq section
To facilitate a user-friendly experience, the FAQ section employs intuitive navigation. On the left hand side, there is CtA to see all questions and on the right hand side viewers are able to quickly scan and locate relevant questions and answers.
Footer section
The footer section is not the most exciting part of any website but it's useful has it help users navigate to other pages and useful links viewer might want to visit on the website.
ui design
CONCLUSIONS and takeaways
This was an overall intriguing challenge, and I'm glad I embarked on it. I gained considerable knowledge about visual harmony and equilibrium. I also discovered the significance of colors in triggering specific emotions and actions. Another aspect I've learned is to articulate my design choices effectively. This highlighted the necessity of justifying every decision. Overall, I am thankful for the individuals who offered feedback throughout the process.
Ensure you check the website www.brace.finance
Thank you!
NEXT CASE STUDY
