Case study

Pre.Module

Prefabricated Modules to reduce housing costMany people facing rental financial strain are unfamiliar with how the prefabrication industry can reduce housing costs. Pre.Module could assist them in navigating the lesser-known realm of prefab housing.

🏡
Real Estate Industry
👩🏻
Personal Academic Project
⏱️
SEP - OCT 2020
View prototype
Let’s talk now!

Background

Constraints

In a 3-month bootcamp with other design exercies and challenges going on.

Challenge
Roles & Activities
Research

Secondary & primary research, interview design & conduct, report & presentation

Testing & Evaluations

Usability testing and issues evaluations

Interface Design

Sketches, lo-fi wireframes, high-fidelity prototypes, and marketing website design

Design Process

The whole process of solving a problem can be represented by the two-diamond chart, iterating between diverging and converging when going through the stages of empathize, define, ideate, and test.

Tools & Methodology

Strategies
Research
Survey
Interview
Brianstorm
Feedback
Software
Figma
Sketch
POP
Invision
Photoshop
Asana

Discover the problem in the rental market

Problem Space

In the real estate market, the demand for living space is far larger than the supplies, resulting in higher trading prices than usual. Most people, especially young professionals, are facing relatively high rental financial pressure.

To relieve the tension in the real estate market, several methods have been conducted to provide affordable housings, among which prefabrication has been proved for its ability to reduce construction cost.

30%

of the full-time minimum wage spent on rent

71%

low-income households spend more than half of their income

15%

cheaper than a stick-built home, and possibly even more

However, such type of architecture has not been widely accepted yet. Few people know about the prefab industry and how they can access prefabricated buildings, even with strong interests.

3%

Modular construction only has 2-3% market share even in the well accepted markets.

67%

of young professionals that did the survey have not heard of prefabrication before.

Define the exact pain and needs

How Might We?

In the real estate market, the demand for living space is far larger than the supplies, resulting in higher trading prices than usual. Most people, especially young professionals, are facing relatively high rental financial pressure.

How Might We educate and encourage young professionals to access prefab in order to reduce their rental financial pressure?

Interview Insights

Two key insights were collected through the interviews with potential users who have relatively hight rental financial pressure, aiming to understand their needs to relieve such pressure with prefab housing.

📚
Information Sharing & Educating

When facing the new term and technology they are not familiar with, people tend to need some platform where they can learn about this topic and can easily access it when they want to.

đź’°
Financial Considerations

Most renters are looking for some methods to reduce their rent and manage their living cost better, considering the long-term financial health.

Interview notes

Persona

Based on the research findings, I have the representative users modelled in the format of persona for later alignment and solution design.

Primary User
Secondary User

Opportunities

Focusing on the primary user, the journey of how Riley looks for the desired bachelor suite is analyzed to identify the frustrations in the process, which are taken as opportunities where possible solutions are developed to relieve the pain.

Journey Map
Possible Features

Based on representative users’ characteristics and their down moments along the journey, some possible features are proposed to help improve the process of finding and renting affordable units.

Information Board

Info platform where users can get the industry introduction and trending projects information.

Map Search

Users need to see where the nearby prefab buildings are and where they can access the building.

Community Sharing

Community where users can share opinions about prefab with each other and give feedbacks.

Online Service

Online renting or purchasing service for easier access to prefab buildings.

Determine how the potential solution would work

User Stories & Tasks

User stories of three epics
As a young professional,
🗺️
Map Search

I want to check if there are some desired prefab buildings nearby to make sure prefab is accessible.

đź“–
Building Info

I want to read through the detailed building information to make sure it can actually relieve my rental financial pressure without compromising life quality.

Task Flow

Based on pain points and user stories, the task flow has been created to help me think about how the user would interact with the product and give me a baseline of main screens that need to be designed.
‍
This task flow shows how the user search for prefab buildings nearby and check the detailed information to rent some prefab suites.

Design the solution in details through interface

Sketches

Sketches have been employed to initiate the visual planning of the task flow.

Inspiration Collection

