During my tenure at Arkadium I was the Art Lead for a Home Decorator Facebook game.  The project was in play for about 6 months(?) before it was cancelled (Note: the cancellation was not because of Arkadium).
 
We had inherited the foundation of this game from another game studio that had since moved on from the project.  As Art Lead my focus was on managing the team and handling the UI and UX, with the GD.  The 3D renderings you see throughout this presentation are the product of the talented Chris Neuman.  He handled the in-game assets and I handled everything else, for the most part.
 
So I thought it funny to start with the final(ish) loading page...
After many weeks of research, planning and sketching we were all ready to roll.  The game designers were writing, the developers were developing and I was UI-ening.  Since the GD was in it's early stage, all I really had to work with were some simple points of interest: level, currency, an inventory system, buttons alluding to some type of 'job'/task.  I decided to pull some key colors from the Martha Stewart website.  I felt that a grey wrapper was the best course of action because i wanted the inner elements to shine.
Unfortunately my grey idea was overruled and i had to go green - this green was a color on the MS site.
 
Here you can see the first of many iterations.  I streamlined the top/header area, including level data and some hard currency.  The 'job/task' ribbon was added in and i started to dive into how the inventory system would work.
More and more and more-er-er...  So it was told to me that there needed to be a way to show the user that they owned properties - so i added a property module to the middle of the header.  There was also a concern about the lack of a leaderboard, so i dropped in a placeholder in the footer.
So the next few shots were a real milestone, I actually had an inventory UI planned out.  So in this shot the inventory is minimized at the bottom.
 
Also I  decided to just show 1 property in the header.  The idea was that it would lend itself to expansion and jsut simplified the presentation.
In this shot the inventory slider, as i called it, is full extended.  The user had selected STORES, then OTTO'S, then SEATING resulting in the display of game assets.  The depth of the slider was visually represented by a darkening of the pal green color and tabs.
 
Note: The grey coins were soft currency (free in-game currency) and the gold coins were hard currency (bought with real money).
Enter the blueprint....
 
So in this game you owned a property.  This property had several rooms that you would decorate.  The way you decorated the room was reflected in a value called DP (Design Points/Style Points).
 
The yellow highlight and star represented your current location in the property and the red locks were currently unavailable BUT unlockable rooms.  
 
(from what i remember) the DP value was a major part of the game effecting your level
Energy and Rivers...
 
So at some point the GDs decided to add in Energy, you know that element in most FB games that controls how much you can interact with the game before you need to pay money or just come back later.  I originally wanted it to be a lightbulb to keep with the home decor theme but it eventually because a... lightning bolt.
 
Note: The plus signed buttons next to some of the values was more of a monetization plan.  The idea was to have the user hit the + button to add more funds/energy/etc
 
I also added in a mission river (another widely-used part of most FB games).  The style of the river was a bit different because it was pulled from an alternate design i made before the last 3 shots.  I had hit a wall of sorts and went a bit creatively rogue but then came back to the design you see here.
The images above and below introduce alot of new features that I will try to explain - but my brain is a bit foggy so please don't mind me...
 
So in the upper left is a DESIGN BONUS module, this guy showed you if you unlocked a special bonus while you were decorating your room.  For example, having a matching furniture set game you a 'Matching Furniture' bonus. In the upper right is a STYLE POINTS meter.  I believe that this was the value of the room that you had made and you could collect the points (thus ending your design) and it would go to your experience.
 
In the inventory slider we were tossing around ideas for how the user should interact with the assets and also make customizations.
The above image was a transtion piece, so it's a bit messy - what i was trying to do was re-work the UI and shorten the height of the application so it would be visible on small screen - since we did worry about the infamous fold.
 
So my idea was to move the XP(experience points/level), Project Module and SP (style points/level) to the top - the 3 were very similar elements.  I then moved the currency and energy meter to the bottom - linking it to the inventory slider.   I fel that all of these elements were all purchase-type things.
In the above image, there isn't much difference from the last one - I just added an EDIT MODE toolbar.
Still iterating on the  UI elements - getting feedback - iterating again...
BREAKTHROUGH... at about this time a VERY TALENTED UI artist by the name of Whitney Bell joined Arkadium.  It was the first time I was able to work with someone that loved UI as much as me, so her and I wireframed, whiteboarded and sketched sketched sketched.  We finally thought that maybe a disk-like presentation would be best and unique.  
 
