markokojicki/Onsite

Onsite

A comprehensive B2E/B2B web and mobile application for construction project management.

Company

GROPYPUS

Tags

ProductUX/UIResearch
Product Designer, FTE
2023-2025

In a dynamic team as a sole designer, I contributed to the project by conducting market and user research, aligned design with business requirements and technical feasibility, designing user flows for various features and product areas, developing the UX architecture and UI patterns, and delivering initial UI for the MVP.

About

🚀 Key objectives

Comprehensive view of Onsite platform showing project management interfaces with QR code scanning, scheduling, and building structure visualization

⚠️ Key Problems

1

Construction processes lack integration into the rest of the digital value chain.

2

Lack of digital tools onsite prevent scalability and efficient communication, relevant data is dispersed among various sources & systems.

3

The Execution tendering processes lack system based data input from other departments.

4

Lack of integrated budget & invoice management lead to cost overruns.

👤 Main Users

👩‍💼

Project manager

Responsible for multiple construction projects (seeks overview, overlooks construction progress from the office, engaged in one project or multiple projects at the same time)

👨‍💼

Site manager

Responsible for managing and optimizing the construction site (seeks overview, overlooks one construction progress at the time, spends time both at the construction site and the office)

👷

Construction worker

Responsible to execute tasks and report issues (seeks details, executes work onsite, focused on one construction project at the time)

Ideation, research, definition

How Might We workshop output with sticky notes showing questions about building hierarchy, visualization, and project structure

💡 How might we?

I facilitated an ideation workshop centered around generating problem statements and brainstorming feature ideas. I involved product manager, engineers, and senior designers, with the main objective to redirect the existing progress towards a design-driven approach, contributing to product direction and providing necessary foundation for the next stages of the project.

🔎 Market research/ competitor analysis

In collaboration with the product manager, we conducted market research, perform competitor analysis, carried out user/ stakeholder/ domain expert interviews and concept/ A/B testing.
Detailed UI analysis of project management interface with annotations highlighting navigation, layout, and interaction patterns

✍🏻 User research process for product/ feature

Working on a B2E product meant that domain experts, main users, and stakeholders are our colleagues, highly reachable for conversations, interviews, features demos, concept and A/B tests. In most cases, the user research follows:

1
Initial alignment with product manager on how to approach new item on the roadmap, defining preliminary scope and research+design steps for successful completion.
2
In collaboration with the product manager, we outline the process definition of user research methods based on a template I created → example of process definition can be found here: Process Template
3
Conducting research → depending on the scope/ nature of feature we start with user interviews with users and/ or domain experts.
4
Either in the same user interview sessions or separately, we organize concept and/ or A/B testing directly with users, involving everything from wireframe screens to clickable Figma prototypes.
5
We synthesise findings which inform structure/ content/ feature definitions and user flows, and ultimately design direction.
Research documentation showing scheduling and management process notes
Detailed workflow documentation with issue tracking and future planning sections

👤 User flows

I use research findings to inform user flows, which usually include mapping user needs/pain points, what is displayed in UI, and what should happen in the backend. This process is generally repeated for each new feature development. When drafting user flows, I keep in mind identified customer profiles:

👩‍💼

Project manager (responsible for the multiple construction projects)

Under pressure to finish on time / within budget.

👨‍💼

Site manager (responsible for managing and optimizing the construction site)

Needs to be informed and act when needed. Does not have time to search for long to be able to enter data, the user requires a lean interface. They have many people to communicate and align with to stay informed. They have many people to communicate and align with to stay informed.

👷

Construction worker (responsible to execute tasks and report issues)

Needs to be informed and act when needed. Does not have time to search for long to be able to enter data, the user requires a lean interface. They have many people to communicate and align with to stay informed.

Detailed workflow diagrams showing user creation process and lifting workflow

UI delivery

Information architecture diagram showing user flows and navigation structure

🔼 Information architecture

I took on a leading role in defining the information architecture for both the overall Onsite app and specific features.

✏️ Wireframes

From a UI and interaction perspective, one of my initial tasks was to pinpoint crucial layouts and UI patterns that could cover different product areas and features. Furthermore, some features are device-specific, and therefore required responsive design approach.
Detailed wireframes showing layout structure and responsive views

🎨 Hi-fi UI & GROPYUS Design System

UI was delivered based on GROPYUS Design System, a cross-collaborative effort between product designers and frontend engineers at GROPYUS, to facilitate a streamlined approach when it comes to design and implementation.

I participated in creation and maintenance of our design system through definition and hands-on creation of various frontend components (from foundation elements to specific components, e.g. input fields), writing component usage documentation, implementation handovers, as well as maintenance of Figma component libraries.

GROPYUS Design System documentation showing component variants, states, and usage guidelines

Key features & impact

Project overview and dashboard showing project cards and progress tracking
Schedule management interface and mobile task management
Building structure visualization with 3D model and location details
Assembly tracking and issue management with QR code scanning

😊 Impact

20% Faster Assembly.

Time-to-assemble decreased by 20% with mobile feature for assembly process tracking, QR code scanning, and generating insights for assembly sequence for future projects.

Predictive Analytics.

Digital value chain integration provides data for predictive analytics and improves time-to-deliver for future construction projects.

Improved Navigation.

Project Structure feature and digitalisation of building locations improves efficiency of navigation by a high margin in comparison to previous ways of working.

Cross-Product Impact.

Maturity of Onsite information architecture, UI, and frontend component library had a large impact on other products across GROPYUS, both from the design and implementation POV.

📍 berlin