css templates

© Copyright 2018 Tassilo Bouwman - All Rights Reserved

Layout Research

iOS App for MSc Project

Situation

As an Apple Watch user I found myself searching ages for apps on the home screen of my watch. Apple used a hexagonal layout for arranging round icons and I was wondering if the layout makes icons harder to find.

Task

As part of my MSc project I wanted to know how hexagonal icon arrangement affects search performance. The study had to approximate the real-world (ecological validity) and needed to be completed within 12 weeks.

Tools & Technologies

Axure RP, Sketch, Git, Xcode, CloudKit, ResearchKit, TestFlight

UX Skills

Semi-structured Interviews, Personas, Wireframing, Apple Design Guidelines, Sketching, User Testing, Prototyping, Think-alouds

Action

  1. DATA GATHERING - I started by conducting semi-structured interviews with my target user: my class mates. To address specific needs of my class mates I created a persona based on the interview data.
  2. PLATFORM - I decided to develop an iOS app to conduct the study because I was most familiar with the Apple frameworks.
  3. DESIGN - I started by sketching the main screen. I used Apple's ResearchKit framework as a visual and technical design guideline. To make sure the app's processes are complete I created a user flow diagram.
  4. PROTOTYPE - I realised that I am not going to need a prototype of the entire app because most elements are predefined by ResearchKit. So I focused on creating a prototype of the main sections. I tested a few versions with my classmates using Think-alouds.
  5. IMPLEMENTATION - I then developed the app using Xcode. CloudKit was used to upload study results from participants to a database where I could access it. The icons were created using Sketch.
  6. TESTING USING TESTFLIGHT - To ensure that the app ran smoothly on different devices without crashes I distributed multiple beta versions of the app via TestFlight.
  7. APP STORE RELEASE - Finally, I prepared the app to release in the iOS App Store and it got accepted.
Mobirise
Hexagonal icon arrangement on the Apple Watch
Mobirise
Persona created using Axure RP
Mobirise
Prototype created in Sketch
Mobirise
Storyboards of the app in Xcode

Result

Layout Research is an iOS app that lets users participate in my MSc study on icon layouts. Users can give consent, perform icon search tasks and see their results in a chart.

The app can be downloaded on the App Store. I made the code publicly available on Github.

Mobirise
Main screens of the final app
Mobirise
Icons and other assets created in Sketch