Reece, Australia’s leading supplier of bathroom, plumbing, waterworks and HVAC-R products, partnered with Thoughtworks to develop a modern 3D bathroom planner tool named Imagin3D™. The tool harnesses the latest innovations in 3D technology and has helped 30,000+ customers bring their dream bathroom ideas to life during the first three months since launch. We sat down with Thoughtworkers Cam Jackson, Lead Developer Consultant, Micah Sargisson, Lead Experience Designer, and Sandy Fraser, Developer, to share their experience working on the project with Reece. Watch the video to hear more about their proudest moments, how they overcame challenges as a team, and how working on this project has helped them grow as technologists.
Introduce yourself and tell us your role in this project with Reece
Cam: My name's Cam Jackson. I'm a lead developer consultant at Thoughtworks. I was the tech lead for the Imagin3D bathroom planner for the first 12 months or so. So that meant I was responsible for the technical quality, making sure that we were delivering, working with developers and working with Reece as well to kind of shape the product and make sure that we delivered something.
Micah: My name's Micah Sargisson. I'm a lead experience designer with Thoughtworks. While I was the lead designer on the project, it really felt like more of a facilitation role that I was playing. I think everyone on the team had a really sort of immense contribution to the design, given that it was very technically challenging and also very challenging from a design perspective.
Sandy: My name's Sandy. I'm a developer at Thoughtworks. I was really there to bring the experience that I had working with 3D software. It's a pretty complex space, so you need fairly deep expertise in 3D technology to deliver a project like this.
What was your experience working on this project?
Cam: It was a great project. It was challenging, it was very difficult technically, but it was rewarding and one of the most fun things I've ever worked on. So we used a lot of really interesting technology to build this. It's all web-based, so using JavaScript and HTML and CSS, but we used a library called 3JS, which makes it fairly straightforward to do 3D experiences in the browser. And then on top of that, we used something called React Three Fibre, which allows you to drive 3JS from React JS.
That's really great because we’ve got a lot of developers with lots of experience using React to build HTML interfaces. We could bring those developers in who might not have much 3D experience before but they've used React before, and so, they could still use that experience and kind of transfer that knowledge to start building 3D experiences using React.
Micah: To achieve a product where you've got 2D and 3D elements interacting, we really had to get very in depth with CSS properties and really focus on the design. We had to be careful because the tool is a design tool and used for customers to create something that they like. The design naturally had to be quite plain and clean so that we didn't compete with the customer's designs. I'm really proud of the way that we were able to kind of work together to create an interface that was still unique and fresh, but didn't sort of have too many elements that would take away from what the customer was trying to achieve.
Looking back on this project, what are you most proud of?
Cam: I think we got pretty good at that cycle of designing something, building it, testing it with customers, and then learning from that better than I think I'd done on any project before and I was pretty proud of that.
Micah: I'm most proud of the way the team came together and collaborated to achieve what we did in a short period of time. It was only really possible through like really high levels of trust on the team. It felt like we really got to the heart of what it means to be agile. Stories really only often had a few bullet points on them and a couple of design ideas, which really forced us to have conversations whenever we picked up a new piece of work. And that was really critical because it allowed the two-way flow of ideas, I'd say on the project, we had agreements, not requirements.
Sandy: What I found really amazing on this project was the willingness of everyone on the team to change direction. When we noticed that something wasn't working properly, we would just try a few different things, find out what worked and then change in direction. The suggestions would come from anyone on the team who noticed that something wasn't as good as it could be and we would all have ideas about how it could work better. And I think the product that we have ended up with is much stronger for that.
How did working on this project help you grow as a technologist?
Cam: Working on this project really helped me grow as a leader. When you're working on something that is really technically challenging, it's tempting to think that your job is to solve all the problems and have all the answers, which I knew it wasn't from day one, but it's hard to get out of that habit and to really find that balance between providing strong leadership and direction, but also getting out of people's way so that they can kind of bring their skills and solve problems really well. I think the easiest way to kill someone's creativity is to tell them what to do.
Micah: So finding that balance is really challenging and I think this project really helped me grow in that area. What we were trying to do is take real world environments and digitize them, so that has some benefits. It makes it much easier for someone to pick up the tool and understand, but it also means as a technologist you have to be highly aware of the subtleties of interaction, not just in a digital sense, but also in the physical world.
Sandy: You know how you interact with day to day objects and how you move things, and so really trying to translate those concepts from the physical world into a digital environment was something that was quite new to me. I got to work with some technologies that I hadn't used before. Although I'd worked with 3D tech before and web tech, I hadn't done both of them together and it was quite different. I wasn't sure what would be possible. And also, I got to lead a team that was larger than teams that I'd led in the past and it was definitely a challenge. I really enjoyed the experience and it was a stretch, but I'm keen to do it again one day.
How did it feel to see the Imagin3D tool go live?
Cam: It was a really proud and exciting moment seeing it go live. Sometimes go lives can be pretty nerve-wracking, but because of all the testing and research that we'd done leading up to it, I don't think we had as much of those nerves. We were pretty confident that what we'd built, people were going to like it because people had already been enjoying it for a little while before we went public with it. And then having something that I could just send to my brother who's doing a bathroom renovation right now and say, “hey, what do you think of this?” And him coming back and saying, “yeah, that's actually pretty useful,” is a pretty good feeling.
Micah: My brother is an architect and it was really cool to see him get excited about the product and be able to describe how it would support him and his work with his clients. While architects weren't a focus user group for us in this first release, it's really exciting to see that there are countless opportunities across the sector and it really feels like this platform that we've built is just the start.
Sandy: This was a project that Reece had put a lot of effort into other materials around marketing because it was such a big marketing piece for them. So, you know, they've got wonderful displays around all of the restores for this product and it's just really great seeing it in its physical environment. It's not something that I get to see a lot in the projects that I work on.
For more on the Imagin3D project with Reece, check out the full partnership story (includes video).
Disclaimer: The statements and opinions expressed in this article are those of the author(s) and do not necessarily reflect the positions of Thoughtworks.
