ENGR 1 Mini-Hackathon · Process portfolio
Students lose good thoughts because every app asks them to organize at the exact moment they have the least attention to spare. We split capture from sorting.
01 Marketing
We wrote the positioning before the first screen, so every design argument could be settled by asking whether it kept that promise.
Positioning statement
For students who think faster than they can organize, Thought Dock is a two-part notes app that keeps capturing and sorting apart. To-do apps want a list, a date, and a tag before you can save. Thought Dock saves first and lets you decide later, at a desk, one thought at a time.
Audience
Students juggling classes, work, and commutes, from community college to university.
It is built to help students with attention difficulties, anxiety, executive-function friction, or decision fatigue. We don't market it as an ADHD app: it should feel useful to every overwhelmed student, and nobody should have to identify with a label to use it.
Nothing to decide
One field and a Save button. No lists, dates, or tags while you're walking to class.
Sort when you sit down
The desk shows one thought at a time with big labeled actions, so the pile has an end.
You stay in charge
Suggestions are a quiet chip you can ignore. Every action can be undone. Nothing is filed for you.
Free, no account
Pair your phone with a QR code. No sign-up, no subscription, no extra device to buy.
Landing page
The public home page, written from the four pillars. One promise, one primary action.
Launch video
A short launch video for class group chats and club channels, built from the app itself.
| When | Channel | What we post or ask | What we watch |
|---|---|---|---|
| Week 1 | ENGR 1 demo and class group chats | Show the 60-second capture-to-task flow live | Who asks to try it after class |
| Week 1 | Study groups and STEM club channels | Post the launch video with the /capture link | Replies and questions in the thread |
| Week 2 | Tutoring and learning center | Ask to leave a QR flyer at the front desk | Whether staff agree to share it |
| Week 2 | Disability resource center | Offer it as one optional tool, ask for feedback first | Their accessibility notes, before any wider push |
| Week 3 | Campus newsletter or student Instagram | Short story: why capture and sorting are separate | Whether it runs; feedback we receive |
Sample post · Instagram / student page
DraftYou remember the deadline while you're on the bus. By the time you're home, it's gone.
Thought Dock is a free app from three ENGR 1 students. Type or say the thought on your phone and put it away. Later, at your laptop, sort everything in a few minutes: tasks, events, class spaces.
No account. Pair with a QR code. Capture now, organize later.
Sample post · class Discord
Drafthey all, we built a thing for our hackathon and would love a few people to break it
it's an inbox for random thoughts. phone side is one text box. desk side lets you turn stuff into tasks or calendar events one at a time. works offline, no login.
link for your phone: [/capture link]. tell us what's confusing
Copy drafts are for Luke and Maryam to rewrite in their own voice before anything is posted. Nothing has been published yet. Source for every link: GitHub (opens in a new tab).
02 d.school design thinking
We followed the Stanford d.school sequence, looping back from prototype to define more than once.
Empathize
Listed the moments students lose thoughts: commutes, lectures, shifts, late nights. Drafted proto-personas.
Define
Wrote one point-of-view statement and five How Might We questions.
Ideate
Brainstormed 20 ideas, clustered them, and shaped three distinct concepts.
Prototype
Wireframes, then a coded Capture and DeskOS with real sync.
Test
Wrote a usability script. Sessions are next; results will be recorded here.
Point of view
A busy student needs a way to get a thought out of their head the moment it shows up, without deciding what it is, because deciding right then is what makes them drop the thought or lose their focus.
How might we…
In the buildmarks ideas that made it into the app
Concept 1
Not chosenA small stand on the desk with an NFC tag. Tap your phone on it and the app switches into Desk Mode.
Why not. Costs money to make, needs a device in a specific place, and makes a physical object a requirement for access. We kept it as our 3D product-design study.
Concept 2
SelectedSoftware only. A phone screen that does one thing, capture, and a desktop workspace for sorting when you sit down.
Why we chose it. Free, works on devices students already own, keeps every decision with the user, and is buildable and demoable in a hackathon.
Concept 3
Not chosenDump thoughts in and an AI model files them automatically into tasks, events, and folders.
Why not. Removes user control and can misfile something silently. Needs paid APIs. We kept a small, local suggestion model instead.
| Criterion | Weight | 1 · NFC dock | 2 · Capture → DeskOS | 3 · AI organizer |
|---|---|---|---|---|
| Accessibility | —weight not set | Requires a physical object at a deskScore: not yet scored | Runs on a phone and any browserScore: not yet scored | Accessible UI possible; errors hard to noticeScore: not yet scored |
| Mental effort at capture | —weight not set | Low once docked, but you have to get to the dockScore: not yet scored | Lowest: one field, no choicesScore: not yet scored | Low at capture, high when checking its filingScore: not yet scored |
| Cost | —weight not set | Parts, printing, NFC tagsScore: not yet scored | Free tiers onlyScore: not yet scored | Ongoing API cost per thoughtScore: not yet scored |
| Feasibility in the time | —weight not set | Hardware plus softwareScore: not yet scored | Software we can finish and polishScore: not yet scored | Depends on prompt quality and API limitsScore: not yet scored |
| Ease of demo | —weight not set | Needs the physical dock in the roomScore: not yet scored | Two screens, live, on any laptopScore: not yet scored | Results vary run to runScore: not yet scored |
| User control | —weight not set | FullScore: not yet scored | Full: suggestions only, undo everywhereScore: not yet scored | Low: the model decides firstScore: not yet scored |
| Distinctiveness | —weight not set | Most distinctive objectScore: not yet scored | Distinct split between capture and sortingScore: not yet scored | Many similar products existScore: not yet scored |
Pending Scores pending team evaluation. Luke and Maryam will set weights and score each concept.
03 Personas and journey map
These are proto-personas: assumptions written down on purpose so we can check them against real students.
Community-college commuter, works 25 hours a week
On the bus, remembers the chem quiz moved to Thursday. Types eight words with a thumb, taps Save, pockets the phone.
Goals
Frustrations
Accessibility needs
Second-year student whose attention comes and goes
Mid-lecture, has an idea for the group project. Says it as a voice note in two seconds and looks back up.
Goals
Frustrations
Accessibility needs
Transfer applicant tracking deadlines across six schools
At work, sees a scholarship deadline in an email. Captures the date and link, then turns it into an event at home with one key.
Goals
Frustrations
Accessibility needs
| Row | 1Thought appears | 2Capture | 3Put it away | 4Sit down | 5Sort | 6Act |
|---|---|---|---|---|---|---|
| Actions | Notices a deadline or idea | Opens Capture, types or speaks | Taps Save, locks phone | Opens the desk, sees the inbox count | Sorts one thought at a time | Works from Tasks, Calendar, Spaces |
| Thoughts | “I’ll forget this.” | “Where does this go?” | “It’s safe somewhere.” | “How much is waiting?” | “Task. Event. Keep. Next.” | “I know what’s next.” |
| Feelings | Anxious | Rushed | Relieved | Hesitant | Focused | Calm |
| Opportunities | Capture reachable in one tap | No choices, autofocus, voice | Toast with Undo; offline queue | Show the count in words, no red | Big labeled actions, keys, suggestion chip | Everything reversible from Archive |
Feelings are hypotheses from the proto-personas, not observations.
Pending Validate personas and journey with 3 to 5 student interviews; replace assumptions with what we hear.
04 3D product design
Concept 1 was a physical NFC dock: tap your phone on it and the app switches into Desk Mode. We rejected it as the product but carried it through as a full product-design study.
lib/dockModel.ts. The same numbers generate this 3D view, the dimensioned drawing, and the printable STL file.Loading 3D model…
Drag to orbit. The blue disc under the base is the NFC tag (use Show underside). Phone shown at 72 × 150 × 8 mm.
| Feature | Size (mm) |
|---|---|
| Base | 120 × 90 × 18 mm, 6 mm × 45° corner chamfers |
| Phone slot | 14 mm wide, walls at 65° from horizontal |
| Backrest | 62 mm above the base, 8 mm thick at the base |
| Front lip | 12 mm tall, 6 mm thick, starts 12 mm from the front |
| NFC tag pocket | ⌀30 × 1.2 mm deep, underside, under the cradle |
| Cable channel | 8 mm wide × 6 mm deep, exits the right side; 8 × 8 mm hole up through the slot floor |
| Feet | 4 × ⌀10 × 1 mm recesses for stick-on rubber bumpers |
| Solid volume | ≈ 256 cm³ (checked against the exported mesh) |
Third-angle projection: top view above the front view, right side view to its right. Hidden edges are dashed. Generated from the same parameters as the 3D model, so the two cannot drift apart.
05 Prototyping
We climbed the fidelity ladder one rung at a time and only moved up when the cheaper version had nothing left to teach.
Sketched Capture and Sort as gray boxes to test the structure before any color or code.
What it taught us. The capture screen only works if it asks for nothing. Category and date controls were considered and cut. Sort needed one big card and labeled actions, not a list with tiny icons.
Applied the design contract: system type, one blue accent, black pills, the floating Dock, light and dark.
What it taught us. Every action needed both a visible label and a key. The suggestion chip had to be quiet enough to ignore, and overdue items needed words like “Was due Tue” instead of red.
Open them live. They are the real app.
Connected phone and desk through Next.js API routes and Upstash Redis, with QR pairing, an offline queue, voice and photo capture, and .ics export.
What it taught us. Sync had to be optimistic: show the change instantly, queue it, retry when back online. Undo is only trustworthy if every action stores its exact inverse.
A moderated think-aloud test with 3 to 5 students on their own phones and a paired laptop. Ideally at least one participant navigates with the keyboard only.
Scenario
“Capture an application deadline and useful link on your phone. Later, turn the deadline into a task and save the link in an Engineering space.”
Tasks
Moderator script
| Participant | Task 1 | Task 2 | Task 3 | Task 4 | Ease (1–7) | Notes |
|---|---|---|---|---|---|---|
| P1 | not recorded | not recorded | not recorded | not recorded | not recorded | not recorded |
| P2 | not recorded | not recorded | not recorded | not recorded | not recorded | not recorded |
| P3 | not recorded | not recorded | not recorded | not recorded | not recorded | not recorded |
| P4 | not recorded | not recorded | not recorded | not recorded | not recorded | not recorded |
| P5 | not recorded | not recorded | not recorded | not recorded | not recorded | not recorded |
Pending No sessions have been run. Results and the changes they lead to will be added here by the team.
06 UX/UI design
We wrote a one-page design contract before building any screen. Every color, size, label, and animation in the app comes from it.
1
Capture asks for nothing
One field and Save. No lists, dates, or tags on the phone, ever.
2
One thing at a time
Sort shows a single thought, large, with a short list of labeled actions.
3
Everything is reversible
Undo on every action. Archive instead of delete. The original text is never changed.
4
Words, not colors
Status is always said in words with an icon. No red for overdue work.
5
Calm by default
System type, one accent, motion only where it explains where a thought went.
Each swatch shows the light value on the left and the dark value on the right. The dot is the live value in your current theme.
--bg
Page
#f5f5f7 · #000000
--surface
Cards
#ffffff · #1c1c1e
--raised
Sheets, Dock
#ffffff · #2c2c2e
--text
Body text
#1d1d1f · #f5f5f7
--text-2
Secondary text
#424245 · #d2d2d7
--muted
Metadata, 13px+
#6e6e73 · #a1a1a6
--accent
Primary, focus, links
#0071e3 · #2997ff
--ink
Black pill buttons
#1d1d1f · #f5f5f7
--warn
Real errors only
#b25000 · #ff9f0a
Kind tints. Always with the kind's icon and its word.
System font only, so it renders as SF Pro on Apple devices.
| Action | Key | What it does |
|---|---|---|
| Make a Task | T | Kind becomes task, optional due date; stays until done |
| Make an Event | E | Date and time; Add to Calendar downloads an .ics file |
| Move to Space | M | Pick a space, type to filter, Enter to create one |
| Develop | D | Notes under the original text, which never changes |
| Connect | C | Link to other thoughts; links show both ways |
| Keep | K | File as Idea, Note, or Resource without making a task |
| Archive | A | Out of the way, never deleted, restorable |
| Undo | ⌘ZU | Reverses the last action; a toast says what was undone |
| Next / previous | J↓↑ | Moves instantly, no animation. In Sort: → and ← |
| Capture | N⌘K | Focuses the Dock |
| Shortcuts | ? | Sheet listing every key |
07 Project management
We ran the project like a tiny Agile team, with GitHub Projects as our Jira: user stories, sprints, and a kanban board everyone could see.
| Role | Who | Owns |
|---|---|---|
| Product and design decisions | Luke, Nik, Maryam | Problem, concept choice, what ships, what gets cut |
| AI build | Claude Code (orchestrator + subagents) | Design system, code, tests, this portfolio, under the team's direction |
| QA | The team, plus ChatGPT as a second reviewer | Usability test, reviewing builds, checking copy and accessibility |
| Report and copy | Luke and Maryam | Humanizing copy, project report sections, decision-matrix scoring |
Sprint 0
Plan and design
Problem, personas, concepts, decision matrix criteria, design contract, board set up
Sprint 1
Core flow
Capture, Inbox, Sort, the processing actions, phone–desk sync, QR pairing
Sprint 2
Accessibility polish
Keyboard paths, focus, contrast in both themes, reduced motion, undo everywhere, offline queue
Sprint 3
Demo and report
Usability sessions, report sections, launch video, presentation rehearsal
As a student on the bus, I want to save a thought with one hand in a few seconds, so that I don't lose it before I get home.
Acceptance criteria
As a student at my desk, I want to sort my inbox one thought at a time, so that the pile has a clear end.
Acceptance criteria
As a transfer applicant, I want to turn a captured deadline into a calendar event, so that it shows up where I already look.
Acceptance criteria
As a keyboard-only user, I want to do everything without a mouse, so that I can work at my own speed.
Acceptance criteria
As a student who distrusts automation, I want suggestions I can ignore, so that nothing gets filed somewhere I didn't choose.
Acceptance criteria
A static copy from October 15, 2026. The live board is the source of truth.
Teammate tasks. Luke and Maryam own the humanized copy, the project report sections, the usability test, and the decision-matrix scoring.
08 Long-horizon AI task
We built Thought Dock with AI agents, and we want to be clear about how. Claude Code acted as design lead and builder. The product decisions were ours.
Each stage ends in a commit, so any step can be inspected or rolled back. The agent keeps two running files in the repo: a run log of what it did and why, and a decision log of choices that a person should be able to question.
A branch is only ready to merge when all of these pass on it.
npx tsc --noEmitnpx eslint …npm run buildclassifier evaluation, export self-checks09 Coding
Two web pages, four API routes, one Redis database, and a model small enough to run in the browser.
From lib/types.ts, lightly condensed.
type Item = {
id: string;
text: string; // captured verbatim, never edited
body?: string; // "Develop" notes
status: "inbox" | "kept" | "archived";
kind?: "task" | "event" | "idea" | "resource" | "note";
spaceId?: string | null;
due?: string; // task, YYYY-MM-DD
at?: string; // event, local datetime
links: string[]; // connected thoughts, kept symmetric
media?: { type: "audio" | "image"; mime: string };
source?: "phone" | "desk";
createdAt: number; updatedAt: number;
};
type Space = { id: string; name: string; createdAt: number };
// Every change is an operation; undo replays the inverse.
type Op =
| { op: "put"; item: Item }
| { op: "del"; id: string }
| { op: "putSpace"; space: Space }
| { op: "delSpace"; id: string };npm ci
npm run dev # http://localhost:3000
# optional: real storage
# KV_REST_API_URL=… KV_REST_API_TOKEN=… (from Vercel → Upstash)
npx tsc --noEmit # typecheck
npm run lint # eslint
npm run build # production build
node scripts/export-stl.ts # dock STL + drawing (self-checked)10 Lessons learned
This section is still being written. These are early lessons; each of us will add our own after the usability test.
Cutting is a design decision.
Saying no to the hardware dock and to automatic AI filing gave us the time to make the core flow accessible.
Write the rules before the screens.
A one-page design contract kept a multi-agent build looking like one product.
Honesty scales better than polish.
Marking what is assumed or not yet tested made the page easier to trust and easier to finish.
Luke
Personal reflection to come.
Nik
Personal reflection to come.
Maryam
Personal reflection to come.
Pending Each teammate adds 2–3 lessons in their own words for the design report.