Enode Developers

Day-to-day use

Since smart charging intercepts the default charging behavior your users are familiar with, clear communication and structured information are essential to ensure they can always stay on top of their vehicle’s charging.

Copy linkKey events and questions

Download

In day-to-day use, smart charging is as easy as plugging in a vehicle at a charging location and returning to it fully charged by the desired deadline, knowing it charged when prices were the lowest. However, since smart charging intercepts the default charging behavior users are familiar with and takes control of charging the vehicle, the need for information increases. It could be helpful to split up the daily use pattern into three main events to decide which pieces of information are relevant at which times.

  1. Before plugging in the vehicle
  2. After plugging in the vehicle
  3. After the deadline has passed

Depending on which of these the user finds themselves in and the state of smart charging, they might be wondering...

  • What is the current state of charge?
  • Why is my vehicle charging or not charging now?
  • When will or did my vehicle start or stop charging?
  • How can I start or stop charging?
  • How can I change the deadline?
  • How much will or did I save via smart charging?
  • Is everything working as expected? If not, how can I fix it?

Answering these questions in your UI requires data and actions from various API endpoints relating to the vehicle, smart charging for the vehicle, and registered charging locations. By design, our APIs relay all relevant information in a universal way to cater to many different use cases, allowing you to structure, prioritize and filter the information in a system that suits your use case.

Providing too much information could make it complex and confusing to parse. On the other hand, providing too little could leave users in the dark without a sense of control. Combining the main events and questions listed above with your user research and target audience knowledge could be an excellent place to start striking this balance for your product.

Copy linkExample system and structure

Download

Putting the principles and considerations from the previous section into practice, we could create a system consisting of 3 parts.

  1. Vehicle information — Always relevant information covering reachability, state of charge, charge status, and location.
  2. Smart charging control + information — Always relevant control for the deadline, contextually relevant information about CONSIDERING and PLAN:* states, and contextually relevant plan details.
  3. Charge control — Always relevant, contextual charge control.

With this system in mind, a view can be structured with the following logic.

  • The vehicle information A is placed at the top of the view to ensure it is always visible when entering the view.
  • The smart charging control + information B is placed just below so it can be reviewed together with the vehicle information A in a container with flexible height allowing for other relevant content like charging statistics to surface when there is no plan present.
  • The charge control C is placed at the bottom of the viewport, fixed and floating on top of the rest of the content, ensuring it is always available even if the content below is scrollable.

Copy linkEndpoints

To build out this complete structure, a variety of different endpoints are used. In the examples below, we refer to these endpoints by their shortname as specified in the list below.

Shortname Endpoint

consideration.*

/vehicles/{vehicleId}/smart-charging-status: consideration

While in the CONSIDERING state, this value is populated with all of the consideration flags in their current state. This field is null when in DISABLED or PLAN:* states.

vehicle.*

/vehicles/{vehicleId}

Returns the latest cached full vehicle object.

action.*

/vehicles/{vehicleId}/charging or /vehicles/actions/{actionId}

Controls charging for the vehicle or returns the current state of the requested action.

status.*

Smart Charging StatusAPI

Returns an object containing all information about smart charging for the current vehicle, including state, the consideration object, the plan object, the externalStart object, and more.

plan.*

/vehicles/{vehicleId}/smart-charging-status: plan

While in the PLAN:* states, this returns all of the information about the current smart charging plan. This field is null in the DISABLED or CONSIDERING states.

policy.*

Smart Charging PolicyAPI

The current smart charging policy for the vehicle.

Copy linkVehicle information

Download

This component aims to reflect the vehicle information relevant at the current time into an easily scannable system consisting of 3 parts.

Under the hood, it combines reachability, plugged-in state, charging state, state of charge, upper charging threshold, location, charging locations, smart charging considerations, and smart charging states.

Copy linkState of charge

Download

A reflection of the current state of charge focused on the current battery level as the primary visual attention point, with the current range remaining treated as secondary information. The graph visualizes the current battery level and subtly indicates protective charging and upper charging thresholds.

Reference Description

1 Current battery level

vehicle.chargeState.batteryLevel

The percentage of battery charge left

2 Current range remaining

vehicle.chargeState.range

The estimated range remaining, in kilometers

3 Upper charging threshold

vehicle.chargeState.chargeLimit

The maximum charge threshold for the vehicle

4 Protective charging threshold

vehicle.smartChargingPolicy.minimumChargeLimit

The protective charging threshold that the vehicle has to reach before charging is paused. If this attribute is not set, the value defaults to zero

