Investment Journey Prototype

Getting organised

I joined the project after wireframing, an axure prototype and a few rounds of user research. I began by setting up the figma file and organising the folders into the different pages of the journey, component folders, stages of the project and prototypes, including a content and label for the project. 

I then broke down the axure wireframe/prototype into sections and started to create pages. We built mobile first.

Keeping it clean

As with any figma files – things get crazy very quickly, when everyone is brainstorming and throwing ideas around it can go from clean to chaos in a matter of hours. Creating and correctly labelling different versions of the journey helped to keep a clean design for anybody coming into the project to understand any key decisions and current thinking. 

I do take pride in being organised 🙂 

Creating a complicated prototype.

When I had a clear understanding of the interactive elements in the prototype I created a quick outline of how they would work and started building from the inside out. This helps with auto layout so if one drop-down is opened the whole page unfolds with it.  It can be a long process but it is so satisfying when it works well, especially in testing. 

The end result

After weeks of refinements and getting it up to scratch we tested it with 10 live participants, all going off without a hitch… which is quite rare as Figma does tend to have a few glitchy moments, because of said moments I sometimes found that I had to re-build some complicated dynamic components out again to get it working as I wanted.

Working out how to display the multiple figures and timeframes was a fun challenge. I came up with a circle to show the risk minimum and maximum which all change as the user clicks on a different year. We had very positive feedback from the users who found this infographic very clear and helpful.

I absolutely loved getting stuck with this project, there were many different components that were slotted into each other so a holistic overview and knowledge of the end result was essential. I cant wait to be presented with another complicated project to work out in figma.