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
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.
- Before plugging in the vehicle
- After plugging in the vehicle
- 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
Putting the principles and considerations from the previous section into practice, we could create a system consisting of 3 parts.
- Vehicle information — Always relevant information covering reachability, state of charge, charge status, and location.
- Smart charging control + information — Always relevant control for the deadline, contextually relevant information about
CONSIDERINGandPLAN:*states, and contextually relevant plan details. - Charge control — Always relevant, contextual charge control.
With this system in mind, a view can be structured with the following logic.
- The vehicle information
Ais placed at the top of the view to ensure it is always visible when entering the view. - The smart charging control + information
Bis placed just below so it can be reviewed together with the vehicle informationAin a container with flexible height allowing for other relevant content like charging statistics to surface when there is no plan present. - The charge control
Cis 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 |
|---|---|
|
While in the |
|
Returns the latest cached full vehicle object. |
|
Controls charging for the vehicle or returns the current state of the requested action. |
| Returns an object containing all information about smart charging for the current vehicle, including |
|
While in the |
| The current smart charging policy for the vehicle. |
Copy linkVehicle information
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
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 |
|---|---|
|
The percentage of battery charge left |
|
The estimated range remaining, in kilometers |
|
The maximum charge threshold for the vehicle |
|
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 |
|
The percentage of battery charge left as part of the graph |
Copy linkCharging status
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) |
|---|---|
|
The vehicle is not reachable |
|
The vehicle is not plugged in |
|
The vehicle is plugged in but not charging |
|
The vehicle is fully charged, meaning the |
|
A smart charging plan has been generated, and charging was successfully stopped |
|
Charging is being stopped outside of a smart charging plan |
|
Charging is being started outside of a smart charging plan |
|
A smart charging plan has been generated, and charging is being paused |
|
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. |
|
The vehicle is currently charging |
| The vehicle is currently charging |
Copy linkLocation status
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) |
|---|---|
|
When the vehicle can’t be reached, we recommend displaying |
|
The vehicle has transmitted recent GPS coordinates but is currently not located at a charging location |
 | vehicle.locationIdThe vehicle is currently at a charging location, displayed as the name of the charging location |
Copy linkSmart charging control + information
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
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 |
|---|---|
| Enabled | Toggles the isEnabled property and updates the /vehicle/{vehicleId}/smart-charging-policy accordingly. |
Deadline | Edits the deadline property and updates the |
Copy linkExplanation text
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.isPluggedIn | A smart charging plan will be created once your vehicle is charging at a predefined charging location. |
!consideration.atChargingLocation | A 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. |
| 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.hasTimeEstimate | Monitoring 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_PRICES | Awaiting 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
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.
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 paused | plan.stopConfirmedAt |
B Charging planned to resume or did resume | plan.startConfirmedAt |
C Charging planned to finish or did finish at | plan.estimatedFinishAt || plan.endedAt |
D Deadline | policy.deadline |
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 now | status.smartOverride.createdAt |
F Returned to charge plan | status.smartOverride.endedAt |
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
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.
Key details can be pulled or calculated from the plan object.
| Descriptor | Key(s) |
|---|---|
A Charging was paused | plan.stopConfirmedAt |
B Charging resumed at or is planned to resume at | plan.startConfirmedAt || plan.startAt |
C Charging did finish at or is planned to finish | plan.endedAt || plan.estimatedFinishAt |
D Charge time or Estimated charge time | plan.endedAt - plan.startAt || plan.estimatedFinishedAt - plan.startAt |
E Estimated savings | plan.nonSmartCost - plan.smartCost |
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 now | status.smartOverride.createdAt |
G Charged outside plan for | status.smartOverride.endedAt - status.smartOverride.createdAt |
H Returned to plan | status.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
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
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) |
|---|---|
|
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. |
|
The smart charging plan is currently overridden by an external start, posting a |
Copy linkFinished plans
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.
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 time | plan.endedAt |
B Charged for | plan.startConfirmedAt - plan.endedAt |
C Estimated savings | plan.nonSmartCost - plan.smartCost |
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
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.
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:UNPLUGGED | Your vehicle was unplugged |
status.state = PLAN:ENDED:DEADLINE_CHANGED | You changed your deadline |
status.state = PLAN:ENDED:DISABLED | You disabled smart charging |
status.state = PLAN:ENDED:FAILED && plan.failureCondition = STOP_FAILED | We could not reach the vehicle, and charging could not be paused |
status.state = PLAN:ENDED:FAILED && plan.failureCondition = START_FAILED | We 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
.png){kind=link}
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.