# Milestone 1 — Frontpage concepts and proposed site map

Prepared for Antonis Ioannou · ACAD 276 · October 26, 2026

## What to open and submit

Open **index.html** in a browser to compare the concepts. Each full frontpage opens from its preview or “Explore concept” link. No installation or server is required. Keep the `assets` folder with the HTML files.

For the frontpage deliverable, share the complete folder or its ZIP. It contains three genuinely different HTML builds:

1. **01-study-board.html — Search and cards:** a compact search-led homepage with quick filters and a card grid.
2. **02-community.html — Campus board:** a campus bulletin layout with topic navigation and a list of studies.
3. **03-research-first.html — Research directory:** a researcher-led homepage with a visualization preview and compact directory.

The proposed rendered site map is in **site-map.html** and its editable vector source is **assets/site-map.svg**. It is included because the group document assigns the site map to Antonis.

## Source and scope

The concepts are based on the group’s [Milestone 1 document](https://docs.google.com/document/d/1ww95-ZYFmZzTxwlai-Lj0DsfZhM4rL4yMMc6ftBebcs/edit) and the linked [original project proposal](https://angelaec.webdev.iyaserver.com/acad276/project_proposal.php).

The actual project helps researchers recruit study participants within the campus community. It is not Food Map. The updated proposal names formal academic researchers as the primary audience, followed by students conducting research and students interested in participating.

The sources do not give the site a settled name. **Research Commons is a provisional working title**, used consistently for comparison. The mastheads are typographic placeholders. Gabby is assigned the logo work; these do not replace her three-logo deliverable. When a name and mark are chosen, update the title and masthead in each page.

All study listings, incentives, researcher names and profiles, affiliations, information-use and sharing plans, eligibility, and visualization counts are fictional demonstration content. They do not represent live recruitment, actual compensation, or validated operational data. No interview quotations, personal contact details, or database credentials are included in this deliverable.

## Why these approaches differ

### 01 — Search and cards

**Priority:** Help a visitor find a relevant study quickly.

The hero leads directly into a large search box, format selection, and filters for short, paid, and online opportunities. Cards surface topic, time, location/format, incentive, a bookmark action, and the researcher’s name and role. They also explain the contribution’s purpose, information use, and public-summary plan. The additional summary-plan filter supports participants who want to see the outcome. A separate researcher section explains what a useful post includes.

**Visual direction:** Mint surfaces, forest-green panels, citrus calls to action, and sans-serif typography. Colored topic chips and card rules identify study categories. The compact search area and three-column card grid remain the main structure.

**Research connection:** Interview notes describe busy schedules and the need to know the study’s topic, time commitment, format, and incentive. One interview explicitly requests filters and categories. Putting these decisions up front is a design interpretation of those findings.

**Tradeoff:** Card layouts offer a strong visual entry point, but are less dense than the directory in Concept 03.

### 02 — Campus board

**Priority:** Give students a reason to explore and participate.

A plain introduction explains that students and research teams are looking for participants. Shortcuts organize opportunities by commitment and motivation. Topic navigation supports curiosity, while list rows preserve the practical study details. The closing section explains the participation flow and information-use expectations. Refined listings lead with purpose and researcher context; an after-the-conversation section explains public summaries. A summary-plan shortcut replaces the payment-led third shortcut to reflect the variety of motivations in the interviews.

**Visual direction:** Warm ivory, butter yellow, coral, and plum. Editorial serif headlines and study titles pair with sans-serif body text and controls. Actual example posts and a vertical opportunity list give this direction its campus-bulletin character.

**Research connection:** Interviewees discuss personal connection, curiosity, meaningful contributions, and incentives. A welcoming community tone is a design hypothesis to test; the interviews do not establish that it will solve participation demand.

**Tradeoff:** This is the most distinctive invitation for participants, but recruiting researchers is a secondary action.

### 03 — Research directory

**Priority:** Serve the updated proposal’s primary academic researcher audience.

The primary action is to recruit participants. The hero includes a clearly labeled illustration of the proposed visualization feature. Below, a searchable table compares opportunities by format and commitment alongside response-use and findings plans. Researcher profiles are available directly from the directory. Study details remain available to participants.

**Visual direction:** An aubergine hero, lilac headline emphasis, a white recruitment dashboard, and pale lavender directory controls. Sans-serif typography and rounded surfaces retain the polished interface. The recruitment overview demonstrates a proposed feature.

**Research connection:** Researchers describe relying on personal networks and struggling to reach relevant people outside them. Clear recruitment and eligibility information addresses that problem. The visualization preview comes from the team’s feature list, not a claimed interview finding.

**Tradeoff:** The research-led tone is less informal than Concept 02. The chart is an illustrative preview; importing response data from external forms still needs a defined source and implementation plan.

## Refinement from all nine interviews

The interviews are qualitative student accounts. They identify needs and objections; they do not establish product-market fit or prove that a campus directory will attract participants. The updated proposal names formal academic researchers as primary, but that audience’s workflow still needs direct validation.

| Interview | Relevant finding | Refined frontpage decision |
| --- | --- | --- |
| Rosa | Wanted filters/categories and opportunities that felt interesting or meaningful. | Retain useful filters and explain what each contribution will help. |
| Kashvi | Described eligibility mismatches and no-shows; learning could matter more than a gift card. | Show relevant eligibility, researcher context, and purpose; keep time and incentives as decision details. Scheduling remains later work. |
| Bona | Needed new play-testers and a compelling reason for strangers to help. | Make the research purpose concrete, retain incentives, and support sharing. Do not assume browsing alone creates demand. |
| Maria | Was cautious about personal or controversial information being shared publicly. | Put response-use context in listings and explicit details before participation. |
| Quincy | Wanted target audience, duration, and what the research would help; questioned participant demand. | Make contribution purpose and commitment visible. Treat the participation problem as unresolved. |
| Emily | Wanted to know where collected information would go and preferred a manageable time commitment. | Show information use, duration, and format before the participation step. |
| BFA Design interviewee | Doubted reliability and data quality; raised privacy/security and suggested friend sharing. | Offer organizer context and questions before joining, without unsupported verification badges. Retain study sharing. |
| Art interviewee | Wanted credentials, reliability signals, and clarity about personal information. | Add researcher profiles with name, role, project context, and study-specific information-use details. These are organizer-supplied context, not verification. |
| IYA interviewee | Wanted relevant participants and publicly shared findings. | Add a visible public-summary plan, a corresponding filter, and a follow-up preview. |

The three concepts retain different visual and structural directions. The common refinement is that trust and motivation now affect the frontpage content, not only modal explanations or footer text. The third concept’s recruitment visualization remains a proposal feature, not an interview-validated need.

A **planned** public summary is distinct from an available result. Some examples explicitly have no public summary planned. The prototype does not fabricate findings, reviews, ratings, identity verification, or research approvals. Informational organizer profiles do not resolve the interviewees’ concerns about participant quality; that remains a product and operating question to test.

## Prototype interactions

- Keyword search and format selection work in all three versions.
- Concept 01 includes quick-duration, paid, and online filters.
- Concept 02 includes topic filters and shortcuts for short studies, interviews, and studies planning a public summary.
- Concept 03 includes duration selection and a responsive table.
- Bookmark buttons save example studies on this device when browser storage is available. The “Saved” control filters the current view and combines with active filters. Clear filters to see all saved studies.
- “View study” and study titles open accessible modal previews with organizer profiles, eligibility, time, incentive, information-use details, and a findings-sharing plan.
- Shared links use a study-specific URL fragment. A hosted copy is needed for links to work across different devices; a local file link works only on the device that has the folder.
- The create-post form previews title, researcher identity/context, criteria, contribution purpose, response use, findings-sharing plan, study format, and image selection. Nothing is uploaded, published, or stored.
- Sign-in, participation, and administration actions explain their planned flows without pretending to create real accounts or registrations.

This is the **frontpage design deliverable**. It does not implement the group’s MySQL database, live search endpoint, authentication, moderation, upload storage, form integration, or response analytics. Those are later implementation work. It also does not replace the group’s interview, proposal, database, or logo submissions.

## Team review and next milestone

Use Concept 03 as the starting candidate if the updated audience priority stays researcher-first. Compare it with Concept 01 for search clarity and Concept 02 for participant motivation. Test this with the team and potential users before choosing a final direction.

Confirm the following implementation choices:

- Final site name and Gabby’s logo.
- Which eligibility fields can be searched, and which are necessary for the intended studies.
- Whether participation is recorded by this site, an external form, or researcher contact.
- What response data is available for the proposed demographic visualization. Do not imply that external form responses are automatically available.
- Who can publish studies and how the administrator reviews posts and images.

The site map includes the assignment’s standard features: consumer search, accounts, administrative editing, researcher-entered posts, and image uploads. It also locates bookmarking, sharing, study detail, and proposed visualizations.

## Ready-to-paste contribution description

> Antonis — Frontpage concepts and proposed site map: I prepared three distinct responsive HTML homepage directions for the campus research platform: a search-first study board, a community-focused exchange, and a researcher-first network. Each makes study topic, duration, format, and incentives visible and includes interactive example search, filters, bookmarks, and study details. I also prepared a rendered site map covering public discovery, member accounts, researcher posting and visualization tools, and administration. “Research Commons” is a working title pending the team’s final branding. The listings and chart numbers are illustrative; the backend is not connected.

## Updated information architecture

Study detail now connects to a researcher profile and to a study summary when the organizer shares one. The posting flow includes the organizer’s context, response-use notice, and a findings-sharing plan. The rendered map and its editable SVG include these routes.

## Typography, color, and interface polish

The three concepts now have distinct identities: mint/forest/citrus for search and cards; ivory/butter/coral/plum with serif headings for the campus board; and aubergine/lilac with a white dashboard for the research directory. The milestone gallery uses neutral gray/white surfaces and dark headings, with green reserved for links, buttons, and focus accents. The gallery’s green accents are separate from the three concepts’ own palettes.

The campus board deliberately uses a local editorial serif stack (Iowan Old Style, Palatino, or Georgia) for its hero, selected section headings, study titles, and dialog titles. Body text, navigation, filters, and forms remain in the platform sans-serif stack. The other two concepts retain sans-serif headings. No font downloads are required. All labels retain normal letter spacing and sentence case.

Translucent sticky navigation, rounded panels, pill controls, restrained shadows, visible keyboard focus, and reduced-motion support remain. The frontpages use direct headings and action labels. Researcher details, purpose, eligibility, response use, and sharing plans remain visible. Small interface text is at least 12 CSS pixels.

Shared interface rules are in `assets/interface.css`; the three color/type identities are in `assets/themes.css`. The gallery's live previews scale proportionally through `assets/gallery.js`. Topic colors are attached to the study category, so filtering does not reassign colors.

A visual pattern cannot establish whether a page was made with AI. Team branding, real study posts supplied with permission, and observations from users assessing a study remain the next useful design inputs. The assistance acknowledgment remains below.

## Verification

Checked all three frontpages at desktop size and the gallery, all three frontpages, and site-map page at 390- and 320-pixel phone widths. No page-level horizontal overflow or added letter spacing was present. The campus-board headings resolve to the intended serif stack; the other page headings and all body text use the platform sans-serif stack. The 320-pixel study-detail dialog fits within the viewport and retains readable body text.

The public-summary shortcut still returns four example studies, and study details open from the bulletin previews. Prior search, time/format filtering, bookmarks, researcher profiles, posting previews, and participation flows remain available. All study content is still fictional, and nothing is uploaded or published.

The source proposal tab's feature area was blank during the research review, so the written feature list and interview notes remain the source for those requirements. The source document was not edited.

Refreshed screenshots are in `previews/`. Local asset references, JavaScript syntax, CSS structure, and SVG syntax pass. Seven key foreground/background pairs in the new palettes have contrast ratios of at least 5.40:1; this is a targeted color check, not a complete accessibility audit.

## Credits

Prepared with assistance from OpenAI Codex for HTML/CSS/JavaScript, information architecture and design rationale. Project direction and research context come from the group’s materials. Review and adjust this acknowledgment to your course’s requirements.