DEMEO PC EDITION - TUTORIAL

Brief

The tutorial for Demeo PC was an interesting challenge as it was largely the same scenario as VR but with a whole new input and UI to onboard so it had to be thought of as a new storyboard. We wanted to make sure that there was a mixture of instructions to read, and tasks that were easy to remember while doing. We had noticed that sometimes in the VR version players would miss what to do if they didn’t see the dialogues, and in PC this would be less of an issue but we also didn’t want to make it only popups.

So I summarized it into two tools that we could use to build a scalable tutorial system that we could add to or switch between versions:

Deb

Deb the DM is a character that is seen a little in the VR version but we thought having a character would help immerse the player more into the world of Demeo. As a DM, she naturally would be helping players learn how to play.
We wanted to make sure that there was enough text for our supported languages and in a font that even players sitting from a distance or in a smaller handheld device could read comfortably. We hadn’t talked about controller support at this stage but it was a goal of all the interfaces I was designing to be controller and console friendly for easier porting should it happen in the future. (It did).
We should be able to show nice artwork to help further the instructions and draw attention to pieces rather than having to point out pieces on the HUD.

Task Reminder

Good onboarding reinforces instructions with contextual opportunities but we can’t always assume players have read the instructions, some people like to just skip, in these cases, we would have a side panel that would show the main task to do that could support an image also.

In Addition, we wanted to make sure we could support dynamic switching of rich text-based sprites for inputs and colour-swapping for highlighting certain words. This came in handy for certain keywords that are important for players.

Wireframes

After the intentions, we started to work with the wireframes. We had gathered some benchmarks of similar interfaces that we liked, focusing on a character with dialogue on screen to see the layout, text size limits etc so we had a good foundation of references that we could use to communicate with artists and programmers etc for animations, input etc.

One thing I always commit to is making sure all the UI wireframes come with character limits for each element so narrative and localization can be easier to work with down the line. Having these constraints with good limits for line height, character limit etc. means that Asian logographic languages will work from the beginning rather than retrofitting at the end.

With this, we could then let the artists start exploring the art style they wanted. I made notes for things such as when this dialogue is up, then the player’s screen is darkened and there may be an image or not, or that if there are multiple sections of text, the CTA button should have a arrow to continue the text etc.

The side panel was similar, we had a feeling of what texts we wanted and that they could be a checklist etc but the artists were free to suggest the look of how it could be if they didn’t want flat text on the screen. This is the part of UX/UI Design I really enjoy, passing it over to your colleagues to see their ideas and iterate together until we had a stellar product.

The Onboarding Itself

The Artist’s Concept - Much better than the Wireframes

The main thing after talking with production is that since this was in parity with the main VR project, we had to keep the same flow but swap out the stages for the PC-specific parts. This made it easier but also introduced a new problem technically. Our programmers had to build a new system that could swap tutorial steps out, add new ones in and change pictures based on platform and input. As you can imagine, for a project that didn’t initially plan for this framework it had to be done from scratch and then work with both projects.

The main points to learn

We always stated that Demeo could be someone’s first VR experience and I held that mantra for the PC edition also. So we wanted to make sure that everything, even down to basic movement and camera controls, was taught well.

The storyboard was as follows:

Camera Controls
Moving and Interacting with the Champions
Enemies
Cards
HUD Elements
Game Mechanics - Combat / Reviving etc.

a CLICKABLE PROTOTYPE

With the localization I had written for the English copy, and both final and temp art assets, we could make a slide-by-slide version of the intended experience with and without a controller. This would help with the implementation of the tutorial with the programmers on our team.

Iteration

And the real part of design, iteration.

User testing

We had done a few user tests with new and experienced users to gauge a few things: the way the information was conveyed, the general pacing and flow, and the clarity of the images used in the tutorials, and the general controls.

UX CHANGES

Based on the feedback, we changed some steps from full-screen onboarding to side-panel onboarding so the users could practice them while reading rather than read, try, wait, and continue. Players felt this pacing interrupted certain smooth parts such as camera controls and combat.
We clarified a lot of the copy and highlighted certain words on certain steps to draw attention based on the confusion of players.

We had added certain steps not present in the VR version to help players use more specialized UI on the PC version that was not present on the VR version.

ART PASS

The artists had revamped the side panel and added more variations of Deb the DM, based on the tone of certain tutorial steps, adding a welcome variety and much more life to the character.

The artists also updated the images used for the PC-specific tutorial steps and then migrated them over to the VR version as well.

Final Product

Below you can see the final tutorial that is in the current product. I was super happy with the end result, working with the team was an absolute blast and hopefully the players enjoy it too!