MiDorm

Dorm Decisions, made easy

This was a team project was as part of Advanced Design (SI 407) course at the University of Michigan

The Problem

How might we help students discover and prioritize dorms that suit their desires and needs in a more personalized and transparent way?

Solution

We implemented robust filtering, visual-heavy dorm details, dorm ranking, and ranking sharing features to help users quickly and independently identify and prioritize the dorms that meet their search criteria.

The Problem

How might we help students discover and prioritize dorms that suit their desires and needs in a more personalized and transparent way?

Phase 1: Competitive Review

We conducted a competitive review to ensure our design addressed gaps and pain points in current approaches to the dorm selection process, and so we could gain inspiration from how designers approach similar selection processes (e.g., buying a car).

For each competitor, we examined the clarity of option presentation, the transparency of option information, and personalization. Then, we marked each competitor’s strengths, weaknesses, and opportunities for each criterion.

Competitive Review Document

We conducted a competitive review to ensure our design addressed gaps and pain points in current approaches to the dorm selection process, and so we could gain inspiration from how designers approach similar selection processes (e.g., buying a car).

For each competitor, we examined the clarity of option presentation, the transparency of option information, and personalization. Then, we marked each competitor’s strengths, weaknesses, and opportunities for each criterion.

Competitive Review Document

Key Findings

Cluttered Interfaces Make Dorm Selection Overwhelming

Our competitive review revealed that students struggle to quickly identify dorms that meet their needs due to dense option presentation and limited visibility into detailed dorm information.

Cluttered Interfaces Make Dorm Selection Overwhelming

Our competitive review revealed that students struggle to quickly identify dorms that meet their needs due to dense option presentation and limited visibility into detailed dorm information.

No Way to Track or Compare Preferred Dorms

Existing dorm exploration tools do not allow students to save or compare dorms they are considering. Which causes students to rely on memory or external tools, adding unnecessary friction to an already high-stakes decision

No Way to Track or Compare Preferred Dorms

Existing dorm exploration tools do not allow students to save or compare dorms they are considering. Which causes students to rely on memory or external tools, adding unnecessary friction to an already high-stakes decision

Phase 2: Defining the Product

After conducting this user research, we compiled our findings into a Product Vision Board. This method allowed us to capture the overall app implementation strategy and ensure that our app leveraged the strengths of the University

Product Vision Board

After conducting this user research, we compiled our findings into a Product Vision Board. This method allowed us to capture the overall app implementation strategy and ensure that our app leveraged the strengths of the University

Product Vision Board

Target Group

Incoming students @ University of Michigan

Design Goals

Providing detailed visual descriptions of dorms
Personalized filtering/sorting options
Option to prioritize and rank dorms

Providing detailed visual descriptions of dorms
Personalized filtering/sorting options
Option to prioritize and rank dorms

Phase 3: Design Process

Ideation Phase

Crazy 8 sketches

Mid-Fi

Key Design Decision

Reviewing our sketches revealed that visual details are the most engaging and useful to students. This led us to adopt a photo-first design for dorm detail screens.

Mobile First + Design System

Before beginning our high-fidelity designs, we created a design system to streamline our process. We used Apple’s iOS Human Interface Guidelines and library to create key components such as tab bars, toggles, and overlays/sheets, so the experience felt instantly intuitive for Apple users.

Components Library- Link

Before beginning our high-fidelity designs, we created a design system to streamline our process. We used Apple’s iOS Human Interface Guidelines and library to create key components such as tab bars, toggles, and overlays/sheets, so the experience felt instantly intuitive for Apple users.

Components Library- Link

Phase 4: Initial Hi-Fidelity

Keeping our research findings and mobile-first considerations in mind, we progressed our major app screens from sketches to high-fidelity prototyped wireframes.

Prototype 1

Keeping our research findings and mobile-first considerations in mind, we progressed our major app screens from sketches to high-fidelity prototyped wireframes.

Prototype 1

Keeping our research findings and mobile-first considerations in mind, we progressed our major app screens from sketches to high-fidelity prototyped wireframes.

Prototype link

Product Detail Page

Key Design Decision- Photo Gallery (Product Detail Page)

We focused on increasing visual transparency to help students feel more confident in their choices by placing a photo gallery at the top of each dorm page that opens into a collection of student-submitted photos showing real rooms, shared spaces, and amenities to give a clearer and more trustworthy view of dorm life.

Phase 5: User Testing Insights

We conducted 5 moderated usability tests with current undergraduate U-M students who have previously lived in a campus dorm. This testing population was chosen as it closely aligned with our target demographic.

Our main tasks tested included: using filters to identify dorms matching specific criteria, learning more about a specific dorm, and reorganizing a dorm ranking.

User Test Script

