Our Journey

COLLECTION OF USERS' NEEDS

Clarification of Project boundaries
Primary Intentions	Minimum Viable Product	Key features, aspect & functions sought after	Priority and importance of product features	Security level and needs
Showcase students works	Working web application Images, links and video capabilities	Large amount of freedom in terms of exploration of unique ideas	Engagement more critical than appearance	None, static website

In this meeting with our clients, the team was able to better understand the expectations of the clients. Initially, the team had the mental model that project was to integrate all other teams into our webpage. However, this is clarified to be a misconception as links to their website with the connection between our project and theirs. Furthermore, the team were to anticipate the large amount of data collections, collaborations and logistic planning in order to gather information and videos needed for our webpage. For more details, do visit the meeting minutes below.

Zheng Xiang's Prototyping

Design Inspiration
The priorities when creating this prototype was, usability, readability then innovation. This prototype’s had to ensure that all feature aspect of the minimum viable product was completed, before moving on to innovation method. The navigation bar with a simple website of team page, was then enhanced with the use of carousel and a language change function was added for innovation.

How It Works
First is the landing page that shows the details of the course as well as the program details and what it entails. This is combined with a navigation bar at the top which allows for the range of language options. Furthermore, there is a home button which is enlarged to show users that they are currently in the landing page and can expand the find dropdown to find specific projects of their liking quickly that they have in mind. If the users are not looking for any specific project, they will be faced with the genres upon scrolling. This is a carousel style explorer that allows them to explore all project by random using a left right smart phone gesture and clicking to see more information. This view allows a short overview and preview of the project that gives users a teaser of the project shown. Lastly, if there is a project that users would like to see, they click on “FIND” at the top of the navigation bar which brings them to a dropdown and then into the project page. This will show them all details, a lengthier video and a more detailed explanation of what this project is about. Team members’ testimony and photos are there as well. Most importantly, there is a link to the project’s website to explore more on their page.

Feedback & Areas for Improvement
There is a lack of general overview in this prototype, this disabling users from fulling understanding the range of projects that are available. Furthermore, the find dropdown of teams make it so that only users with prior understanding of the project can scope into the exact project they are looking for. Captivating video short clip should be used to pulls audience interest instead of a stale landing page photo. As the prototype was targeted to fit all features and details in before the incorporation of innovative features, the view of this website is not as visually pleasing as its sister prototype that was created concurrently.

Jonathan's Prototyping

Design Inspiration
This prototype was conceptualised with a card game and a mystery draw in mind. The priorities when creating this prototype was fun, mystery and intrigue. This prototype had to ensure that all feature aspect of the minimum viable product was completed, before moving on to innovation method. The result was a mystery button with a simple website of team page, which was further enhanced with the use of carousel. This is to allow the innovation of interaction which was the card flipping as well as the vertical scrolling the website with a smartphone. As the prototype was targeted with fun and mystery as its main idea, before the incorporation of innovative features, the view of this website is not as informative and detailed as compared to its sister prototype that was created concurrently. The card when refreshed, will show an animation similar to the shuffling of poker cards and before it is then dealt in a playing card fashion throughout the website.

How It Works
The figure shows the card which displays the team, like a card game in that has the team members and the project details written both at the bottom of the image and at the back of the card. The card when refreshed, will show an animation similar to the shuffling of poker cards and before it is then dealt in a playing card fashion throughout the website. This will ensure a good animation and interaction that will keep the users on the screen, maintaining their attention. There is a button that when pressed, automatically refreshes and picks up a totally random card that details another project. This ensures the mystery and fun to picking a new card.

Feedback & Areas for Improvement
There is a lack of general overview in this prototype, this disables users from fully understanding the range of projects that are available. Furthermore, the find dropdown of teams make it so that only users with prior understanding of the project can scope and directly find a specific project. Lastly, the image should be more captivating by including a video short clip that pulls audience interest instead of a stale landing page photo.

Kahbee's Prototyping

Design Inspiration
Event venue was the theme of this prototype, with the main idea being centred around a map which users can pinpoint where they interest are and zoom into the project of their liking. This innovative method allows users both a broad overview and gamified experience of the exhibition.

