User Interface
Voodoo Detective, Out Now!
I have to say it was one of the more intense experiences of my life. Eric Fulton (me) and Eric Ackerman stood proudly shoulder to shoulder, grinning ear to ear as the minute hand completed its final revolution before the game’s release. But, grin quickly turned to rictus of horror as we realized the game hadn’t released on Steam as planned.
Luckily, we were able to sort out the problem relatively quickly after a nail biting, sleepless few hours we spent waiting to hear back from Steam support.
But that’s all behind us now, and we truly could not have hoped for a more positive reception to the game from those who’ve played it. Reviews are almost universally enthusiastic with the most common complaint being that the game could have been a little longer (which I’m going to interpret as a huge compliment).
Since we’ve launched, I’ve been trying to share concept artwork on social media to try to garner more interest for the game from the many unfortunate people who haven’t played it yet. But there’s one area of the game’s development I’ve not spoken much about until now and that’s our UI design. This blog post sets out to remedy that.
Each section below covers one aspect of the UI’s design, which by the way, was done almost exclusively by the very talented Sarah Ford with additional illustrations by the also very talented Lilly Allen.
Dialogue Panel
The dialogue panel is where we display dialogue. Simple enough, right? WRONG! We put Sarah through hell iterating on designs for the dialogue panel.
We had many elaborate and exciting ideas here, but ultimately we decided to go with something simple and quiet rather than thrilling and loud. After all, the dialogue panel’s raison d'etre is to provide a blank slate for dialogue. We didn’t want the panel to have so strong a personality as to color the dialogue it was meant to display.
The reason I haven’t shared any of this on social media is because there are too many designs to share in a single post. But not too many for a single blog post!
Dialogue Chooser
The dialogue chooser is the UI element responsible for presenting the player with lines Voodoo Detective can say.
Jumbotron
The “Jumbotron” is the UI element we use to display the names of objects as you hover over them with your cursor. We didn’t have to iterate much on this one.
Grammy’s Book of Voodoo
Grammy’s Book of Voodoo is an item you acquire very early on in the game. It’s full of spells and recipes bequeathed to Voodoo Detective and his brother by their grandmother (Grammy). What you see below are some of the original designs Sarah did for the book.
We also originally had a minigame in Voodoo Detective where the player would act as a Voodoo doctor taking care of patients who would come to Donut Hole Billy’s bar for help. Ultimately, we decided to cut the minigame and in so doing, we also dramatically curtailed the scope of Grammy’s Book of Voodoo. Here are some of Lilly’s illustrations that didn’t make it into the game.
Cursor
In the PC version of Voodoo Detective, we have a custom cursor. Here are some of the early designs. The first two images contain designs from Sarah. The third has designs from Josh Haberman, our lead background artist.
Permanent Menu
The permanent menu consists of three buttons that sit at the top right of the screen. It’s not actually 100% permanent, but the name stuck. As you can see, you used to be able to earn money in Voodoo Detective from the aforementioned minigame.
Item Toast
The item toast UI element is used to show when the player has acquired a new item.
Inventory
The inventory is where we display all of the items Voodoo Detective is currently carrying with him. The items that you see in the game were all drawn by Josh, and the surrounding container was done by Sarah. However, most of the items in these mock-ups were grabbed from different backgrounds.
Main Menu
The main menu is the mainest of menus you could possibly imagine.
Secret UI…
There are three other UI elements that Sarah created for us, but I can’t share them with you without spoiling parts of the game. Let’s just say they’re really great and leave it at that.
See You Space Cowboy
And that’s all the concept art for the user interface that I have to share for now! We were so lucky to have Sarah, Lilly, and Josh working on the project with us. If you’re ever in need of UI design or illustrations, we can’t recommend them more highly.
Thanks for reading!
Love,
Eric Fulton
P.S. I already love you forever, but if you pick up a copy of Voodoo Detective, I’ll love you forever and ever. And if you’re willing, we’d really appreciate it if you could spread the word about our humble game.