Hatch's beachhead strategy was to give everyday kiwis access to the US shares markets through a simple and easy web experience. Through talking with investors our biggest request has always been about access, and new investment opportunities. In the interest of moving fast, the app was Bootstrapped (literally) and largely hard-coded to Drivewealth (our US broker). Not only would we need to decouple the code, we'd need to unlock the UI's single-market views.
Our design team was also growing – I joined when we had a CXO, Design Director and just me as a Senior Product Designer. At the height of our (experience) team we had 4x product designers, 2x brand & marketing designers, content writers and SEO specialists all searching for a central source of truth for our visual language, interactions and tone of voice.
So the challenge became how to tie all of us together so that we could take on designing the next phase of the Hatch experience without it becoming disjointed and a mixture of old and new...
Our design team always ran a few months (evidently, sometimes years) ahead - constantly researching and conceptualising the next stage of Hatch's existence. We knew we *could* make our existing interface work, but it would be clunky and confusing. So, we set about unlocking the app piece by piece - whilst still aligning with day-to-day business goals.
With the technical side of integrating with a new market still being worked out, we focused on the areas we had a more certain picture of - information architecture, multiple currencies and how to find and buy investments. Each of these pieces are detailed briefly below, and this project is still in motion.
Well, our aims are to:
Hatch's navigation has remained largely unchanged for years – other than to add more and more links into the same area. The mobile experience compounds the problem where the main navigation and account menus are combined into one huge list. With the promise of new markets we set about alternative ways to structure our nav that works on both desktop and mobile.
Through user research (Google survey internally, and qualitative research of our CX platform) we confirmed the need to split the navigation in two, and retain that split on smaller devices to. You had the day-to-day workflows which could be a range of things depending on the mindset of the user:
And then you had the more passive tasks that are performed ad-hoc throughout the year, and really are tailored to administering your investment account:
We explored many locations of navs too - top/bottom vs left aligned... floating vs static... dropdowns vs no dropdowns... and at the end of the day we rested on an example similar to below. Time will tell if it's the best choice, but it had a few pros to it - not too far removed from the existing nav structure (good for behavioural familiarity), it's fully accessible to screenreaders, and it is easy to build ontop of the existing Bootstrapped containers.
We knew from qualitative research (phone calls with customers) that most of our investors did their buying research outside of Hatch - and for good reason, there are plenty of free platforms with tons of data and insights to help you make decisions. But with the looming new markets coming along we needed to spearhead the browsing experience to ensure 6000+ stocks could be easily broken down into bite-sized chunks of investments to match your criteria.
As a pilot project for the design system components, we implemented new modals, filter buttons & tags, updated layouts, drop-downs, loading animations, input styles - the whole shebang.
One of the cooler experiences I had on this project was that I was given the freedom to work directly with a strong frontend developer who had the same passion for quality interaction design as I did. We swapped static loading states to animated placeholders to better indicate the system working behind the scenes. We made sure the entire experience was accessible to screenreaders through the use of aria tags, and could be easily used by keyboards using tabs. We developed a completely different experience on mobile vs desktop, recognising that touch interactions and lack of screen space are far different experiences to desktop. It was a great project, and the browse and search functionality in Hatch will easily serve many more markets and investment types.
The beachhead strategy at Hatch was to provide access to the US markets. Fast-forward 4 years and it's time to add new markets, especially with our new parent company providing all the tools and integrations necessary to pull it off. My teams challenge was to figure out how to morph the existing single-market-single-currency web app into a multiple-market-multiple-currency web app. No mean feat.
As per the previous navigation examples, we started at the information architecture level and worked backwards. We looked at years worth of research to find out all the nuances and features users had been asking for with the idea that we'd plan for where they'd live in the future and plan the next phase of the app around these ideas. As we gathered and grouped features into sections, you could see a picture starting to form. Some areas would be just fine (Tax reports = no real change), whereas others would fundamentally need to be updated or added (Portfolio with multiple portfolios, a Wallet with NZD, USD + other currencies).
Perhaps one of the key takeaways here other than the design itself, was that with the project being such a behemoth needing hundreds of designs of layouts, interactions and components - we set up a level of trust in our design team that allowed us to share work in a way that I never had before. Day-to-day we would both work on our projects, but spend an hour or two jamming with another Product Designer sharing ideas and challenging the ways we'd done things. The results were richer, we had more diversity, we caught nuances or meaningless parts of the design, we had the space to collaborate and trust that as a team we would deliver the outcome - not individuals.
This project is still in motion and the designs you see here Figma prototypes.
