2013-14 Term 1 G2 The Eagles

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 Sept 18, 2013 2313
  • We devised a solution for the problem of wanting to find friend's to hang out with instantaneously. Furthermore, we took a step further and allowed user to "book" their friends' time and events that they want to do in advance.
  • The two different personas that we created are detailed. Since the personas jobs are vastly different, we are able to cater to the different categories.
  • The scenarios created are able to match the problem and solution. Also, we showed different situations where users can utilize the app.
  • The flow diagram matches the sceanrios.
  • Our paper prototype matches the flow diagram that we created
  • Added in our initial design for reference purposes.
Sept 18, 2013 2338


  • Team has a highly detailed description of personas. Readers are able to relate and understand the needs of the personas.
  • Two scenarios are created for different problems that users might want to solve with the app. We are able to gain insight on how the app works based on the scenario.
  • The team creates two different flow charts that enable us to see the two different functionalities easily. This is more understandable as compared to everything being put into one big flowchart.
  • Prototype matches the scenario.
  • Different designs were being considered before finalizing on one.

A4. Heuristic Evaluation (End of Iteration 1)

Deliverables Sept 18,2013 2339
  • Did a thorough walk through with the testers allowing them to play with our app as though it was real
  • Problems are described clearly and are listed out according to their severity allowing us to easily identify how major each problem is
  • Solutions are provided for all the problems
  • Heuristic evaluation results are clear with chart showcasing which problems we have the most, and which level of severity did most problems fall into
Sept 19, 2013 0929

Team YOLO - Bill Splitter

  • Clear analysis on the type of problems they have and the colors they used make the visualization of information easy
  • An image is added for the problem they are describing allowing readers to easily know the page where the problem occur
  • The team went a step ahead and suggested problems not found by evaluators
A5. High-fidelity Prototype 1: A Skeleton and a Plan Deliverables Oct 22,2013 1945
  • Updated the pages, added in a significant amount of code
  • Took note of the problems and applied them to the application
  • Researched on JQuery Mobile to find the best way to showcase the application
  • We could do better in terms of getting the scenarios better explained in relation with the application.
Oct 22,2013 1945

Whats The Fox Says - LateLiao

  • Had very clear scenarios and described them using visual comics, favoured simplicity over long paragraphs of text
  • Flow diagram was clear and concise
  • Screenshots are clear and though a little bare, had the gist of the application
A6. High-fidelity Prototype 2: Meat on the Bones Deliverables Oct 22, 2013 2011
  • Screenshots is provided for every view of the application. Furthermore, the different views we have matches almost the entire flow for the different scenarios that we have
  • As we have not changed the final deliverables, therefore, our scenarios and flow diagram still matches the plan
  • We have reflected changes made to coding schedule on the implementation plan, however, we didn't plan for any contingency plan. Instead, we chose to push the tasks back when we will not be able to finish the task in time, and this will be something we need to reflect on
  • As most of our changes are schedule based, therefore, our team has listed out the tasks as well as the date we shift the task to
  • Progress from coding is reflected in the progress page
Oct 22, 2013


  • Team Diversity has very informative screenshots showing the different pages a user can access. Also, within their screenshots, they provide information on what each tabs or buttons do, making it easier for users to visualize what they can do with the app due to the lack of a runnable.
  • The team also did a very good job with their implementation plan, clearly stating the date and reasons for changing.
  • Lastly, I really like the team's progress page as it clearly states what are the tasks that are completed as well as the changes that users should look out for. This makes it easier for the reader to realize the difference as well as not get shocked by the unexpected while using their app.
A7. High-fidelity Prototype 3: Ready for Testing Deliverables Oct 22, 2013

Prototype: Our team have included the screenshots of our application, the runnable, as well as the access to the codes on the Prototype page. As we coded the app according to our scenario, the screenshots matches our flow diagram.

Deliverables: There is no buffer time provided in our implementation plan making the project prone to failure if we keep on pushing the tasks back, and this is something we should stop doing. The scenarios and flow diagram matches the newest plan, however, there are still a couple of work items that we failed to match to their specific scenarios or changes.

Changes: Changes to the plan are listed out properly.

Progress: The progress of our tasks match the scenario we initially planned.

Oct 22, 2013 2001

FUN,The Mentals Masterbed

*This team provides a very detailed view of how their application should work. Rather than explaining their screenshots with words, they box up the activity that was engaged, and then points the arrow to its subsequent pages. This allow readers to understand the flow of their application even when they do not get to try it.
A8. Laboratory Test

(End of Iteration 2)

Deliverables Nov 13, 2013

Goals: Our team set out clear goals that allows us to test all the functionalities in our app and with this we are able to best test how usable our app is.

