|
|
<h1>First Wireframes submitted</h1>
|
|
|
|
|
|
This is the result of how we envisioned the product before we started coding. Our imagination was limited by a doubt that we could implement complicated features, so we focused on the required features for the project assignment, and agreed upon how to interpret the assignment. We also agreed that we would try to make the first iteration of the product in a similar fashion, but that we would adapt and create new wireframes after the MVP was finished.
|
|
|
|
|
|
![wireframe_2](uploads/715613fdbcebe00d8afb3d0c695dd292/wireframe_2.png)
|
|
|
|
|
|
![Wireframe1](uploads/af34294ef0c619846ae22c0f505128ac/Wireframe1.png)
|
|
|
|
|
|
<h1>Revisioned Wireframes (After MVP)</h1>
|
|
|
|
|
|
After the MVP was finished we realized that the product looked nothing like the first prototype wireframes we made, but that the key functionality had stayed pretty mutch the same (Apart from some additional features). We decided to create a new model that visually depicts how the product looked like, but add some features that we wanted to implement and be able to see what it would look like in the application before spending time on coding them.
|
|
|
|
|
|
<h4> Task List </h4>
|
|
|
|
|
|
Here we wanted to add some kind of sorting. we decided on icons next to the task properties title.
|
|
|
|
|
|
We also had gotten some feedback on the ```new task``` button <img src="https://bdigsec.no/Images/Skjermbilde%202021-04-23%20kl.%2020.24.06.png" width="60" height="28">
|
|
|
<br /> and wanted to move ut up from the bottom. Here we depicted what it would look like in the top right corner.
|
|
|
|
|
|
We are also depicting how a ```trashcan``` symbol <img src="https://bdigsec.no/Images/Skjermbilde%202021-04-23%20kl.%2020.24.32.png" width="20" height="20"> would look like in the task list
|
|
|
|
|
|
We wanted the tasknames to be a button instead of a link. <img src="https://bdigsec.no/Images/Skjermbilde%202021-04-23%20kl.%2020.28.46.png" width="150" height="30">
|
|
|
<br /> On hover it changes color to indicate interaction <img src="https://bdigsec.no/Images/Taskname.png" width="150" height="30">
|
|
|
<br />
|
|
|
|
|
|
|
|
|
![task_list](uploads/33114aad2dd1bf14f7e7a3a202c491df/task_list.png)
|
|
|
|
|
|
<h4> Task Details </h4>
|
|
|
|
|
|
Here we wanted to organize the details better. We decided to move task description to the bottom of the details
|
|
|
|
|
|
![edit_task](uploads/17e29fca7767fff63867d516731dfa55/edit_task.png)
|
|
|
|
|
|
<h4> Edit task </h4>
|
|
|
|
|
|
![Edittask](uploads/09cefffeacdfb5136f0e10c7cf837ea9/Edittask.png)
|
|
|
|
|
|
<h4> Completed Tasks </h4>
|
|
|
|
|
|
Just like in tasklist, we set a button as the name of the completed task, and added sorting icons
|
|
|
|
|
|
![completedtasks](uploads/550617bdbbaeb793acfa0ee4b8582b18/completedtasks.png)
|
|
|
|
|
|
<h4> Categorys </h4>
|
|
|
|
|
|
Almost the same in tasklist, we set a click button on the name of the Category and added sorting icons
|
|
|
|
|
|
![Categorys](uploads/7e0e97f80bdf1ae05970d9ca45aac23e/Categorys.png)
|
|
|
|
|
|
|