# data[].attributes.body
First Contact of DECO7180 - Find dataset through
https://www.data.gov.au/

Nice Dataset from breakout room 5

# data[].attributes.body
Learn how to use Miro and Padlet

Miro:

Draw picture

post link

leave comments

Padlet:
Post

Miro need 10 days to create education account, will choose Padlet in case

# data[].attributes.body
Generate Idea with https://studioone.uqcloud.net/ideaGenerator/

Miro board idea (Top Green)- https://miro.com/app/board/o9J_l4jMbZA=/

# data[].attributes.body
Adobe illustrator and Figma

learn basic of AI and Figma

# data[].attributes.body
Discover other students ' design and learn design criteria such as arrangement and think in user 's shoes to make sure your design is simple and clear.

URL shows similar design as what I expected my project should be in 2A design inspiration.

# data[].attributes.body
Learn Persona and Scenarios

# data[].attributes.attachment_link.readable_text
User scenarios are the stories that your personas p0o act out. Basically, user scenarios are thought exercises (though represented visually) in which you predict how certain types of users - represented by your personas - will interact with your website in a given situation in order to complete a given goal.

User scenarios let you understand what your future users will look for when trying to complete tasks on your site. Even if your personas "fail" at the task, at least you now have a visual representation of your problem and can go back and solve it easily. User scenarios allow you to test your site structure before it's fully developed and isolate problems before they become problems.

How to make a user scenario

The first thing you'll want to figure out in creating a user scenario is a realistic goal for someone using your website. Once you have a goal (or task) the rest is a logic puzzle: knowing what you do about your persona, how would they behave on your site, step by step? This is where a thoroughly detailed and well-thought-out persona comes in handy.

We're talking about a user scenario in its most basic form, but if you're interested in more advanced concepts, see this usability.gov post about user scenarios.

After integrating your personas, a user scenario will then highlight the details about how your system could be interpreted, experienced, and used. Ben Hunt, creator of Web Design From Scratch, believes that scenarios add elasticity to personas by filling in the "why" behind the "who". When creating user scenarios, he recommends taking into account these factors:

Persona's environment - Know where your persona is accessing your website, whether at work, at home, or perhaps in a coffee shop.

Persona's mentality - Visualize the scene and know what is going through your persona's mind. This is a good opportunity to figure out how the user feels when they interact with your site.

Impetus and motivations - Your persona is on your site, and you need to know why. Keep in mind the specific goal motivating the persona to interact with the web site, and understand why now, or what triggered the scenario.

External factors impacting use - These could be a wide range of elements, from the speed of the Internet, the amount of time at their disposal, or maybe even a distraction from loud construction happening outside.

To introduce teamwork into the process, you can also follow this collaborative 13-step guide to creating user scenarios.

A (real) sample user scenario

LUX, an international arts agency based in London, conducted an excellent sample of a user scenario for their website. The central purpose of the LUX website is to provide everyday users with access to various types of video art (though they also give developmental support for moving image artists).

For example, the persona, Harriet, a local art event organizer, has a problem: she needs to find a great film for her December event. Getting into her psyche, Harriet is specifically looking for a film with a winter theme. Her motivation might be that she needs to attract a larger-than-average attendance to make up for a small failure at the last screening.

Harriet starts out on the home page and quickly conducts a search. She spends a little time searching and browsing, watches a clip here and there, and finally settles on a film that interests her. She reads some details about the film, including reviews from both LUX and other searchers, plus bookmarks the artist for later screenings. Finally she puts the film in her basket and hires the artist during checkout. Harriet has successfully completed her goal - she found a wintry film for her December event.

As you can see, the user scenario indicates her motivations and thought processes.

Prioritizing features

The great takeaway from user scenarios is knowing which aspects need to be prioritized and which ones are less important. Redesigning your UI in response to the user scenarios involves knowing what needs to be fixed first.

Jeff Sauro, founder of Measuring Usability LLC, explains how to handle the intimidating pile of tasks facing every designer. His approach is novel, but effective: have the users prioritize the tasks for you, an idea originally proposed by Gerry McGovern in his book The Stranger's Long Neck.

1. List the tasks - Present the tasks - features, content, functionality, etc. - in a randomized order to represent users interested in your site.

2. Have the users pick five - The user reads the list, skimming for keywords, and picks the five tasks most important to them.

3. Graph and analyze - Tally up the votes and divide by the number of users. The "long neck" shape most often found is the inspiration for McGovern's title.

That's the basic gist: not only do you now know what your top priorities should be, but you have them verified by your users. Sauro explains in another article how this long neck organization of problems coincides with the Pareto principle.

The Pareto principle, also known as the 80-20 rule, was originally proposed in 1906 by Italian economist Vilfredo Pareto, who noticed that 80% of the country's wealth and land was owned by 20% of the people.

Interestingly enough, it's not just a country's wealth that runs on this principle. Microsoft noted that by fixing the top 20% of the most reported bugs, 80% of the errors and crashes would be eliminated. What that means for you, is that by addressing the top tasks in your long neck graph first, you'll end up taking care of most of the problems right away.

But there's no one way to prioritize your tasks, and McGovern's method can be substituted or complemented by several alternatives, including the Kano method, the QFD method, and cause & effect diagrams.

