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.
In other words, who is the target user? The following users are affected:
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:
Therefore, there is a need for a tool to:
The physical and digital environments in which the user experiences the issue are:
Involved user are:
Solving the problem will benefit the user and the company, therefore it is worthwhile for:
Nikolay made a significant contribution to the project's success by applying his creative abilities and ideas to the complex customer project.
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.
Please choose the following steps to discover the implementation of the project.
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 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.
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.
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.
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.
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.
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.
The color palette was coordinated and developed with the company's existing corporate colors.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
You might also be interested in the projects below.
The Clever Project Composer (CPC) is an online communication tool for quickly and easily planning and visualizing complex design projects.Show case study
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