# data[].attributes.body
In the lecture, Lorna introduced us to the tutor of this course. I was pleasantly surprised to find someone I knew, Robert. Robert can often give students some new ideas and encouragement. I like his courses very much. In the following time, I learned about the learning objectives and tasks of this course, as well as some problems related to team formation. I hope that in the study of this course, I can design interesting projects and read more valuable literature.

In the workshop, Hannah patiently explained to us some of the tools of this course, Ed discussion, Miro and Padlet. When she said how to complete the Journal, I recorded some of her suggestions in the note, as shown in the picture. Finally, the teacher took us to download the 2A Design Inspiration Assessment, OpenDyslexic font, and the installation of some software, such as Creative Cloud.

In contact, Alison and Robert gave us a breakout room randomly assigned. As a result, I met some new classmates. My classmates and I found some interesting data sets and discussed these data sets. I put the content written by our team in the Miro board in the final screenshot of the Journal. In class, I found a very interesting data set about the limited-time parking area in Brisbane. I have faced a fine for parking 2 overtime on Queen Street, so I think this is useful for some international students. I told Robert of my thoughts, and he also gave me some feedback, suggesting that I connect this data set with other interesting data sets. Robert gave me some inspiration, and I will continue to find some interesting data sets and correlate them.

# data[].attributes.body
In this week's lecture, the teacher introduced us what design is and the process of design. At the same time, we have provided us with some bibliographies that are helpful to the principles of design. Such as How designers think: the design process demystified. I will use some of the principles in the book when designing.

As an IT major, I am very happy to learn new skills in the workshop. This week the teacher taught us how to simply use Adobe Illustrator. This is my first contact with this app, so I ran into some problems. For example, I don’t know how to separate a star from a rectangle. Zhijiang gave me a step-by-step operation demonstration, allowing me to master some basic operations in class. After that, I explained the use of InVision for us. Since this program has been used in previous studies, the class exercises have been successfully completed. At the end, the teacher told us where we can learn to use AI. I hope that I can use my spare time to learn to use this tool and use it in design.

In this week’s contact, we were asked by our instructor to combine multiple data sets and conceive design ideas. I randomly sampled some data sets, parks and incident rates. My idea is to set up emergency apps in different parks according to the crime rate to protect people's safety. Some members of the group also showed their views, and I think the most interesting one is an idea about weeds. Ning Fu's idea is to use these weed data sets to help homeowners plan their gardens. Because some weeds cannot be cleaned by "pulling". The homeowner can view the detailed information of the weeds through the data set and get guidance on how to clean the weeds. I think this is very useful for residents of Brisbane. I will put some screenshots of our design in Miro at the end.

Target:
1. Use the weekend to learn the use of AI;
2. Improve my ideas and complete 2A Design Inspiration.

# data[].attributes.body
In this week's lecture, Lorna showed us the websites of previous students. After class, I browsed these websites through BB, and I learned how they use data sets. This provided me with many ideas. Then, the teacher taught us some design principles, which I have learned in other courses. For example, web page layout, error prevention and consistency. These usability principles will support my design and make my design more satisfying the requirements of users.

In the Workshop, Hannah and Zhijiang took us to complete two exercises, namely Proto-personas and User Scenarios, and explained their importance in the early stages of design. I designed proto-personas and user scenarios based on my Design Inspiration. I will show my results at the end. Persona is very important for a project. It can help us determine the target audience of the product.

My contact course was cancelled due to ekka. In order to learn better, I joined other classes. In Julia and Lorraine's classes, we discussed their respective Design Inspiration in the breakout room. I introduced my ideas to them. They all thought my ideas were good and provided me with some suggestions. Unfortunately, I couldn't team up with them. Of course, I also heard some interesting ideas in the discussion, such as cleaning up weeds, looking for parks and stray animals. After that, the teacher gave them a group time to find suitable teammates (those with similar ideas). I hope that in next week's class, Robert can also give us some time to find teammates. Because for teamwork, every member is very important.

Completed goals: 1. AI learning; 2. 2A Design Inspiration
New goal: team up :)