Tasks, Data & Documents: Our team created the informed consent form, study script, task instructions, questionnaire & observation forms that will be necessary for us to conduct a good user test. All our tasks will start at the home page as we believe that it will be the best benchmark for us to gauge how easy it is for users to access a certain page. We have conducted this test with four users.

Results: The data that we got are all put into a table format, and there is plan to display all the data in a chart format so that iit will be easy to read.

Changes: Our team took into consideration that comments that our testers gave us, and will be implementing one of them in the next iteration!

Oct 27, 2013 1817

The Fox Says - LateLiao

The team made an effort to creative an animated GIF file to simulate the application. Any stranger who comes across the wikipage will be able to have a better grasp of the look and feel of the application without trying. Unlike our screenshot, its definitely more effective.
A9. Web Experiment 1: Setup Deliverables Oct 22, 2013 2011

Changes to the prototype: Made minor adjustments, no wholesale changes to the application. Adding in new navigation links to further enhance usability. We felt making too many changes at this stage would be risky, and would focus on important but subtle changes.

Deliverables: The implementation plan was updated and there are 2 tests available for users to try out. We wanted the tests to be short and concise in its execution. A more complex test could have been done, but that would have required a lot more prepration.

Experiment Plan: It is a little short but we felt that it is more important to be clear and concise in your plan.

Walk-thru: This shows what the test would look like left being Test A and right being Test B, we felt that the walk-thru is sufficient in getting the information we need.

13 Nov 2013

Team 3 Carpe Diem

Plan was concise and made sense as it focused on the key functionality of booking a bus. Other changes to the application was well documented. The Test plan was simple and very reasonable, top marks.
A10. Web Experiment 2: Analysis Deliverables November 18, 2013 0859

Participants: For the web experiment, our team managed to recruit a total of 48 participants. As it is an A-B test, 24 of the participants took part in Test A, and 24 took part in Test B.

Results: With the survey results, our team is able to derive that our p-value is less than 0.01% at a confidence level of 99%. And therefore, we are able to generate a conclusive result based on that.

Conclusion & Changes: After the web experiment, our team realized that what we deem as pretty and user-friendly might not be the same for the rest. As shown through our survey results, most of the participants like the Design that is clearer instead. This thus shows the importance of the web experiment as it provides us with insight of what users really need.

General: The results of the web experiment are presented clearly and proper conclusion are drawn from it.

November 19, 2013 1019:

Diversity - Find me an Ad

The team provided results of their experiment as well as a good conclusion that tell readers what they are planning to implement. Furthermore, they did 3 different tests that are highly different, and with this, they are actually able to test the user's perspective of the entire application instead of one portion of it.

Also, the team provided limitations of their results which is refreshing as it provides us with a broader view on the accuracy of the results.

A11. Poster Session (End of Iteration 3)

Deliverables November 18, 2013 0906

Video: In our video, we did a little skit which shows two users using the phone to find friends for dinner. This address our team's app pain points of not being able to find friends easily. Furthermore, the video has a split screen where the other screen showcases how the app is used while the actors act out the skit, and this allows people to understand how is the system used.

Poster: Our final poster shows our team's final application as well as the different iterations that the team went through throughout the sem. It documents the changes that happened to the app, giving people an overview of hos it should be like.

Prototype:The prototype covers different scenarios and allows users to try out the flow that our team initially listed.

November 18, 2013:

TeamYOLO - Bill Splitter

TeamYOLO makes use of animation in their video to re-enact their scenario perfectly allowing people to understand their pain points as well as their solution. Furthermore, they incorporated the actual app design into the video giving viewers a brief outlook of how the actual app will be.

Their poster is extremely well done documenting the progress of their application. Furthermore, the colors used are easy on the eyes, making people want to look at it. There's no overload of content, providing readers with just what they need to know. Also, the design is super nice!

The Eagles

The Eagles The Eagles
Project Name SoCAL
Design Brief Change
Problem Matching the free time of people so that various activities could be done together, such as finding people to meet up at a cafe or studying together. Currently people would broadcast (e.g. on Facebook) one-way asking if they are free to meet-up.
Solution SoCAL intends to link the calendars of people together on a social-network platform to get people to show their free time to others. This allows group of friends to easily schedule a meeting time.

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 <Main App>
Type <Stand-alone application>
Platform <Android 4.0.3 on Samsung Galaxy SII>
Toolkits/Frameworks Used <Android SDK r22>
Major Releases Iteration 2, Iteration 3
GitHub repository
Runnable 2 Name <Admin App>
Type <Web application (Chrome)>
Platform <Microsoft Windows 7>
Toolkits/Frameworks Used <jQuery v1.10.2, jQueryUI v1.10.3>
Major Releases Iteration 2, Iteration 3
GitHub repository