2013-14 Term 1 G2 TeamYOLO

From Interaction Design and Prototyping
Jump to: navigation, search
Home Assignments G1 G2 Technology


Assignment Deliverables Self Assessment Comparison to other Teams
A3. Low-fidelity Prototype Deliverables Self-evaluated on 12/09/2013 0830hrs

We feel that we've done awesome! We've selected a common yet challenging problem that many have attempted to solve, but have had varying levels of success. We're proud to present our take on it! Moreover, we believe that we've nailed the persona. Our persona is highly detailed, realistic and represents our target group very well. Our scenarios are also painted in a wide range of detailed forms that reflects what might actually be real-life scenarios (a restaurant visit, a drunken night, and having crushed receipts). We've also designed the flow diagram to match the scenarios as closely as possible. Our paper prototype was especially meticulously made with many, many illustrations of screens and animations. We've even put together a short video walkthrough that you can view here. Last but not least, our alternative designs were a great exercise in experimenting with what worked and what didn't. We settled on the final design not long afterwards! We've learnt a lot during Assignment 3 and we hope to carry out experiences forward for the rest of the Assignments!

Evaluated on 12/09/2013 1000hrs

Whats The Fox Says - LateLiao

The team shines in describing multiple, varied personas that clearly benefits from the proposed mobile app. We also love how the storyboards are creatively illustrated as comics with multiple endings! The alternative design is also interesting as it explores an app designed to function mainly with swipes, versus a more conventional button-driven app.

A4. Heuristic Evaluation (End of Iteration 1)

Deliverables Self-evaluated on 19/09/2013 0930hrs
This was an interesting exercise which allowed us to gain valuable feedback from would-be users. We have carefully compiled and condensed over 40 problems raised by evaluators into 24 problems. We have also identified a problem not found by the evaluators!

For the each problem identified, we have proposed viable solutions that will be able to solve even the most severe problems. While our evaluators have provided a myriad of solutions, we have cherry-picked the better ones, built upon them and also suggested alternatives of our own.

All in all, we strongly believe that we’ve completed this assignment in a very satisfactory manner and we’re proud of what we’ve done!

Evaluated on: 19/09/2013 1000hrs

The Eagles - SoCal

The team not only sorted their heuristic findings according to severity, but also went a step further to visualise the findings with the use of bar graphs and pie charts. We love these visualisations as they were very helpful in quickly allowing readers to grasp a sense of the situation!
A5. High-fidelity Prototype 1: A Skeleton and a Plan Deliverables Self-evaluated on 26/09/2013 0930hrs
Prototype - By using PhoneGap, we’ve built a navigational skeleton that runs natively on iOS! It is amazing that we accomplished this without a single line of Objective-C, the native language for iOS development, and leveraged instead on our existing knowledge on HTML, CSS and Javascript. We are excited to say that our experiment with PhoneGap, in producing an iOS App was a resounding success!

Scenario and Flow - Following the feedback from Assignment 3 and Assignment 4, we’ve further refined our three scenarios and concentrated them into two distinct ones. The flow has also been updated to reflect the improvements in usability that we have gathered from our heuristic evaluations previously.

Plan - We’ve taken the initiative to ensure that there is at least one buffer day each week, to preempt any unforeseen events. Each of the work items are also tagged to one person and given a limit of one to two days in order to maximise parallelism and efficiency.

Changes - We’ve documented each of our changes via extensive use of illustrations. Each entry clearly explain just one single change for maximum clarity!

Evaluated on: 26/09/2013 1130hrs

The Eagles - SoCal

We were impressed with the way that the team has illustrated their plan. In terms of clarity, it really helps to see a checklist that assigns a task to each team member. It is amazing that each "tick" is a link to the respective team member's page too!
A6. High-fidelity Prototype 2: Meat on the Bones Deliverables Self Evaluated on 10/10/2013 0930hrs
Prototype - During our development with Phonegap, there was a high learning curve in learning to use Javascript to build a fully dynamic app. Having a working Welcome Page, Select People, Name People and Select Bill Input UI was a great achievement!

Scenario and Flow - The Flow Diagram has been expanded to show the various page views for the app! We believe that we've kept the essence of a clear flow even as the complexity of the diagram has increased.

Plan - We're proud of ourselves for meeting our demanding schedule! After bumping into unforeseen issues with Phonegap's camera API, we've modified our plan accordingly.

Changes - When we're actually building the dynamic app, we realised that there were some design elements that didn't work so well. We've sought to reduce the number of taps when renaming people and also create a clearer view when inputting bill items manually.

Evaluated on: 10/10/2013 1130hrs

SixDotz - Prinsep Integrated Portal

The Team has put up a highly interactive iteration of their project in such a short time! While not fully completed, the dynamism at this stage gives a good feel of how the final product will turn out.
A7. High-fidelity Prototype 3: Ready for Testing Deliverables Self Evaluated on 17/10/2013 0930hrs
Prototype - Now that we're more familiar with Javascript, we tackled the tougher tasks of actually assigning a bill item to an individual. The learning curve increased again as we now had to replicate more complicated mobile interactions like multiple taps and mobile visual cues like subtle animations for specific elements.

Scenario and Flow - At this stage, we feel that we've nailed down the scenario and flow quite well. Thus, no changes were made.

Plan - We have modified our plan to include future internal bug testing and the upkeep of a bug metrics. Due to the increased interaction possible by our app, we have to ensure that the app is refined enough to be usable.