# data[].attributes.body
In the lecture, Lorna explained the API for us. In my opinion, API is to help us achieve certain functions, and we don't need to understand how it works. It is very easy to use. The Web API is relatively more complicated, and it is mainly aimed at browser interaction. Web APIs generally have inputs and outputs. Then, I also learned the url structure and AJAX in this lesson. I think AJAX means partial refresh. If you do not use AJAX, even if a line of words in the web page changes, you need to wait for the entire page to refresh.

In the workshop, tutor explained to us some basic principles in detail. For example, how the jQuery library is included in the web page, the difference between jsonp and json, and the use of jQuery.each(), etc. In class exercises, I uploaded the answers to these questions in Miro (as shown in the screenshot). After the class, I tried to change the API. Following tutor's guidance, I modified part of the code in script.js to implement API replacement.

In this week’s contact, Alison provided us with 9 Breakout rooms. I joined these rooms and discussed my ideas with my classmates. Finally I completed the team. After completing the team, we compared everyone's ideas in terms of how easy it was to realize and how interesting the project was. In the end, we chose Dongqi's idea, a web page about applying for assistance dogs. The purpose of the project is to help those in need, such as the disabled, to quickly apply for assistance dogs to provide some help for their daily lives. Finally, we made an initial plan for the design and determined the time for weekly meetings and discussions.

Completed goals: 1. Team formation; 2. team agreement; 3. Choosing a direction for the team
New goal: 1. Low- fidelity prototype; 2. Personal; 3. User test

# data[].attributes.body
In lecture, Lorna mainly explained the most commonly used PHP in server-side technologies. Many people say that PHP is the best language for web programming. PHP is a general open source scripting language. It absorbs the characteristics of C language and Java, is conducive to learning, is widely used, and is mainly used in the field of Web development. Therefore, it has some advantages. First of all, it is open source and free. Secondly, PHP is a very easy language to learn and use. It has simple grammatical rules, making it very easy to operate and edit. Finally, it can establish connections with many databases, such as MySQL and Oracle.

In the workshop, Hannah and Zhijiang took us to do four exercises. The first is the setting of the loading image, and the size, position and loading time of the image can be changed through css. The second is the coding and principle of the filter. The next exercise is about how to cache the results of the API. We learned how localStorage and sessionStorage work. The localStorage data storage is also a cross-browser session. localStorage is similar to sessionStorage. The difference is that the data stored in localStorage is unlimited, and when the page is closed, the data stored in sessionStorage will be cleared. The final exercise is to display a large image from the SLQ data when the user clicks. The screenshots are the results I presented in class.

In the last week, we have determined our project theme. In this week's class, our group and other groups introduced their projects to each other and expounded their ideas. We evaluated each other afterwards. We collected a key piece of information from the class, how to design accessible web pages. In the next design, I will refer to some network materials to avoid some usability problems. After that, I completed the content in 2c with the team members. Due to the limited time for class, low-fidelity prototype, intended audience and storyboard were completed after class.

For the presentation next week, the group produced the PPT after class. In the PPT, we will show the goals of the project, some of the resources used, and the low-fidelity prototypes, persona and storyboard we have completed. In order to get more detailed feedback, we hope to show our ideas and designs more in the presentation.

Completed goals: 1. Low- fidelity prototype; 2. Personal; 3. Interview; 4. Storyboard
New goal: 1. PPT; 2. proposal; 3. presentation

# data[].attributes.body
Lorna explained to us the related content of the prototype this week and showed some examples of the prototype. In my opinion, Prototype is a kind of operable, which more realistically simulates the interaction between the user and the UI interface. Developers can discover potential problems in the early stages of the product by making prototypes and correct them in time. Therefore, using the prototype for user testing can obtain more accurate user feedback.

In the workshop, I encountered some problems. When I use Cisco, it has been in the "connecting" state, unable to connect successfully. This made me unable to use Filezilla. Zhijiang helped me solve these problems in the breakout room. In the next exercise, I learned how to use regex in JS. After that, we also learned how to use the Leaflet plug-in, and successfully added Markers and Popup to the map. I will show the exercises completed in class in the screenshots.

Exciting contact. In the class, every "animal" team completed the presentation and received feedback. We recorded the feedback and completed the proposal. For example, assistance dogs are more likely to live with people for a long time, and such websites or applications already exist, and the market is saturated. Therefore, consider using responde dogs or therapy dogs instead of assistance dogs, and consider the short-term rental market. The above is the advice given by Alison. In addition, Lorna also suggested that we search for some information related to the actual adoption process. After class, I discussed with the team members and decided to improve our website prototype based on Alison's suggestions. At the same time, I searched for the necessary information to apply them to the website.

