auxfolio - Tumblr blog

[auxfolio]

Couch

Mobile app concept to help people reduce their sedentary behaviour. Master’s thesis. 2017.

Tools Used: Paper by 53 (iPad), Affinity Designer, Origami Studio, QDA Miner

Couch is a mobile app based on persuasive principles I designed for my Master’s thesis in Human-Computer Interaction. The app aims to help users reduce their sedentary behaviour and get them to stand up more. I wanted to see the influence of aesthetics on reported persuasion, and the success of persuasive principles on motivating people to stand up.

First, I used Paper by 53 app on iPad to sketch the character as well as the app’s UI. I then transferred those to a computer to digitize and finalize both sketches.

I tested 4 variants; 2 for control group and 2 for persuasive group, each with a high and low aesthetics variant. 

The app uses notifications to remind users to stand up. The first stand up notification for persuasive group displays potato being happy, highlighting it is healthy for both the user and the character. 

When the user dismisses the stand up notification, the following screen features a sad potato. Since the user has refused to stand up, they have to face the consequences of this undesired behaviour.

The second stand up notification appears after a certain time. Since the user has ignored the request before, the situation is more severe. 

During the testing, I used observation, note taking, think-aloud protocol. I also recorded the study to code later on in order to understand how users reacted and how motivated they felt. Results showed that persuasive group participants were more motivated than the control group participants.

In addition, I used AttrakDiff survey to understand participants’ ratings of aesthetics, usability and overall attractiveness. Despite the changes made to aesthetics based on the literature, the ratings paticipants gave were mostly close to each other.

In conclusion, the results demonstrated that implementation of persuasive principles were successful. However, aesthetics did not affect the persuasiveness of the app. 

The published thesis is accessible through Carleton University: is.gd/ardaaydinthesis

[auxfolio]

Save the Kiwi

Mobile app concept to help people reduce food waste. Master’s class project. 2016.

Tools Used: Affinity Designer, Xara Designer Pro, UXPin, Adobe After Effects

Save the Kiwi is a mobile app for a class project during my Master’s in Human-Computer Interaction. The app aims to help people reduce their food waste, by helping them keep track of what they already have and consume them before they expire. It features a fridge section with details on food items as well as a profile to reflect how the user is doing so far.

When a food item is about to expire, the app gives a notification. Using persuasive principles, the user is encouraged to consume the food. The choice of the users affect how the app reacts, especially with the use of positive and negative reinforcement. 

As a team, we shared responsibilities of user interface design, prototyping as well as testing. The video below summarizes the features of the app.

Based on the user studies, we found that the users liked the app, and reported they would use the app often.

Moreover, we found that the persuasive principles we utilized helped users feel more motivated, and made them want to “save” the food and consume them, rather than wasting them. They were especially influenced by positive and negative reinforcement utilized in the profile screen.

The study was later turned into an academic paper and published in CHI 2017 Conference. You can access it on ACM Digital Library: is.gd/savethekiwi 

[auxfolio]

Personal Exercise

Workouts for gyms and independent trainers. 2015.

Tools Used: Paper by 53 (iPad), Sketch, Adobe Illustrator, Xara Designer Pro, Principle, Final Cut Pro Role: UI & UX Designer (Contract)

Personal Exercise is a system designed for gyms and sports centres, as well as independent personal fitness trainers. The system provides an interface on a kiosk display allowing members to access their personalized workout schedules, prepared by trainers, in addition to other exercises available in the system. The kiosks provide detailed information about the exercises along with instructions and videos, as well as personal progress for each user to keep track of their performance. 

In addition, web interface of the system lets trainers create custom workout programs, track the performance of their clients, and alter the intensity of the workouts accordingly. The clients can also use the website to access their data and workout schedule.

After the first couple meetings, I had several sketches for both the website and the kiosk to be discussed further. I wanted to have shapes and references to the logo of the project to create a harmonious design.

My contract began before the development team was established. I used that time to prepare a medium-fidelity prototype for the kiosk screen using Xara Designer Pro for usability testing.

Based on the feedback, we decided on the following design for the kiosk’s start page containing a section for gym members to sign in, if desired, while still allowing anyone to access all of the available programs and exercises.

Once the user signs in, the following screen is displayed with a vertical scroll.

Dashboard features performance details and stats for the user, and their program that can be displayed daily, weekly or monthly. It is possible to see details of each plan with a tap, listing included workouts and details.

In addition to the gym kiosks, the project also features websites for both clients and trainers. The login page is the same, and the interface is displayed accordingly. This part was more geared towards trainers to let them see their clients, get feedback and prepare personalized programs, as well as plans to be visible to everyone in the gym. For clients, the features were limited to displaying plan details, schedule and their performance.

