Project Intro
Wealthsimple wants to democratize wealth by giving the financial tools of the rich to everyone. I helped rethink and redesign Wealthsimple's home page with the goals of increasing conversion and of adapting the site to Wealthsimple's new multi-product world. The conversion increased substantially and the site redesign has gained positive recognition, including a Webby Award.
Problem
We at Wealthsimple realized our website didn't serve the full spectrum of our products anymore. The old site was very focused on our Invest product. Given the YTD growth of Save and Trade as well as our short-term plans to launch Cash, Tax, and others, we needed to redesign our index page to educate site visitors on our various product offerings and to guide them to the products that would serve them the best.
Goals
Our index site is often a user’s first experience or interaction with our brand. It’s a chance to build trust, introduce our brand/voice/design, and capture a registration or direct traffic to a more detailed product landing page. Our goals were to 1. Showcase the full WS Product Offering, 2. Reduce Product Confusion and to 3. Increase Visit To Registrant Conversion.
Process
We had to different approaches for the index page design, one rich in content and one lighter one. With our first prototypes in Figma, we conducted 6 user interviews to evaluate the first round of index page prototypes in order to help the team determine which design (or some combination) is best reflects Wealthsimple as a multi-product financial institution and minimizes product confusion. At the same time, I did a lot of r&d and prototyping for various, more detailed interactions to be featured on the site.
Early explorations
<style>
.video-container { margin: 0 auto 0 !important; max-width: 70% !important; }
.embed-container-first { position: relative; padding-bottom: 62.4%; height: 0; overflow: hidden; box-shadow: 0 10px 40px 0 rgba(0,0,0,0.15); }
.embed-container-first iframe, .embed-container-first object, .embed-container-first embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
<div class='video-container'><div class='embed-container-first'><iframe src='https://player.vimeo.com/video/437986799?autoplay=1&loop=1&autopause=0&background=1&quality=1080p' frameborder='0'></iframe></div></div>
<style>
.video-container { margin: 0 auto 0 !important; max-width: 70% !important; }
.embed-container-first { position: relative; padding-bottom: 62.4%; height: 0; overflow: hidden; }
.embed-container-first iframe, .embed-container-first object, .embed-container-first embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
<div class='video-container'><div class='embed-container-first'><iframe src='https://player.vimeo.com/video/437988440?autoplay=1&loop=1&autopause=0&background=1&quality=1080p' frameborder='0'></iframe></div></div>
<style>
.video-container { margin: 0 auto 0 !important; max-width: 70% !important; }
.embed-container-first { position: relative; padding-bottom: 62.4%; height: 0; overflow: hidden; }
.embed-container-first iframe, .embed-container-first object, .embed-container-first embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
<div class='video-container'><div class='embed-container-first'><iframe src='https://player.vimeo.com/video/437989019?autoplay=1&loop=1&autopause=0&background=1&quality=1080p' frameborder='0'></iframe></div></div>
Final design prototypes
After consolidating our learnings from the (very valuable!) user research process, I made finalized video prototypes that detailed every interaction on the page. We then worked with our excellent in-house development team to make the vision come to life in code.
<style>
.video-container { margin: 0 auto 0 !important; max-width: 70% !important; }
.embed-container-last { position: relative; padding-bottom: 61.4%; height: 0; overflow: hidden; }
.embed-container-last iframe, .embed-container-last object, .embed-container-last embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
<div class='video-container'><div class='embed-container-last'><iframe src='https://player.vimeo.com/video/438000749?autoplay=1&loop=1&autopause=0&background=1&quality=1080p' frameborder='0'></iframe></div></div>
<style>
.video-container { margin: 0 auto 0 !important; max-width: 70% !important; }
.embed-container-last { position: relative; padding-bottom: 61.4%; height: 0; overflow: hidden; }
.embed-container-last iframe, .embed-container-last object, .embed-container-last embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
<div class='video-container'><div class='embed-container-last'><iframe src='https://player.vimeo.com/video/438057558?autoplay=1&loop=1&autopause=0&background=1&quality=1080p' frameborder='0'></iframe></div></div>
Outcome & results
Our conversion rates increased by several percentage points, we've seen a reduced number of client success tickets relating to product confusion, and the redesign has garnered critical acclaim, including a Webby win.
See the live site