We conducted 5 moderated usability tests with current undergraduate U-M students who have previously lived in a campus dorm. This testing population was chosen as it closely aligned with our target demographic.

Our main tasks tested included: using filters to identify dorms matching specific criteria, learning more about a specific dorm, and reorganizing a dorm ranking.

User Test Script

Keeping our research findings and mobile-first considerations in mind, we progressed our major app screens from sketches to high-fidelity prototyped wireframes.

Prototype link

Success

After analyzing our usability testing sessions, we found that our design performed as intended. All five participants were able to complete the key tasks with ease, and they appreciated the level of transparency and detail provided in the dorm information.

After analyzing our usability testing sessions, we found that our design performed as intended. All five participants were able to complete the key tasks with ease, and they appreciated the level of transparency and detail provided in the dorm information.

" The filters are really easy to scroll through" - Diya Sankla ( Data Science Senior @ Umich)

" I really appreciated pictures of the dorms because I didn't have that when initially going through the process"- Reeva Bohra ( Econ Junior @ Umich)

Pain Points

Users had different preferences for contacting their roommate (phone, email, Instagram), but the current design provided limited access to these external communication options.
Users expected more interactive functionality from the dorm map on the dorm detail screen.
Users were confused about how dorm filters were applied. Three out of five participants expected a visible “Done” or “Search” button and did not recognize the iOS up-arrow as the action to apply filters.
Users did not recognize the photo gallery as interactive and were unaware they could tap to view more images.

Users had different preferences for contacting their roommate (phone, email, Instagram), but the current design provided limited access to these external communication options.
Users expected more interactive functionality from the dorm map on the dorm detail screen.
Users were confused about how dorm filters were applied. Three out of five participants expected a visible “Done” or “Search” button and did not recognize the iOS up-arrow as the action to apply filters.
Users did not recognize the photo gallery as interactive and were unaware they could tap to view more images.

Revision

Diverse preferences for contacting roommates outside of in-app messaging → Allowed users to share multiple third-party contact methods (email, phone number, Instagram, etc.) with their roommate.

Desire for more functionality out of dorm maps → Allowed users to explore nearby campus buildings and see dorm-to-building distance estimates, following map conventions like location filters, search bars, and pinch-to-zoom gesture.
Prototype 2- After Test

Diverse preferences for contacting roommates outside of in-app messaging → Allowed users to share multiple third-party contact methods (email, phone number, Instagram, etc.) with their roommate.

Desire for more functionality out of dorm maps → Allowed users to explore nearby campus buildings and see dorm-to-building distance estimates, following map conventions like location filters, search bars, and pinch-to-zoom gesture.
Prototype 2- After Test

Phase 6: Developer Handoff

After finalizing our designs, we created a detailed developer handoff that captures both the functionality and the native iOS behavior of MiDorm. We also noted our color and typography styles for easy reuse, annotated intended screen content states and component interactions, and documented hardware-integrated features (e.g., when the user’s camera or photo library is triggered).

Dev Mode

After finalizing our designs, we created a detailed developer handoff that captures both the functionality and the native iOS behavior of MiDorm. We also noted our color and typography styles for easy reuse, annotated intended screen content states and component interactions, and documented hardware-integrated features (e.g., when the user’s camera or photo library is triggered).

Dev Mode

Annotations

Reflections

Our Approach

A native app for a common U-M student problem that currently has no university-specific solution. Building within the U-M system required navigating both Apple’s iOS guidelines and the University’s design standards, often making tradeoffs where they conflicted. Despite these constraints, our decisions consistently prioritized user needs and expectations.

Our Approach

A native app for a common U-M student problem that currently has no university-specific solution. Building within the U-M system required navigating both Apple’s iOS guidelines and the University’s design standards, often making tradeoffs where they conflicted. Despite these constraints, our decisions consistently prioritized user needs and expectations.

Next Sprint

In our next sprint, we would enhance visual dorm details by adding student-created video walkthroughs to build transparency and trust. We would also conduct additional user research to identify the most valuable features and guide future updates.

MiDorm

Dorm Decisions, made easy

This was a team project was as part of Advanced Design (SI 407) course at the University of Michigan

The Problem

How might we help students discover and prioritize dorms that suit their desires and needs in a more personalized and transparent way?

Solution

We implemented robust filtering, visual-heavy dorm details, dorm ranking, and ranking sharing features to help users quickly and independently identify and prioritize the dorms that meet their search criteria.

The Problem

How might we help students discover and prioritize dorms that suit their desires and needs in a more personalized and transparent way?

Phase 1: Competitive Review

We conducted a competitive review to ensure our design addressed gaps and pain points in current approaches to the dorm selection process, and so we could gain inspiration from how designers approach similar selection processes (e.g., buying a car).

