My first package is live on UE4 Marketplace. You can grab it here.
If you’re a game designer, you probably know that flowcharts and mind maps are commonly used for the visualization of ideas. However, flowcharts and mind maps can become messy when you put too much content — that’s why they have limited interactions and space. Usually, game designers have to separate the flowchart from all the files they need. Such limitation kills creativity and efficiency.
But do they have to make such a trade-off between visualization and information collection?
With the help of MAPI, they don’t.
To help game designers collect their thoughts in a clear and visual way, we invented MAPI — a graph-based, layered prototyping tool for game designers. It has unlimited space, arrangeable cells, multiple layers to organize all your creative thoughts, and more innovative interactions for you to discover. Unlike mind maps, there is no limitation or convention to using MAPI. In fact, as we interviewed one of our target users, he discovered a new interaction within the app. Thus, MAPI is a prototyping tool that is made to inspire new inventions. Look at the mobilecasinogamesuk.com and follow this popular game.
To break the limitation of space, MAPI provides an infinite canvas and unlimited text in each cell. A mind map with a similarly large canvas and cells wouldn’t help you organize well since you can’t hide details when you want to see the entire structure. MAPI uses layers instead of lines to show relationships between cells. Layers clearly show the relationship between cells in a general picture, and then hides less important information when you don’t need them.
MAPI also lets you test and try out your interactive stories.
The following article is about MAPI — our final project for CS160, the User Interface Design and Development class at UC Berkeley. In this project, we had to think, create, and develop an innovative web application on the theme of authoring, the “process of ideating, producing, revising, and sharing creative works.” In our brainstorming sessions, we discussed the creative process in game development. We focused on the plot development of games, particularly games those with a “non-linear” storyline, where the players are given many choices during gameplay with different outcomes. With such a large and confusing storyline, it must be hard for writers to keep track of everything they’ve written. We thought we might be able to design an interface for game designers that is specialized to solve such a task.
(Throughout the article we use the words “cell” and “block” interchangeably.)
Design Process Overview
Our design process included multiple cycles, where each cycle consisted of design (brainstorming, sketches, etc.), prototyping, and evaluation.
Brainstorming (Cycle 1)
Initially it was difficult to come to a consensus in our, because we were stuck in the convention of mind maps and flowcharts. We all knew about kind maps, and that they already exist on the market. How do we make something different? How do we make our application innovative, and something useful for our targeted users? We didn’t have many innovative interactions in the beginning, essentially thinking only of a mind map with unlimited space for cells.
At the end of our initial brainstorming, we still did not have good insights on what type of flowchart application is truly innovative and most useful for our target group. However, our brainstorming session did bring in many important questions for us and our targeted users. We started sketching (as a part of prototyping for cycle 1) and interviews to further develop our ideas and solidify the application design.
Interviews (Cycle 1)
After our initial brainstorming and storyboarding session, we conducted interviews to get a better idea of our target user group. We interviewed three game designers/developers. Here are rough transcripts of our interviews:
Interview #1
An undergraduate major in game design. He wrote four story-based games that have been bought by board game companies.
Q: What tools do you use for game making?
A: Xmind and twine.
Q: Do these tools allow you to insert pictures and texts in each square of the mind map?
A: Twine does.
Q: What else would help you design game?
A: A huge mindmap, but each block is an independent canvas where I could use as something like OneNote. But you could add pictures, texts, sketches, etc.
Q: Would it be better if you could only see the title and a picture of the block, and once you clicked it you could see and edit the single block?
A: Yes. And it would be helpful if it’s shared like google doc.
The above image is an example he gave us about the functionality he wants.
Interview #2
An undergraduate major in game design at a well-known art school.
Q: What do you use for game design, especially for story-making?
A: I use a web that’s for film story-making, but I don’t remember the name.
Q: Anything like a flowchart?
A: Lucidchart
Q: It’s actually a really good mind map and flowchart making tool, but could you insert a lot of things such as pictures and sketches?
A: Nope. Could you make something like that?
Q: That’s our current plan. But do you need it works like google doc?
A: Would be better if you could include it.
Interview #3
An undergraduate in a game design club and interested in making games.
Q: Do you need a mindmap when designing games?
A: Not really because of the game I worked on was very simple. But when I think of some more complicated game, it doesn’t seem easy to draw on paper.
Q: What do you think would be helpful for making mind maps easier for you to use?
A: I think a feature that helps you collect a series of outcome cells.
Q: Could you talk more about that?
A: For example, an NPC asks the gamer to catch fish or fight with a pig, once the gamer chose to catch the fish, it would cause its own outcomes, which means a totally new line on the mindmap. However, it would be very messy on the paper or on an electronic mind map. If there is a way to fold all the cells on that storyline, that would be very helpful for me.
Q: Do you think we could replace the feature you just said with an independent text editor, like every time you click a cell it brings you to a new file that you could make any comment? (We spent some time here to compare the two features)
A: I still don’t think the new file feature is enough to replace the feature I just mentioned.
A: One thing I think that’s really an advantage of a lot of existing mindmap is you could rearrange the lines between cells by just dragging them around.
Reflection on Interviews
(Cycle 2 start)
One of discoveries from the interview is although there are many existing mind map/flowchart making tools, however, none of them support blocks that can be edited like an independent file. We decided to make an application similar to a mind map, but once you click a block, you can edit freely in that block.
Prototypes (Cycle 2)
We had two kinds of prototyping in our initial stage of designing: Paper Wireframe and Digital Wireframe.
Paper Wireframe
The paper wireframe was the first prototype we made, in which we reflected on the insights we got from interviews and brainstorms. We put as many potential functionalities as we could think of in this paper wireframe. Unfortunately some functionalities we had on this paper prototype are not included in our final application. However this paper prototype, allowed us to solidify the bigger picture of how our app would look like.
First Digital Wireframe
Next, we did digital prototyping on Figma to get a better sense of what we can actually express by HTML for our application. Digital prototyping clarified some problems we had at this stage of design process. Because it was hard to see the current active layer if a user creates many layers within a block, we decided to implement a color feature to let users select colors and use saturation to differentiate levels.
Brief Interview with Targeted User
We received feedback from a targeted user:
“The second screen’s toolbar is a little bit crowded”
“Is there any other way to differentiate screen 1 and 2, besides the toolbar?”
We then rearranged the spacing of tools and the background of the first screen.
After we finish these two prototypes, we still didn’t have a feature that was innovative. Based on the feedback we gain from our interviewers, we decided to brainstorm again.
Brainstorming (Cycle 3)
The following are the features and ideas we conceived that we thought were innovative:
Infinite zoom feature: you can click on blocks to zoom in, and each block can contain more blocks
Drag over (multiple) blocks to create a new block that encompasses all the covered blocks
Resize blocks
Double click a block to zoom in, filling the whole screen. The editing scope will now be in this block
Single-click (and drag) a block to move
Add arrows in between blocks
Use Hue to distinguish cells in the same level, while using value to differentiate levels
Select several cells and right-click to make a group selection (and have the option to create a cell that contains all cells selected)
Rough sketch of some of our ideas:
Prototypes (Cycle 3)
Second Digital Wireframe
After receiving feedback from our instructors (Andrew and Sarah!), we created a higher fidelity digital wireframe that contained some of our new ideas.
Storyboard
We then created a storyboard portraying a possible scenario in which our app would be used.
Captions:
Jackson, a game designer, is looking to create a new story-driven game.
He has many creative ideas, but can’t find a way to neatly organize them.
He’s introduced to MAPI, which solves all his problems! He can add blocks of text and pictures…
…drag them around and add arrows connecting them…
…but most importantly, Jackson can add blocks within blocks (within more blocks!) to organize all his ideas.
Now Jackson can easily present to his team his creation, and they start producing the game!
Peer Critique by Jeanelle Wu
We also received feedback from one of our classmates:
I like the interface design, it looks really straightforward and simple. It reminds me of those graphing programs and really fits your app’s purpose. Almost all of the symbols on the taskbar are pretty obvious except for the rectangle. Is that a text box? But there’s already a T for a text icon, and usually, those open up text boxes too.
My only guess by looking at the example usage is that the box icon creates a colored box…?
Things you can consider:
- How do you select/change the color of the box/block?
- You could change the rectangle icon to a sticky note, OR you can do something where if the user opens a new map page, you can have an example block (that looks like the pink one) already on the page to show users how they could use the functionalities. Usually, users will play around with the interface anyway to figure out how to use it, so having an example block on there already would help especially if it’s easily deletable.
I like the resize feature and the super simple download button. I don’t have to go through additional taps just to save the image.
I’m not sure about the folder — I would have expected a home button.
Clicking the folder makes it feel like I’ll open a small popup on the current screen where I can preview saved maps and quickly switch to another one.
- If that’s what you intended to do, then I’d suggest also adding a home icon to the left of the folder so users can navigate to the home screen too.
- BUT, if the folder was supposed to be the home page instead, I’d change it to a house icon. I think psychologically, having a home icon/button makes the user feel more in control and not trapped onto any screen. I’d feel minor mental discomfort as a user LOL
Updated Interview after Redesigning
(Cycle 4 start)
To make our app more focused on our targeted users, we showed our interviewers the revised interactions and asked about anything else they considered helpful in their brainstorming and prototyping process. One of them mentioned he often buys stickers with different colors to represent elements commonly used in games (eg. HP bar, Magic, and etc.).
To keep the app simple to use, we would provide some basic stickers, but let users decide what each sticker represents.
Evaluation, First Round (Cycle 4)
Observation Test on Zooming
Study Plan
We noticed there were many ways to zoom and move around on a blank canvas, so we conducted an observation test to decide how we should implement zooming. We found an application that had many different ways to zoom, then drew a box and observed how the user would zoom in. We also offered the user two modes: with and without touch screen.
We interviewed six people (two targeted users and four randomly selected people), and they each had different ways of zooming.
Results
With Touch Screen
Pinch/Spread zoom in: 2
CTRL and Scroll: 3
Trackpad: 1
Without Touch Screen
CTRL +/-: 2
Trackpad: 2
CTRL and Scroll: 2
Suggestions
Double Click
We found that many users, including the two targeted users, preferred using CTRL and the scroll wheel on a computer mouse, as well as using pinch/spread, to zoom.
Style Guide
(Cycle 5 start)
To maintain a consistent aesthetic throughout the design of our app, we created a style guide.
Logo
We also finalized a logo for our app.
Final User Evaluation (Cycle 5)
After going through rounds of brainstorming, interviewing, and prototyping, we made the very first version of our application based on our digital prototype. We used this first version as a way to evaluate what our users wanted and needed. Below is the study plan for our evaluation and its result.
Discount Usability Testing
Method
Brief the user on what we are prototyping: a mind map for game designers.
Explain the think-aloud process and ask if it is okay to record their actions and transcribe the conversation.
User interacts with the prototype as the facilitator/observer asks interface design questions and records. (Questions are listed below)
Ask them to compare/contrast some of the possible features of the prototype — which do they prefer, what features they liked from each, or if they would rather combine both. (See below)
Thank the user for his/her time.
Task: (To users) Please use this app to create a visualization of your last game design project.
Questions:
Are you satisfied with what you’ve created?
Are there enough features for you to make your flowchart/mind map?
If not, could you tell us what features could help you make a clear mind map efficiently?
Is the making process efficient?
Which following features have you discovered? Please select all you know while you are making the chart.
(a) Creating blocks
(b) Resizing blocks
(c) Dragging blocks
(d) Changing the color of blocks
(e) Deleting a block
(f) Inserting text in a block
(g) Changing font type, size, style (bold, italic) of a block
Alternative Design Ideas:
Which way of arranging layers do you prefer?
Hiding the children blocks while the mother block is unselected
Keeping all children within the mother block’s border
Results & Insights
The two users we interviewed gave us great insights and more questions to think about in our development process. In fact, one of the users discovered an interaction we had not thought of. Since inner layers are hidden until the parent is made active, he used miniature blocks as buttons that can hide information/images; this information would only be revealed when the parent is clicked, thus saving space. (see gif below)
To summarize, here are the most critical suggestions and insights we found:
It’s hard to see which box is currently selected
There is no way to delete a single box after you make one
Did not know what to do with our initial interface, tutorial will be helpful
The default text within a textbox (ie. “New text”) does not disappear upon click, you have to manually delete it.
Redo/undo feature will be useful
Relationship between mother and children is not obvious
It’s not clear how to create a child instead of a sibling
The following is the full version of all the feedback we received.
User 1
User 1 insights, rough notes
How to see what the children of a mother box is (it’s clear that once you select a child, the mother has pink shadow, could we do something similar?)
Putting layers and lines together might be a problem (I had a hard take to explain the difference between children in our app and children in traditional mind map)
Auto history (the new box is the same size and color of the latest made box, or the mother, or etc.) User1 mentioned it’s really annoying to resize every time.
A toggle on navigation bar that let you toggle between showing all boxes, or hiding children
At first he doesn’t try to put children layers inside of boxes, instead he works it like a traditional mind map, he doesn’t notice the multiple layers feature. But he didn’t use the multiple layers even after we let him know there is such feature, because he thinks each cell could be an expanded line in the future.
If we allow lines, like the traditional mindmap we should include auto adding siblings or children, allowing connecting children with mother’s siblings or cousins.
Select the box just selected by default, don’t have to click again
Auto connection if it’s a mind map, but if we decide not to make a traditional mindmap, we could ignore this
Once you click a box (blue frame, resizable), could users just edit without double clicking?
How to rearrange different layers, do we allow switching layers and children?
Could we add “backspace” for deletion besides the trash bin on nav bar? (if we have undo/redo it’s not going to destroy the whole thing)
Cancel making boxes after clicking the box icon (click the button again to deselect, if we have undo it might not be a big problem)
More font size
Introduction: Don’t know what to do at the very beginning, could add an introduction as default box (see image below)
Change icon of rectangle for adding boxes (see image below)
The default text “new box” should be deleted once you clicked the box
Color: the green is too bright, yellow and orange look too similar
Suggestion #14 from User 1
Suggestion #15 from User 1
Screenshot of User 1’s prototype after testing
New Interaction
User 2
User 2 finds it unclear what he could do with the app. After we explain by words, and showing some effects he could make from this app by videos, he’s still confused about what he could do to create a child layer.
Problem:
It’s not clear how to create a child that belongs to a mother
For the board game he’s designing, he still prefers using traditional mindmap since it’s clear to see the flow when they all showed up, and connected through lines.
Discussion
Based on those feedback, we decided to make the following, more minor, fixes:
Highlight the box when it was selected
Implement delete functionality that deletes the single box
Make tutorial for our application
The default text (New box…) will disappear upon first clicking
Implement Redo and Undo function
We took these feedback seriously and began to implement them in our final development.
Conclusion
It wasn’t until our third round of interviews that we solidified the most interesting interaction within our app, which were the layers. In our final development we largely focused on this interaction, improving and revising it. We decided against having lines (in between blocks) in our final implementation, because through our judgment and user testing, we found that lines could be replaced by layers. This is an exciting new interaction that breaks conventional thinking and can greatly help game designers in their creative process.
We really appreciate game designers who gave us feedback and evaluated our prototypes. Without the help, we could not really break the convention of mind map and build something totally new. In one of the interviews a user spent more than an hour to test our app, and even made a complete graph of the last game he designed. Our interviewers gave us a lot of inspiration. It’s really after we getting feedback from them that we decide to move beyond mind map — we no longer needed to try to combine blocks with lines to connect each cell. Having both lines and layers would confuse our target users, and the concept of children in layers can replace the traditional path of a mind map.
MAPI’s layers is a truly invention, and the way to use it, unlike mind map, is not restricted. Different users use MAPI differently, and we see a lot of possibilities from it. We hope MAPI as a prototyping tool will bring up more innovative interactions in the future.
System & Features
Create a Block
Click the icon to create a block. You can choose the colors and put content inside, including text and images. You can put blocks inside each other to create layers (we will call them mother and children cells). When you drag the mother cell, all the children cells will move together. Furthermore, when you click outside the mother cell, all children will be hidden, which help users avoid messiness. Children cells will reappear upon clicking on their mother box.
Unlimited Space and Infinite Cells
There is no limit in how large the interface can be, or how many cells you can put on the canvas. You can also move cells freely inside or outside box. This allows users to have maximum freedom in designing their own interface for their game plot development.
Toggle to show and hide children layers
After we made this sample of a real interactive game prototype, we found it necessary to have a toggle to show or hide all children layers. This allows users to decide to see all information or hide details by themselves.
Interactive Story Prototyping
We provided the interactivity for users who want to prototype their game plot with many possible branches and ending. Children cells will show up upon a click, which represents an action the player character took, and the next state that action leads to. This interactivity provides users a clean interface, and also make it clear which action will lead to which states.
Other Utilities Include….
Choosing colors of cells
Redo/Undo
Select the font of texts
Bold or Italic texts
Save/Load progress
Delete cells
Appendix
Github Link
Slides Link
Final Video Link
Poster Link
MAPI (our project url)
6
Room builder was created to iterate gameplay spaces more quickly than using static meshes or BSP. You can read more about it here.