About the Library
BTP Storybook is a library of characters with different facial expressions, outfits, and poses as well as speech bubbles, device mockups, and background scenes.
Our goal with this library is to enable the easy creation of visuals that convey emotions and a story. This way, anyone in BTP can quickly create engaging presentations and storyboards; no visual design skills are needed.
You can use this library for any use case that requires visual storytelling such as:
- enhancing a user journey visually with story elements
- telling emotional stories
- presenting a vision
- communicating a concept visually
Please make sure to only use BTP Storybook for internal communication. For customer-facing content please follow the guidelines provided by SAP Brand!
Here are some examples of what you can build using the library and what the name of the used components are:
This library is different to the BTP Journey Presentation Templates, which is a presentation template for communicating BTP User Types and user journey maps. It is focused on supporting the design process.
This library is focused on telling a visual story for a final presentation instead. The two libraries can enhance each other though and can be used together to create an engaging presentation deck!
Using the BTP Storybook
Make sure that both the BTP Storybook and the BTP Horizon UI Styles are enabled (the UI Styles library is used for Horizon color styles). Select one of the characters for a full body or the avatar for just the framed face.
You can configure the head of the character by selecting a different variant.
The direction that the head is facing can also be changed using variants. This is useful for building a scene where two people are having a conversation facing each other. In order to tell an immersive story, you can also change your character’s emotions.
Change the outfit of the person by selecting another component from the group. The pose is also a variant that can be changed for this component.
Since the face and the body can have different skin tones, we have to manually adjust the body's skin tone. Select a layer in the face to see what color is used there, then select the current skin color for the body under colors and adjust to the face's color.
Using the section, you can even completely recolor the character or the outfit.
To add a background to your image select and add a from the panel. There are multiple components here that have the size of a presentation slide and depict various locations such as conference rooms, offices, factories, etc.
You can also add other components from the library such as speech bubbles, avatars, labels for the characters showcasing their BTP User Type and device illustrations.
Optional: Rigging
is used in animation to build a character in a way that the poses are easy to modify. We also set up our library with a basic rigging structure in case you want to create your own custom poses. The body parts are built in a hierarchical, nested way to allow for fine configuration. The arm includes the forearm for instance, which includes the hand, this way when I rotate the whole arm, both the forearm and hand moves with it.
To move a body part, just detach the component and select in the panel the body part to move. Alternatively, you can also select the frame on the canvas. Then adjust the rotation of the frame on the top right. (tip: by holding down and hovering on the field you get a slider.) You can also rotate using the handles around the frame.
All frames that can be adjusted should show up on the canvas as small rectangles in the position of the joints on the human body (sometimes they are harder to select because they are covered by other layers). Here are all the frames - and their names - that can be adjusted on every character.
Info Session Recording
See what the BTP Storybook is about and how to create and change your characters.
Contact
The library is still in a beta state and we are happy to receive your feedback and suggestions. Please contact us.