Designing 10X’s new client portal as a mobile-first experience.
10X is a Cape Town based investment company working hard to disrupt the retirement industry through the simplicity of their products and a direct, digital distribution approach.
My10X is a portal designed to be the new home of realistic retirement planning, investing and monitoring for 10X clients. Isoflow was responsible for seeing the project through an extensive wireframing process and UI design roll-out. The challenge of combining new and old functionality, and presenting important content in a way that’s simple and easy to understand required close team collaboration.
With an aim to design a platform that is easily accessible and convenient for all audiences, 10X opted for a responsive web application. They took a firm mobile-first approach due to the simplicity it demands. This required a lot of streamlining, restructuring and creative thinking to ensure the wide functionality was retained.
We evolved 10X’s existing design style, incorporating their new illustration style whilst maintaining consistency with their brand and other digital platforms. A styleguide approach was followed to ensure consistency and increased efficiency for both the design and front-end development roll-out of 100+ screens.
One of the biggest obstacles to successful retirement planning is the lack of understanding. People feel overwhelmed by the amount of information and their lack of investment expertise. They know they need to save for retirement but they don't know how much.
We needed to create an interactive platform to help people calculate how much money they’ll need to retire and what they need to do to achieve that goal. Remaining true to the 10X brand, we aimed to design a simple experience that’s easy to understand through the use of uniquely, South African flavoured visuals.
In order to create a fun, memorable and interactive retirement planning experience that would increase engagement, we wanted to move away from traditional static graphs. We decided to solve this challenge by using encouraging animations. However, when the animation we required proved too complex to code, we started exploring the use of video instead. We partnered with the incredibly talented team at Bewilder to combine our ideas for the functionality with their creativity.
The charting elements were overlaid in code to create the final graphs. The giraffe’s expressions change as the user adjusts their inputs and tries out different scenarios. The more you save the further you can reach towards a luscious retirement.
Once we’d simplified the interface for mobile it looked a little bare on desktop. However, we much prefer this challenge than the one of squeezing complex desktop content onto a mobile screen. We made use of cards to contain and group content to avoid it stretching and spanning the full width of the screen.