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