Completed goals: 1. PPT; 2. proposal; 3. presentation
New goal: 1. new prototype; 2. team allocation (coding)

# data[].attributes.body
In this week's lecture, Lorna introduced us to knowledge related to design patterns. The one that inspired me the most was the MVC framework. MVC is a program development design mode, which realizes the separation of display module and function module, and improves the maintainability, portability and scalability of the program. Therefore, the difficulty of program development can be reduced. In the group meeting on Friday, we also envisioned applying MVC to our design.

In the workshop, Zhijiang took us to download MAMP. Through it we can easily deploy the backend (A nginx or Apache server running PHP & MySQL). After that, I learned about the PHP code by answering some questions in the miro board. For example, the code start and end tags in php <?php?>, and the displayed date can be changed by DATE_FORMAT('20211111','%d/%m/%Y'). Finally, I also learned some related error logs. I will put the screenshots of the exercises in the class at the end.

In the contact, the team members and I counted the collected feedback and selected the necessary parts from the feedback. For example, focusing on the short-term market and the dog adoption process. After that, we decided on the next tasks in class. The first is to complete the changed prototype and user test. Then there is the division of labor for the code part. After the division of labor, we will once again cooperate with google doc through the zoom meeting to complete 2D.

Every user test is crucial in my opinion. It can help us check whether the problem in our design has been solved. We have made changes in the new design. In the homepage section, we show the adoption process in detail. At the same time, in order to facilitate the elderly to browse the web, we try our best to design the font to be large enough under the premise of ensuring the beauty of the page. In addition, in the Find doggie page, in order to fill the short-term rental dog market, we have added a new adoption period. The user needs to fill in the time period when adopting a dog, and the staff will take it back when it expires. I think this can help those who have short-term needs, such as a temporary business trip with family members, causing the elderly to stay home alone. These dogs can give them some care and make them not lonely.

Completed goals: 1. work plan; 2. new prototype
New goal: 1. 2d; 2. team allocation (coding)

# data[].attributes.body
In the lecture, Lorna introduced group cooperation, including the importance of cooperation, what caused the conflict and how to resolve it. In my opinion, the most likely cause of conflict is lack of communication. When working together to complete the same project, everyone will have their own ideas. Take our group as an example. When we make UI prototypes, we always have different opinions on the choice of layout, colors and buttons. In order to unify our ideas, we need to analyze each idea and choose the most suitable one through discussion. In addition, a reasonable division of labor is also very important. Everyone should be assigned the task most suitable for him, and the amount of tasks should be similar. In the team, my personality allows me to complete the task as soon as possible after being assigned. In group meetings, I like to join the group discussion and encourage other members.

In the workshop, Zhijiang took us by renaming the .html file to a php file and creating a new file in the same folder. The header, footer and sidebar codes were retrieved from the html file and written into the new file. I learned how to apply the same navigation bar or some frames at the bottom of each page. Finally, through the demonstration, I learned how to use PHP to call the API. The screenshot is the result of my practice in class.

In contact, Alison arranged for us to freely enter other groups for user testing. In a project team searching for libraries, after completing user testing, I made my suggestions. For example, the back button is missing in some pages of the application, and some parts lack error-proofing functions. In addition, for our group, I also collected some useful information. For example, the Donate icon is not clear, the login function is added, the homepage is too long, there is a lack of proper navigation, and the search function should be inserted in the homepage. In the zoom meeting after class, we discussed these feedbacks and optimized our prototype. The group leader assigned us the task of the code part according to our ability. What I need to complete is the home page. So far I have completed the code for the static part of the homepage.

In the group meeting, we want to integrate our respective completed codes and deploy them to the zone (we change the .html to .php through the method in the workshop). But we also found some problems. For example, after the code was integrated, some style problems appeared in the navigation bar, which was different from what we browsed locally. In addition, in the PPT, we will show the prototype and completed web pages, hoping to get feedback from teachers and students to help us further improve our website.

Completed goals: 1. team allocation; 2. Homepage code (personal task)
New goal: 1. new PPT; 2. 2d