Changes - After building the bill item assignment pages, we realised that we ran out of space to display each person's cartoon face onscreen. As such, we have reduced the maximum number of people assignable down to six.

Evaluated on: 17/10/2013 1130hrs

D'PENZ - ING Bank's Procurement Workflow Management System

We like their exploration of the use of Twitter Bootstrap to create a responsive Java Web App! It feels intuitive to use and straightforward to navigate.
A8. Laboratory Test

(End of Iteration 2)

Deliverables Self Evaluated on 24/10/2013 1030hrs

Goals - Our goals are clear and straightforward. As this is a mobile app, a challenging goal we set was that users had to pick it up without any help from the facilitator. In real-life, when one downloads an app on his/her phone, the app has to be intuitive enough to stand on its own!

Tasks, Data, & Documents - We've made sure that the tasks fully covers the functionality of the app. We've also included a special task that challenges the user to use his/her phone's calculator to split the bill!

Results - One takeaway that really stood out was the task to split a given bill unevenly. Compared to our app, all participants have made mistakes when doing it manually using their phone's calculator and they took an additional 30 seconds up to nearly 2 minutes!

Changes - One simple change (dialog box upon pressing the "home" button) highly requested by the users turned out to be extremely helpful!

Evaluated on: 24/10/2013 1150hrs

Change-Makers - iCloset

We like their visual depiction of their test results! It is interesting that they have taken the effort to record the exact time taken by each user for each function of the app!
A9. Web Experiment 1: Setup Deliverables Self Evaluated on 31/10/2013 1200hrs

Changes to Prototype - Refining the app even further, we made the settings button much more legible and straightforward to the user!

Experiment Design - For this iteration, we've pushed ourselves to port a functional prototype of our mobile app into a web app! Hence, we will be able to collect more precious dependent variables such as: time taken by users to complete hte task, number of users who completed task successfully and number of errors made by users.

Experiment Implementation - We've made use of analytics tools like Google Analytics to enhance the collection of data. This automated data collection would greatly reduce the effort required on our part!

Evaluated on: 31/10/2013 1150hrs

FUN,The Mentals - MasterBed Alarm

The use of UsabilityHub to create the web experiment is a stroke of genius! It clearly allows testing the UI of a mobile app without the need to port it from mobile to web.
A10. Web Experiment 2: Analysis Deliverables Self Evaluated on 17/11/2013 1800hrs

Participants - We've managed to get 30 participants to take part in our experiments! All participants fell under our targeted audience age group, and were made up of a healthy mix of SMU, NUS and NTU students.

Results - With a sample size of 30, we were able to carry out statistical analyses via the T-test ,for both proposed hypotheses. The results were statistically significant and inspired us to make some important changes!

Conclusions and Changes - From our experiment, we conclude that there is always room for improvements! Our initial design of adding initials to each diner's face came from the fact that all of the faces were of the same colour. It did enhance the accuracy in the final bill splitting, but actually slowed users down. Our revised design, with multi-coloured faces and the option to skip the step of adding initials, provided the extra flexibility that allowed users to balance speed and accuracy according to the situation!

Evaluated on: 17/11/2013 1900hrs

Diversity - Find Me an Ad

The team presented their experiment results very convincingly and informatively, with the use of pie charts and heat maps to aid their explanations!

A11. Poster Session (End of Iteration 3)

Deliverables Self Evaluated on 17/11/2013 1830hrs

Video - With the tools available at GoAnimate.com, we're excited to say that we've cranked out a short and sweet video that lets us express the core idea of our app!

Poster - Our poster documented each and every step of our arduous journey in IDP! From the conception of our problem to the experiments conducted, the poster shows how our has successfully tackled the theme of "Change". Splitting bills will never be the same again!

Prototype - One of the final refinements made to our prototype was to improve the response time of every "tap" made on the app. With FastClick.js, we've managed to make the app feel as smooth and fluid as that of a native iOS app! We've also ensured that our source code is well-documented and available on Github for anyone to download and use!

Evaluated on: 17/11/2013 1900hrs

mAjors - Tasky

We love their catchy video! Using snazzy picture-in-picture and repetition in their message, makes their task scheduling app look highly attractive and useful!


Project Name Bill Splitter
Design Brief Change
Problem Eating out with a group of friends and family is always a fun and enjoyable thing to do. However, the headache usually comes when it is time to split the bills among everyone.
Solution The objective is to design an application which change the way users calculate their bills after every meal. Our solution aims to:
  • Make splitting bills as easy as snapping a photo of your bill and dragging each item to the person who ordered it.
  • Handle shared items, discounts, taxes and tips
  • See how much everyone owes with a detailed breakdown report
  • Send reminders to friends who haven’t paid up

G2 Deliverables

Iteration 1 A2 Observations
A3 Personas
Scenarios A3 A5
A3 Alternative Designs
A3 Paper Prototype
Flow Diagram A3 A5
A4 Heuristic Evaluation
Iteration 2 A5 Implementation Plan
A8 Lab Test
Iteration 3 A9 Web Experiment Setup
A10 Web Experiment Analysis
A11 Poster
A11 Video

High-fidelity Prototypes

Runnable 1 Name BillSplitter
Type Stand-Alone Application
Platform iOS on iPhone 5, jQuery 10.2, Google Chrome, Safari, Firefox
Toolkits/Frameworks Used PhoneGap, XCode, GitHub, Twitter Bootstrap, Google Analytics
Major Releases Iteration 2, Iteration 3
GitHub repository