How It Works
The users first arrive on a landing page that have navigation bar. The first tab, “all”, or upon scrolling down is a listed view of all projects categorised by genre. Upon clicking on a project of interest, they will be brought into the team page with the overview of the project. Alternatively, by clicking on booths, a venue of maps will show up, allowing users to navigate and search for the categories and teams of their interest, as if they are on the exhibition floor itself. Clicking on a team will bring them to the team back as well, which are linked to the respective project websites.

Feedback & Areas for Improvement
Great overview capabilities and innovative map interaction method. More team reflection details and content spaces need to be accounted for to allow for adequate content to be fit in.

Charles' Prototyping

Design Inspiration
This prototype was conceptualised with a compact look in mind. The priorities for it were the multitasking ability to see the suggestions and the videos in one page with the videos playing at the bottom and the ability to hover over the bottom of the screen for more information. This is used in preparation of the exhibition so that some users can look at the featured projects while other users can see other videos at the same time. This will lessen the need for more pages since the same page accommodates many users at the same time.

How It Works
The suggested videos and products show right off the bat and the auto playing videos scrolling at the bottom. The suggested items also can also scroll left and right. As you hover on the videos on the bottom it will pop up into a larger screen and the suggested items will disappear from the screen. once a video ends, it will scroll to the next video on the right and continue playing the next video. If a project catches their eye, the user can click onto the screen or scroll down to find more information on the project team.

Feedback & Areas for Improvement
The screen overload hampers cognitive thinking, making it hard for users to identify appealing ideas due to excessive options. Additionally, the lack of search functionality restricts access to other projects beyond featured ones, causing effort to find specific completed projects. Lastly, the landing page lacks captivation and uniqueness, failing to stand out attractively.

Daniel's Prototyping

Design Inspiration
This prototype was conceptualised with a Yearbook in mind. The priorities when creating this prototype was the outlook and theme. This prototype was created due to the projects being a form of memory we leave behind and acts like a yearbook in a sense that it should be able to be there after many years and we would all be able to remember the things we have done during this project.

How It Works
The result was a book theme with a simple animation of flipping pages which will show the cohort picture behind the cover, with the overall project details in the first page. The next page will be then the table of contents of the teams and their title. From there, we can navigate to whichever team we want. The team details including the videos will then open after clicking their respective team number or project title.

Feedback & Areas for Improvement
An easier method for navigation and directing to another team after accessing one team is required for navigation. This format limits the users to using this on a website only without being able to access this site on the mobile phone.

Shi Jie's Prototyping

Design Inspiration
This prototype was conceptualised with a barrel in mind. The priorities when creating this prototype was convenience, usability then readability. This prototype had to ensure the vertical scrolling and the ease of information load on the user. The end result was a vertical scroll that had the videos along with the users at the side. The users and teams follow the videos as it is scrolled. This is to allow the user easier reading and sufficient convenience when scrolling up and down.

How It Works
The image shows the teams and the videos concurrently as they scroll together up and down so it flows in tandem as the video plays and the user can be able to know the users who contributed to complete the project. For further information regarding the team or the project, users can then click into the video or the teams to then go to the page of the teams. This will allow the users to have a swift and efficient way of finding out if they want to know more about the team. Every time the website is refreshed, the projects will then be jumbled up again and users will have to go through a random number of projects to find their desired project. This will force the users to look through other projects along the way.

Feedback & Areas for Improvement
There is a lack of general overview in this prototype, disabling users from fully understanding the range of projects that are available. the lack of a navigation bar to enable the users to search or look for specific projects after they have accidentally refreshed or to look back at another project. Lastly, the landing page should be more captivating and attractive by including a video short clip that pulls audience interest instead of a stale landing page photo.

Jaden's Prototyping

Design Inspiration
This prototype was conceptualised with a film camera in mind. The priorities for this prototype were the smooth flow from top to bottom with a twist by combining it with a film reel presentation method for the teams. This prototype was created by prioritising the user interaction and accessibility before adding in a twist of fun to incorporate a kind of unique film reel.

How It Works
The result was a main page leaving a bit of the tip of the cohort page prompting users to scroll down before they reach the teams area that can be scrolled horizontally like they do in a film reel. The videos will start playing and the users can then further scroll down for a larger screen and see more details about that team. On the top of the screen the “Projects” button will bring the users to the place where the film reel turns with a random team and their project video playing. The “Meet the Teams” button will bring the user to our team page and the” Meet the Staff” button will bring the users to the team with all the professors inside.