# data[].attributes.body
During the meeting, we wanted to show our ideas by completing low-fidelity models, so we made some wireframes. Through these wireframes, we analyzed the target audience of the project. Since the theme of the website is dogs that provide help for special groups of people, we have identified the target audience as the elderly and the disabled. In addition, in order to get some feedback, we made a workflow for the wireframe and designed some questions for user testing. According to user feedback, we can effectively find problems in the design.

# data[].attributes.headline
The Determinants and Impacts of Aesthetics in Users' First Interaction with Websites

# data[].attributes.subject
The Determinants and Impacts of Aesthetics in Users' First Interaction with Websites

# data[].attributes.body
Jiang (2016) stated that in website design, aesthetics is a key factor in the user's first impression of the website when the user first browses the website. And respectively describe their impact on the aesthetic design of the website from five aspects (unity, complexity, strength, novelty and interaction design). The first is unity design. According to the gestalt principle, when designing the UI, the designer should ensure that every part of the website can be connected in an orderly manner. In our project, we use the navigation bar to link each sub-page in an orderly manner through the symmetrical page layout and the test results of card sort. In order to achieve the visual balance of the website structure and the consistency of the elements (layouts, colors) in each page. Secondly, for complexity, due to the different cognitive abilities of different users, overly complex (diversified) pages will affect the user experience. The target audience of our website is the elderly, who may be confused when browsing complex pages, so the design will balance the diversity of the pages. Thirdly, through the color to affect the user's emotions. When designing each page, we hope to attract users through some warm pictures. Then comes the novel design. Novelty can affect the aesthetic preferences of the audience. More elderly people are in a state of being taken care of, and when they start short-term living alone, they will appear uncomfortable. Our website will provide these users with a platform for online adoption of pet dogs that can accompany them in their lives. We think that adoption through the website is a novel way. Finally, for interactivity, it can enhance the user's sense of use. However, most elderly people do not have the experience of frequently browsing websites or lack the ability to type. Therefore, in the design, we reduce the "input" operation, and select through the drop-down menu. According to the five factors described in the article, it can effectively help us design a website that is more in line with the aesthetics of the target audience.

Reference:

Jiang, Z., Wang, W., Tan, B. C. ., & Yu, J. (2016). The Determinants and Impacts of Aesthetics in Users' First Interaction with Websites. Journal of Management Information Systems, 33(1), 229–259. https://doi.org/10.1080/07421222.2016.1172443

# data[].attributes.body
In this week's lecture, Lorna clicked on the uqzone link of our group, but did not show any content. In the Zoom meeting after class, we have solved this problem by changing the directory where the webpage is stored.

In the workshop, Hannah and Zhijiang did not tell us some new content. I spent the time in class reading some literature about web design, such as "Symmetry and aesthetics in website design: It’s a man’s business". The author described in the article that different genders have different aesthetics for website layout design. In the subsequent design, if the target audience of the website is male, I can use symmetry to attract users according to the author's research. Finally, I asked Zhijiang some questions about Journal, and he put forward some suggestions for improvement of my Journal. In the subsequent Journal, I will reflect on the learning every week, and think about why and how to do it.

In contact, we showed the presentation again. Our group showed our current progress and some changes in the class. When applying for a dog, users need to fill in the deadline to describe the dog page to add more content. In the feedback, we also received some suggestions. For example, how to implement the barrier-free design, the homepage should add dogs and other function keys, and the problem of unreasonable buttons on the page for applying dogs. Based on these feedbacks, we discussed and added issues that need improvement to the plan.

Next, we will focus on the development of the back-end part and improve the problems that exist in the front-end.

# data[].attributes.headline
The impact of two different think-aloud instructions in a usability test: a case of just following orders?

# data[].attributes.subject
The impact of two different think-aloud instructions in a usability test: a case of just following orders?