5 Current battery level

vehicle.chargeState.batteryLevel

The percentage of battery charge left as part of the graph

Copy linkCharging status

Download

The current charging status is represented as a single status pill. Each status has an icon and label representing the current state. The statuses are grouped by colors reflecting if the vehicle is charging, not charging, or transitioning between the two. This can be read as a hierarchical system from top to bottom, easily translatable into an if statement.

Visual Key(s)

A light gray charging status pill with an icon (crossed over wifi symbol) and a label ("not reachable")

!vehicle.isReachable

The vehicle is not reachable

A light gray charging status pill with an icon (crossed over plug symbol) and a label ("not plugged in")

!vehicle.chargeState.isPluggedIn

The vehicle is not plugged in

A light gray charging status pill with an icon (crossed over lightning symbol) and a label ("not charging")

!vehicle.chargeState.isCharging

The vehicle is plugged in but not charging

A light gray charging status pill with an icon (full battery symbol) and a label ("fully charged")

vehicle.chargeState.isFullyCharged

The vehicle is fully charged, meaning the batteryLevel is the same as the chargeLimit

A charging status pill with an icon (pause symbol) and a label ("charging paused")

status.state === "PLAN:EXECUTING:STOPPED" || status.state === "PLAN:EXECUTING:STOPPED:AWAITING_PRICES"

A smart charging plan has been generated, and charging was successfully stopped

A light gray charging status pill with an icon (loading symbol) and a label ("stopping charging")

plan === null && action?.kind = "STOP" && action?.state = "PENDING"

Charging is being stopped outside of a smart charging plan

A medium gray charging status pill with an icon (loading symbol) and a label ("starting charging")

plan = null && action?.kind === "START" && action?.state === "PENDING"

Charging is being started outside of a smart charging plan

A medium gray charging status pill with an icon (loading symbol) and a label ("pausing charging")

status.state === "PLAN:EXECUTING:STOPPING"

A smart charging plan has been generated, and charging is being paused

A medium gray charging status pill with an icon (loading symbol) and a label ("resuming charging")

status.state === "PLAN:EXECUTING:STARTING" || (status.smartOverride && !vehicle.chargeState.isCharging)

A smart charging plan has been generated, and charging has been previously paused and is now starting again according to the plan. Alternatively, the vehicle is starting charging because user has manually overridden the smart charging.

A green charging status pill with an icon (lightning symbol with three lines indicating speed) and a label ("charging")

status.state = PLAN:EXECUTING:OVERRIDDEN

The vehicle is currently charging

A green charging status pill with an icon (lightning symbol) and a label ("charging")

The vehicle is currently charging

Copy linkLocation status

Download

A reflection of the vehicle location and whether it is currently at a charging location. When the vehicle is plugged in at a charging location, it validates this for the user. When not, it is a subtle reminder of why smart charging is not currently generating a plan.

Visual Key(s)

A label stating "last seen 29 minutes ago"

!vehicle.isReachable

When the vehicle can’t be reached, we recommend displaying vehicle.lastSeen instead of location since the location can’t be validated

A label stating "Near Bjølsengata 54C", with the address (Bjølengata 54C) emphasised visually

vehicle.isReachable && vehicle.location.latitude && !vehicle.locationId

The vehicle has transmitted recent GPS coordinates but is currently not located at a charging location

A label stating "At Home", with "Home" emphasized visuallyvehicle.locationId
The vehicle is currently at a charging location, displayed as the name of the charging location

Copy linkSmart charging control + information

Download

This component reflects everything related to smart charging and smart charging plans. It consists of 4 main parts, where the two latter are visible only if a smart charging plan is present.

In the CONSIDERING state, it aims to present why a smart charging plan is not generated yet with helpful pointers. When in any of the PLAN:* states, it shows all details about the current smart charging plan in an easily scannable format.

Copy linkDeadline control

Download

The deadline is written out in the main component to inform the user about their current setting. Then, by tapping it, additional controls are presented.

Reference Description
EnabledToggles the isEnabled property and updates the /vehicle/{vehicleId}/smart-charging-policy accordingly.

Deadline

Edits the deadline property and updates the /vehicle/{vehicleId}/smart-charging-policy accordingly. If smart charging is disabled, the deadline picker could be disabled too to underline it.


Copy linkExplanation text

Download

In the CONSIDERING state, it aims to present why a smart charging plan is not yet generated. In any of the PLAN:* states, it summarises the key information from the plan details that are most relevant for the current state.

