Spec modern website elements

Spec —

Guiding interface and experience design for a new standard in the property industry.

The client

Launched in April 2018 as the first product from Pupil, a London-based spatial technology start-up. They publish 3D information about real-world interiors on an industrial scale.

Spec brings Pupil’s spacial services to the residential property market – offering estate agents more accurate and feature-rich marketing assets including both traditional photography and floorplans as well as VR experiences.

How did we help?

BB Agency worked closely with the internal design teams – collaborating on Pupil’s products, including Spec, and helping to design and prototype interfaces, design languages, interaction design patterns, websites and mobile apps.

Spec design elements

Developing a functional UI environment.

Pentragram designed both the Pupil and Spec brand identities, and so we developed their existing vision of the Spec brand into a functional UI environment.

Spec color palette
Spec font
Spec logo

d

Spec website details - man looking closely at his phone

Bringing interfaces to life

Through interaction design we explored new ideas on how to structure and interact with property details such as descriptions, floorplans, locations, and agents. This allowed us to clear the visual clutter and focus on how people will interact with Spec’s new interface.

Below you can see how a property detail page is constructed to allow users to easily navigate through specifications and assets and gather valuable information about the property.

Spec website dashboard detail video

The dashboard offers estate agents traditional photography and floorplans as well as VR experiences.

— Properties
Spec website search bar
— Floor plan modules
Spec website dashboard floor plan details
— Latest activity sidebar
Spec website dashboard details
— Radius widget on map
Spec website map
— Login
Spec website sign in area

Spec’s website allows for a continued scrolling experience, introducing potential customers to the full offer, features and benefits.

Spec website
Spec custom icons

Working alongside Pupil and Pentagram, we developed a suite of custom icons for a variety of applications.

Style explorations, design, structure and much more…

Spec website
Spec app concept by BB Agency
Spec website by BB Agency
Spec website by BB Agency
Spec website images
Spec app concept shown on a phone screen

We provided motion design and video direction for Spec’s explanatory video showcasing the process of a property survey.

The result

During our 18 month partnership we worked closely with the internal design teams – collaborating on Pupil’s products, including Spec, and helping to design and prototype Spec’s website, VR mobile app, interactive dashboard and video spot.

Our design and development teams helped Pupil and Spec launch their websites, as well as explore various visual languages, expriences and solutions for their inhouse products.

Our services

Design

  • Style exploration
  • Branding
  • User experience design
  • User interface design
  • Design system

Development

  • Front-end development
  • Responsive development

Have a project in mind?
Let’s get to work.