With the rough blueprint in mind, I feel like it is necessary to get out of the ivory tower and see what the real-world projects look like.

Existing Designs
Engagement of architectural design
Homepage Layout and AR involvement
Map View together with Card
Idea of Utilities Investigation
Revised Screens

Medium-fidelity Wireframes

After revising the ideas by pen, I put them into the grey-scale digital world to see if it’s gonna survive or not.

Feedback & Iteration

When the wireframe is qualified to survive, I move onto considering upgrading its life quality. With the help of my peers, I conducted two rounds of user testings and have collected some valuable points to revise my wireframe.

  • Add an introduction to Prefab
  • Re-adjust the layout to highlight the info board and more practical categories
  • Use widely-recognized filter icon and clearer hierarchy
  • Add reset and apply button to help user recognize the states
  • Develop a global navigation bar
  • Modify the layout to show the prefab theme

Final Wireframe

Brand Identity

No one would like the plainly black-white world. Color and clear product images are necessary, just working like the flag for our dynasty.

Color Palette
  • Static
  • Structured
  • Modern
  • Professional
  • Cozy
  • Clean

Based on the colors extracted from the moodboard, I rate the color combinations by uniqueness, fitness, and accessibility. Then try to inject the possibly suitable set into the home page and decided on the final color palette, which is the 6th combination in this case.

Wordmark

Starting from sketch, I explored different wordmarks and decide on the one that involves both prefabrication and module construction, and can also represent prefab architecture style a bit.

Standard Size of Prefab Community
Typical Prefab Building Shape
App Icon

According to Human Interface Guidelines, icon is designed and developed to make sure it meets all the industry standards.

Prototype

With the stage set up, now the solution is ready to be put into spotlight and shine.

Gonna be Expert in Prefab
On the home page, we have information section to let us learn about the perfab industry.
No way we gonna miss any chance of using
No matter we want to own, rent, or book a prefab suite for trip, we can always find resource here.
Benefits are far more than we could imagine
As we can see, prefab building can help us save money by customizing furnishing, saving energy and construction cost.
View prototype
Let’s talk now!

Debate & promote the impact

Marketing Site

To let more people like our dynasty, marketing is necessary. The responsive website is designed to advertise Pre.Module:

  • Can provide everything users need to know about prefab.
  • Has involved almost every way in which users can access prefab.
  • Would let users benefit much from what prefab building can provide.

Multi-platform App

To make up for mobile app’s constraints, iPad has been chosen for its LiDAR camera and larger workspace, which allows for user scanning the interior of prefab suite and share it, as well as more engaging 3D map view.

Develop the solution further

Design System

To continuously develop this app and launch it with the help of developers and other designers, UI library is created for organized and efficient hand-off.

Further Impact

Impact
To Solve Problem
This app would bridge young professionals that have seriously high rental pressure with modern prefab industry and relieve users’ pain quite a bit and improve their life.
For Industry Development:
After educating users with the industry knowledge, there would be more people knowing the prefab industry, which would correct many misunderstanding about prefabrication now and push the industrial further development.
For Sustainability
Considering the features of fast and easy construction of prefabricated building, they would be renovated and removed easily without generating much construction waste that would result in land, air, and water pollution.
The Future

To figure out how the app would develop in long term, I picked “SUPERFAN” Torot Card as the starting point.

How would a community of your most passionate users behave?
The main rule of engagement relies on the elegant visual design and some inspiration design, together with the technologically engaging interaction.

However, people’s tastes are different and may change with time, some really fancy image style for some user at some certain time may be really awful in the near future.

The user community would be a huge group of royal consumers for the prefab manufacturers and would impact the future architecture and construction.

Key Learnings

Grounded on research
Good design is always based on robust research, which provides strong rationale back-up for the design.
Do not design in Silo
Working in silo would not bring about a genius design, but would make it easy to overthink and let us burned out. So, let’s go outside, looking for some review and feedback, and come back with a refreshed mind.
Time block off
Work never ends and we could never be perfect. Stick with the timeline set in advance and we would be confident that we are prepared.