Topographical - Web Design & Web App Project

Redefining the survey industry with a pioneering new interactive product.

100%

online user experience

No.1

system in the market

Scroll Down
topo-hero-banner

In a bid to revolutionise the traditional land survey market, Topographical has launched a pioneering new browser-based web app putting the power at the user’s fingertips.

Deliverables

Changing the landscape through intuitive design

Tasked with the design and build of both the commercial website and web app, we worked in close partnership with the client to uncover and promote their point of difference compared to the competition; the ease of access.

The plan was to design and build an in-browser web app which would utilise a Google powered map interface, giving users the power to detail their own surveys.

002
003
Topographical had amazing vision and allowed us to flex our technical abilities within the website. With a slick UX and three different user interfaces based on the type of user accessing the site, this was an awesome project that we're super proud of.

Ross Davies

Managing Director at Strafe Creative

004
014
006

Google powered interactive map technology

Alongside the JavaScript technology powering the web app, at the core of the single page application (SPA) is Google’s map platform.

The development team utilised Google’s drawing tools API to build a multi-area selection tool which could be accurate to 2 metres, eliminating the need for onsite measuring, all from the comfort of a computer.

Survey Saas project by Strafe Creative for a topographical company

The devil is in the detail

014
Branded vector illustration

Expanding on the client’s brand, the design team created a series of vector illustrations to be used across both web platforms.

010
Tutorial system

To promote familiarity within the tool, upon first interaction we implemented a tutorial system complete with beautiful, humanised animation.

011
Elegant onboarding

Often, one of the biggest resistance points to using tools like these is the clumsy sign-up process. Much care and attention was taken to ensure the onboarding process was smooth for users.

013
Modal notification system

Much like the illustrations, the modal notification system was designed to not only inform users of key information and potential success and fail states but to add a level of fun and intrigue to the app, all whilst remaining on-brand.

012
Integrated payments

Both Stripe and Paypal payment systems were integrated into the app as payment gateways, as well as the option to pay via invoice.