Swiss Finance & Property Group

Swiss Finance & Property Group (SFP Group) is an investment and advisory company specializing in real estate, with a focus on asset management.


Conception, Design Lead, Design Management, Design System, Graphic Design, Interaction Logic, Prototyping, Research, User Interface,
My Role
Product Owner (PO), 4-Person Dev Team
Swiss Finance & Property Group
Duration Time (Month)
Completed Date (Year)


A new online presence was realized for Swiss Finance & Property Group AG, an investment and consulting company specializing in real estate. The purpose of this comprehensive project was to create added value for the SFP Group's stakeholders and, at the same time, to digitize communication even more. The new corporate website promotes interaction with stakeholders and enables them to obtain information easily and quickly at both group and product levels.


A new corporate website for SFP Group was developed within three months. The following topics were covered: visual and content concept, web and mobile design, wireframe, interaction logic, prototyping, page transitions, style guide, and icon design.

The new website reflects professionalism and puts corporate values at the forefront using usability guidelines, appropriate imagery, colors, easy information search, clear navigation with access to important topics, language selection, people search, download center, blog module for storytelling, and event module.


The 4 Ws – Problem Statements
I used a problem statement to identify and frame the issue that needs to be investigated and solved as well as to convey the discovery's scope and focus.
1. Who is affected by the problem? 

In other words, who is the target user? The following users are affected:

  • SFP Group stakeholders
  • Web User
  • Web developer
  • Investors
2. What is the problem? 

The purpose of this comprehensive project was to create added value for the SFP Group's stakeholders and, at the same time, to digitize communication even more. This was not present because:

  • missing responsive design
  • complicated navigation
  • difficult to find needed information
  • intricate interface design
  • missing overview of company products
  • no consideration of the target groups
  • complex website structure

Therefore, there is a need for a tool to:

  • design system
  • responsive design
  • information architecture
  • use case, user story, site flow and persona
  • prototyping
  • navigation concept and structure
  • website concept
  • redesign
  • usability proof
3. Where does it happen? 

The physical and digital environments in which the user experiences the issue are:

  • on computer
  • on paper (reports, downloads)

Involved user are:

  • SFP Group stakeholders
  • SFP Group employees
  • Web users
4. Why does it matter?

Solving the problem will benefit the user and the company, therefore it is worthwhile for:

  • create added value for the SFP Group's stakeholders
  • digitize communication
  • promotes interaction with stakeholders
  • obtain information easily and quickly
  • reflects professionalism
  • users can easily and quickly find the information that is important to them
  • perception of SFP as a modern competence center
  • puts corporate values at the forefront


Nikolay made a significant contribution to the project's success by applying his creative abilities and ideas to the complex customer project.

— Markus Schenker, CEO & Marketing Manager

Various investment options are included in the SFP Group portfolio. The challenge of this corporate website was to present the complex company and product structure in such a way that users can easily orient themselves and quickly find the information that is important to them. The web presence had to be responsive as well, so usability was a key factor in the design. Additionally, the typography of the website had to be adjusted to accommodate its implementation in three different languages, and each component had to be carefully planned out.

Due to the comprehensive functionality of the new website, the added value could be created for SFP's stakeholders. Together with the modern visual design, this supports the perception of SFP as a modern competence center.

Through this project, I was able to gain a lot of UX and UI design expertise. Additionally, I interacted with stakeholders frequently, which improved my communication abilities. Furthermore, I worked closely with front-end and backend developers, which significantly improved my understanding of the development and implementation of digital projects.



The SFP Group's high standards of professionalism were also to be reflected in the new website. With the help of suitable visual language and selected colors, it was possible to create a presence that puts the company values at the center.

The creation process took place in four steps: step 1 - defining user story, site flow, and navigation flow, step 2 - creating wireframes, step 3 - creating a design system, responsive grids, and layouts, and step 4 - Prototyping and responsive visuals.

Step 1
Step 2
Step 3
Design System
Step 4
Responsive Design

4 Steps

Please choose the following steps to discover the implementation of the project.

1. Define
User Story, Site Flow, Navigation Flow

The very first phase is to learn more about the different variables that affect the problem and its potential solution. The process started with understanding the users of the SFP website,  which included stakeholders and users. As a result, I conducted user research to better understand user psychology and behavior. These insights assist me in identifying design opportunities, validating assumptions, and empathizing with how SFP users experience the product. Thus, personas were created and three key diagrams were developed: user story, site flow, and navigation.

