Designing a 3D drawing tool for touch devices
Introduction
My first UX gig in the UK was for a London-based company that produced software for estate agencies. Amongst other things, I worked on improving and maintaining the digital products that many of the most important companies in the sector use to enter, process and manage the huge amounts of data estate agents deal with on a daily basis. If you have bought or rented a property in the UK, you know how complicated this can be, and how many documents this process generates, from personal data to text documents and images.
One of the things estate agents need to do when they list a new property is to draw a floor plan, as detailed as possible, that is usually displayed on the property page of the company’s website. We need to take into account that most estate agents are not trained on architecture, so drawing plans on-site can be very challenging and time consuming for them. However, houses sell much faster when the potential buyer can see a floor plan.
At the time, the company was investing in an innovative tool to help estate agents create these plans using the same tablets they use for everything else, skipping the paper and pen and the digitalisation process.
Main tasks
- Prototyping, usability testing and constant iteration.
- Feature prioritisation in collaboration with the Product Owner to understand what were the most important tasks that users needed to perform.
- UI design, keeping in mind that the product would be used on touch devices only.
- Working across different timezones and coordinating with the development team, based in another country +8h away from the product and design team.
Biggest challenges
How to start
Unless you are an enthusiast of digital products, it’s likely that you won’t be able to easily define concepts such as pinch, spread, tap, double tap, and tap and hold. However, you carry out those actions everyday when using your smartphone, you are just not aware of it because it comes out naturally. One of the most important parts of this project was to keep testing every new feature to make sure that we were following the unspoken rules of how human fingers interact with screens.
We decided to adopt the most commonly used interactions and encourage exploration and a learn-as-you-go attitude, leaving helpful tips always available.
Defining accuracy
The endless possibilities made this project very exciting, but also very complex. One of the main issues we identified was that, while some users would have the time, skills and motivation to create very detailed floor plans, others would just sketch a quick outline of the property.
User research showed that most users would sketch rough shapes first and refine them afterwards. Also that the majority of them were confused by different measures they would get from the same wall, depending on wall thickness and possible irregularities in the shape of the rooms. The software would automatically calculate those for them and allow them to adjust them later by selecting the wall.
Designing in 3D mode
As I mentioned, most of our users did not have a training in architecture or technical drawing, so sometimes it was difficult for them to visualise what they were doing in 2D. For this reason, all the objects were editable in 3D as well.
Complex elements
Apart from walls, doors and windows, there are some structural elements that shape a property and are not so easy to draw by hand. Stairs are the perfect example, but you can also find inclined walls, chimneys and many other elements.
The software allowed two options: you could either drag and drop a predesigned object and only adjust its main dimensions, or you could customise it to adapt it as much as possible to the real thing. For example, most people won’t really care how many steps a staircase has, as long as it’s wide enough to walk on it and it doesn’t take the whole room.
Interior design and furniture
The software also allowed to insert different objects from a vast library, in order to help estate agents give potential buyers a good idea of how the property could look like, and showcase the possibilities the space offered.
To allow the manipulation of complex elements with irregular shapes, we created ways to visualise selected objects with different types of handle. A circle to extrude faces, triangles to scale from a corner, and squares on edges to stretch. Users could see the effect of their manipulations in real time, as the measurements window would update as the object resized, and the other way around.
Some objects didn’t allow all types of manipulation, for example a ceiling fan could not be stretched to lose its proportions so it wouldn’t show a squared handle on its edges.
What I learned from this project
- Paper prototypes are sometimes more realistic, or produce more realistic reactions in users.
- Consistency in the interactions makes the learning process fun and enjoyable.
- The key to design software for touch-screens is simplicity.
- I don’t like stairs!