Feedback & Areas for Improvement
There should be an easier method for navigation and directing to another team after accessing one team. This limits the users from being able to view a specific team or their project without knowing the project titles.

Exploration of Purple Cow

To accomplish this, the team started with the 5 senses which are the basis of all communications and interactions. After this, the team decided on the senses mixes which will limit the team based on hardware as well as the combination of senses which are not suitable for communication as shown. Concerns for hardware constraints, time limitations, and rate of content transfer was taken into account as well. The team narrowed the senses that are suitable for communication and fit our use case as the following category:

Product receives touch and transmit sound
After rapid ideation of this category, the team decided on text to speech function being the most suitable form of communication. This function would allow users which are visibly impaired to listen to the contents of the web-application.

Product receive sound and outputs sight
There are many products that fit this category, such as Google Home Assistant and iPhone’s Siri. Due to this, the team has collectively decided to not grow in this direction due to large prominent corporation’s variations that discredits as a purple cow product.

Product receives sight and transmit sight
The products that are in the current market in this category are xBox Kinect, Wii and image filters. This was an interesting category for the team to explore as there has not been many variations of this in web applications. One example was mediaPipe, a library that monitor and recognise users hand gestures, which was recommended to us by our client. This option has been thoroughly explored by the team.

Product received touch and outputs sight
Usually, a regular web application is classified in this category as touch, or a button or sensors are translated into visuals. However, the team explored the theme of a remote control as well as game joystick. Furthermore, the library SmartController, has also been recommended to the team. This allowed the team to be able to control the monitor of the web application with a smartphone as a remote control.

After through considerations of the following ideas. The team rejected “2. Product receives sound and outputs sight” due to lack of uniqueness. After which, the team intended to combine idea 1 & 3 as well as 1 & 4 together as idea 1, text to speech, can be a function that is built on top of the other ideas. This led us to the 2nd iteration of the prototype that we attained feedback on, based on the clients.

Decision on Better Prototypes

	Interim Prototype #1	Interim Prototype #2
Design Inspiration	This prototype’s method of interaction is through using a remote mobile device, crafted by drawing upon various previous prototypes and integrating their key features. Inspired by Netflix, the platform classifies projects into different genres or categories, ensuring efficient video viewing and related work exploration. The primary goal is to reduce users' cognitive load, enabling faster and more targeted searches. The design is intentionally minimalistic to create a user-friendly experience while providing essential information.	This method of interaction centres around MediaPipe which allows users to interact with the application by “gesture” at the camera using their hands as you would in a smart phone. This prototype was crafted by drawing upon other previous prototypes and integrating their key features. Inspired by the card drawing, the platform presents everything in a form of a card or a blackboard with posters. This prototype was finalised due weighing the constraints and understanding of the human mind. The constraints for example information load, whether the group photo should be put on the landing page, or if we should put all the videos together in a mosaic form.
How It Works	The main page prominently features a 30-second video to capture users' attention along with highlighting the website's usage and navigation methods. A "Teams" button in the top-right corner will serve as a dropdown menu, displaying team numbers and titles for easy access and navigation. Clicking on a specific number or title will redirect users to respective team pages. At the bottom of the main page, users will find categories that allow them to effortlessly reach their desired content. Hovering the mouse over a video will play the videos and scrolling along the same category will show other similar projects. Upon accessing a video, users can click on it to discover more information about the team. This action will redirect them to individual team pages, where the video will continue playing from the paused position, and on the right, team members' information will be showcased. Team members' descriptions will be placed below the video, and their testimonials will accompany their names. Additionally, a link to their website will be provided, facilitating access to more comprehensive information if desired. All mentioned navigation can be controlled through the Smart Controller as shown. Overall, this refined prototype aims to streamline user interaction, enhance navigation, and create an enjoyable experience for users exploring projects and related content.	The main page prominently features a 30-second video to capture users' attention along with the little bits of the other cards popping out into the main page. This will show to users that there are other places to move to be it left right or diagonally. This will give users the power of choice instead of having the users only move down as they would normally. At the top right the “Teams” button will serve as a dropdown menu. We have decided on using this to efficiently displaying team numbers and titles for easy access and navigation. The bottom left image shows the cohort picture that we have taken. this is put below as we opt for a horizontal scrolling function that has 2 panels, up and down. with the first panel being the 30 seconds preview video and the second panel being the cohort picture, we have made that the main page. The picture can be clicked on to zoom in and identify the personnel within. The top right image shows a random project video that will move along horizontally. This is where the users are able to identify the project title and various projects that have been done and users can scroll down to learn more about the project which brings them to the bottom right image. The link to their site will then be at the bottom of that.
Area of Improvement	The drawback of using this as an interaction method was the lessened amount of content that was available on the site. Due to video taking up a large amount of webpage real estate, the description will be compromised if there is no solution to show more project’s information.	For this method of interaction to be successful, many gestures have to be trained and successfully implemented. This is especially challenging with a strict shot timespan.
Ability to Fit Time frame	More Promising	Less promising
Ability to Fit Content	Less Content	More Content
Hardware Needed	Smartphone	Camera

