A black circle with a white logo consisting of three vertical bars of increasing height on the left and a circle on the right.

2023-24

Pivoting from B2B to B2C

Shifting an existing B2B finance experience into the consumer market

Highlights:

  • Component library established

  • Successful launch on Interactive Brokers Marketplace

  • Used by over 1,000 customers in first year

  • Increased annual revenue by more than $60,000

  • Mobile app developed for on-the-go users

Brief

My first task when I joined was to start making the app more suitable for a B2C audience. We had around 15 B2B customers using our original p&l app (illio blue), but this app wasn’t suitable for a B2C audience (see below).

Dashboard of Citywire Multi-Asset investment platform displaying various financial metrics and performance charts, including total investment value, portfolio value, risk assessment, and upcoming events.

New information architecture

The first thing I worked on was refining the structure of the illio blue app as I had already discovered some issues with it’s architecture. I worked very closely with our co-founders to establish a new architecture that we would use in the new (illio white) app, as well as making decisions on which features or pages we wouldn’t include in the migration over.

Flowchart diagram for ilio Blue onboarding process, showing sections for login, account settings, managing account, profile configuration, and product description, with nodes representing steps and options.

Creating a new component library

Once we had established what was to be migrated, I began working on how each of these screens would look. One of the biggest changes was moving from a horizontal form style in the blue app to a more consumer-friendly vertical form style. Another big change was moving from a left-hand vertical primary navigation to a more consolidated horizontal top navigation.

Screenshot of a financial trading platform interface with options to add a new position or trade, including fields for date, name, quantity, price, and custodial details, and a section for executing buy or sell orders.

Getting the designs built

Like most startups with an in-house dev team, we worked in an agile way, meaning my designs were often being built quickly (sometimes I was designing screens in tandem with the developer building them). This allowed us to build the new white app fairly quickly but we suffered from being unable to do adequate UAT in parallel as we didn’t have the right resources to do this.

Collection of mobile app screenshots showing the process of adding a new position or trade entry, error states, and desktop error state frames, related to securities, funds, and ETFs.

Launching on Interactive Brokers

Once we had the illio white app ready we launched our new app via the Interactive Brokers marketplace. This came with a new set of problems (both engineering and UX ones) and we finally launched in February 2023.

Bar graph representing pricing information for a premium global Illio service, with a monthly cost of USD 5.00, and a note about free trial availability and portfolio aggregation.
Dashboard of a financial portfolio management tool displaying portfolio value, lifetime value, performance metrics, income, risk, ESG score, and events.

Post-launch results

In the first 3 months post-launch we had nearly 500 new customers through Interactive Brokers. This continued to grow and we had accumulated over 1,000 customers through Interactive Brokers in the first year since release, providing steady revenue for the business.

A computer monitor displaying a financial dashboard with graphs and charts, surrounded by abstract blue and green line art on a white background

Mobile app planning

I proposed to our founder that in order to provide our customers with a more complete experience of illio, they needed something more suitable to access their portfolio information on-the-go. I conducted a workshop with our co-founders and some developers to ascertain which features of our desktop app we would need to provide our customers with on a mobile app.

A comprehensive sitemap diagram for a financial or investment platform, divided into four main sections: MVP, Fast Followers, Future, and Won't have (for MVP). Each section contains boxes representing different pages or features, such as dashboards, authentication, income pages, insight notifications, and trading features, with some pages noted as non-essential or future developments.

Wireframing the MVP screens

Once I had an idea of which features we would include in the mobile app I began some lo-fi wireframes of each screen, with a view to create a quick prototype that the co-founders could interact with to ensure they were happy with the chosen screens for MVP.

Wireframe mockups of a financial app, showing login screens, password reset, dashboard with various versions, and header and menu variations.

Creating the high-fidelity prototype

After some small changes to the MVP scope, I began designing the high-fidelity screens and preparing the designs for build.

Screenshot of a financial analytics dashboard displaying sections on net worth, P&L, income, and risk with various charts and data summaries.

Building the app

The first phase of the app was built a few weeks after the designs had been finalised. After 30 days of launch on the app store nearly 30% of existing illio customers had downloaded the app.

Screenshot of a investment portfolio app showing a total value of 1,826,837 pounds, with the portfolio trending upwards. Additional data includes medium ESG score, inception profit and loss of 21,647 pounds, weak portfolio volatility, and a 2% inception performance. The app interface has tabs for different asset types and time frames, with navigation icons for overview, analytics, insights, positions, and settings.