UX Design Done Right: How We Created a Website for a FinTech SaaS

  • Company: Turbine Analytics SA
  • Industry: FinTech
  • Website: page introducing the investment platform for funds
  • Scope: UX research, strategy, UX design, graphic design
  • Delivery time: 6 weeks

Project Description

The project’s aim was to design a promotional landing page for an application dedicated to investment funds. Beyond promoting a new product, the website was supposed to refresh the company’s image by showing its dynamics, innovation and precision. This was to be achieved with a minimalistic design, focused both on visual and textual communication.

Visualisation of mobile, desktop and tablet views for Turbine Analytics.

Project Step-by-Step

Phase 1: Research and UCDC

The first step of the project was a detailed interview with the client and a cooperative work on the project’s brief. Research is an inseparable part of this phase. It covered the target users of the product and the website (their background, expectations, needs etc.) as well as the client’s business (its main goals, competition etc.). All the information gathered were summarised on the User Centred Design Canvas – our own tool designed for the purpose of analysing users’ and business’ main goals. The main conclusion from the research phase in the case of Turbine Analytics was that the market for this kind of software is highly competitive. What differentiates the product from other very complex applications is its ease of use that is in accordance with the main goal of the target user – saving time.

User Centred Design Canvas for Turbine Analytics

Phase 2: Personas

Based on the previous phase, personas – detailed users’ profiles were created. These help to adjust the final design to specific users’ needs and to the context in which they will be using the application. In this case, personas had to include users from two different target groups:

a) fund managers (busy professionals, paying attention to detail and looking for flexible, easy-to-use solutions which can save their limited time).

Marcin Pawłowski: detailed user's profile (persona) for Turbine Analytics.

b) their subordinates researching the market (sound employees, paying special attention to reliability of the companies, reading testimonials and looking for information depicted in a clear, comprehensible way).

Thomas Wolf: detailed user's profile (persona) for Turbine Analytics.

Phase 3: User Journey

After the target users were specified, it was time for thinking over the actions they might want to take on the website. These were visualized in the form of user journey. We’ve decided to focus on the main path first in order to sort out the information that should be emphasized on the website. In the case of Turbine Analytics, the most important section for the target users is the one with features. From there, they will most probably go to pricing, especially that it’s rather unconventional among competition to include it on the page. Encouraged, the users want to make sure that the product is reliable so the next step should be testimonials. That seems to be the most probable path leading users to sign up for the product demo – the main aim of the website.

Main user journey for Turbine Analytics.

Phase 4: Wireframes

Based on all previous steps, the site structure with all its sections and content elements was created. It was delivered in the form of wireframes – graphic representations showing the placement of all page elements and their spatial relationship to one another. The process of creating wireframes was the best moment to address the main challenges of the design.

Challenge 1 Two Different Target Users Groups
To address the needs of both target groups, the demo page was represented on a split screen: the users who are busy can sign up for demo right away, while those who can devote more time to research can access it easily.

Wireframe: homepage with demo for Turbine Analytics.

Challenge 2 Complex Pricing Information to Visualise
Complicated pricing details, with different totals for each configuration (dependent on the number of users, funds and the chosen variant of the service) were represented on an easy-to-use but at the same time very precise calculators. These enable each group of users to calculate the exact price by choosing an appropriate tab.

Pricing wireframe for Turbine Analytics.

Challenge 3 Extensive Software Specs vs. Limited Space
Limited space to cover the resources section was divided into two pages: (1) features present the most important information in the form of summary and (2) resources cover the details, allowing also to download PDF file with all the information.

Wireframe: resources for Turbine Analytics.

Phase 5: Design

When all wireframes were ready, it was time to think over the core design elements.

Main colours used in the project: red, black, gold.
Font used in the project: Lato 2.0
Customised icons used in the project.

The Final Effect

After six weeks of hard work, the design of the landing page was finally over and ready to be delivered to the client in the form of PSD files. Below you can see few samples.

Final design: homepage.Final design: portfolio section.Final design: pricing section.Final design: footer section.

Testimonial

The effect of our cooperation with The Rectangles exceeded our expectations. We were absolutely impressed with their interdisciplinary approach to the project and felt really comfortable being able to monitor the whole UX process thanks to daily recaps and regular previews. Now, we can’t imagine working on design with anyone else.

Piotr Smoleń, CEO