MAX ETNs
About
A user-centric digital platform providing sophisticated investors with tactical and leveraged exposure to market sectors.
Role
Product designer
Service
Web design
Deliverables
Website prototype
Website
Overview
In finance's ever-changing landscape, creating a digital space that blends information and accessibility is essential. As the sole product designer on the team, the task at hand was to design a user-friendly website for MAX ETNs, Bank of Montreal’s new and innovative investment product.
I was responsible for leading a comprehensive design process, which involved conducting competitive analysis, sketching low-fidelity prototypes, refining mid-fidelity designs, and ultimately crafting polished high-fidelity prototypes.
Discovery
At the initial client meeting, it became clear that BMO had an ambitious vision: to launch a new brand offering sophisticated investors 4x leveraged exchange traded notes (ETNs)—a pioneering market product. The brief was to create a product sparking excitement while maintaining accessibility and simplicity.
Partnering with a team of creative directors, our mission was to build a compelling brand and establish its online presence. As the lead designer, I devised a 5-step design process to steer decisions and bring this vision to life.
Design inspiration from financial and crypto websites.
02
Conceptualization
As I navigated through the websites, a common theme emerged: sans-serif display fonts and ample negative space, which made processing complex information easier and guided me seamlessly through the sites. This discovery was important to note, as it highlighted the necessity of a clean, uncluttered design to enhance user comprehension and navigation.
Notably, cryptocurrency websites were more engaging and interactive, often featuring dark themes, unlike the predominantly light-coloured designs of financial institutions, which focused more on information architecture. These observations inspired me to create an experience that blended the excitement and interactivity of cryptocurrency websites with the structured information layout of traditional financial institutions. Armed with insights, I began sketching low-fidelity prototypes to explore various layout possibilities.
03
Alignment with Brand
As a good foundation for an effective user experience design, the prototyping stage began with information architecture. Understanding the content, context, and user was key to developing a clear site map, ensuring that information on the site was easily findable and understandable. With the site map finalized, I moved on to rapid prototyping, incorporating feedback through several rounds of revisions with the client.
To maintain a cohesive and recognizable brand presence, a comprehensive style guide was created, aligning every design element seamlessly with the unique brand identity developed by our creative team. This step was crucial as I transitioned to high-fidelity prototyping, ensuring that the final design stayed true to the brand’s vision while providing a polished and user-friendly interface.
Site map
Style guide
01
Research
To kick off, I delved into understanding ETNs through a thorough Google search, exploring who buys them, who offers them, and their pros and cons. I analyzed the websites of financial institutions offering similar products, focusing on information architecture, design layout, and accessibility.
Given ETNs' association with volatility and risk, I also examined cryptocurrency websites with similar investment products for additional inspiration. The list of websites was narrowed down to 4 (shown below), which provided a solid foundation for the design process and inspiration.
05
Handoff
With Figma's auto layout tool, I designed responsive components that ensured a consistent and functional user experience across different screen sizes. I then prepared the design files for handoff to the development team, making sure they had all the necessary documentation and assets to bring the website to life.
06
Conclusion
Throughout this journey, a user-centric approach was at the heart of the design process, aiming to balance excitement with clarity and accessibility. There were significant constraints along the way. As the sole designer making the design decisions, I relied heavily on user testing to gather second opinions and validate design choices.
Time was another major constraint; ideation sessions had to be quick, and iterations needed to be faster, which taught me to design with speed without sacrificing quality. By carefully navigating each step of the design process under these constraints, a website was crafted that not only showcases MAX ETNs but also empowers investors with the information and tools they need.
04
High-Fidelity
Creating a responsive website for a new investment product that exuded energy, boldness, and innovation while prioritizing a structured information layout was a significant challenge. To achieve this balance, I incorporated micro-animations and vibrant colours for visuals, headers, and CTAs to spark excitement.
It was also crucial to design clear and visible sections to enhance ease of navigation, ensuring users could effortlessly find and understand the information presented. This approach ensured that the final high-fidelity prototypes not only captured the dynamic essence of the brand but also provided a user-friendly and informative experience.
