# data[].attributes.body
I conducted a usability testing with 3 possible users. Due to COVID-19, I had to conduct this testing online with an interactive online prototype for the users to navigate through and give any feedback they might have. The prototype included the UX wireframes with minimal UI design applied. I also asked them 2 questions to answer and think about while using the app.

1. Would you benefit from having a filter-function where you can filter through different events hosted by societies?
2. Would you find an overall search-function across the app useful?

I created an excel sheet with the replies from the users, including a column for general feedback comments. The 3 students interviewed were all 2nd year students, but all study different courses which gives for a more accurate respons than if I were to only ask EDA students - as they might be "overly critical".

# data[].attributes.body
For the next page, I wanted to create an information page displaying each part of information. First I made a search bar which would filter out different search options within the array of text. This would be processed within both the data service file (generated by ionic) and the ts file inside of the page. In future, I would like to add different pages to each title to actually provide the information to the user.

# data[].attributes.body
For the next part I wanted to experiment how we could implement different location methods to display the users location within the  app. My goal was to have a visible map shown to the user however I constantly ran into errors showcasing just text and at times making the whole project unresponsive. Instead I tried to make it track the users location,   which worked by accessing the geolocation ionic libraries. By pushing the latitude and longitude, this would show the users location.

# data[].attributes.body
For the chat inside the app,  I created a separate page, where the chatroom would be displayed.  The html page displayed the message and time  and the the option to send a message that would stick at the bottom. This is commonly seen in other applications like facebook messenger and whatsapp allowing easy access to the users input.  In the ts file, this would push through the message to the socket backend allowing the messages to be displayed in realtime to everyone currently connected to this port.  The scss file would be used to style these messages.
To test this, I was able to use 2 incognito windows connected to the ionic app, which would display these messages in both.
In the future, I would like to add a username option to allow each user to have their name displayed and to have the ability to store these messages within a database like firebase.

# data[].attributes.body
As part of being a social-study app, I wanted to implement a chat feature into the application. After researching multiple methods, I decided to try out using a "socket.IO"  a real time engine to show the live messages to whoever is in the chatroom.  By having a chatroom, this would mean the user would be able to access messages only  from it's specific location. This could be useful for conversations specifically designed for classmates and workmates.

This file shows how the socket works, first establishing variables to create the initial server. Upon connection,  it passes through the users name, message and disconnects upon exit. Finally we define the port where the port will connect to our ionic project. By stating a server.listen method, we are able to attach the chat to the localhost where ionic runs.

# data[].attributes.body
To get a better understanding of using ionic, I created a photo gallery a simpler part of the application. To create a new page, I used 'ionic g page' (creates a page within the angular routing module).  I then generated a photo service where the page would refer to in  order to access the specified systems camera. The code shows first the 'ionic modules' being accessed by the system,  with in this case by using a public method, the whole project is able to access the camera and the source information.  This isn't platform specific because it's using the Capacitor plugin supplied by ionic to open the devices camera.

Afterwards, I refereed to this in the 'page html',  to allow the access to the camera within the app.

Unfortunately,  my computer didn't have access to a webcam therefore I was unable to test this function of the app.

# data[].attributes.body
In order to use Ionic, you can use the system terminal to generate the ionic project. In order to run this project, the system requires node.js to be installed as an IDE in my case I used Microsoft Visual Code. By using 'ionic start', the user is brought to multiple options such as what they wish to call their app and the type of template they wished to follow.  I chose tabs since I wished to have a tab navigation system on the bottom of the application. Once created the project will be opened within the IDE.

# data[].attributes.body
With Christos feedback from my previous post in mind, I decided to remove the functionality of reading about mental health on the app. I needed to steer up the purpose of the app and make it clear what features we want to push and what is important. In my opinion, and with feedback from asking various, uninvolved, sources, the aspect of mental health is not really in line with the rest of the app. The app is very event-based, focusing on partaking in events and getting involved with student life, so I thought it would be more straight forward to exclude that particular feature. This opened up the opportunity to make the 'add event' feature more prominent and make for an improved user experience than before.

In the future, the feature of mental health (which is a functionality that would only serve as a purely non-interactive information screen with links to various other sources regarding the subject) could be added back in, as well as more features targeted towards students with disabilities, but for now I believe that it is in our best interest to narrow down the features of the app as much as possible to lay a solid foundation.

# data[].attributes.body
I had a 1-1 meeting with Christos to discuss the prototype I have designed. I asked him for feedback before I continue with user testing on the prototype, which I will carry out this week.

I have the possibility to have our actual target audience test the prototype remotely, but it is difficult to get ahold of people at the moment since it is in between term times. During the coming week I will test the prototype with some of my friends remotely. I will send them the prototype link and will ask them to explore the app and note down things they come across and thoughts they have. I will also give them a few questions to bear in mind as they navigate through the app. The friends I have chosen are university students from various degrees, in order to gain information from people with a less tech-based degree than mine. I also made sure to mention that the prototype is solely for user experience and usability testing at this point, .i.e no user interface design has been applied yet (such as specific fonts, colours etc.)

