Skip to content

B.heard Value Comparison Platform UX

I helped the value comparison platform, B.heard develop their UX so that they could demonstrate a minimal viable product to investors.

B Heard Website

Overview

With the majority of comparison websites in the UK focusing on price alone, B.heard holistically measures companies on a number of factors including; standards of customer service and consumer reviews.

For Customers

The platform allows them to make their voice heard and share their experiences with the wider community. The collective voice is then leveraged to influence the way essential service providers operate.

For Businesses

B.heard enables them to build better relationships with their customers, by providing valuable insights into what their customers think. This allows businesses to provide better value for money.

Video Walk-throughs

Mobile Prototype

A basic interactive prototype (built with Flinto For Mac) to demonstrate the tariff search functionality for a possible iOS native App.

Desktop Prototype

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

Objectives

The objective of this stage of the project was to build a minimal viable product (in the form of a prototype), alongside a UI design to present to investors.

Process

I worked in a small, collaborative team made up of B.heard CEO Oscar Vickerman, software developer Arthur Toper and UI Designer/Creative Director Nick Clement.

We employed 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

This approach enabled me to then define the site architecture and wireframe key screens for the basis of the prototype(s).

Responsibilities

My responsibilities included:

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

Requirements Gathering

B.heard Requirements Gathering
Logging the key business and user requirements into a spreadsheet helped us understand the scope of what we were trying to design.

Sitemap

B.heard Sitemap Sample
Developing a clear site architecture ensured both the website and mobile app were easily navigable.

Desktop User Journeys/Personas

B Heard User Persona Sample
Defining key user journeys ensured we focused our design efforts on the needs of the user.

Mobile App User Flow

B.heard Mobile App User Fow

Mobile Wireframes

B.heard Mobile App Wireframes
Screenshot of mobile app wireframes created using Sketch.

Desktop Prototype

B.heard Axure Workspace
Screenshot of desktop wireframes that were the pre-cursor for the desktop prototype, created in Axure RP.

Flinto Prototype

B.heard Flinto Prototype
MVP prototype for the mobile app.

Axure Prototype

B.heard Axure Prototype
Clickable HTML prototype for the desktop website, developed using Axure RP.

Early Tariff Page UI Design

B.heard Tariff Listing Page Design
An example of the early tariff page design (UI design by Nick Clement)

Early Supplier Page UI Design

B.heard Supplier Page Design
An example of the early supplier page design (UI design by Nick Clement)

UX/UI Before & After

B.heard WireframeB.heard UI Design
Use the slider to toggle between the wireframe/prototype and the design.

Share This Project

If you enjoyed this project, then let others know about it by sharing it.