For each competitor, we examined the clarity of option presentation, the transparency of option information, and personalization. Then, we marked each competitor’s strengths, weaknesses, and opportunities for each criterion.

Competitive Review Document

Key Findings

Cluttered Interfaces Make Dorm Selection Overwhelming

Our competitive review revealed that students struggle to quickly identify dorms that meet their needs due to dense option presentation and limited visibility into detailed dorm information.

No Way to Track or Compare Preferred Dorms

Existing dorm exploration tools do not allow students to save or compare dorms they are considering. Which causes students to rely on memory or external tools, adding unnecessary friction to an already high-stakes decision

Phase 2: Defining the Product

After conducting this user research, we compiled our findings into a Product Vision Board. This method allowed us to capture the overall app implementation strategy and ensure that our app leveraged the strengths of the University

Product Vision Board

Target Group

Incoming students @ University of Michigan

Design Goals

Providing detailed visual descriptions of dorms
Personalized filtering/sorting options
Option to prioritize and rank dorms

Phase 3: Design Process

Ideation Phase

Crazy 8 sketches

Mid-Fi

Key Design Decision

Reviewing our sketches revealed that visual details are the most engaging and useful to students. This led us to adopt a photo-first design for dorm detail screens.

Mobile First +

Desing System

Before beginning our high-fidelity designs, we created a design system to streamline our process. We used Apple’s iOS Human Interface Guidelines and library to create key components such as tab bars, toggles, and overlays/sheets, so the experience felt instantly intuitive for Apple users.

Components Library- Link

Phase 4: Initial Hi-Fidelity

Keeping our research findings and mobile-first considerations in mind, we progressed our major app screens from sketches to high-fidelity prototyped wireframes.

Prototype 1

Product Detail Page

Key Design Decision- Photo Gallery (Product Detail Page)

We focused on increasing visual transparency to help students feel more confident in their choices by placing a photo gallery at the top of each dorm page that opens into a collection of student-submitted photos showing real rooms, shared spaces, and amenities to give a clearer and more trustworthy view of dorm life.

Phase 5: User Testing Insights

We conducted 5 moderated usability tests with current undergraduate U-M students who have previously lived in a campus dorm. This testing population was chosen as it closely aligned with our target demographic.

Our main tasks tested included: using filters to identify dorms matching specific criteria, learning more about a specific dorm, and reorganizing a dorm ranking.

User Test Script

Success

After analyzing our usability testing sessions, we found that our design performed as intended. All five participants were able to complete the key tasks with ease, and they appreciated the level of transparency and detail provided in the dorm information.

" The filters are really easy to scroll through" - Diya Sankla ( Data Science Senior @ Umich)

" I really appreciated pictures of the dorms because I didn't have that when initially going through the process"- Reeva Bohra ( Econ Junior @ Umich)

Pain Points

Users had different preferences for contacting their roommate (phone, email, Instagram), but the current design provided limited access to these external communication options.
Users expected more interactive functionality from the dorm map on the dorm detail screen.
Users were confused about how dorm filters were applied. Three out of five participants expected a visible “Done” or “Search” button and did not recognize the iOS up-arrow as the action to apply filters.
Users did not recognize the photo gallery as interactive and were unaware they could tap to view more images.

Revision

Diverse preferences for contacting roommates outside of in-app messaging → Allowed users to share multiple third-party contact methods (email, phone number, Instagram, etc.) with their roommate.

Desire for more functionality out of dorm maps → Allowed users to explore nearby campus buildings and see dorm-to-building distance estimates, following map conventions like location filters, search bars, and pinch-to-zoom gesture.
Prototype 2- After Test

Phase 6: Developer Handoff

After finalizing our designs, we created a detailed developer handoff that captures both the functionality and the native iOS behavior of MiDorm. We also noted our color and typography styles for easy reuse, annotated intended screen content states and component interactions, and documented hardware-integrated features (e.g., when the user’s camera or photo library is triggered).

Dev Mode

Annotations

Reflections

Our Approach

A native app for a common U-M student problem that currently has no university-specific solution. Building within the U-M system required navigating both Apple’s iOS guidelines and the University’s design standards, often making tradeoffs where they conflicted. Despite these constraints, our decisions consistently prioritized user needs and expectations.

Our Approach

A native app for a common U-M student problem that currently has no university-specific solution. Building within the U-M system required navigating both Apple’s iOS guidelines and the University’s design standards, often making tradeoffs where they conflicted. Despite these constraints, our decisions consistently prioritized user needs and expectations.

Next Sprint

In our next sprint, we would enhance visual dorm details by adding student-created video walkthroughs to build transparency and trust. We would also conduct additional user research to identify the most valuable features and guide future updates.