This blog will explain the reasoning behind any changes and decision made throughout the duration of this assignment. This blog will also explain if goals and objectives made in the developmental blog were met and will further explain the UI and UX of the website and means by which this information was gathered.
What is the purpose of my website?
I am passionate about web site development because I like turning the ideas that a draw and brainstorm into something that people can engage with and learn something from.
The purpose of my website is to inform users about the dangers and affects that social media can have on a person and additionally try to educate users on ways to minimize or stop social media’s effects on them. Lastly I would like my website to stimulate discussion about the issue for many other individuals who may have not even visited my website.
Company description –
We are “The Link”, a website that focuses on bringing to light the issues and impact that social media that have on young adults and to a larger extent the younger generation. Our goal is to educate users on what exactly social media is, how it has affected society and the younger generations and how you can be more aware of its impact on yourself and those you love.
Target Audience –
Ages 18 – 29
This age range was chosen as the primary target audience because, I believe that they would be able to better internalize, relate and reflect on the information that The Link shares with them. Although this is the case, we also expect that individuals outside this age range would also be likely to visit and as a result we would like to cater for that as well.
Website goal –
To inform users about the impacts of social media on young adults and the younger generation and to also stimulate discussion and awareness about this issue.
Website Overview –
- The Link website will include the following:
- Logo and website branding
- Home page/Index page with navigation
- Contact page with a form for users to subscribe to get more updates and info from The Link
- Content page on how social media has affected a whole generation
- The website includes the use of HTML, CSS, and JavaScript to create, style, and position interactive digital content, to produce functional prototypes
Will demonstrate the use of dynamic content creation using PHP and in a MySQL database in a functional prototype. - Will have code and media uploaded to a live web host
- Will be built from scratch.
- Usable on two devices (Computer and Mobile Phone)
Objectives –
We will educate users on what social media is, the different ways social media has affected young adults and how users can prevent social media from affecting them.
Additionally,
Our site will include a fully completed brand design throughout the website and the use of flexbox for users who adjust their web browsers which other sites may not have. We intent to have a website that makes it easy for users to consume our content.
QUESTIONS
3(a) Justify designs
The purpose of my website was to inform users about the effects of social media and give the user ways in which they can help themselves from social media and its effects. As this was the case I create a content page that highlighted all questions that users might ask about social media, and furthermore broke down one of the most used social media platforms used in our current times and explained how their UI is design to keep users hooked on their app.
Additionally, I also chose to talk about applications that are used most by young adults and the younger generation to give users more familiarity with the topic.
A logo and brand was established for the website
A homepage with a navigation bar and footer bar was created
A contact page for users to subscribe and get more updates from The Link was created
Content page was created with description of social media and its affects
The website was created with HTML, CSS and JavaScript
Utilized PHP and MySQL databases
Was built from scratch
Usable on Computer and mobile phone devices
I created my website this way because I wanted the user to view as much information that they wanted at their own pace. Additionally the vertical content design was also used because of the fact that most social media applications used this design and as a result of that, I knew that if I incorporated this design in my website, users would have an easier time adapting and navigating around the website. Furthermore, this is also the reason that I chose to design my nav bar in this specific way because most apps on mobile phones utilize this 3 dash and drop down nav menu. I wanted my user to feel at and home and relaxed and comfortable, so that they would be able to easily digest the content on display.
3(b) Evaluate UI and UX
The UI or User Interface is place where communication and interaction between human and computer meet. This can be in the form of screens, keyboards and operating systems. Furthermore, this can also include how a human interacts with websites and applications.
There are many different forms of UI such as Graphical UI (GUI) and Voice controlled Interfaces (VUI). A GUI are things like a computer desktop and VUI are things such as Siri or Alexa.
UX of User Experience refers to the experience a user has by interacting with the user interface and product overall. This term is also used when describing and undergoing user testing for applications and products. An example of this would be if the procedure to buy an item on an inline website is to long and complicated the user would have a bad UX.
The UX created by my website design was made to be simple and straightforward, because of the fact that most of the content was accessible vertically by scrolling or moving down the website, users would have faster access to information and as a result would have an easier time and better experience throughout the website. Furthermore, the use of images and videos allowed for an alternative method for users to obtain information.
Some of the good UI that I added on my website was the button at the homepage that allowed users to go to the content page. A button that allowed users to go back to the top of the page was also a good aspect of my UI. Furthermore, the colors and background images that I chose especially on the homepage and content page gave users more emersion into the website.
Although that was the case the website suffers because of the fact that there is a large absents of content , which caused the website to appear very empty and boring in certain parts. The website also needed a way to bring all of the elements closer together, because they lose a majority of its impact.
One thing that I could have done better was find ways to position the elements on the website so that their would be less white space. I also felt as though I could have found more interesting ways to show the information on the content page, because after viewing the home page, the content page seems less interesting and appealing.
Another issues was the lack of accessibility on other browsers and devices. Certain elements of the homepage on mobile devices and other browsers appeared to be too close together and difficult to read, which will resultingly cause users too switch websites and have a poor UX.
3(c) Explain methods of data collection
During the duration of the assignment before I created my designs, I did an online survey to find out general and specific questions regarding social media and individuals use and opinion of them. Furthermore, I also gathered some quantitative information on my topic to help when I had to write information, particularly in the content page.
These survey question allowed me to think about the best way to approach my website design in order to appeal to my target demographic.
Furthermore, formative feedback was given during classes and a presentation by lecturers and classmates which aided me in fixing errors and obstacles that I might have had or didn’t know I had. One example of this was feedback given after my presentation , where a classmate stated that I should add more figcaptions to my images. I also used a website called WAVE, to test my website’s accessibility and for any errors during the coding phase of my website.
Secondly a summative evaluation as user testing feedback was obtained after users were given tasks to completed and closing comments were asked afterwards, which greatly aided in hindsight, more understanding of how users see things compared to how I, the designer do and what I could do in the future better.
3(d) Assess based on feedback
As previously mentioned a user test was conducted after the completion of the website.
USABILITY TEST REPORT
Date of Report: [27/07/2022]
Date of Test: [27/07/2022]
Location of Test: [Trinidad, Cunupia]
Prepared for: [The Link user testers]
Prepared by: [Ephraim Castello]
Executive Summary
The goals of this test were to find out if users are satisfied and could operate the website properly without error to gain their chosen information. As this is the case this usability test, will be testing for satisfaction and effectiveness. Additionally this test will be done utilizing unmoderated testing, think out loud approach and retrospective probing. We asked users to complete specific tasks focused on testing these goals and objectives.
Methodology
Who have we tested?
Three participants were testing each of varying ages and background as shown below in the following:
Profession
| Participants 1 | Cataloger |
| Participants 2 | Childcare |
| Participants 3 | Construction worker |
Computer Device Usage
| 0 to 10 hrs. wk. | Participant 2, 3 |
| 11 to 25 hrs. wk. | |
| 26+ hrs. wk. | Participant 1 |
Age
| 20 – 27 | Participant 1 |
| 28 – 39 | Participant 2 |
| 40 – 55 | Participant 3 |
Gender
| Women | Participant 2 |
| Men | Participant 1, 3 |
What participants did
Participants were asked to complete a set of tasks focusing on specific sections of the application. After the completion of these tasks, they were then asked closing questions about of their experience.
What data we collected
100% of participants stated that the User interface was easy to understand.
100% of participants said that the design allowed for easier access to their desired information.
Major findings and recommendations
Issues:
- Dedicated webpage for contact us and subscription
- Nav bar may need to be more distinguished to facilitate other users.
- More content
- Fix footer menu icons
- Information is scattered about the webpage
- Too much scrolling
- All users liked the design, brand and color choices for the website
- Users said the design did not overwhelm them
- Grammatical errors
- Titles
- About us and Contact us pages where boring
Solutions:
- Possible redesign of home page to add more sections, with more content
- A revisit to the HTML and CSS will be needed to correct the footer menu.
- A possible resign of the website may be needed to get a more focused website with inventive ways of displaying content and information.
- Revisit of spelling and grammar throughout the website
- Fix titles
Scenario 1 – You want to find more information on the effects of social media, where would you go?
Percentage successful: 100%
| Findings | Recommendations |
| 3 participants successfully completed the task with ease | It was noticed that some users where using buttons that wasn’t expected to be used during this task and as a result a revisit of buttons and the content involving this tasks may need a revisit, with possibly more distinguishable text or imagery. |
Scenario 2 – You want to find out more about The Link and their creators, where do you go?
Percentage successful: 100%
| Findings | Recommendations |
| 2 participants successfully completed the task with ease 1 participant needed assistance or had severe difficulty in completing this task | A revisit of the Nav bar to be more visible for users Additional webpages More content on about us page |
Scenario 3 – You like the content that The Link offers and want to find a way where you could get more information and new from them, where do you go?
Percentage successful: 100%
| Findings | Recommendations |
| 2 participants successfully completed the task with ease 1 participant needed assistance or had severe difficulty in completing this task | More webpages |
Closing questions/ User impressions
| Questions | Responses |
| How was your experience? | User 1: Easy to use and the website had a nice flow . User 2: Interesting User 3: Good |
| How was the User interface/ app design? | User 1: The interface was easy to read and understand. User 2: easy to read and find information, clear buttons. User 3: Simple |
| What would you rate the user interface out of ten? | User 1: 7/10 website is too stretched out, benchmarking needed, too much scrolling and footer doesn’t show icons User 2: 10/10 User 3: 8/10 I would have liked some more directions as to where I could click on the Nav bar. |
| If you had to rate your satisfactory level out of ten after using this application, what would it be? | User 1: 8.5/10 More content and fixing grammatical errors would have been nice. User 2: 10/10 Good indications and instructions for information. User 3: 9/10 |
| Would you recommend this website to family or friends? | User 1: Yes, especially the younger age group User 2: Yes User 3: Yes, this would be a good way of informing people. |
Conclusion
After this usability test, some changes were made, bearing in mind the time constraints. The website that will be shown in this assignment will be the version after this usability test.
3(e) Evaluate work
The website brief asked for the creation of a website using CSS, HTML, JavaScript and MySQL databases, with four webpages. This website must have been usable on two devices and contain information about what social media is and its effects on young adults and the young generation and lastly ways in which it help against effects of social media.
I created a website that design and concept is based around the target demographic of young adults, with content that specifically talks about social media and its effects on the aforementioned demographic. I made four web pages, with one have content geared towards educating users about social media and another page that works together with MySQL and PHP in order to create a form for user to fill out to get further information and new from our website.
From the feedback gather from the user testing, it is clear that most users had a positive reaction to the overall design and feel of the website. The UI put in place, most notably the buttons, allowed users easy navigation around the website to get to their desired location. This was also one of my favorite parts of the website. Although this was the case, two users did not like the way some of the content was laid out and especially in the content or social.html page, users visibly did look pleased with the way things were presented. I think that I should have found a better way of showing my information and as one user mentioned during the retrospective probing after the testing – benchmark. I should have done more bench marking and gathered more information on how website layout their content. I felt since I would be designing, that it would be similar to my other assignments but the lack of knowledge and skills as it relates to coding hampered the amount of things I would have wanted to do.
Furthermore, one major aspect that I was not satisfied with was my website’s usability on mobile phones. I felt the most frustrated during the times in which I had to add the @media screen and change aspects and elements in the code to cater for its accessibility on mobile devices. I definitely felt as though I could have done better on this part of the assignment. Additionally after uploading to FileZilla, found my website looking completely different on other web browsers and I felt that this was one of the aspects of the assignment that I should have spent more time on.
EPHRAIM SAKUGA 