Plunging ahead with a plan

Don't fool yourself into thinking that personas and user scenarios are all you need for a successful UI; in fact, this is just the beginning. In the grand scheme of things, understanding these elements are merely Step 0, and the real work is ahead of you. So why are we putting so much emphasis on this pre-game stage? Because starting out on the right foot will make the whole journey easier. Unless you know who you're creating your web interface for and what they will do with it, then the how doesn't really matter.
Featured image, web design process image via Shutterstock.

# data[].attributes.attachment_link.title
How to Perfect Your UX with Persona Scenarios | Webdesigner Depot

# data[].attributes.attachment_link.description
User scenarios are the stories that your personasp0o act out. Basically, user scenarios are thought exercises (though represented visually) in which you predict how certain types of users - represented by your personas - will interact with your website in a given situation in order to complete a given goal.

# data[].attributes.body
Web API and Proposal

Tried to test the API format in lecture but failed, may wait until workshop - https://uq.edu.au/students/UserDetails/s46947064

# data[].attributes.body
Team Formation

Topic in the future attached ( maybe)

# data[].attributes.body
still thinking how to design
perhaps like -> user choose company-> choose truck -> show food and street address

# data[].attributes.body
Extract data from API using Javascript
function : .each(function i){
if something -> do something }
need resource id and url.

Team meeting
Our datasets have some resources without id, need to ask tutor about it. May need to store those data in local.

https://www.bnefoodtrucks.com.au/api/1/sites

# data[].attributes.body
Lecture

Basic about PHP, unfortunately I have no idea about PHP and Javascript.

Learning Python + Java + Javascript + Html at the same time, one more PHP will be too many workloads. Need discuss with team about the language to use.

# data[].attributes.body
Brainstorm of project with other team

Team 7: City Flood for locals near river, but not confirmed yet

Team 8: Health life -> webpage let user input their personal information then create a healthy diet or workout for user, sounds interesting

Team 9: Our team, food trucks , first split Brisbane into 3 district and let use choose, then let user click on different landmarks to show the facilities and food trucks nearby

# data[].attributes.body
More about Javascript - homework exercise 4

Result of exercise 4

# data[].attributes.body
Prototyping

need to discuss with team about how to stretch a prototype to do user testing

# data[].attributes.body
Presentation

Feedback : 2 to improve

1: Adding filter function

2: Perhaps adding favorite function, discussed in team may change it to something like "popular nearby" as favorite need access to back-end data which is difficult

# data[].attributes.body
1. Filtering data using regex and SQL

2. building a map, just create a account for own map access token

# data[].attributes.body
Try to change Icon in exercise2

# data[].attributes.body
MVP
We decided the following:
1. Prototype to show page 1 and 2 of web
2. Program show part of page 2 and page 3 of web

Created InVision prototype

# data[].attributes.body
We need to discuss about which part can be done and which part need to use prototype to demonstrate.

# data[].attributes.body
PHP basic
Set up php , only know how to open MAMP

# data[].attributes.body
Teamwork - free riders, importance of teamwork, why need team

actually my team works well

# data[].attributes.body
Prototype testing
1. Flood Insurance
just think about something about copyright - as they are real insurance

# data[].attributes.body
2. Dwelling in Brisbane
should have more choices and be able for user to choose instead of going to homepage every time

# data[].attributes.body
3. Swimming pool in Brisbane
the instruction is not clear, not able to find out what to do in homepage

# data[].attributes.body
Own design test
should have more decoration and button, function

# data[].attributes.body
Flow
When talking about the flow in game, it just remind me about Selda : breath of the wild

The game will not tell you where to go and what should do, but with some iconic landmarks and mountains, temples ...etc, your subconscious already influenced by them but you cannot realize and feel like really living in game and making your choice.

# data[].attributes.body
Demonstration and feedback
we decided following according to feedback
1. create a real time truck chasing function which can be filtered by time
2. create a login and favorite trucks function for users

# data[].attributes.body
Contact:
website nearly completed, after discussion we may not finish the food menu due to workload

# data[].attributes.body
Profolio
to include:
1. About you
2. Contact
3. Work had been done - this time are works from 2A - 2D
and works from other class
4. demonstrate design and skill

# data[].attributes.body
Profolio workshop
Use https://alvarotrigo.com/fullPage/
and https://github.com/mattboldt/typed.js/
as reference

# data[].attributes.attachment_link.title
fullPage scroll snapping. Create full screen pages fast and simple

# data[].attributes.attachment_link.description
fullPage plugin by Alvaro Trigo. Create fullscreen pages fast and simple. One page scroll sections jquery plugin. Mouse snap.

# data[].attributes.body
Contact help
Ask how to upload profolio and what should be included

# data[].attributes.body
Reference to do profolio:
fullPage.js
GitHub - mattbold/typed.js

# data[].attributes.body
Contact - Tradeshow
Feedback: Perhaps no need user login to use the function
After discussion, teammates think we may not have time to change anymore so will not do that.

# data[].attributes.body
Last Lecture
Some teammates not shown up, need to remind them the time and requirement of tradeshow.
We did not make a huge change to project compared to last demo in contact. Perhaps focus more on target audience and ideas in presentation.