Research

To begin this project, I built a survey using Google Forms and reached out to my cozy gamer friends to ask them about their experiences playing cozy games where you can decorate your home.

From the survey I learned that different creative minds liked to organize their furniture using different methods, but the "By Function" option was the most requested.

Based on the feedback from the survey, I researched house building experiences across the above mentioned games as well as some of my personal favorites. I played some games, watched some videos, and grabbed a moodboard of screenshots.

Mapping It Out

There are so many ways to organize furniture items, making either the process easy or difficult for the gamer to find a particular item. I found three ways to organize based on the survey, research and my own personal experiences as a gamer: by type, by room, and by color.

Wireframing

After researching and mapping out the flow, I began to wireframe some ideas. I experimented with different ways to let users filter and sort their furniture, keeping in mind the three categories I was aiming for: by type, by room, and by color.

Since "By Function" was the top choice in my survey, I made that the default view. In my first wireframes (above), I had made color a third tab. However, I theorized it would be a better user experience to make "By Function" and "By Room" separate tabs, and then allow the users to filter down even more using the filtering item tabs and colors tabs across the top (below). This led me to select the vertical wireframe layout. Because this already had the shape of a page in a book, I decided to take the storybook UI approach to make it feel whimsical.

Colors and Accessibility

As I investigated potential colors, I ensured the contrast met AA accessibility standards using the Figma plugin: Contrast. I landed on a pastel color palette that reflects the three primary colors to create a cozy, child-like atmosphere.

Iconography

Now that I had my wireframes and color palette selected, I started putting the pieces together. I needed a custom, cute set of icons to go with my storybook design. I illustrated a set in Adobe Illustrator, keeping the heart as a persistent little charm across all of them.

States & Components

With my colors, layout, and icons ready, I put it all together into my book design. I also designed states for each clickable item. Each state includes at least two style changes (color, size, border) to make functionality extra clear.

Adding Game Art

All of my elements were coming together, and I was excited about the progress. However, I realized a game UI without game art was just not very exciting. I went over to Photoshop to illustrate some cute furniture items.

All the Magic Comes Together

Ta-da! A cute and colorful furniture decorating game. I went back to my cozy survey crew and asked them to walk me through all the parts and pieces, telling me what they thought each button would do. They were all able to easily talk about every piece (yay!)

The gamer can find furniture items by their function or by a type of room, and then select a tab at the top to further filter. If they want to get even more detailed, they can sort by a color. This allows the gamer to get as much or as little detail into their decorating as fits their creative style.