Please select filter for more content.

User Story Example

User stories are goal- or problem-oriented; they do not contain specific features or solutions. Instead, they are meant to act as a starting point for teams to come up with ideas and find the best solution to the user's problem.

As a potential investor, I want to be able to easily find information about investment opportunities on the SFP Group Website so that I can select a potentially profitable investment product.

— User Story
SFP User Story Map
Excerpt of user story diagram
Site Flow – Landing Page of a Product

More than just choosing what goes on each page is involved in designing a website's user experience. It's also important to consider how those pages work together. If a designer doesn't plan the page flow, he may have issues once he starts designing.In order to have a view of everything, I created a site flow. Additionally, it provides a general overview of where the user can go on the website. The size and complexity of a site can be felt thanks to this high-level view.

SFP User Flow Landing Page
Site Flow map of a product landing page
Navigation Flow

The more comprehensive a website, the more important it is to be user-friendly (usability) and having a user friendly navigation. The user should have quick and simple access to the information they need. For this purpose, I created a navigation flow that is part of the site flow: main navigation and meta navigation.

SFP Silte Flow - Navigation
Navigation flow map
2. Wireframe
Low-Fidelity Wireframe, Mid-Fidelity Wireframe

The project's wireframing stage was finished in two stages. First, three distinct variants were made as low-fidelity wireframes. The variations were inspected, and the concept that successfully manages the requirements of the users was chosen. The second stage involved making the wireframes into presentation-ready mid-fidelity wireframes and introducing them to the client.

SFP Wireframes
On desktop, home page, two variations of low-fidelity wireframes and one mid-fidelity wireframe (f.l.t.r.)
3. Design System
Responsive Layout, Color Palette, Typography, Action Elements, Icons
Several SFP Design System components

To increase UX design quality, consistency, and designers' efficiency across products, a design system for SFP Group was developed. So I started the creative process with the concept of a design system. Creating a own design system provides consistency, flexibility, transparency and facilitates the work of developers. Defining all the basic components early on made it possible to design the entire project quickly and consistently. Furthermore, it is much easier to change the design at a later stage.

Please select filter for more content.

Grid, Breakpoints, Layout

For use on various screens, devices, and orientations, SFP offers responsive layouts built on Bootstrap. Bootstrap includes six default breakpoints, for building responsively. The number of columns, as well as the suggested margins, gutters, and sidebar for each display size, are determined by each breakpoint range.

Responsive layout grid
Responsive layout grid: 1. Columns; 2. Gutters; 3. Margins;
On desktop, 8 dp grid system, at a breakpoint of 1440 dp, this layout grid uses 12 columns.
On desktop, 8 dp grid system, at a breakpoint of 1440 dp, this layout grid uses 12 columns.
On mobile, 8 dp grid system, at a breakpoint of 360 dp, this layout grid uses 4 columns.
On mobile, 8 dp grid system, at a breakpoint of 360 dp, this layout grid uses 4 columns.
SFP breakpints and grid
Breakpoint system and grid example on class fix "xl" (f.l.t.r.)
SFP Layout Anatomy
Layout anatomy: 1. Header Navigation; 2. Body; 3. Side Sticky Navigation;
Color Palette – Excerpt from the design system

The color palette was coordinated and developed with the company's existing corporate colors.

Primary colors
Secondary colors
Typography SCale

In order to support the needs of the product and its content, I developed the SFP type scale. The type scale combines one style that is supported by the type system. It includes reusable text categories, each with a specific use and purpose. The SFP type scale creates a unified typographic experience by using the Helvetica Neue LT Std typeface for all headlines, subtitles, body copy, and captions. Font weight, size, letter spacing, and case variations all serve to convey hierarchy.

SFP Font Style
On desktop, type scale and type grid (f.l.t.r.)
Action Elements - UI KIT Table and Anatomy

Action Elements (except input fields) allow users to take actions, and make choices, with a single tap. An UI Kit table of SFP shows action elements like: Input Fields, Buttons, Links, Checkbox and Radio.

SFP Button Anatomy
Button with icon, padding and size measurements, 48dp height at 250% scale
Anatomy Input Field State Wrong
Input field with icon, padding and size measurements, 48dp hight at 250% scale.
Excerpt from Icon Set