I felt that this was a real turning point in the design because even though it didn't keep - it helped jumpstart the process, respect the existing standards/practice and innovate on the unique elements.
First things first - streamline that dang top toolbar... 

After more research we figured 'heck' if Cityville can have 30 data boxes in the top, so can we... i didn't think of it as giving in but rather respecting the fact that if so many players could navigate that game then we could do the same.
 
At this point and time we still had your level, your style level, energy, soft currency and hard currency.
Below that was a revised project module.  with a budget, success meter and design bonus notches.
iterating the iterations...
 
At the top you will notice a style meter for your room with: a style meter, design bonu notches and a collect button.
 
...and at the bottom, well, a BRAND NEW inventory slider.
Whitney and I were drawing much from the VERY SUCCESSFUL Sims2 interface.  It was more icon-based (made by me) and less text heavy.
This dialog was to serve two purposes... it would show your properties, their blue prints and your friends properties.
This shot shows an updated Project module.  That I would love to explain but it changed so many times at this time that i just plain forget what it all was. :) lol jk jk - i remember...
 
There was a caution icon when you were not doing something right, a style meter, an approval (heart) rating, budget meter a restart button and a collect button.
 
The dialog held information for the project.  This is where you would read what the client/neighbor wanted you to do.  From that information you would then go and design and hope to meet their criteria
This was a rather simple LEVEL UP dialog.  Showing you your new level, unlocked items and an option to share this milestone or just continue.
This was the OUT OF ENERGY dialog, just as it reads you would see this when your energy was low...
This dialog was an early mock-up of the PROJECT COMPLETE dailog.  It was more of a summary screen that showed you how you increased your stats, what you earned and a text recap.
ANOTHER MILESTONE...  the next few shots are from the same set.

So what happened here is that we decided to get rid of the 2nd leveling meter.. because 2 meters never made sense.  We went back to the green color (*sigh) and I reworked the inventory system.
 
You may also notice the DP meter on the left.  The idea of this was that when you manage to reach a pre-determined value you would unlock a present.  DP was based upon the assets you had in your room.
The idea of this inventory system was that it was very much hidden minimized until you needed it.   When the player selected the first item it would expand to a full bar.  I felt that the Sims2 inventory system was a bit clunky and space-wasting.  Not that I didn't like it - it just didn't seem to work for what we needed.
Here is the update to the LEVEL UP dialog, a bit more vibrant and appealing
Here is the updated blueprint dialog.  I ripped out the extraneous data/visuals and just tightened it up.  The neighbors were eventually moved to a different dialog/UI system.
This shot shows the interaction you would have with assets and how you could modify them.
In this shot you'll not a more generic river on the left, we also added a gifting feature to the game so that's is why there is a gift box in the header bar.
 
The DP meter was removed - for good this time, and we added an icon for the neighborhood, which would take you to a world view of the game.
 
The inventory slider was beefed up a bit more - at this time there was alot of talk about what data values were to be displayed for the assets.
The shot shows up the streamlined project interface.  As you can see your level has been replaced with the project information, we felt that your level was not a necessary data point at this..um.. point.
 
Here you could see the project title, a photo of the neighbor and their quick blurb about their preferences.  Below that is an icon showing how many tasks you have complete and below that is a meter showing Style, Quality and Uniqueness
The last few days...
 
In this shot you'll notice a mildly revised inventory slider.  Some people felt the previous iteration was cool, it might alienate users so I went back to the drawing board and made a compromise between the last one and the Sims2 idea.
 
In this version the inventory system is minimized to the 3 icons on the left and the Friends/Neighbor module is present.
In this version the inventory slider (which i guess isn't the proper description anymore) is fully extended.
 
It basically because a mix of tabs and sliders.  it also felt a collection of all the best parts of all the previous iterations.
And above it the WELCOME TO THE GAME! dialog...  a common practice in FB games. It shows featured items, News Update and a Retention Bonus System.
And that wraps up this project.
 
Unfortunately the project was cancelled due to many factors that I'd prefer to share over a drink and some chicken wings :)
 
What I took away from this was: a deep respect for the process of making a rather deep Facebook game, the power of team synergy and to never stop iterating (unless you have a deadline, then hurry it up!)
Back to Top