Trainers can display details about each of their clients, and edit their plans and schedules based on their needs. Below are the two states of program display and icons that are displayed once ‘edit program’ is clicked. Each workout plan can also be customized for the client.

While editing a plan, many options are available, including details of each workout, set details, workout duration, and overall rests between workouts. An excerpt from the screen is provided below:

Overall, the interaction and flow of the screens are summarized below. I used it to communicate the details with the later-formed developer team.

EXTRA : Logo Design

I have designed the logo (can be seen on the first image of this post) of the system as well. Just for fun, I am adding a sketch from the process below:

[auxfolio]

Playtou

Online gaming website. 2013.

Tools Used: Xara Designer Pro Role: Visual Designer (Contract)

Playtou is an online gaming website that is based on game tournaments (such as chess, checkers, etc.). Players can join the tournaments (free or paid) and compete with each other. The website also features team building and messaging with other players. I was responsible for the visual design of the project including the website, graphics for the games and the logo.

Before I began, they were testing the website concept and backend details using a generic template.

After I joined the team, we started exploring ideas on possible layouts. The company did not want any usability testing, hence I could only use my prior knowledge in Human-Computer Interaction.

I tried to establish a visual language with shapes and colours to be used through every part of the website. The final design of the landing page, as well as the login popup and register page are shown below, with feedback on incorrect details or password strength, and hover status for the item 04 on the home page.

Below are the profile page, popup menus for the user, message menus, messages page and compose popup. In addition are the selected / hover status of most of the items.

Below is the in-game page for draughts, messaging and log pane on the right, as well as all possible icons for the game:

I have also designed the help page and its subcategories as templates:

After my contract ended, I thought of modernizing the design, and came up with the design below. Although this was never used and was for personal interest only, I wanted something not too different from the current design in terms of layout and elements, but visually more appealing and current.

[auxfolio]

E.C.E. Project

Simulation system dashboard and UI. 2015.

Tools Used: Balsamiq Mockups, Xara Designer Pro, Adobe Illustrator Role: UI & UX Designer, Researcher

ECE is a simulation system to train students about a specific type of endoscopic surgery in the field of neurosurgery. The interface utilizes two different input devices: mouse and the haptic arm. Mouse is used to control the GUI where the user can track their progress, and compare their performance with others. Haptic interface is used to control the 3D simulation of surgery. Haptic interface is used to provide force-feedback and simulate tissues precisely to help medical students gain experience easily without risking the life of the patient. 

Gamification theory is tested to observe its impact on learning, especially using points, medals and competition focused interface with rankings always displayed to users, to encourage them to retake the same “scenarios” with the intention of getting a better score each time. 

We explored several layouts and design ideas throughout, revising as needed based on the needs. I paid special attention to interactable items in the simulation being large enough as they were to be used with a pointer controlled by the haptic arm.

One of the final designs focused on stories (simulations made up of scenarios students are required to complete) and some ranking information among users. After several discussions, we decided to focus on the competition aspect, as well as the story itself, hence I modified the layout accordingly.

The developer team then used this design as well as additional screens for the simulation using Unity.

In addition, I designed a web client for the students and professors to keep track of the system elsewhere (out of haptic enabled environment for information display purposes).

Within the project, a research study also came up, where we explored GUIs with Haptic Interfaces, studying the use of the haptic interface to control the GUI to eliminate task switching and need of different input devices for the different tasks (using the simulation with the haptic arm and using the rest of the system). Our study was published in HCI International 2015 Conference. You can access the study at is.gd/hapticguis

[auxfolio]

NEURON

Patient tracking system. Bachelor’s project. 2014.

Tools Used: Xara Designer Pro

NEURON is a patient tracking system for the Intensive Care Unit of Neurosurgery Department in Gazi University Hospital in Ankara, Turkey, running on Android based tablet devices. This was my undergraduate senior project with my team, and we designed and developed this system based on requirements gathered. During the design and development process, focus points were distraction-free and simple user interface, responsive interaction and immediate feedback. From earlier stages till the very end, basic prototypes were used for usability testing along with other system performance tests to achieve the required efficiency of the target domain.

I designed the interface in a way that it would support any future expansion for additional tasks which might be required later on. We gathered feedback on the user interface from the beginning, as well, and made revisions as needed.

The system was to be only used by doctors at the unit by the time, to keep track of patients and fill relevant forms (about health conditions and symptoms) on the go rather than filling paper forms. 

This system was then installed in the unit, and has begun to be used by the surgeons after my graduation.