[Ciel Devlog #04] Building Shop Menu and Interfaces

Hi, it’s num. Back again with Ciel Fledge bimonthly devlog with me.

Building shop menu to buy/sell items and equipments

For the last two weeks we are working to build shop menu where you can buy/sell items and equipments. It’s nothing fancy but we are trying to make it as simple and intuitive as possible. Basically before you go “shopping” you pretty much have to schedule your daughter to do it in advance from the schedule menu (which is pretty much the most important menu of the game where your decision is made there).

A cut of the schedule interface detailing your daughter weekly activities. Shopping will be done at day 3,4, and 5.

 

After that, in the automated turn, you will be presented with another interface where you can select which shop your daughter will visit and what item do you want her to buy. Pretty simple really. Aside from the simple usual shopping system, we decided to add “haggle” mechanics. Taking advantage of your daughter stats that you can train such as ‘Charm, Charisma, and Math’ she can haggle the price of any items/equipments and make it cheaper for her.

Another aspect from the shop menu we want to implement is item/equipment stocks. Each shop will have limited stocks of everything depending on their rarity and value, some items are abundant while the others might be scarce. At the moment this is still work in progress, but I think you got the general idea of this supply/demand system.

Here’s the animated gifs of shopping in action!:

Day shopping.
Midnight shopping, time will advance everytime you move to another shop.

 

Before we move to another topic, you can also check and read the details of this shopping in action on the post at our thread in tigsforum hereDo visit and say hi to us there!

Redoing and polishing the interface (yet) again

One of the biggest gripe of this game for me is to come up with the interface that is simple enough that even a 5-years old can understand instantly and intuitively without any guide or dragging tutorial. Considering the actual complexity of the game (despite of its cutesy appearance) and the need of so many interface and visual cues it’s proven to be really hard to do.

The schedule menu interface is the biggest offender of the “too complex interface” so far. Currently it looks like this:

In this menu you need to select player activity, weekly meal plan, and 7 days of your daughter activityAll lined up at the list on the right side, while the wide, window selection at the left is the available choice corresponding to what you are currently selecting and set up in the list at the right side. The colorful button at the top of the left side is the sort/filter button, to sort the selection based on its categories. Pretty confusing right? Especially considering the overload of information with so many descriptions and buttons at once on screen. This is the second iteration of the schedule menu revamp, it used to looks like this before:

Even more confusing right?

Anyhow this will be a tough homework for me. Hopefully I can come up with better design that is nice to look at and easily understandable at a glance.

Next is the slight change on the interface such as icons, buttons, and windows. At the beginning of the development, I actually fell for the Flat UI meme only to realize it looks horrible with the artstyle we are going with, and is too unsophisticated. So I decide to change it slightly and give it more character and depth with emboss and outline effects:

Old interface style. Flat everywhere.
New interface style. Outlined and emboss on interactable buttons.

 

Now at least the interface is not as bland as the top flat UI anymore. Although the interface style might change again since these are all still quite early- actually middle way in development.

Well, I think that is all from me. Hopefully this devlog could inspire you, see you on our next Ciel devlog!

If you are craving more for Ciel Fledge do visit our side tumblr. Hey we also had Instagram page too if you are into that!