Financial Artificial Intelligence platform

A complete redesign of the existing platform for a Fintech startup.

This current project is one of the richest I had the chance to contribute to. We have a solid team of financial experts, data scientists, architects and developers, but no other designer to share ideas, no real users... the whole frontend needs to be rebuilt to suit various customers' contexts.

"Let's make it flexible, secured, reusable, modular, intelligent and (of course) user friendly! You have 12 weeks to go..."

The challenge(s)

- Understand the flows

- Restructure the users journeys for the different contexts of use

- Build a responsive core UI that could be white labeled for the different customers

- Test complex prototypes with external users

- Build a core chatbot able to adjust to the different customer's and market's needs

- Setup a nudging strategy inside and outside the application

- Make it smart to switch smoothly from the legacy to the new frontend framework (React)

My contribution

1. Identify key UX problematics

2. Lead the redesign of the flows

3. Build a responsive core UI

4. Build interactive prototypes

5. Test the prototypes on a weekly basis

1. Key UX problematics

UX Audit: It all started with a "first user experience" feedback to identify key points for improvements. Then a second path with an heuristic analysis of the current app.

Main problematics:

- Value proposition

- User onboarding

- User engagement

- Navigation and structure

- Chatbot integration

- Accessibility

- System feedback

2. Flows redesign

Redefine the different flows: This is team work and I like it! The only way to understand the complexity of a context is to put all the stakeholders around the table.

Collaboration is the only way to speak with one voice and tell the same story.

Map the different flows individually: each story is split into different thumbnails that help the design team to visualize the sequence, the links between the pages and the type of layouts and components we will use (or create)

Each scenario is a great basis for the user testing protocol setup and for the QA testing strategy.

Map the structure of the new core application: Once each story is mapped, it's time to make it fit into a common sitemap, to restructure the core navigation.

UX roadmap: The main key points with clear definition need to fit in the current backlog. That means a lot of discussion with the product and the delivery team ;)

3. Build a responsive core UI

Define design principles and main layouts: The current application is designed for a mobile use only, when most of prospects are looking for desktop apps.

I found that video explaining the Flexbox on Brad Frost's website and the light turned on! If you want to see it for fun :)

Of course we want both and it is easier to go from mobile to desktop than the other way around.

But we still need to define how we will manage the navigation and the page content in the different states.

Define the styleguide for every components in a master file that can be reused for every prototypes in XD.

Build components in Storybook: To make sure to have clean reusable components, we build a components library in Storybook.

There, we will be able to apply the style of each customer by theming each component so we won't need to redesign over and over again.

For now, components are in Storybook and are reusable with different themes. But we would like to go further by defining guidelines per components. I hope this will come, but we need to prototype quickly!!!

4. Build prototypes

We choose Adobe XD for our prototypes and we are pretty happy with the last features released, especially:

- the components stored and managed from one unique master file

- the developer export that allow us to get rid of Zeplin

- basic animations for pages transitions, panels displays and anchor navigation

- The Webexport plugin for complex prototyping

User test on prototype sample

5. Test prototypes

The challenge here is that we don't have real users for the moment so we had to use existing panels. We choose the UserTesting platform to do so and here are the Pros & Cons:

Pros:

- Fast: It is amazing how fast we get answers!! We get all 10 videos in less than 30min when traditional tests take about 2 weeks to setup and analyse.

- Regular: I test a prototype every week and if I could do more, I would!

- Easy to setup: Still you need to know how to build a test protocol, but there are plenty of tips and templates. Difficult to miss a test!

- Quality: Users get a brief from UserTesting: they know how to use the tool and they know also how to express loud what they think. It can also be a con... as they know what we want to hear ;)

- Usability and Marketing use: UserTesting extended their marketing features and this is great to test our nudges strategy

Cons:

- Expensive, but worse the cost.

- Bias: some users use this tool to get money and sometimes it may tweak the answers...

Even if prototyping tools allow quick validation loops, we still need to get quantitative data to be able to shape personae to feed the intelligent nudges system.

Conclusion

This project is the opportunity to setup and test all the latest technologies and methodologies:

- setup a design system

- collaborate closely with the dev team

- rapid usertesting

- agile organization

Related posts

- Intelligent nudges design

- Conversational design