Skip to content

Assignment 5 (Alpha): Frontend Design & Implementation

Assignment Instructions

Assignment Instructions

These are the 6.1040 assignment instructions for this assignment. It goes into greater depth about the expectations, requirements, and deliverables for this assignment. It also includes a rubric detailing how this assignment will be graded.


Community Carpool

A communal carpool coordination social network connecting users that are traveling to the same activity, using location data to help plan the most efficient and convenient routes.

Backend Deployment

GitHub Repository for Community Carpool's Frontend

Vercel Deployment for Community Carpool's Frontend

GitHub Repository for Community Carpool's Backend

Vercel Deployment for Community Carpool's Backend

Figma Wireframe

This is my Figma Wireframe from Assigment 3. I go into greater depth regarding the intended layout and design of the website on this page.

My wireframe can be viewed on Figma.

Heuristic Evaluation

Intuitiveness (Learnability)

As users of websites have gotten more used to how content is structured and certain UI consistencies that exist across multiple different platforms, it is important to use these UI queues correctly throughout different applications. As a result, I intend to make buttons clearly different from standard text, and include notifications when a user attempts to do something that is not allowed.

When a user creates a post, they will be directly presented with a "celebration signal" (confetti) to indicate that they have submitted a post. This type of user feedback is a great indicator of their actions, and they their post was properly recorded.

Adherence to Fitts's Law

It's important that frequently used buttons and actions that the user performs are easily accessible, intuitively placed, and are properly sized so that users can easily interact with the application. As a result, many of the buttons, navigation menus, and icons I use are sized to induce human interaction that is convenient and natural.

Adherence to Gestalt Principles

  1. Similarity
  2. Continuation
  3. Closure
  4. Proximity
  5. Figure/Ground
  6. Symmetry and Order

Iconography

Consistent icon use throughout the application will ensure that users are familiar with the design language of the application and are aware of the functionality each icon is associated with.