Key difference in the two prototypes are the interaction methods. Through weighing the pros and cons of these iteration 2 prototypes, the team make a collective decision that Final Prototype 1’s design and interaction methods was the more suitable for the client's needs and decided to move forward with it. On top of this our team will have to find a way to maximise on the information available on the Final Prototype.

Team's Final Prototype

Design Inspiration
To allow for a better naviagtion experience, a map has been developed in accordance with the actual event venue to allow users to navigate the space through the use of the map. Furthermore, the navigation bar at the top will be expanded to link to the categories and project to the respective location viewed. Project's page are then fit with flippable cards to ensure that adequate content can be displayed.

How It Works
Similar to the explanation made in interim prototype 1 and 2, the refined prototype prominently features a 30-second video on the main page, capturing users' attention. The "Teams" button in the top-right corner provides easy navigation to team pages. Categories at the bottom allow effortless access to desired content. Hovering over a video plays it, and scrolling reveals similar projects. Users can click on a video to discover more information about the team, with testimonials below. The Smart Controller facilitates navigation throughout the website. The main page also features interactive cards popping out, offering users freedom of movement. A horizontal scrolling function showcases project videos and a cohort picture, which can be clicked to zoom in and identify personnel. Links to team websites are provided for more information. The difference is that the text to speech function has been taken out. Furthermore, the gallery, genre and projects have been brought to separate tabs as well. Most importantly, the Map tab allows uses to jump to project on the event venue as mentioned, thus being another means to navigation.

Feedback & Areas for Improvement
The team conducted a heuristic evaluation on 20 participants and cognitive walkthrough on 5 to gain insights. This feedback will allow the changes to be improved on.

Heuristic Evaluation Carried Out

A group of 20 potential users was gathered on separate occasions and asked to perform a heuristic evaluation of our working prototype after attaining consent for user research. Do keep in mind that the current working prototype that was tested could not be operated on iPhone. Thus, android devices were provided to them if they did not have any. Due to the lack of time, the majority of these participants are fellow course mates and thus potential users of this web applications as well. Furthermore, this group has undergone Human Computer Interactions course as well and thus is familiarized with heuristic evaluation. Therefore, do keep in mind that these factors may potentially skew the accuracy of the data above.

Tasks
The following 0 to 4 rating scale can be used to rate the severity of usability problems:
0 = I don't agree that this is a usability problem at all
1 = Cosmetic problem only: need not be fixed unless extra time is available on project
2 = Minor usability problem: fixing this should be given low priority
3 = Major usability problem: important to fix, so should be given high priority
4 = Usability catastrophe: imperative to fix this before product can be released

Complete for following 5 objectives to the best of your abilities and rate the 10 heuristic principles accordingly.
1. Utilize the QR to navigate to Project 1 using categories section
2. Utilize the QR to navigate to Project 3 using project tab
3. Utilized the keyboard and mouse to navigate to Project 8 TITLE using categories section
4. Utilize the keyboard and mouse to navigate to project 15 TITLE using project tab
5. Return to home page
6. Navigate to about us page and read Daniel Kiew’s testimonial

Heuristic Evaluation Target Group Picture

Heuristic Evaluation Result Table

