Setting Up the Foundations 

To kick things off, we skimmed through the documents, competitor websites & brand guidelines provided by the client. This helped us get a baseline understanding of: 

• Who is the client? 

• Who are their competitors? 

• What kind of a brand look-and-feel the client was looking for?

By mapping out the core blocks, we started developing a structure around how we wanted the website to look like and what its information architecture (IA) would look like. 

Creating the Mood boards 

While we mapped out the structure, we also pulled together a quick mood board. 

The idea was to focus on experimenting with specific elements like layout patterns, content densities and interaction flows. 

From clean site navigation to a stacked hero section, we leveraged our competitor research to create mood boards that leaned into bold type, darker tones and high-trust UI patterns.

Visual Branding 

Moving forward, based on client feedback and our own research, we decided to use ‘Neue Montreal’ and ‘TT Interphases’ for typography, pairing them up with a black & fiery orange palette to establish contrast. 

We also started defining the page sections early on, opting for a flow that looked something like: 

Hero section —> Why BTR Exists? —> How Does It Work? —> Roadmap —> Participate —> Participate —> FAQs —> CTA button.  

Wireframing & Hero Section 

Once the mood board gave us a clear direction, we moved straight into wireframes. 

We didn’t over-document or make detailed sitemaps, instead approaching it section by section. Each key heading was made modular and easy to scan through for the end user.

We also created 3 quick layout variations for the hero section, with each of them being run through the client for feedback. 

Based on their comments, we further refined the flow, ensuring that all key elements kept moving. 

Structuring Rest of The Page 

Once the hero section was locked, we moved to the other sections on the landing page. Since some parts of the brief were vague, we took a call to resent elements like “Participate” & “Social Team” in a tabbed layout. 

This helped reduce clutter, and made the flow more seamless for the end user. 

Given that the early copy was causing breaks in the layout (owing to inconsistency & length), we replaced it with placeholder content before flagging it off to the client for fine-tuning. 

Some of the key sections we added here included: 

Highlighting the ‘Why’

Next, we added the “Why BTR Exists?’ section to highlight BTR’s fundamental problem-solving capabilities. We placed this section right after the “hero”, setting up the platform for our solution.  

The layout was carefully structured to walk users through the initial pain points and market gaps BTR.fi addresses. 

This made sure the product's very reason for being was clear, relevant, and compelling — starting the story directly from the user's perspective.

Defining the ‘How’ 

Making BTR's process crystal clear was vital for the "How Does It Work?" section. In this section, we specifically focused on breaking down the complex “Participation” methods into easy steps. 

A clean, intuitive layout was selected, which was then used to outline each engagement stage – right from DEX to ATM. Having clear visual paths & concise explanations, users could now grasp how BTR’s solution worked. 

This boosted their confidence & encouraged them to participate as well.  

Comparison Table

We approached the comparison table with a focus on optimal information delivery. Instead of simply presenting data, we actively explored structural choices, even considering "tabs" versus a traditional table. 

Ultimately, we aimed for the most effective layout to clearly articulate BTR's strengths against alternatives. 

This design choice ensured users could quickly grasp key differences, fostering informed decision-making with minimal effort.

Fixed Menu Bar 

Once we’d restructured the page to highlight key differentiators, we made another important call. Based on our research, we decided to add a fixed menu bar that stayed put throughout the website. 

By keeping the important links visible up-top, we eliminated the need to scroll back up. This was a key move, since it helped decrease the effort & also ensured the user stayed on our website for longer. 

Animations & Interactions 

Apart from creating high-fidelity UIs, we also implemented animations & interactive elements that could make the user experience more delightful. 

We did this by adding: 

• Subtle hero section movements which captivated users

• Smooth section-load transitions, and….

• Responsive button hover states 

The intent was to use motion not just as an “aesthetic” addition, but to give the users a clear roadmap.

This ensured that the user journey through was intuitive and engaging – all while enhancing the usability & premium look-and-feel of the landing page.

High-fidelity UI Design 

Once the layout was locked, we moved to the final design. The selected structure was brought to life using high-fidelity UI design, leveraging BTR’s brand system & typography to give the page a premium look-and-feel. 

The “Live Treasury Dashboard” was another key element, which we designed with a clear data hierarchy in place. This enabled users to instantly see how much BTC was backing each token in a seamless, highly-functional manner. 

Feedback & Final Handoff 

The feedback loop was simple. Instead of long review cycles, we shared options early, especially for the ‘hero’ section. Once that was decided, we implemented crucial elements for the rest of the page.

The small visual tweaks (such as layout spacing, section swaps & minor styling) were also implemented simultaneously. Once everything was approved, we packaged the file cleanly for the client’s dev team. 

Conclusion 

We delivered the brand and landing page in under 48 hours, where the final designs were handed off without any revisions required. 

This was the third project given to us by the same client in 90 days!