Wireframes
Defining layout and interaction logic.
What This Is
Mid-fidelity digital wireframes that show layout and content hierarchy for each key screen in the app.
Why We Created It
Wireframes let us refine structure before visual design. They help communicate the intended layout and functionality to the rest of the team.
How It Connects in the Process
Wireframes took what we learned from the paper prototype and:
- Standardized layouts,
- Clarified where each action lives,
- Prepared a solid foundation for the hi-fi prototype.
What We Changed or Learned (based on heuristic evaluation feedback)
We made several changes that directly addressed heuristic evaluation findings:
- Added or clarified back and exit options on pages like Maps and Event Info,
- Made the group chat button more noticeable,
- Improved the filter button so it stands out,
- Added guiding text where actions were unclear,
- Clarified calendar icons by pairing them with text labels.
Wireframes
