Modelling a Digital Service for YIT

Study Project

This project was done in collaboration with YIT. YIT offers a service for new homeowners called YIT Plus, which includes YIT Plus Studio — a feature designed for new residents. Through YIT Plus Studio, residents can manage their material choices during the building process. They receive notifications when construction progresses and when new decisions need to be made. Although the service has been available for some time, the customer experience had never been tested.

Our task was to collect data from customers and, based on our findings, create a prototype of a more developed version using Figma. We were specifically assigned to focus on the material selection part of YIT Plus Studio. The goal was to simplify the user experience (UX) and improve its mobile responsiveness.

This was a team project with four students. While all of us participated in every phase of the project, larger tasks were divided into individual responsibilities. I was responsible for designing the material selection pages of YIT Plus Studio.

Client
YIT

Year
2023


Project Timeline

  • Team Creation
  • Product Requirements 
  • Interviews 
  • Usability Testing 
  • Identifying Painpoints
  • User Personas and User Stories
  • Deciding Key Changes
  • Wireframing
  • Style Guide
  • Prototyping

Target Group and Personas

We were assigned to focus on a target group of empty-nesters. We conducted interviews with individuals aged 46-65 years. Based on the findings from these interviews, we created two personas to represent the typical empty-nester users of YIT Plus Studio.

Key Findings

  • The site navigation needs improvement.

  • The site contains too much text.

  • More flexibility is needed for confirming materials choices.

  • The overall process should be clearer.

  • Mobile optimization is required.

Sitemap and Wireframes

The design process began by creating a sitemap of YIT Plus and YIT Plus Studio. Next, we developed wireframes to visualize the site and its functionalities. Additionally, we created a style guide for the design, which we followed while building the prototype.

Main Changes Made:

  • Clear links with both icons and text for easier navigation

  • Menu navigation added to every page, with key links placed at the bottom of the site

  • Direct links to 3D view and rooms for better accessibility

  • A timeline to clearly demonstrate the process

  • Colors and text used to highlight material selections

  • Added flexibility to delete previously made selections

Prototype

Based on our wireframes, we created a clickable prototype using Figma. Below are the pages of the prototype that I was responsible for designing.

Key Takeaways

  • How to use Figma more efficiently

  • How to create a clickable prototype

  • The importance of designing a digital service based on user needs

  • The significance of a clear process and navigation

  • The challenges of mobile design

Back to Portfolio