5-day Sprint | Digital Design & UX Programme by British Petroleum

Overview

British Petroleum is a multinational oil and gas company headquartered in London that emphasizes on sustainable energy transition and has recognized electric vehicles (EVs) as the way of the future.

About BP

Skills

Product Design | Interaction Design | Visual Design | UX Research

With so many new EVs appearing on the market daily, there is a basic need for a universal mobile app that helps owners navigate to the closest charging station.

Business Opportunity

PROBLEM

EV owners have trouble determining the location of the nearest charging station and whether they will be able to reach it before running out of battery power.

SOLUTION

  1. Select their vehicle model,

  2. Find the closest charging station; and

  3. Get a full trip plan including battery status, charging stops and trip duration.

BP ChargeHub is a platform that allows users to

DAY 1

Research

To gain an understanding of the electric vehicle market, I began by researching it on the internet. Following that, I spoke with five EV owners in the San Francisco Bay Area, as California is one of the top three states in terms of registered EVs. I created a user persona using data from both of these research techniques to help guide my design choices.

Hear it from the users…

“I can wholeheartedly recommend it for anyone who uses their car primarily for commuting, especially if they have a second car for longer road trips or only use it around town.”

— Miko, Architect

“It is a kick to go on a long drive in an EV but availability of charging stations in some remote areas can get challenging at times.”

— Broc, Software Developer

“As an EV owner, I have to plan my commute more carefully, because running out of power can’t be solved by a quick stop at the gas pump..”

— Tanya, Marketing Professional

“Before you buy an EV, keep a journal for a month of all the trips you make and how many miles you drive daily. ”

— Tina, Business Owner

User Persona

DAY 2

Ideation

To prepare for this project, I looked at some competitors first to understand what features EV users need when searching for a charging station. From the research and interviews, I got to know a significant “pain point” for EV users is wondering where the closest charging station is and if they can reach it before losing battery power.

Competitive Audit

Key Insights

Throughout the research, I discovered that the user should be able to do the following key tasks:

Find the closest charging station.

See if they have enough battery to get to the charging station

Select the type of EV vehicle they own

User Flow Diagram

User Task: Select the model of your electric vehicle. Enter your destination and find charging stations on the way.

DAY 3

Design

Day 2 was all about diverging into a variety of solutions. On Day 3, I decided to converge back towards the most viable options. The end goal was to settle on the best solution to prototype. After a wireframe of the optimal solution got ready, I created an environment to test it.

Concept Sketches

Low-Fi Mockups

DAY 4

Test

The users tested my wireframes and based on their feedback I iterated the design and moved on to the high-fidelity designs. Using them as a base, I developed a clean, polished-looking UI for my mobile app. The UI includes BP brand colors, standard interactions and patterns for iOS that are familiar to users, so the app is intuitive.

1

Testing + Improvements

I tested my design with 5 users and got feedback from them and my mentor. Then, I used their input to make my low-fidelity design better. In the end, I made three important changes that greatly enhanced my final product.

2

3

DAY 5

Refine

On Day 5, I finished designing the mobile app that I’ve been working on for the last 4 days. I applied the brand visual design elements to turn the wireframes into high-fidelity prototype that worked like a finished product.

Final Product

1

Design Rationale + Breaking down the Design

2

3

Completion Certificate

for the bp Digital Design & UX

More Projects

  • Inorganic

    Website Redesign

    Inorganic is a furniture store and their products are sold pan-India via their website.

    view
  • Artclass

    Case Study

    ArtClass: A social marketplace app to share and learn exciting craft techniques nearby, or virtually.

    View
  • Accenture

    Design Rationale

    Accenture: A lyric mode feature for its users to read and see lyrics while listening to the song.

    View