At this time, the working prototype was only able to utilize the smart controller on its main landing page for each scan. Thus, explaining the lack of flexibility and efficiency of use. This affects user control and freedom, because they are unable to utilize their smartphones to fully control the navigation of the webpage as well. One participant even commented “Then, what was the point of using the smart controller? I might as well view the web application on my phone that is able to navigate to the projects page.” To fix these 2 pressing issues “Use control and Freedom” & “Frequency and Efficiency of use” that had the high severity rating, the team solely focused on hiding the project DIV into a single page. This will ensure that users will be able to navigate to all pages with the use of the SmartController. The cosmetic issue of navigation bar being off centered mentioned by 7 out of the 20 participants will be fixed as well.

Cognitive Walkthrough Carried Out

5 newly selected participants were instructed to voice their thoughts while utilising the application to complete the following task

Tasks and Results

Cognitive Walkthrough Target Group Picture

Tasks and Outcomes

Task 7 had the largest difference in shortest and average steps taken. Users were unsatisfied with the text to speech function, stating that it was redundant with reasoning being that visually impaired will likely not be able to find and utilise the text to speech function with the icon being a challenge for them to click in the first place.

After much discussion, the team decided that leveragsing on mastering the smart controller as a purple cow of integration was the right approach instead of investing more time into a text to speech function. The team then went on to make amendments on the final working prototype with all the lessons learned above in mind.

Amendments to Final Prototype

Due to the capabilities of Smart Controller, the team have made a design decision to fit all pages/tabs into a page in order to allow users to utilize the smart controller without having to reconnect with the QR every time they enter a project. As this change is a major overhaul, the tabs at the top will be directly linked to the sections on the pages, thus still allowing for easy navigation. Text to speech function has been removed from the page as the team did not want to cluster the page up with functions which will not be utilized and is redundant to users.

Pre-Deployment Product

With the feedback gathered, the team aimed to do better and focused on all the pointers that was attain from users. As seen, all tabs are now currently hosted on one page. The problem arose where it is an extremely long page of content. Thus, to make navigation easier, the top navigation bar is fixed to allow used to skip to the portion that is most relevant to them. The only exception is the about us page where it is hosted on another page for users to dive into the overview of the application and the journey page that details the entire creation of the application.

On How We Gathered Project's Requirements...

Team's Dailies

Fresh Start

Welcome to Glasgow!

This is to start the thread for Team 11 and also our first daily. Scheduled the initial meeting with Professor Jonathan today at 4pm. We are in the midst of confirming our list of questions as I am typing today’s daily. We hope to gain many new insights into the project and how to tackle it with an innovative solution better. We also learned about team dynamics, roles and the need to align mental models.

Prototyping

Brainstorming

Our team has begun designing the prototype for our solution. We have decided to brainstorm 1 idea each and draw it onto the drawing block. After which we will adopting the 10-for-10 model and change it to 7 ideas instead. We will come again to decide and vote which are the better ideas to implement. We have planned to begin working on our pitch once we have decided on a prototype.

Prototyping

Contract Agreement

Our team has taken the time to design 1 prototype per member and we have agreed to come together for a meeting to finalise the materials that we will be requesting from other members so that they have sufficient time to prepare the required materials. We have come together to agree on a contract that the team will follow and distributed the workload equally for this week’s pitch.

Prototyping

Finalising the Prototype

Today, the team met up and discuss to choose an ideal UI to develop from after taking a day to draw up our own prototypes. But struggle soon came as each member explained their thought process when drawing their prototypes and also explain the elements of their ideas. And it eventually became hard to choose a single ideal idea. So the team came to a compromise and decided to combine elements from each design that was unique pertaining to them to make the “final first prototype”, yes the irony in this is great. After combining some of the ideas together, the team was happy with the outcome of it and learnt that there is never a “best” idea, just an idea that the group has together. Afterwards, we discussed it more with our partner on what we have developed to gain more insight into how the final product would be so that we can refine it even more. After this, the team would focus more on exploring more on innovative interaction methods, especially their limitations over the weekends. #day4

Floor Planning

Exploration for Group Photo

