Nook

Prototype Project of a Study Spot Finder


Project Objective:

Develop a user-friendly digital platform that provides real-time availability, detailed information, and navigation for on-campus study spots, helping students save time, avoid overcrowding, and optimize their study experience based on occupancy levels, amenities, and user preferences.

Duration:

01 - 03/2025

Skills:

Design Systems, Wireframing, Prototyping, User Research, Usability Testing, User Surveys

Screenshots of a mobile app interface showing a login screen, a search page with filters and listing options for campus buildings, and a detailed page for a campus building with location, hours, and nearby options.

The Problem

University of Michigan students want an app to efficiently find study spots that match their preferences so they can save time and study comfortably.

Assumptions

Before I started designing, I thought that students mainly struggled with finding study spots due to a lack of information about available locations on campus. I assumed that providing a simple list of study spots with basic occupancy information would be enough to meet users' needs. I expected users to prioritize convenience and choose study spots based on proximity alone. I didn't realize how important real-time availability, detailed information (like ratings and photos), and navigation features were until I learned from my interviews and started designing. These insights showed that users value accuracy, ease of access, and a seamless experience when selecting and navigating to study spots.

Research


I conducted interviews with 4 univeristy of michigan students and asked them about their normal studying routine.

  1. Difficulty finding available spots – Many spaces are overcrowded, especially during peak hours (afternoons, finals season).

  2. Time wasted searching – Students spend excessive energy wandering to find open spots, often defaulting to the same locations.

  3. Limited visibility of amenities – Lack of info on outlets, seating types, lighting, food/drinks, or building hours.

  4. Unpredictable busyness – No way to gauge real-time occupancy before arriving.

  5. Environmental discomfort – Some dislike overly quiet libraries, while others need quiet spaces.

Pain Points

Where they study:

  • Cafés (for vibes, food/drinks, background noise).

  • Libraries (if quiet and not overcrowded, e.g., Hatcher 4th floor).

  • Home (for convenience, but distractions are an issue).

When they study:

  • Afternoons between classes or late at night (post-2 PM to midnight).

Key environmental preferences:

  • Lighting: Natural/warm lighting preferred (harsh lighting is disliked).

  • Noise level: Moderate background noise (e.g., cafés) or quiet (for focus).

  • Amenities: Outlets, bathrooms, food/drinks, seating variety (tables, private rooms).

Habits & Preferences

  • Real-time occupancy data – Percentage-based busyness indicators (like dining hall apps) or exact seat counts.

  • Filterable search – By proximity, noise level, amenities (outlets, food), seating type, and building hours.

  • Navigation integration – Directions to available spots to reduce time spent searching.

  • User-generated insights – Photos, ratings, and crowd-sourced updates (e.g., "busier than usual").

  • Personalization – Save favorite spots or get recommendations based on historical preferences.

Core Needs

Students need a centralized tool to reduce uncertainty and streamline decision-making when choosing study spots, balancing real-time data with personalized preferences.

Key Takeaway

User Personas

Comparison of two student profiles, Jason Patel and Emily Brown, with their photos, personal details, and study preferences on a white background.

Site Map

To visualize and map out the information hierarchy and design flow, a sitemap was created.

A diagram of a study spot availability app's user interface with menu options and features listed, such as closest buildings, favorites, availability, a map, and account settings.

Design System

The interface adopts a pastel reinterpretation of the University of Michigan’s brand colors, creating a visually soothing and approachable aesthetic. The muted tones reduce eye strain during prolonged use while maintaining subtle school spirit.

Design infographic illustrating color palette with hex codes, typography styles for header and sub-header, minimalist UI elements like buttons, icons, and maps, plus library operating hours and status.

Wireframe Iterations

Initial Sketch: I sketched out 3 different product features using the 9 ideation sketch method

Hand-drawn website layout sketch with sections labeled for location info, hours, amenities, features, review, navigation menu, photo, filter, availability bar, amenities, room types, booking, review, and navigation icons.

Lo-fi Wireframes

Hand-drawn sketch of a webpage design for a search and filter navigation bar, including sections for favorites, nearest buildings, and maps, with icons and labels for menu, map, and directions.
Hand-drawn sketch of a user interface layout with sections for location info, hours, status, amenities, features, reviews, navigation, and menu, including charts, icons, and handwritten notes.
Line style app interface with six screens showing location search, favorites, map, room types, amenities, and booking sections.

Hi-fi Wireframes

Screenshots of a mobile app interface for exploring nearby places and services, displaying maps, location details, and options for food, outlets, and other amenities.

Interactive Prototype