Following is the feedback I received from Christos;

- It is not clear if this is the view for users, or for society organisers. The interface appears to allow both viewing events, and also adding new events.

- One of the features that would be interesting to explore, is how people would prefer to search/filter results, whether they want to specify interests.

I feel that the screens you have produced does not allow participants to explore these issues and give you feedback.

- Another interesting concept is what people feel about following societies and get notified about their events or not. Does the interface you have allows exploring this?

# data[].attributes.body
Based on Christos feedback I tried a different approach to our map-screen, which includes events and event details.

# data[].attributes.body
Only have events on the map - not individual people

On the dashboard, 'profile' should be in bottom nav and change of icons

Only see count of people attending events, not names

Only be able to log in with kent ID and email, which calls for a new error message. One should also be able to verify their email in order to register - confirmation email to their kent email address. New screen required.

Tag events with keywords to add filtering, both on events dashboard and on event map.

Should be a calendar on the map, and not show location of individual people, remove the 'check in' feature

Map should be with calendar as well.

# data[].attributes.body
During the creation of our PowerPoint, I created another concept for an app icon or logo. I wanted to convey a welcoming design to our audience to show that it is an easy to use application and to show it's designed to make their life easier.

# data[].attributes.body
In this meeting, we spoke about the approach to designing the app such as the features we spoke on and where we should begin. The main point was to focus on incorporating fire base within the app such as making a log in system that directly communicates with this app. We also spoke about researching more into firebase to give a better example as to what we wish to achieve.

# data[].attributes.body
During this meeting, we spoke about how we could gain research for our project, and in terms of what questions to ask out audience. By receiving this feedback this ensures we are able to gain the right answers from our users to enhance our application.

# data[].attributes.body
During this meeting, we discussed the different ways in which we could create our application. He spoke about how we could achieve this using Ionic and Android Studio and spoke how using Ionic may be a more efficient method to creating an application.

# data[].attributes.body
Android Studio is a dedicated application for creating Android apps allowing developers to easily form their own app for this platform. It features its own emulator allowing the user to test their own app using a virtual environment based on Google's own phone.

Android makes use of Java as it's official language. This means those who have experience within Java, can pick up and learn its tools as well as preview this within real time. It also has a drag and drop interface, to simply add new widgets and adjust the design of their app.

Each project contains three main elements: manifests, java and res. Manifests define all the structure of the application and metadata like the version code and install location for an app. The java is where all the Java source code is sored whereas the res contains all the non-code resources like xml layouts, UI strings and bitmap images.

# data[].attributes.body
Ionic Framework is an open-source UI toolkit designed to allow developers to create mobile and desktop apps using web technologies (HTML, CSS and JavaScript). By using Ionic, we can create an application that works on multiple platforms all with the same code base even using the web as a Progressive Web App. This means our app is more accessible from different users, more importantly giving us a larger audience for this study app.
Our previous module Digital Portfolio, saw us using HTML5 and CSS3 to a larger scale than before, learning how to place content to a set of guidelines in this case Bootstrap. Ionic would allow us to use what we learnt as part of that module and expand upon and being more experienced within web development.

# data[].attributes.body
Android makes use of certain themes in which we can make usage of for our app. This is called "Material Design", Google's goal to make designs efficiently and easy to make whilst implementing effective user-interface practices. By going by these adaptable guidelines, the developer(s) can ensure they can easily make usage of Android's UI widgets within their apps.

An example of a UI widget is the bottom navigation, which allows the developer to place key pages accessible from the bottom at all times. The benefit of this is from the user's perspective, they can reach the bottom of the screen making the app overall easier to navigate. Another is banners, which can be used to display a notification or problem within the app which developers can use to direct the user as to what they wish to do next. All of these widgets can instantly be switched to a dark theme, to make the text and content more readable and viewable depending on the user's lighting and environment.

# data[].attributes.body
I created our team logotype in Illustrator. Gathering inspiration from Dribbble and Google searches with the search keyword being "Igloo". We had agreed we wanted a minimalistic looking logotype that would work in multiple settings.

# data[].attributes.body
We have decided to name our app Dito, and I have begun doing some branding for a logotype. I gathered inspiration on Dribbble and created the following mockup in Illustrator

# data[].attributes.body
- Ionic app
- Have a Facebook check-in feature instead of a live-map location
- Capturing what the users want - even tho we can't include it in this project
- Small set of features than a lot, and do them well. End product will be more of a prototype than a launch-ready product
- Git, a way of sharing code with multiple devs. (!!!) Github, Bitbucket
- Firebase, database w libraries (iOS, android, web). User authentication
- SCRAM method

# data[].attributes.body
After meeting with Christos we have taken notes in order re-formulate the questionnaire, we also made the decision that it is better if we conduct the interviews face-to-face instead of through a mass-email. Face-to-face allows the interviewee to ask follow-up questions which makes for a more accurate representation of the interviewee's thoughts and opinions.

# data[].attributes.body
- We will share the form link to different groups
- Carry out research and form a google doc
- Compare different applications, take screenshots
- Gantt chart?? Respons from Christos