Process
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.
4 Steps
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.
.png)
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.
.png)
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.
.png)
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.
.png)
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.
.png)
