Digital Construction Site for
SH-Netz AG

Mobile app for efficient logging and data collection at construction sites for technicians.

Introduction

The aim of this project was to make the construction site digital. Safety or work logs, which were previously laboriously filled out on paper by the fitters every day, are to be carried out digitally with a functional app. This should make the documentation of construction work faster and more efficient.

Savvi App Screens

My role

I was asked to revise the concept of the existing prototype and transform it into a professional design. For efficient further development and future mobile projects the UI components were defined in a design system. Further a click prototype was also implemented for subsequent user tests.

Project team

1 Designers, 2 Product Owners and a team of developers.

Project outcomes

Build design system and UI component library to establish consistent design language and efficient designing in the company.
Redesign of existing smartphone app for employees and concept of admin interface for enterprise.

Tools

Figma, Jira, Teams (Remote)

Groundwork with User-Centered Concepts

I started by reviewing the existing prototype and integrating key insights from previous user tests with different field technicians. Using this foundation, I created a sitemap to organize the application’s structure, followed by wireframes and user flows to outline the user journey and core interactions. The design went through multiple iterations, allowing me to refine the details and improve usability based on continuous feedback.

Crafting an Accessible and Intuitive UI for On-Site Usability

In the UI design phase, I focused on creating a clear and simple interface that prioritizes accessibility, with large touch targets, intuitive navigation, and strong contrast to accommodate challenging lighting conditions on construction sites. It was also essential to define behavior for offline functionality, ensuring usability even without a stable internet connection.

Given the high number of forms with multiple input fields, I emphasized a clear information architecture with thoughtful spacing and visual hierarchies to guide the user. Additionally, I structured the design components to build a mobile UI component library, laying the foundation for a cohesive mobile design system.
Throughout this phase, I collaborated closely with domain experts and developers, refining the designs to align with technical and user requirements.

Enhancing Usability for Quick and Efficient Task Management

To make tasks more accessible for technicians, I designed a chronological task list on the home screen with a calendar view, and an interactive map displaying task locations. Additionally, I added a search function and practical filters to streamline the task discovery process.

Clear status indicators for tasks and reports were defined, improving at-a-glance updates. New flows were also designed for technicians to easily log the start of a task upon arrival at a site and to efficiently complete tasks when finished, creating a more intuitive and structured experience.

Outro

The design implementation took place over three months, during which I remained on call for the development team to address any questions and ensure clarity throughout the process.

One of the main challenges was implementing an “Offline First” approach, which impacted certain aspects of the user flow to ensure seamless use in low-connectivity environments. The clickable prototype was quite extensive due to the variety of protocols, but this depth was essential for effective user testing and gathering valuable feedback.