I created friendly, modern, and minimalist icons, that that emphasizes the design language of the website. For is purpose there are three variations of the icon: core icons – used in the system, action icons – used as an icon button, and custom icons – used for layouting.

sfp icons
Three icon variations, supported icon sizes: 32dp
4. Responsive Design
Navigation, Blog, News, Download Center, Event Module, Subpage
Key Screens

The last stage of the website creation includes the final testing of the product, official sign-off to production and launching. The final testing is that one last look at the product to make sure there are no issues with it. Below I show key screens that illustrate the design, layout and function of the product.

Please select filter for more content.

Navigation – Header Navigation, side sticky navigation

The more comprehensive a website, the more important it is to be user-friendly (usability). The user should have quick and simple access to the information they need. So, I gave high usability particular consideration. Along with a header navigation, the website also has a side sticky navigation that scrolls with the user. This enables anytime access to crucial topics like language selection, person search, or download center.

SFPNavigation Layout
Layout anatomy: 1. Header Navigation; 2. Side Sticky Navigation;
Header navigation enabled and side sticky navigation enabled
Header navigation enabled and side sticky navigation enabled (f.l.t.r.)
On mobile, home page and navigation enabled
On mobile, home page and navigation enabled (f.l.t.r.)
Blog Module

For the new website, a blog module was created because storytelling is becoming more and more important in communication. With the help of this blog, SFP is able to establish an even stronger position as a hub of expertise by regularly publishing articles and background data on subjects important to its target audiences.

SFP BLog Home Page
On desktop, blog module section on home page
On desktop, blog module page and enabled blog filter
On desktop, blog module page and enabled blog filter (f.l.t.r.)
NEWS – Section and Page

The law requires SFP Group to publish information as a result of its stock exchange listing. A news service form has been implemented in order to give its stakeholders relevant ad-hoc information in a timely manner. Visitors to the website can choose which topics they want to be informed about and register as a result.

SFP News Section on Home Page
On desktop, home page, news section
SFP News Pages
On desktop, news page and page with enabled news filter and accordion (f.l.t.r.)
Comprehensive download center

A comprehensive download center was integrated in order to offer the content of the SFP Group's various organizations and products, such as factsheets, annual reports, brochures, or presentations, for download. Several filter options aided users in quickly finding the desired content.

SFP Download Center Page
On desktop, downloads page with selected filter and enabled drop down menu
Event Module – Main Page and subpages

A lot of customer events are organized annually by SFP Group. With the aid of the event module, the entire marketing procedure – from the invitation and registration to the posting of materials, images, or even videos after the event, can be managed with ease.

SFP Event Modul Page
On desktop, main page of event module
SFP Event Modul Subpage
On desktop, sub page of event and page with enabled accordion for event programme (f.l.t.r.)
SubPage – Product

The SFP Group offers various investment opportunities in both direct and indirect property investments. The products are comprehensive, and the main page provides an overview of the listings, while the subpages provide more information about the listings. An interactive customized map of all properties, for instance, has been made for the real estate products; by selecting a specific location on the map, one can access the real estate's details page.

SFP Subpage Products
On desktop, main page of product
On desktop, subpage of products with tab selection for portfolio of real estates and detail page of a real estate
On desktop, subpage of product with tab selection for portfolio of real estates and detail page of a real estate (f.l.t.r.)
more projects

More Case Studies

You might also be interested in the projects below.

1 of 2 Projects
project image
On desktop, home page of the CPC customer view

Clever Project Composer (CPC)

What to anticipate: design concept, guidelines, icon design, information architecture, interaction logic, layout, prototyping, use case,design system

The Clever Project Composer (CPC) is an online communication tool for quickly and easily planning and visualizing complex design projects.

Show case study
2 of 2 Projects
project image
CELOS apps icons and 21,5" ERGOline operation panel (f.l.t.r.)
UI Design · 2022


What to anticipate: information architecture, interaction logic, prototyping, responsive layout, user interface, wireframe

A total of 27 CELOS APPs support the machine operator in the processing of production orders - from planning and production to service.

Show case study
PreviewClever Project Composer (CPC)

Get in touch!

Do you want to talk about a project, work together, or simply say hello? Feel free to email me at I'd love to hear from you!