The table below exemplifies which combinations of CONSIDERING flags and PLAN:* states we think you could display unique texts for. It can be read as a hierarchical system from top to bottom, aiming to present the most vital information not covered by other components. It pairs with vehicle information, the charge control, and the rest of the smart charging component to paint the complete picture.

Copy linkConsidering

Key(s) Description
!consideration.isPluggedInA smart charging plan will be created once your vehicle is charging at a predefined charging location.
!consideration.atChargingLocationA smart charging plan will be created once your vehicle is charging at a charging location. If you just arrived, please allow the vehicle a few minutes to update its location.

!consideration.isCharging

Your vehicle needs to be charged for a few minutes for us to estimate the required charge time. Please make sure your vehicle is charging.

!consideration.hasTimeEstimateMonitoring the charge rate to create a smart charging plan. Charging will pause shortly once the plan is ready.

Copy linkPlan

Key(s) Description
status.state === "PLAN:EXECUTING:OVERRIDDEN"Charging now. The smart charging plan has been put on hold.
status.state === "PLAN:EXECUTING:OVERRIDDEN"
status.state === "PLAN:EXECUTING:STOPPING"
Charging now. The smart charging plan has been put on hold.
status.state === "PLAN:EXECUTING:OVERRIDDEN"
status.state === "PLAN:EXECUTING:STOPPED"
Returned to the smart charging plan. Charging will resume HH:MM {startAt} and finish before HH:MM {estimatedFinishAt}.
status.state === "PLAN:EXECUTING:STOPPING"Charging will resume HH:MM {startAt} and finish around HH:MM {estimatedFinishAt}.
status.state === "PLAN:EXECUTING:STOPPED":AWAITING_PRICESAwaiting next-day electricity prices before finalizing the smart charging plan. Charging will finish before HH:MM {deadline}.
status.state === "PLAN:EXECUTING:STOPPED"Charging will resume HH:MM {startAt} and finish around HH:MM {estimatedFinishAt}.
status.state === "PLAN:EXECUTING:STARTING"Charging will finish around HH:MM {estimatedFinishAt}.
status.state === "PLAN:EXECUTING:STARTED"Charging will finish around HH:MM {estimatedFinishAt}.
status.state === "PLAN:EXECUTING:FINISHED"

Copy linkPlan timeline

Download

Once a smart charging plan is present, and smart charging is in any of the PLAN:* states, a timeline is displayed to make it easier to grasp and scan visually.

Download

The timeline can be constructed from the plan object. In this case, the horizontal axis is created dynamically by rounding down from the time charging was paused (A) and rounding up from the user-defined deadline (D) from the smart charging policy. The charging window is visualized by the planned start (B) and stop (C) times.

Descriptor Key(s)
A Charging was pausedplan.stopConfirmedAt
B Charging planned to resume or did resumeplan.startConfirmedAt
C Charging planned to finish or did finish atplan.estimatedFinishAt || plan.endedAt
D Deadlinepolicy.deadline
Download

If the plan has been overridden by the user, this can be constructed by keeping track of the status.smartOverride object.

Descriptor Key(s)
E Plan put on hold via charge nowstatus.smartOverride.createdAt
F Returned to charge planstatus.smartOverride.endedAt
Download

When the vehicle is charging according to the plan or via an override, the charging progress can be visualized by displaying an additional marker.

Copy linkPlan details

Download

A Plan details toggle reveals or hides more details about the plan. Key timestamps are written out to add specificity to the timeline, and further information is exposed.

Download

Key details can be pulled or calculated from the plan object.

Descriptor Key(s)
A Charging was pausedplan.stopConfirmedAt
B Charging resumed at or is planned to resume atplan.startConfirmedAt || plan.startAt
C Charging did finish at or is planned to finishplan.endedAt || plan.estimatedFinishAt
D Charge time or Estimated charge timeplan.endedAt - plan.startAt || plan.estimatedFinishedAt - plan.startAt
E Estimated savingsplan.nonSmartCost - plan.smartCost
Download

If there has been a smart override, details can be pulled or calculated from the status.smartOverride object.

Descriptor Key(s)
F Plan put on hold via charge nowstatus.smartOverride.createdAt
G Charged outside plan forstatus.smartOverride.endedAt - status.smartOverride.createdAt
H Returned to planstatus.smartOverride.endedAt

Copy linkFinished or failed plans

