B.heard Value Comparison Platform

I helped the value comparison platform, B.heard develop an intuitive User Experience so that they could demonstrate a minimal viable product to investors.

Bheard Project Hero


To define and build a minimal viable product (prototype) demonstrating the core functionality for a value comparison website and mobile app.

To use the prototypes to demonstrate capability and secure further investment from investors for product development.

My Role

  • Requirements Gathering
  • UX Design Principles
  • Information Architecture
  • User personas and journeys
  • Desktop Prototype (Axure)
  • Mobile Prototype (Flinto)
Bheard Office


Based in The Garage (a tech-incubator workspace in Soho) the small, collaborative team (made up of the CEO, a software developer and UI Designer)  developed a lean, iterative process which helped us to:

  • Gather and refine business and user requirements
  • Define the design problem
  • Define the product
  • Define the design principles
Bheard Requirements Gathering

Requirements Gathering

We explored key business and user requirements through several team workshops. These were then logged into a spreadsheet and prioritised in terms of importance  to both the business and end user.

This helped us define the shape and scope of what we were trying to design.

Bheard Desktop Sitemap


Working from the requirements document I developed a clear site architecture to ensure both the website and mobile app were easily navigable.

Bheard Desktop User Journeys

User Journeys

Key user journeys were explored and captured to help us focus our design efforts on the needs of the user.

Desktop Wireframes

Key wireframes were created in Axure to visually demonstrate each stage of the user journey. These would later provide the basis for the HTML prototype.

Bheard Desktop Wireframe 1
Bheard Desktop Wireframe 2

UI Design

Based on the wireframes that I developed, UI Designer (Nick Clement) developed a set of components and key templates to communicate the potential look and feel of the experience.


Bheard Homepage Template Design
Bheard UI Components

UI Design courtesy of Nick Clement.

Desktop Prototype Video

Below is a basic interactive prototype (built with with Axure RP) to demonstrate two user journeys through the tariff search functionality.

Mobile App Experience

As part of the second phase of the project a paired-back version of the web experience was developed as a native iOS app. I developed mobile-specific user flows to ensure the experience was as intuitive as possible for mobile users. 

Bheard UI Mobile App Fow

Mobile Wireframes

Key screens were developed in Sketch which would provide both basic structural blueprints for the mobile developers as well as the basis for the Flinto Prototype. 

Bheard Sketch Artboards

Mobile Prototype Video

Below is a video of the final native mobile prototype demonstrating the ‘get a quote’ funcitonality.

Client Testimonial

Osca Vickerman Profile Photo
Oscar Vickerman
“Ben produced outstanding results whilst working as Lead UX Designer on our project. Great guy and worked well as part of the team.”


  • Sketching
  • Sketch App
  • Axure
  • OmniGraffle
  • Flinto


  • Requirements Gathering
  • Sitemap
  • User Journeys
  • Personas
  • Click-though Prototype


  • Mobile App
  • Responsive website


  • Comparison Service

Select Projects

Monthly UX Newsletter

Sign up to receive my monthly email newsletter all about UX design, prototyping and design thinking.

Sign Up