Mobile Information Systems – Magnetic Stylus Android app
During the Mobile Informations Systems course of the M.Sc. Human-Computer Interaction program, various Android applications were built to explore the different aspects of mobile communication, data retrieval and visualisation.
For the final project our teams of two people were asked to remake a mobile application from an academic paper. The resulting application can be seen below and is using an neodymium magnet.
Created using Sketch 3 for Mac and Photoshop for the 3D card effect. UI demonstrating simple, flat and minimalistic designs. Idea originated when coming up with ideas for my Final Year Project. I had the idea to create a nice looking and useful to-do list app that utilised images. Useful for things like shopping lists (“which brand of washing up liquid did they ask me to get again?” *checks image in app*)
Below is another gallery for your viewing pleasure!
Team Size: 1 (me)
Type of Project: UI Design / UX Research for Education
Timeline: 8 months (Final Year of Bachelors thesis)
As part of my Final Year Project I created an Android application that could be used during the Pool Lifeguard Exams. The application can be used by the examiners for marking the students, and the participants can review life-saving techniques.
The key benefit from the design and development of this application would be the digitalisation of the laborious and inefficient manual examination process. Calculations and filtering help to expedite the process and with the addition of features like the double stopwatch, additional user benefit is added.
The following screenshots show the key screens and functionality of the application.
Approach:
Twice During development I involved close friends, colleagues and family in the testing of the application. I conducted several guided user tests to validate the user flow and usability of the interface.
The Android application was coded within the Eclipse IDE using the Java and XML programming languages. A MySQL database was created and separate PHP files allowed the database to communicate with the Android application. The information read by the Android application was parsed as JSON.
Final Notes:
I like to think that I made this project through the process of “patchwork programming” (or to a certain extent agile development). By following tutorials and videos I was able to build my very first *proper* Android application. The two most useful were MyBringBack and AndroidHive.
StackOverflow was also a very useful resource.
For this college module, we had to choose a topic that we wanted to explore. We were allowed to choose any topic. This topic would then be explored using either a ‘design game’ or ‘design probes’. Our team of two decided to do a design game on the software product development process.
This game was based loosely on the concept of Apples to Apples. The video below demonstrates how the game worked.
The sticky note solutions from the design game were all collected and analysed. After getting inspiration from these solutions, we had to come up with a final design solution. After brainstorming ideas and sketching a simple graphic user interface I ended up with this final design concept and prototype:
This video was made using Axure RP, Final Cut Pro X and Adobe Illustrator.
A brief description of how the interaction was prototyped:
The final result is DocuPal, a prototype of an application that can assist people in using documentation for software.
Below are some further examples of my work with Android Development. The Intermediate tutorial series at mybringback.com included information about communicating XAMPP, PHP and phpMyAdmin with a newly developed Android application.
Communicating between classes
Create a journal entry
Keeping a piece of text saved within the application
phpMyAdmin database with comments stored
After registering to the database or logging in, you could post a comment using the application.
Below are some mockup samples created during the placement. The first was a mockup for a mobile app interface. The second was a mockup of a restaurant’s unique page. Both were made in Axure RP. The mockup restaurant webpage was partially usable and was shared using Axure RP’s ‘Share’ feature. Other people could then try out a prototype of the webpage.
iPhone app mockup
Restaurant webpage mockup