---
tags: mstu5003, project, html, css, bootstrap, group work, collab,
---

---
# Project: Web App UI
By Wentao Zhang (Caroline) & Melissa De Sole
[Project Guidelines](https://docs.google.com/document/d/1TqnLwP8BjxeIYZ5cK4LfatKpQaSH_Qz6c17MGXbubyE/edit)

---

## PROBLEM & SOLUTION

:::success
To view our work, visit the following links:

- CodePen Project: [Student Discount Finder](https://codepen.io/cz2774/pen/KKbboWg?editors=1100)
- Prototype: [Low Fidelity](https://miro.com/app/board/uXjVNe5g3mk=/?share_link_id=96006970519)
:::

#### STUDENT DISCOUNT FINDER
We designed an application to helps users find and share local student discounts.

A finished version would be help users search for different categories of stores, read details about each store's discounts offered, and share new discount locations that they discover.

---

## USER INTERFACE

<!-- see examples on p2 of Project Guidelines: Behaviors/Actions -->
This is how a user would interact with the page.

| User Action | Computer Response | Fuctional (Y/N)|
| -------- | -------- | --------|
| Click info button | Offcanvas appears on left side |Y|
| Hover over navbar icons| Tooltip with category name shows below, pointer changes |Y|
| Click a navbar icon | Location pins for that category show on map; other pins disappear |N|
| Hover over a location icon | Location icon gets bigger, pointer changes |Y|
| Click a location icon | Modal with detailed store info appears |Y|
| Pinch the trackpad/screen | Zoom in/out of map |N|
| User inputs data to modal | Updates submitted to admin for review |N|

**NOTE:**
In the **Fuctional** column, we marked items **Y** or **N** to differentiate operations that we coded successfully (Y) from ideas to develop/improve in a future iteration (N).

---

## DESIGN PROCESS

#### **OUR CREATION PROCESS**

1. We discussed a few ideas and chose to make a student discount finding application.
2. We co-created a low-fidelity prototype of our site on [Mirro](https://miro.com/app/board/uXjVNe5g3mk=/?share_link_id=159068240034)
3. We discussed the elements that needed to be created for our site and how we might divide the tasks.
4. Caroline made the first prototype of our site.
5. Mel added functional elements to the design.
6. Caroline added details to the modals.
7. As we worked each team member attended an office hour to ask for help and feedback.
8. We met to check our final project, make some last modifications, and co-created this HackMD.

#### **CHALLENGES & SOLUTIONS **

Some challenges we faced in making this project were:
- Collaboration methods (how to work cooperatively on a coding project). Overall, we met to plan; divided the tasks and took turns updating our code; and met again at the end to finalize the project and reflect on the process.
- It can be time-consuming to read through someone else's changes and understand their code. We used comments to help with this.
- Some elements, such as the font-awesome icons, did not load properly. At help hour, we learned that it was because we had the wrong plug-in
- Aligning the navbar was a struggle. After a lot of searching online, the solution was to add `d-flex` and `flex-wrap` classes to the NavBar container.

- The location pins are not responsive; when the screen changes size, they float to different locations on the map. We tried a fixed location, and now we have them positioned relative to the screen (%value from top and left edge). At the help hour we also could not resolve the issue.
One possible solution might be to uploaded so that, when the screen size changes, the image is cropped instead of changing dimensions.
- The map is a fixed background image, as opposed to a responsive map that zooms.

#### **TAKE-AWAYS**

- If something is not working as expected, double-check the plugins
- Work ahead so that we can ask for help as needed
- Use comments to guide teammates through the code
- Use debug mode to check the padding, margins, etc.
- Fork the project every time we try add a new element or restructure an existing one. Be sure to save!
- Frequently use of the **Format HTM**L and **Analyze HTML** tools in CodePen

#### **NEXT STEPS**

For this website, we would add:
- An interactive map
- More detailed information on the shops
- A form for inputting new stores
- Add a review page
- Add a 'find directions' button and link

#### **REFERENCES**

- The visual layout & user interaction was inspired by Google Maps
- Relied on search engines and sites like W3 Schools, Bootstrap, and public forums for problem-solving

<!-- BRAINSTORMING NOTES:

INclude:
Talk about your code

User experience

Reflection on process

Purpose: Student discount platfom
Elements:
- map
- navigation (top) + search bar
- school type (eg Columbia/general/other school)
- % of discount

- * Photos (input option + comments)
- * Ratings (star + comment)

* extras - if time allows

Interactivity
- click map - like google

Procedures:
- braintsorm
- Create shared docs
- Mirro: Low Fidelity

User experience:
Flow 1: User type specific shop name in searching bar leads to shop detial page.
Flow 2: User seclect a shop category, map will present shops around the location in color tags. User zooms in on map and
click a tag leads to shop detial page.
Flow 3: User clicks the shop tag, shop detial page pop up
Reflection:
if able, turn it into a Google Maps Plugin
--- -->