Visual twin
The Visual Twin enables a front line worker to see a rich 3D digital representation of the physical overlaid on top of the physical item, and can display related 2D text as well. This makes the job of understanding what needs “doing” on the physical very easy to understand and execute.
Role - Lead UX
Year - 2022
UX Process
This project had an ambitious scope and a narrow timeframe, meaning that the UX and UI processes needed to run parallel to each other, with iterative updaets occuring weekly. The goal of this project was to create a tool for city planners to house all of the data, designs and information for new developments in an interactive, 3D city environment.
The UX process involved 1-1 calls with those who would benefit from this tool to determine the key features and flows that would be necessary for the MVP of this product.
The team created journey maps, personas and listed the minimum requirements that should be implemented in the UI. The UX side worked closely with the developers to ensure an Alpha version of the project was up and running by the deadline.
UI and Prototyping
The UI side of this project was more future facing. While the devs worked to produce a functional Alpha, we had the opportunity to develop the look and feel for the product which would be implemented at a later stage.
We referred to the UX discoveries and understood that the client wanted a premium feeling tool that not only worked but looked polished, professional and modern.
To meet these requirements, we researched similar tools before deciding to focus on a dark theme with minimalist, glassy elements that would not obstruct the map view.
We wanted to give the tool a premium feel by introducing microinteractions, such as pulsing location markers, rotating area markers and hover states for different plots of land. Using our final day, we also introduced a street view to the prototype using screenshots from the actual build, and added layers of interactivity over the top. You can see more images of the UI designs below.
Deliverables
Following creation of the wireframes in Axure, the next step was the development of a full interactive UX prototype. This was built in InVision and presented to the client for review.
Taking the client feedback on board, we then focused on developing the UI and introducing the animated components. All the animations and transitions were created in AfterEffects as a reference for the developers.
Full UI and content review was performed in InVision. The handover of the UI kit, SVGs and styles to the developers was via the Zeplin platform.
