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

The Challenge

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

Process

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

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

Desktop 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.

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.

 

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
NON EXECUTIVE DIRECTOR
“Ben produced outstanding results whilst working as Lead UX Designer on our project. Great guy and worked well as part of the team.”

Tools

  • Sketching
  • Sketch App
  • Axure
  • OmniGraffle
  • Flinto

Deliverables

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

Type

  • Mobile App
  • Responsive website

Sector

  • Comparison Service

Get In Touch

If you need help with a UX Design project then I'd love to hear from you.

Download CV

Monthly UX Newsletter

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

Sign Up