WEB Application
Sep 2021 - Jun 2024
UI & UX Designer
Adobe XD, Adobe PS, Adobe Ai
About Project
Stages is an app for managing and documenting the construction process. The documentation process is based on 3D scans that capture the state of work. You can add notes, attachments and create your own teams.
From 2021 to 2023, I worked for SIMLAB. One of the company's internal projects is the STAGES project, which I had the opportunity to design. It is a responsive web app for construction management and documentation.
During the 2,5 years of work, I designed the entire structure of the application. In the beginning, I had to struggle with existing Standalone App, which had to be analysed and redesigned. Then, when the basis was ready, we extended the application with further functions that expanded the possibilities of the application and made it easier to navigate. As the main designer, I was fully responsible for the UI part and made UX decisions with the Head of Design Department. We worked closely with Developers and Product Owner.
UI and UX role
As main designer, I worked on UI and UX, created the design system, the component library, worked on UX writing, conducted user tests, planned the user flow, consulted on business goals and collaborated with the development department. To this task I was using Adobe XD.
Graphic Designer
As a graphic designer I prepared marketing materials in collaboration with Marketing department for social media such as Facebook, Instagram, Linkedin, You Tube. I created product and company websites, prepared materials for print (business cards and brochures), conducted photo shoots. To this task I was using Adobe Cloud - Illustrator, Photoshop, Lightroom and Bridge.
The main goal of my work was to design a comprehensible and accessible application for construction management, communication between users and documentation. The application worked on screens with different resolutions.
Technical problems
When i start my work there was only a desktop application, which heavily limited the number of users. Unintuitive flow and required a heavy computer to run which made it unusable on construction sites. There was a need to create an easily accessible product with a layout that would be intuitive and also make the user experience more manageable.
UX UI problems
Since the functionality already existed, my task was to match the design of the web application to the already existing code on the backend. The existing product was difficult to understand for the user, the structure was inconsistent, the navigation was confusing. Function by function, I conducted an analysis of the existing structure and identified problems.
Each user has an account where they can collect projects. The projects are based on 3D space scans. Projects can collect information such as construction changes, notes or attachments (images, videos, documents, voice records). A project can be co-created with other users and we can give them roles that involve restrictions and privileges.
You can create construction documentation that you will always have access to. Add notes, and include photos, videos, documents, etc.
Documentation goal
Every flat renovation and house construction is made up of stages. Each stage requires a team of different specialists, techniques, tools, materials. We have to collect, save and pass on a lot of documents, files, photos.
User story:
The interior design made by the architect should be passed on to the electrical designer so that he knows how to plan the lighting and electrical sockets. This design also goes to the contractors, who need to know where to make room for it. The design attached to the Project can be viewed anywhere and anytime on a smartphone.
Problems
UI and UX
Users are people connected with construction. Each team may wish to provide a different type of resource.
The Design Question is: What kind of attachments users will want to collect?
Technical Issue
Users work at their desks and outdoors. They may not have access to advanced tools.
The Design Question is: How to collect attachments?
Business related
I had to design on the existing solution and make the best use of already existing projects.
Discovery process
I began by analyzing user behavior and identifying the types of elements they may want to save. I documented my assumptions and conclusions, consulting with my supervisor on-site. Based on this analysis, I determined that users should be able to attach photos, videos, voice recordings, and files, with attachment functionality accessible on both smartphones and desktop computers.
Solution
We’re expanding the Notes feature by adding attachments. To make it easier for users to find files, we've organized attachments into categories. Users can now also pin attached files directly onto the 3D scan using the Notes feature.
With 3D space scans, it is possible to track changes in the real world. This is the element where virtual reality meets reality.
Timeline goal
Documenting changes in the construction process, breaking down into stages, going back to previous stages, comparing changes in construction process.
User Story:
Once the wiring in the building has been completed by the electrical team, it is time to plaster the walls. One layer is covered by another. Up to now, the only documentation has been technical drawings, which, as we know from experience, do not always reflect reality perfectly.
> At this point, if we want to drill holes and someone does not read the documentation, they could make a mistake and damage the cables running under the plaster.
> By walking through the 3D scans, we can see every centimetre where the electrical team placed the cables.
Problems
Complicated process
The process of adding and arranging the scans on the timeline was very technical and complicated for the users.
The Design Question is: How to humanise the technical aspects?
Technical challenges
I had to stick to the existing structure and could only propose changes at UI level, by prioritising the most relevant elements.
Discovery process
I wrote down all the technical information and assumptions. I tried to learn the process of adding the scan to the timeline step by step. I consulted the unknowns with the technical department and developers. I start mapping, listed all paint points, potential gaps in user journey and area for improvements. I design in Adobe XD High-fidelity mock-ups of user flow, covering of feature, scenarios, and complex edge cases.
During the analysis, I discovered that the user identifies the scans by naming them (e.g. electrical, plastering, wall painting). The previous flow assumed that identification was by date. However, for the user, the date is not so important.
Design solution
I focused on creating an understandable and simple flow of adding stage's. I moved the whole flow of adding Stages to the modal. I prtioritised the informations. The most essential part of creating a stage was naming it and choosing a date, other elements were additional and came from the need of the investors (location, notes). I set the most important part at the very top. The entire process is completed with the ‘create’ button. We achieved a clear flow and consistent with the rest of the product.
You can compare the two scans in the same time and see the changes.
Compare view goal
Comparing one place from two stages in one preview.
Problems
UX
The current solution (timeline) was not sufficient for users. The timeline collects scans and we can jump between stages, but we can't view a place from different times in one view.
Discovery process
I analysed the user needs and storymap. Collaborating with the product owner, team lead and developers, we chose the right location and the flow for the feature. I design in Adobe XD High-fidelity mock-ups of user flow, covering of feature, scenarios, and complex edge cases. I carried out a brainstorming session for UX writing to choose the best name for the feature.
Solution
The Commpare View function is available in the 3D walk view, a place related to this function, easy to locate. The stage we were on appears as the default and user can selects a stage for comparison. Other functions are disabled in this area, so they are not distracting. Both stages are synchronised and, by moving on one, we see movement on both. The user can change the stages at any time, so it can easily compare changes.
You can visit and explore how the STAGES app works. Go to the website and log in to try!
This and other projects are also published on Bahence.com. This is the place where I publish my work on a regular basis. I encourage you to take a look and leave a comment.