Igloo by Ellen Kageman https://padlet.com/Ellen_Kageman/mj0qcax43j4r 2nd year project en-us 2020-01-24 14:42:56 UTC 2026-03-18 02:59:54 UTC hello@padlet.com https://padlet.net/icons/png/2744.png Creating logotype Ellen_Kageman https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/435968594 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. ]]> 2020-01-25 12:00:16 UTC https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/435968594 Meeting 4/2 Ellen_Kageman https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/440362493 - 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]]> 2020-02-04 16:00:27 UTC https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/440362493 User research and questionnaire Ellen_Kageman https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/441515884 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. ]]> 2020-02-06 13:40:59 UTC https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/441515884 Meeting with Christos 5/2 Ellen_Kageman https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/441516024 - 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]]> 2020-02-06 13:41:14 UTC https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/441516024 Team Logotype Ellen_Kageman https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/441517514 2020-02-06 13:42:54 UTC https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/441517514 UI Design Board Ellen_Kageman https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/441518426 2020-02-06 13:44:25 UTC https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/441518426 DITO - App branding Ellen_Kageman https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/441575821 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]]> 2020-02-06 14:56:57 UTC https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/441575821 Material Design kizzieukc https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/442961813 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.]]> 2020-02-10 12:21:59 UTC https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/442961813 Ionic Framework kizzieukc https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/443061854 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.  ]]> 2020-02-10 15:00:44 UTC https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/443061854 Android Studio kizzieukc https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/443223433 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. ]]> 2020-02-10 18:19:11 UTC https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/443223433 Christos Meeting #1 kizzieukc https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/454695669 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.]]> 2020-03-04 21:36:29 UTC https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/454695669 Christos Meeting #2 kizzieukc https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/454697413 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.]]> 2020-03-04 21:40:12 UTC https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/454697413 Christos Meeting #3 kizzieukc https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/454698741 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. ]]> 2020-03-04 21:42:53 UTC https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/454698741 Dito Icon Concept kizzieukc https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/454700706 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.]]> 2020-03-04 21:46:49 UTC https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/454700706 Design feedback from Christos meeting Ellen_Kageman https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/455131970 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.
]]> 2020-03-05 15:36:51 UTC https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/455131970 Wireframe map update Ellen_Kageman https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/455140837 Based on Christos feedback I tried a different approach to our map-screen, which includes events and event details. ]]> 2020-03-05 15:46:52 UTC https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/455140837 Ionic Setup kizzieukc https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/455675675 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.]]> 2020-03-06 11:51:31 UTC https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/455675675 Christos Design Feedback 31/3 Ellen_Kageman https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/494203825 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?
]]> 2020-04-06 08:06:23 UTC https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/494203825 UX Changes after Feedback Ellen_Kageman https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/496464686 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. ]]> 2020-04-07 10:16:19 UTC https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/496464686 Ionic: Photo Gallery #1 kizzieukc https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/530447283  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.]]> 2020-04-25 21:23:35 UTC https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/530447283 Ionic Chat (Socket Io)#2 kizzieukc https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/532123814 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.]]> 2020-04-27 01:27:07 UTC https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/532123814 Ionic Chat #3 kizzieukc https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/534705002 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.]]> 2020-04-27 20:51:59 UTC https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/534705002 Ionic Geolocation #4 kizzieukc https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/534849117 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. 

]]> 2020-04-27 22:33:40 UTC https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/534849117 Ionic Filter Search #5 kizzieukc https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/534885620 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.]]> 2020-04-27 23:06:05 UTC https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/534885620 Usability testing final prototype Ellen_Kageman https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/567810070 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".]]> 2020-05-12 15:07:34 UTC https://padlet.com/Ellen_Kageman/mj0qcax43j4r/wish/567810070