# data[].attributes.body
When we have completed the basic front-end part, we are ready to perform user testing on the site. User testing can help us find potential problems quickly and accurately. Think aloud, an effective usability testing method. Collect the thoughts and confusions generated by users in the process of use through instructions. Zhao (2014) proposed the impact of two different instructions on participants' performance in user tests. The author's experimental results can help us extract accurate usability problems when conducting user tests, and effectively avoid some "fake" problems through some methods. First, extracting usability problems from usability test data will be affected by the evaluator effect. In the test, the sample size can be increased, that is, the test is performed on multiple users. In addition, we can also add structure to the problem extraction process, such as using a breakdown list. Secondly, in the testing process, the problems encountered by users are subdivided, merged or split into different problems encountered due to the same failure. At the same time, we need to record the time it takes users to encounter problems. Divide the problem into different severity levels. Finally, we need to collect evidence of the failure based on the user's verbal statements during the test to determine whether the problem really exists. In the next high-fidelity prototype user test, we will take a test method of thinking aloud to test the usability of the website. When analyzing the data, the severity of the failure is divided into different levels, and a table is made, and based on this table of usability problems, we can determine the problem with the website.

Reference:

Zhao, T., McDonald, S., & Edwards, H. M. (2014). The impact of two different think-aloud instructions in a usability test: a case of just following orders? Behaviour & Information Technology, 33(2), 163–183. https://doi.org/10.1080/0144929X.2012.708786

# data[].attributes.headline
Optimising eHealth tools for older patients: Collaborative redesign of a hospital website

# data[].attributes.subject
Optimising eHealth tools for older patients: Collaborative redesign of a hospital website

# data[].attributes.body
Our team project is to provide short-term rental therapy dog ​​or companion dog service for those elderly in need. Although it does not match the project described in this article, the potential audience and design concept are closely related to our project. Nguyen (2019) redesigned and optimized the hospital website through the method of collaborative development with patients in the project. Applying this redesign process to the project can help us understand the real thoughts of users, the behavioral preferences of this group of people, and the previous problems of the website. The author divides the process into three stages. I will design a redesign process suitable for our project based on these three stages.
The first stage is to evaluate the current content and design of the website. Record the user's understanding of the content of the website after visiting the website through interviews. The collected information is compared with the actual content of the website to determine which information in the website needs to be adjusted and which is the content that users expect and needs to be added. Then there is the evaluation of the design. Record the user's first impression of the website by thinking aloud, and test whether the font, color, function and layout of the webpage can be understood and used correctly by the user. At this stage, we chose to use the walkthrough method to test users. According to user test results, for the content part of the website, we need to grant users the permission to comment on each dog, as well as more information for each dog. For the design part, we need to modify the font size and retrieval function.
The second stage is to develop a redesigned prototype website. In the same way as described in the article, we invited the elderly at home to participate in the process of redesigning the website. And based on the test results of the first stage, the prototype, optimized website content and layout design were greatly modified. During the new development process, the author mentioned that in order to make the website attract potential audiences and satisfy them. The contributions of web designers who specialize in designing digital interfaces for the elderly are needed. Therefore, we got the advice of those experts in zhihu.com and modified the colors, navigation bar and fonts in the website.
The third stage is usability testing and final adjustments to the redesigned website. At this stage, we decided to use the test method of thinking aloud to conduct a final usability test for users, and make final adjustments to the website through data analysis.
The design process is similar to the idea of ​​our team. Modifications based on the redesign process in the article can be applied to our projects. Inviting potential users to participate in the design process may complicate the development process, but it is easier to produce a viable and usable final product.

Reference:

Nguyen, M. H., Bol, N., van Weert, J. C. M., Loos, E. F., Tytgat, K. M. A. J., Geijsen, D., nth, E., Janse, M., & Smets, E. M. A. (2019). Optimising eHealth tools for older patients: Collaborative redesign of a hospital website. European Journal of Cancer Care, 28(1), e12882–n/a. https://doi.org/10.1111/ecc.12882

