Singapore-MIT GAMBIT Game Lab spacer
  CMS MIT
spacer New Entries Archives Links subheader placeholder
Updates
left edge
pinstripe
Rosemary UI Design Sketches

I was thumbing through my notebook the other day and noticed some old design sketches I did for Rosemary. Thought I'd scan them in and make a blog post for posterity. Posterity. That would be you, dear reader.

The backstory is that in late fall 2008, Clara Fernández-Vara asked me to help with her adventure game project, Rosemary, which was having significant usability problems. In particular, the memory mechanic wasn't getting across. Since that's the big twist of the game, having it not work was a major problem.

Starting Point: Memory Palace
rosemaryui_room.jpg
This is a mockup of the design I was given, the Memory Palace. It was named after a method of memorizing things by remembering them spatially. Memory objects would appear at the bottom as you played, and then could be placed in the room. If a group of them were placed correctly, new information was revealed.

It had a few problems. The method of interaction was different than the rest of the game, the 3D nature of the space made placing 2D objects within it sort of odd, the fact that a group had to be placed at a time was unclear, what happened if one object was placed correctly and the rest incorrectly, where would the new information appear, adding and removing memory puzzles from the game required redrawing the art asset, yada yada. On top of that, Rosemary already has a few kinds of physical space, the present world and the past world. Adding another set of functionality that also had a spatial representation got confusing quickly.

I asked Clara if it was alright if I tried to rework the interaction from the ground up, and she said yes. Clara is awesome. I then proceeded to brainstorm, which I mostly did in my sketchbook. I'm going to cheat and show these out of order, leaving the idea we ended up implementing for last. In practice, it was the first one I came up with, but I wanted some more ideas to show Clara and the rest of the team. It's pretty rare that the first idea is the best one, and I didn't want to commit to one concept too quickly.

Discarded Idea: Fortress of Solitude
rosemaryui_book2b.jpg
If you've seen the Superman movies, you probably already know the idea. I was playing with the idea of memory crystals like they had in the film. You have a hole and a set of crystals. Whichever memory crystal you put in first determines what grouping you're going for, and the right additional number of holes appear for you to put more crystals in. When you get the combination right, the crystals are absorbed and the new information is displayed.

Discarded Idea: Block Toy
rosemaryui_book3a.jpg
Riffing off the Fortress of Solitude idea, I wondered if having any memory fit into any slot was too much, and we should restrict the number of combinations. This reminded me of one of those toddler toys where you have shaped blocks that the child puts into the right hole. By using shape this way, we can help the user understand what she's missing---e.g. a star-shaped memory---without being too heavy-handed. The shapes could correspond to the type of memory as well, like people, objects, places, whatever.

Discarded Idea: Clay/Oozerts
rosemaryui_book3b.jpg
I would say this was my weirdest idea, despite a lack of comic book references. The inspiration was one of those Play-Doh extruder things I had as a child. A sausage grinder would be a similar albeit ickier metaphor. Memories were clay objects. You put some of them into a press and the new information was squooshed out as a new object, which could then be fed back into the press for yet more information, etc. In order to help understand which objects go together, each squooshed object takes a certain amount of space in the press, sort of like in our fractions game, Oozerts. Glancing at it should tell you whether the press is overfull, underfull, or just right. Or you can use the press anyway and see if your new object is missing a leg or has an extra head or something.

I'm telling you, it could totally work.

Discarded Idea: Fill in the Picture
rosemaryui_book4.jpg
A book full of holes. Put the right objects into the right holes, and it turns into a completed picture. A fine idea, but not too original.

Implemented Idea: Photo Album
rosemaryui_book2a.jpg
What's not to like? You've got this photo album with photos missing, you collect photos as you go, you put the photos back in the album which tells you more stuff. Easy interaction, ties in with the memory theme nicely, doesn't require much in the way of new art assets, and easily scalable if a puzzle is cut from the game at the last minute. And for hints, we have captions.

rosemaryui_book1.jpg
Captions were part stories, part Mad Libs. They were some sort of description which went with the pictures but with blanks. As you put a picture in the slot, the blanks filled up with words. The story would make sense if it was the right photo, or be nonsense if it wasn't. In the example in the sketchbook, switching the photos would reveal, "Bob played with his movie poster. 'Arr!' he said in a torn and tattered voice." So you either get success or you get silliness, a win either way.

Photo Album Mockup Draft
rosemaryui_sharpie.jpg
Clara and the team really liked the Photo Album idea, so I sketched it out a bit more clearly. I like fine markers on regular letter paper for this sort of thing, since the it photocopies easily. Always keep the original and make copies to take to meetings. Then you can cut them up or mark them up on the fly, but still be able to go back to the original.

Photo Album Mockup Final
rosemaryui_mockup2.jpg
I switched to Adobe Illustrator for my final mockup, since it's easier to do layers and stuff there. Notice how I still just scanned my draft mockup for the main window rather than redraw it all in Illustrator. The point of the mockup is not to be fancy. All it needs to do is communicate the idea. That last image was the printout that was hanging on the wall of the Rosemary development room for the artists and designer to reference.

And there you have it. To see the final implementation, go play Rosemary.

1 Comments

 

I like the firs image, which is your mockup design. I really like playing such games as they are really good practice for mind, however, as much as i enjoyed reading your post, i would suggest if you can work on a mind quickness game. I mean a game in which you have to be very very vigilant in order to score a point. I recently saw one such game and i was really inspired by it, it was about sheeps and tranquilizer. In the game, one has to keep an eye on the flock of sheep and if your reflections are fast you can score by throwing tranquilizers. I would recommend you guys to work on some more intellectual mind games.

right edge
bottom curves