Mogul’s capabilities have expanded significantly in the last 24 months. A number of challenging projects have pushed our team to the limits of their skills and knowledge – and we have learned a vast amount in the process. One of the areas we have grown the most is in software interface design. Interface design means designing all the screens, buttons, and forms for software applications so that they look awesome and are easy to use.
Interface design is very different from our core business of designing websites. A software application is usually far more complex than a website, and a user might be using the software for hours at a time, most days of the week, for years on end – so it needs to be intuitive and painless. Requirements gathering and project management are absolutely crucial, and testing is a lot more complex than in website projects.
One of our biggest interface projects has been our own homegrown product Strea.ma, and we have also done a huge amount of interface design for an exciting LA-based software company called Property Matrix.
Property Matrix is based in Culver City, California and specialises in property management software. The company’s flagship product is a software-as-a-service (SaaS) accounting application that allows landlords to manage tenants, building maintenance, vacancies, and bookkeeping all in one place.
In 2015 Property Matrix’s founders, Eyal and Josh, were looking for an outsourced design and front-end development team to create a world-class interface for the Property Matrix software. They found Mogul’s listing in the Xero directory, were impressed by the work we had done for a number of US firms, and got in touch.
As software developers, they prefer an agile approach to working, which means prototypes are created very quickly and decisions are made as you go. This is a very common approach to software development and it relies on exceptional communication, responsiveness and reliability and a lot of mutual trust. To work at high speed, with agility, and still deliver to very high-quality standards can be a demanding process. Eyal and Josh are still working with us because we have continued to meet and exceed their expectations.
We completed the first end-to-end project, a marketing site, with Property Matrix in 2016 and earned their trust by delivering to spec on time and to a high-quality standard. We had weekly WIP phone calls and used collaboration platforms Slack and Trello to manage the project in real time.
The relationship since that initial project has since grown to Mogul producing all of Property Matrix’s design work including all of the interface design for the software app itself, Property Matrix’s email and print marketing collateral, illustrations, and ads.
A number of Mogul team members have worked on the account, but to provide Property Matrix with the level of dedicated service that they require, we assigned Louie, one of our front-end designers, to the account pretty much full-time, essentially working as a virtual employee for Property Matrix.
Key features / functionality
The initial project for Property Matrix was a marketing site focused on attracting free trials for the property management software. This was not a straightforward exercise, as it included a complex feature matrix.
From there we progressed to redesigning the interface of the software itself:
Design: For the design tasks, we used Figma, a collaborative interface design tool where remote teams can work together in the browser for PC or Mac. We also used RealtimeBoard, a giant infinite whiteboard where everyone collaborates in real time. RealtimeBoard is a really efficient way of working.
HTML Templates: Originally Josh and Eyal wanted to use Google’s Material Design components for the software’s interface templates. Unfortunately, we found that, as the project progressed, it became restrictive and lacked a lot of the functionality that we required. As a result, we ended up creating a lot of custom components, including a completely new transaction manager and an internal email client. Eventually, about 75% of the app front end was custom.
Implementation: There was a tight deadline for the app interface design work. Eyal and Josh required the complete files for their beta release in January. We worked really hard to deliver these. It was high pressure, full-time work, and our full design team worked extremely hard to get it done. As soon as we finished and delivered each template, Property Matrix’s development team would immediately add it to the software app’s React framework. This workflow meant they were depending on us to produce a high volume of work to keep the developers busy at their end.
Ongoing: Now that the Property Matrix software is live, we have moved into a ‘fixes and new features’ process, using version control software Git to integrate fixes into Property Matrix’s React framework.
We have learned a lot of lessons during our work with Property Matrix, mostly due to the scale and speed of the work. There were times where we could not devote our designer to the project full-time (he was required for other work) and this caused problems for the client. As a result, we have developed much better processes for managing our team’s capacity and forecasting busy periods. This means that we can give our clients a much better idea of our resourcing weeks or even months in advance.
Apart from this, the interface design project has gone really well. Louie has done a really great job at self-managing the work, and Eyal and Josh both have a high understanding of technology and software which means that there has been a perfect match of expectations and delivery for Property Matrix.
It has also been an inspirational experience, seeing how small companies on opposite shores of the Pacific Ocean can work together to make great products, and we have become friends with Eyal and Josh, strengthening the ties between New Zealand and California. We feel like we are essentially Property Matrix’s New Zealand-based team. It’s like our own mini-Trans Pacific Partnership 🙂