Property marketing app
The project
Background
- The digital agency I worked for was frequently hired to build bespoke, native apps for new property developments' marketing suites. Each new property development would require an entirely new custom built app, which would be costly for developers, and would take months for each build.
- We knew that there must be a better way to ship apps for property marketing suites for a lower cost and shorter build time. Enter: Marmoset.
Brief and key objectives
- The new product offering should consist of a basic app 'template' or 'skin' which can be replicated for each new development.
- The app should use theming properties so developments can maintain brand consistency.
- Property developers' internal teams should be able to manage app content with a CMS.
- The MVP product should offer all common, essential features of property marketing suite apps.
- The app should work across multiple devices.
Deliverables
- Designs for the minimum viable product for startup app concept
- Master components file in Figma with theming properties
- Designs for custom CMS to manage each app
- Marketing website design
Scoping the app requirements
Using previous knowledge to scope the MVP
Having built a substantial amount of property development apps over the years, we were very familiar with the basic requirements of property development apps.
MVP feature list for the app:
- Development digital brochure
- Development site plan
- Development location map with points of interest
- List view of property 'styles' in the development
- Property 'style' details which should include floor plan, images, description, dimensions, available properties
- Basic compare feature to view 2 properties side by side
- Contact page for email capture
- The app should be themeable
Creating the theme
We needed to build a theme where our web developers could simply input a set of colour values and font styles, and the app would just work.
For our MVP, we decided that it would be enough to just offer text and colour styles, but noted that in future it would be great to be able to offer more customisable properties such as border radius on cards and buttons.
As we were working with Flutter technology (by Google) for the app build, we decided to also lean on some material design concepts for the colour theming.
Image source: Material Design
Basic colour theming concept
We arrived at the following colour theming concept which allowed for 2 main brand colours, as well as a surface colour.
Text styles
We created a set of text styles that would be used across the app components. This meant that we could assign any Google font to any of the text styles. We just had to bear in mind legibility and accessibility when assigning fonts to projects.
Example app components using the theme
All of the app components use the theme colours (which includes using tints), as well as some basic system colours which do not change. I created the styles, components and designs in Figma, which meant we could easily create a new file for each client, plug in their colour values and text styles, and we would be able to see how the entire app would look.
Icon creation
Icons needed for the app
There were several quite specific, custom icons that were required for the project. I particularly enjoyed creating these icons to accompany the property type labels!
Mockups
App management CMS
Basic CMS to manage app content
I designed a basic CMS which was intended to be sold as part of the product. To begin with, we only used these pages internally on behalf of clients, which is why they are very basic. Here are some example pages that we began with:
Marketing graphics and website
I also designed the initial website for the app, along with other marketing materials. Here are some of the graphics and imagery I created!
The app in situ
Marmoset apps are now live in property marketing suites across the UK.
Marmoset is thriving and is still expanding its offering!
