Week 5 ~ Week 7 Project 1
- Brian Zhao
- Oct 18, 2020
- 5 min read
This project is about reducing teachers’/professors’ time on preparing material lists for students before courses start. The goal for teachers/professors is to make sure every students buy the right materials on time without creating too much pressure for them.
We try to create a platform on amazon.com to make this happen. And this platform will be named in "My Bundle."
The first design story
Listing all the possible steps that could happen during the entire operation.
The first task flow
I try to make the whole progress a little more clearer by arranging each step into a diagram.
Persona
An example of user and his expectations
Story board
A little comic that shows how this project can solve problems for the user and perhaps the user's experience.
The first Ui Sketch
Created based on Design Story, Task Flow, Person, and Storyboard. The system requires the users to search for each items and mark on them. The users have to go to the "My Bundle" page to create a new list and the system will automatically put all the marked items together. The last thing to do is clicking the "Launch Bundle."
The Revised Design Stories
Shortening the phrases in each step and take in considerations of editing the list.
The Revised Task Flow
Giving users more privileges and users don't have to search and mark each item before using the bundle tool.
Metadata
A metadata example of a possible product from the material kit.
Design Consideration/ Consequences
Some consequences that could happen due to lack of diversity.
The wire flow draft
Allows users to search for products quickly and make changes more freely in the "My Bundle" page.
The Amazon.com Homepage
A simple simulation.
The "My Bundle" tool is hidden in the "Account" section.
The first thing users will see after clicking into the "My Bundle" page.
Users can add name and descriptions.
Add the first item to the list by clicking the plus sign.
Enter the name to navigate.
The system will show multiple results
This is how the list will look like after adding materials and the subtotal on the top right corner will reflect the total cost.
This is what the users will see after launching the bundle.
Final Version of Task Flow
This time, the system enables a quick key to undo changes in the list on the "My Bundle" page.
The Final Version of the Web Site
I refined some details and adjusted the settings of some buttons to improve the overall usability.
Amazon.com Homepage
Look for the "My Bundle" tool
Continue to create a new list
Input a name and a description
Continue to add the first item into the list
Input the item's name to explore
Results pop up
I also added the availabilities of each product.
The users can also see more details about the product by clicking into it and goes back to the searching results by clicking the "Back to results" button on the top left.
This is what the users will see after clicking the checkbox of the product on the result page, the product will be added to the list.
Continue to add another item by clicking the plus sign.
Choose the available product.
If the users want they can still look up its information.
And after the check box is checked the list is ready to go at any time.
The users will see this in their "My Bundle" page. If they want, they can go back and make changes any time by unchecking the check boxes.
If the users regret about making changes in the list, they can click the "Undo Remove" button to quickly undo the changes and that will bring the removed item back.
Something YOU HAVE TO KNOW before you want to look at any of these.
- You need a mouse to continue
- Please go to the top right corner and click on the "enter full screen" button after you entered the page.
The link to Prototype 1
The link to Final Version of project 1
Process documentation and notes
My very first design stories are based on the secondary users, students. I have thought of what the teachers and professors are doing in the back of the stage.
This is my second draft of design story
I tried to make everything more clearer with longer phrases but I was told that the phrases are too long, I then broke them down.
And this is how I came up with this
My earliest person focuses on the secondary user (students).
I realized that I have to change everything to the primary user's view.
So, I used my teacher as a reference and came up with this design which focuses on the primary user (professors/teachers).
The earliest story board, focuses on what the secondary users (students) see.
Second draft of storyboard
I received a feedback from my partner about that I should show less about the webpage and focus more on the users.
So, I came up with this story board which primarily focuses on the primary users (professors/teachers).
This is my first task flow. I thought it is a little hard to read and I decided to make a simple diagram.
So, I came up with this. The problem of this system is that there is too little diversity and freedom for the users.
I decided to learn from other people's works. And I learned that I can actually try to make things go through the process more quickly so that the system can provide a certain amount of space for users' freedom and maintains its simplicity.
So, I came up with the idea of "quick key for undoing changes." I don't even have to make another page just for that function. I made that happen by iterating a button in the page.
I looked for a metadata of a xacto knife on amazon.
And I used the data.
The design consideration/consequence are something that I worked backward. I think of the worst consequences first and then I think of the middle and the lightest at the end.
Move on to the screens. The usabilities of the first draft is okay, but the step of finding and marking the items first could be a little misleading for those who doesn't even know how to use the "My Bundle".
So, I came up with the second draft.
I also used CSS Peeper to break down Amazon's website to learn its theme colors and I used them to color project.
And as the last task flow developed, I iterated the undo change button in the final version.
Reflection
I learned something from this project. The first thing and it is also the most important thing is that I should always read the instruction throughly before I do anything. This is actually not my first time forgetting about reading instructions. I need to figure out what I am going to do before I do anything so that I can avoid doing wrong things.
I also learned that sometimes I can actually try to work backward to solve problem. I could think of the things that would come at the end first and then think of the process and how I am going to achieve it.
The last thing I learned is that the time management is very important. I am spending quite amount of time on this project but I think that I can still do much better. I understand that I could get distracted so easily, and normal plans or schedule don't really work on me. As my friend John said, maybe I should really try to do more work when I am focused. I agreed with him.
Overall, this is a rewarding project. I am grateful.
Comments