ModPod

ModPod is a modular home consisting of smart building panels. Designed for young professionals.

Summary

For the "Immersive Environments and Spatial Design" class, we (a team of 6 students) were given the theme "Autonomous living" and asked to find a problem and create a product to solve it. Once we've came up with our design question, we started to work on our solution, which is called ModPod, a modular smart house system with smart building panels.

With ModPod, users are able to choose different panels that would have different functionalities to create their highly customizable home themselves, in a back garden, wilderness, a mountain top, and so on.

To control and adjust the functions of ModPod, users need to use the ModPod Hub, it is a UI that communicates with outside world and the smart panels according to the homeowner's inputs.

We built our project as a virtual reality experience because building it in real life wasn't feasible with the time and resources we had.

WHAT DID I DO

Besides preparing the presentation deck and sketching the experience storyboard for the product, I did the final interface design for the ModPod Smart Hub system.

I also had the opportunity to implement the user interface into our final VR Experience via Unreal Engine.

The team, in front of our "100 Questions". I'm the one in the middle.

The Problem

The Who

Research

100 Questions

To get to know the theme better, we've started to ask 100 questions that comes to mind when we think of "Autonomous Living".

This exercise helped us to immerse ourselves into the topic and cover more angles than we could cover before.

At the end of the exercise we had a clear understanding of what Autonomous Living is and how we can start to create a product revolves around that.

The Design Problem & Question

After the exercise, we started to focus on traditional and digital nomads. It was then when I pitched my idea of a modular smart house. I've arrived at this idea because of the difficulties young professional face with housing in general. They can neither afford to buy nor rent apartments/houses.

It is a commonly known issue, however, we've still came up with a couple of sources to back the idea and the existence of the problem.

So, we decided to solve this problem of affordability while following the latest housing trends like tiny houses closely. The design problem/question looked like this:

Precedents

Before designing the user interface, I wanted to check precedents to have a clear image about what type of approach I should take. After checking the precedents out, I noticed that for hub systems, the elements on the screen are larger, simpler and require less dedication/focus to be able to interact when compared to a more traditional interface.

Storyboards

To get into the user's mind and see if we are missing anything, and also to explain the project better I've created 2 storyboards.

The first journey/storyboard describes the setup process, and the second journey describes how [easy it is] to recharge the battery module.

Branding

Design

SKETCHES & EXPLORATION

To get a sense of the environment that users might use the home hub system, I quickly created a sketch of a ModPod unit in SketchUp. While the sketch below shows the hub device outside of the house, it was actually intended to be inside, it was an artistic choice to show relevant scale.

Some of the module ideas we've explored. (heating, internet, door, plumbing, etc.)

My team also built a physical mock-up of Modpod with foam board and magnetized tape to see if the idea is feasible or not.

One of the group members has created a 3D model for us to visualize the system even better.

Once I had an understanding about the scale, I started to do sketching for the user interface, tinkering on the "sitemap" of the hub, etc.

One of the early version of my vision of the interface.

High Fidelity Wireframes

Getting clues from my paper sketches, I have created the final design. I've used large buttons, and easy and straightforward navigation. My color selection was based on difference and contrast. I wanted users to know what to press by looking at the color of it. (after they get used to the interface of course)


Used red/orange for hot, blue for cold, green for energy and blue for water in the dashboard page.

Results

For the prototyping phase, I have worked on implementing the interfaces into Unreal Engine and the experience.

After finishing the experience, we've prepared our project and exhibited it during the George Brown College School of Design Year-End Show. The following is a short segment from one of the visitor's experience with our product.

A visitor going through the ModPod experience.

Reflection

This interface was made for Virtual Reality version of ModPod for exhibition purposes, where the user interaction and time will be limited. Our preparation time was also limited which caused me to leave out some functionality. For example Settings menu is not working. Because users will not be needed to interact with Settings during the exhibition.

The necessary interaction is there and working. I established how users will interact with the interface and what type of interactions will the system provide. Like Audio, Tap, Slide, etc.

Another challenge was the size of the elements. Since this is a home hub, every item on the page should be readable from a distance or at least somehow communicate the necessary bits with the user. I overcame this challenge by using distinct colors for distinct elements and enlarging their sizes as much as possible.

  • Learned a lot about creating hierarchy by using colors/gradients, and efficiently using the limited screen real estate to make the important elements pop.
  • Familiarized myself with a couple of different tools like SketchUp.
  • Furthered my knowledge on Adobe XD by incorporating the new Animation features.
  • Learned how to implement a user interface exported from Adobe XD on Unreal Engine.
  • Created a User Experience Storyboard with doodles.
The exhibition day.
InformationSummaryThe ProblemThe WhoResearchBrandingSketchesLow FidelityHigh FidelityResultsReflection