# data[].attributes.body
In this week’s workshop and contact, tutor gave us the time so that we have enough time for the group project. During the holiday, Jinyu and I realized the registration and login function in the project. When designing this part of the UI, I refer to a lot of websites. Since most of the potential users of our project are elderly people, when designing this function, I chose the form of automatic drop-down and pop-up windows, and I reduced some information during the registration process to avoid making users feel difficult to operate.
In the group meeting, because I couldn't connect to uqzone, Ting helped me import the database and the code for the login and registration part into the project. After that, we completed part of the final report together. I found some problems during the meeting. We have no plans to design final user tests. Therefore, I raised my question. After the discussion, we decided to use the think aloud method to invite some elderly people living alone to participate in the user test. And based on the feedback to analyze the data and make the final modification.
At present, we have basically completed the code part of the project. In this process, I learned a lot of useful knowledge. First, the importance of teamwork. In the process of teamwork, the team leader assigned tasks that we were good at, which accelerated the progress of the project to a great extent. Secondly, brainstorm. When designing the UI and functions, each member of the group provided their own ideas. Finally, there is the method of user testing. I realized the importance of user testing and feedback to the project. After reading the literature, I learned that in some projects, participatory design methods can make the results more in line with user expectations. In addition, as designers or developers, we should pay attention to the feedback we get, and select those valuable feedbacks to improve the project based on the feedback. This allows us to understand the real needs and thoughts of users.

# data[].attributes.body
In this week's lecture, Lorna mainly explained to us how to ensure academic integrity and portfolio. After learning how to complete my personal portfolio, I decided to divide my work into several parts. The first is a personal profile. I will summarize my major, interests and skills. After that, our group project will be displayed. In this section I will show my personal contribution and how the project was completed. Finally, I will show my personal reflection (about the course).

After determining the layout of the entire portfolio, I used this week's workshop to begin UI design. I drew a wireframe on the draft paper. My plan is to always hover the navigation bar at the top of the page so that users can jump to any part through it. Regarding pictures and text, I will arrange them on the page according to the principle of symmetry. In terms of background color, I will choose blue-green that has a protective effect on human eyes. In addition, in search of inspiration, when I checked the work of previous students in the blackboard, I found a design that I really like (https://deco7180-e2a6bc48.uqcloud.net/portfolioStudentExamples/AnastasiaLaczko/).

In the contact, team leader Dongqi asked us to talk about the tasks we completed, and arranged for us to write a final report together in class.

# data[].attributes.body
This week, our team completed the poster design together and conducted tradeshow rehearsals. During the meeting, the task assigned by the team leader Dongqi to me was to complete the presentation with Jinyu in the tradeshow. The main part I am responsible for is the backgroud, target audience and purpose of the project. In order to ensure that it can be completed within the specified time, I timed in the breakout room and completed the rehearsal. Below I will record the main content that I have shown. Nowadays, there are more and more elderly people living alone or suffering from mental illness. They need some company. In order to solve this problem, we designed and developed a website for short-term adoption of therapy dogs. Users can choose the period of adoption according to their own needs, and then employees will deliver the dog to their home.

After finishing the rehearsal, in order to meet the brief, we need to make a reference for our products. In this project, my main task is the homepage of the website. The code I used on the homepage is what I learned in Deco7140 before, mainly composed of Html and Css. And some icons and background images are searched from google image. I will put their source at the bottom of the page (footer).

So far, our projects have all been completed and we are fully prepared for the tradeshow. In the tradeshow, I will try to collect everyone's feedback in order to complete the final report with my teammates.

# data[].attributes.body
Before the start of this week's tradeshow, we made full preparations for it, including posters, PPT and twice rehearsals. In addition, we also selected a uniform and interesting avatar and a virtual background to promote our project.

After showing it to the teacher team, we got some feedback. The first is advice on UI design. Compared to the text in the webpage, the font in the navigation bar is small. The overall look will give users a sense of imbalance. Secondly, when browsing the website, the teacher team found that if a user needs to apply for a dog, not only need to fill in the email address when registering, but also when applying. Repeated operations are unnecessary. In addition, some students from other groups also provided us with suggestions for improvement. For example, in the apply dog ​​page, the filter button and search box are difficult for users to find.

Overall, I think our tradeshow is a success. I am very happy when I see that many people are interested in our project. Whenever a visitor comes in, I will show them our poster and explain the background and purpose of our website. When I joined other groups to browse their products, I also reflected on the teacher's questions to their group. How does our website meet the needs of users? In my opinion, for developers and designers, relying on this issue in the early stages of design can make the user experience of the product better and at the same time attract more people. The screenshot is a display of other teams in the tradeshow (A display of a game similar to a gold miner.).

Finally, we completed the rest of the final report together in the contact on Wednesday. My only regret in this project is that no barrier-free design has been implemented. In my opinion, if we spend enough time to complete the barrier-free design, our website can be directly put on the market.