Customised UI components
Design System as the single source of truth
Excessive time and effort were required to translate design concepts into functional code. This issue was affecting the speed and efficiency of development and impeding the ability to respond really swiftly to user needs.
Design-driven development places user experience at the forefront, from an afterthought to a guiding force, resulting in fewer revisions and expedited implementation. Challenges emerge in striking the balance between aesthetics and utility, handling designer-developer handoffs, and navigating organisational silos. To address these challenges, we aimed to embrace cross-functional, more collaborative and adaptable development by breaking down silos and promoting end-to-end ownership. This meant increased collaboration among product management, designers, and developers throughout the entire feature development lifecycle.
The design hand-off represents a critical stage in the delivery process, often leading to compromises in the UX quality of the intended solution by teams. Without a well-defined and consistently refined process that the team adheres to, there’s a high possibility of information loss, deviation from guidelines, and insufficient respect for the proposed design solutions.
To tackle this issue, we together adopted a set of tools and workflow to cut off any distractions. To unify the libraries, naming conventions and component properties, also the design team started to use Material-UI as a starting point for any new layouts, as it was already the framework for front-end development.
Sharper Shape now utilizes Zeplin for the design-to-developer hand-off. The decision to not use Figma is to publish only finalized designs to Zeplin, allowing for iterative design changes to be made in the design tool. This approach saves developers from the task of searching for the correct files and versions in Figma while relieving designers of the need to maintain Figma for hand-off purposes. On top of designs, Zeplin is used to annotate how to implement the final design solution: design system documentation, technical details, interactions, animations and intended behaviours.
These changes had a positive impact on the design-to-code translation process and improved collaboration between designers and developers.
Another significant challenge was the limited visibility of data within the software. Users found it difficult to access and interpret essential data, hindering their ability to make informed decisions and understand the utility infrastructure in total.
To enhance data transparency, with the help of Distrikt, Sharper Shape implemented a Project Overview Dashboard and a Data Browser. These features allowed users to gain a comprehensive overview of their data, making it easier to access, analyse, and utilise critical information.
The end users lacked a comprehensive 'big picture' of their projects. There was a need for a dashboard that displayed project statistics of entities like assets and images, and data capture progress information, especially regarding Drone Service Provider use. DSP project managers need to see the capture progress to keep their clients updated and have a general sense of any outstanding issues that impact the advancement. The goal was to ensure that data capture progress information was reflected in near real-time, as reported to the application from the field as conveniently and promptly as possible.
We designed a flexible set of dashboard components to give legible and clear visualisation of multiple types of KPIs.
The concept of a Data Browser was sought after for a comprehensive understanding of the software's various entities and their interconnections. This centralised point was designed to ease and optimise the data access, allowing users to view and manage essential elements within the software. With diverse entities scattered across the software, having a centralised Data Browser became pivotal. It brings the ability to swiftly navigate and access critical information, ensuring a holistic view of the system. This not only enhances productivity but also promotes informed decision-making by presenting a comprehensive overview of the software's entire ecosystem, enabling quicker identification and resolution of data issues while fostering a more seamless user experience being able to interact with different entities in a unified manner.
Users struggled with navigating and efficiency in tasks, impacting their overall productivity. This was addressed by redesigning some parts of the software mostly in use - the Editor and Viewer interfaces, simplifying 3D settings, and introducing AI-based detection tools. Being part of feature development from the very beginning, annotation capabilities were introduced and the Swiss-army knife of digitising the network, Asset Validator was enhanced to meet the expanded business needs. These measures were aimed at reducing complexity and better user experience, resulting in more efficient workflows.
Reduced time investment and streamlined user experience - with the help of Distrikt, Sharper Shape successfully addressed their key challenges by optimising their software development process, enhancing data visibility, and simplifying user interactions. These improvements not only reduced development time but also improved the user experience, contributing to more efficient and effective utility infrastructure management.