**Weekly Plan 5003 WebUI Deisgn**

**Introduction&Background**

Undeniably, a lot of students are facing procrastination problems which may cause stress, frustration, and poor grades.
> According to the research (Anthony, 2004), approximately 95% of college students experienced academic procrastination.
>
Therefore, a good time management application not only helps students prioritize tasks so they are able to complete school work and assignments on time but also helps them make better use of time.

In this project, we design a weekly agenda that aims at helping students organizing things efficiently and helping to remind what they need to do in a day. There are three modules we used to design this webpage: `navigation, head, and the table`. The navigation bar used for students' account management and schedule module was highlighted for this webpage and the other two: dashboard and profile, which need a further step to improve. For the head, we used a time picker to realize the day users want to plan. In the table, we used `checkbox` for users to check if they finished a specific task, `placeholder` for users to input things they need to do, and `tooltip `for interaction with users and reminding them of the things they may forget. A more detailed description of each function will be explained in the latter paragraphs.

**Component&Features**

*Headers:*
1. Planners need a central place to organize their plans and profile information. Introducing the `headbar`Navbar, planners can `input=type` review and plan out each week's schedule. Meanwhile, users can customize their profiles to express their identities and preferences.
2. Everyone has their own plan, and some of us need to work collaboratively. With the Share `button`, planner can share the weekly schedule with others, improving working efficiency and collaboration.
3. The "Login" `button` allows planners to login by clicking the link within the button so that their weekly plans can be stored within a web cloud belongs to thier individual accounts.
4. The `input type=date` function in the center allows planners to select different date on the calendar to plan ahead or review past events.
5.Planners can also `select` different cities using the "city" bar, a list of `option` will show up, after planners choose a city, weather and time zone will automaticly change accrodingly.

*Table:*
1. A plan can't keep up with changes, which we should plan with involving the weather condition. With the weather function, each day is synchronized with the weather forecast website `anchor link`in real-time, and it can help the planner plan each day's activities according to the most updated weather.
2. Planners can write down thier daily agendas from 8:00am to 5:00pm in the `columns` below the weather columns. By typing in the `input=type` box, planners can add information into weekly plan. The text players input will automatically `algin` with the time period they selected.
3. Once the event is `input` into the textbox, a `checkbox` will show up infront of the event message so that planners can "check" it when they finish the task. After the checkbox being checked, a line will `strikethrough` the text.
4. Planners can also select different `bakcground color` for each event `block` and use the `tooltip` function to add notes to the event.
5. Life is fulfilled with surprises, special events, important things, etc. With the separated `input=type`row, planners can take notes with those crucial events to remind the planners must-to-do lists on those days.

<br>

**Reflection**

The whole process of our designing by now consists of three main parts: generating our product concept, designing the components and interface and polishing the outlook.
The first thing we have to decide is the function of our product. What can our users do on this app? what’s their needs? How can our product make their life more convenient? Based on what we experienced every day (homework, lessons (in different time zones), meeting, endless dues), we found a clean and well organized timetable will be quite helpful.
<br>
When we were building some functional components,however, there were some technical problems. For example, in our mind when users put in their to-do list, there will be a rolling time like the picture below shows up and they can choose time when the things they need to finish or start.

<br>
<img class=image src="https://i.imgur.com/7B145gK.png">
<br>

And when they choose a certain day on the calendar, the certain column of that day on the weekly plan will be highlighted and more detailed information shows up. According to what we have learnt, it was a bit hard to make it work in this project so we have to build a “fake” function to make it look like way.

Through this product designing process we also found testing your product with your users is also important. As the designers, we already knew how every button works and the logic behind the page in detail so we took it for granted that our users were supposed to know it as well. While during the discussion on our Monday’s lesson, our classmate seemed a bit confused about this product and had questions like where to input something and where her to do list will show up etc.

In the last step what we tried to do was make the app look concise, elegant and comfortable. In this step I thought I would play with CSS a lot but what I experienced this week is different from our last doodling project. One problem I met was I could not change the width of the columns in the timetable on CSS because we imported a table template from bootstrap. It seems there are some conflicts between CSS and bootstrapp…

This is just an immature demo and we hope in the future we can make every function work by using JavaScript or other tools. Also except for basic functions, we have to think about how to make our product stand out from similar products? What is the difference between our product and others?