Today the team met up to explore for a location to take the group photo. there are a few requirements that the location has to satisfy: Sufficient Space: The location should have enough room to accommodate 22 teams and the head of school comfortably without feeling cramped. Proper Lighting: Adequate natural or artificial lighting is crucial to ensure a well-lit and clear photo. Aesthetic Appeal: The location should be visually pleasing, with attractive backgrounds or scenery that complements the group. Accessibility: The location should be easily accessible to all group members, considering mobility and transportation. Safety: The chosen spot should be free from potential hazards. Cleanliness: The area should be clean and well-maintained to ensure a professional-looking photo. these are a few options that we have narrowed down based on the requirements

Prototype

Exploration for Group Photo

Today, the team had finished the integrative thinking template and was leaning towards the SmartController JS. During the consultation, we demonstrated the implementation of both interaction methods, SmartController JS and Mediapipe before finalising the prototype based on which interaction method would be better for user engagement. Cohort photo taking is finalised to be done on Friday, 28th July 2023 @ 1230 at the location outside the Glasgow Gift Shop. Our team has identified that Smart Controller JS is restricted on iphones but can be accessible through other android phones due to ecosystem challenges.

Coding

Getting into Action!

Our team has announced the relevant materials we require from every group to include in the main website. Also, the cohort photo details have been confirmed and the team will be present to ensure a smooth flow of events. We have split the workload with 3 working on the main website, 2 on our website, and 2 experimenting with SmartController JS. Our next update with the team would be on Friday before the consultation with Professor for our progress update.

Coding

Problems Faced and Conquered

Today, the team is working on the landing page and “Meet the Team” templates, which are crucial for presenting our project professionally. We also managed to successfully integrate the smart controller technology into the website, providing users with a more enhanced experience. However, we faced a challenge when it came to making the website fully responsive. Thanks to effective collaboration and extensive testing, we were able to overcome this obstacle and achieve a responsive design that works smoothly on all devices. One of the main decisions we had to make was choosing the type of controller to use, whether it should be a joystick or a touchscreen method. To make the best choice, we put ourselves in the shoes of our users and thought about how they would interact with the website, especially considering our Netflix-like layout. After careful consideration, we decided to emulate TV controls, such as Up/Down/Left/Right and Enter, as they fit the concept well. After implementing this controller concept in a prototype and trying it out, we confirmed that it indeed worked better for our site. This experience taught us a valuable lesson about user interaction in interactive applications. It’s essential to incorporate something familiar to users rather than asking them to learn a new way of navigating. By doing so, we can create a more user-friendly and intuitive experience, ensuring that our website is enjoyable for everyone.

Photo Taking

Unity as One

Today, the team organised the photo taking session and it was conducted smoothly with no hiccups. We took the group photo, as well, in preparation for the about us website. We also informed each other team that their deliverables to ensure the website will be up and running successfully with functionalities and unique ideas present. Below here is a peek at our group photo

Organising Coding

Getting There...

The team has decided on a work life balance of enjoying our weekends and working hard on weekdays to meet our soft deadlines as stated in the original contract. Over the weekend, the team went for the organised Edinburgh School Trips and had a great time. Today will be the grind to come up with a working prototype that can be used for consultation. Groups have started to submit their 10s trailer videos and group shots to us as well and it is a joy seeing all the effort put into it. As such, our team has promised to deliver a product worthy of the effort put into the respective works of our cohort.

Organising Coding

Coming to an End

The team went for a consultation session and did a progress update with Professor Jonathan. We had our queries answered and even did a small little demonstration of the website with Smart Controller JS implemented as an interaction method. However, it was brought up to Professor that once the user is redirected to a new page, the connection with the Smart Controller would be lost. There are 2 ways of this: Having the whole main website, including the cards, on the same page. Having the user scan the QR again once redirected to resume Smart Controller JS. The team balanced and discussed between the 2 options and felt that option 1 would be the better choice as option 2 would result in more trouble and effort by the user to interact with their smartphones. Professor Jonathan also gave feedback that there should be a hint notifying users that they can scan the QR to activate Smart Controller and navigate through the website with their mobile phones. The team will work to implement the feedback and get a working copy up as soon as possible. We have submitted our layout proposal for exhibition day to Professor and are looking at final changes to account for the emergency fire routes of ARC building. We aim to have the finalised layout before a walk-the-ground visit with Professor Jonathan and the building personnel of ARC. Here is the first version of the proposed layout!