Once a plan reaches any of the PLAN:ENDED:* states, smart charging immediately transitions to either the FULLY_CHARGED state or the CONSIDERING state again. Therefore, this component would reflect the current state's explanation text. For more pointers on how to handle finished or failed plan states, please refer to the respective sections below.

Copy linkAwaiting price updates

Download

If the vehicle is in the PLAN:EXECUTING:STOPPED:AWAITING_PRICES state, the plan object will have null values (as described here). Default empty states for the plan details can handle this. The plan timeline can be visualised by outlining the possible charge window range and overlaying the estimated charge time.

Copy linkCharge control

Download

A contextual button that only shows the charge control available to the user at the moment, if any. Charge controls are available if the vehicle is reachable and is not fully charged. Which specific control type is applicable depends on whether the car is currently charging or not and whether a smart charging plan is active.

Once triggered, the charging status reflects the result of the action. For example, when charging transitions between states, the action button could be disabled in the state it was transitioning from until the action is completed.

Visual Key(s)

A white charge action button with a green icon (lightning with three lines indicating speed) and a green label ("charge now")

status.plan != null && !vehicle.chargeState.isCharging

The vehicle is not charging and has a smart charging plan, posting to the Smart OverrideAPI endpoint once pressed to override the smart charging plan.

A white charge action button with a gray icon (arrow pointing left) and a gray label ("return to charge plan")

status.state = PLAN:EXECUTING:OVERRIDDEN

The smart charging plan is currently overridden by an external start, posting a DELETE to the Smart OverrideAPI endpoint to return to the smart charging plan once pressed.

Copy linkFinished plans

Download

Once a plan is successfully finished, smart charging transitions to PLAN:ENDED:FINISHED. Since the plan was successful, the state immediately transitions into the FULLY_CHARGED.

In this example structure, the vehicle information components present the current vehicle information and smart charging state. Therefore, a plan summary for the recently finished smart charging plan is presented at the top of the view.

To fetch the required data for the summary and subsequently the detail view, you can query the Smart Charging PlansAPI endpoint.

Download

The summary includes a title, message, and an entrance to a detailed plan view. Both the title and summary use dynamic values from the finished plan object.

Descriptor Key(s)
A Ended-at timeplan.endedAt
B Charged forplan.startConfirmedAt - plan.endedAt
C Estimated savingsplan.nonSmartCost - plan.smartCost
Download

The detail view for the finished smart charging plan can be constructed by reusing parts of the smart charging component used in the vehicle detail view.

After navigating back from the detail view, the previous plan summary could either be dismissed or remain in view for a certain amount of time.

Copy linkFailed plans

Download

Failed plans end in any other PLAN:ENDED:* states before immediately transitioning into either CONSIDERING or FULLY_CHARGED. Failed plans utilize a similar mechanism and structure to how finished plans are handled.

Download

The previous plan failure component consists of a title, message, and a button to dismiss it. The title states the plan was aborted, including a timestamp of when it was aborted (A). The timestamp refers to the endedAt of the failed plan.

The failure reason (B) is contextual and based on which PLAN:ENDED:* state the plan ended with and whether a failureCondition is present. Since the previous plan failure is presented together with the current vehicle information and smart charging state, the reasons are kept brief, as the totality of the information should paint a clear picture.

State Text
status.state = PLAN:ENDED:UNPLUGGEDYour vehicle was unplugged
status.state = PLAN:ENDED:DEADLINE_CHANGEDYou changed your deadline
status.state = PLAN:ENDED:DISABLEDYou disabled smart charging
status.state = PLAN:ENDED:FAILED && plan.failureCondition = STOP_FAILEDWe could not reach the vehicle, and charging could not be paused
status.state = PLAN:ENDED:FAILED && plan.failureCondition = START_FAILEDWe could not reach the vehicle, and charging could not be resumed
status.state = PLAN:ENDED:FINISHED && plan.failureCondition = FINISHED_LATE

If you are able to send push messages to your users, you could consider notifying them of status.state = PLAN:ENDED:FAILED && plan.failureCondition = STOP_FAILED and status.state = PLAN:ENDED:FAILED && plan.failureCondition = START_FAILED.

Additionally, you could consider sending a push message for status.state = PLAN:EXECUTING:START_FAILED to notify them of potential connectivity or charger issues earlier in the plan, prompting your user to try plugging the vehicle in and out.

Copy linkPutting it together

Download

Putting it all together, this example structure and system highlight how the key events and questions could be used to build out a smart charging experience. Refer to this file for an overview of how this system handles the key CONSIDERATION and PLAN:* states.

Was this article helpful?