Project 2: Development + Testing
General instructions (Read before you continue):
- Released online in 30th Nov 2020
- Completion week: 18th Dec 2020
Learning outcomes for this assignment:
LO2 – Appraise, select, and implement appropriate data gathering techniques in order to interpret and analyse a user problem.
LO3 – Apply user interface design processes and to analyse and develop requirements and scenarios. LO4 – Create a range of prototypes from low fidelity parallel prototypes to high fidelity functional prototypes utilising relevant technologies.
LO5 – Plan user testing frameworks and guidelines.
LO6 – Evaluate, interpret, and present data to create a development plan.
Learning progression chart Tutor Marked Assessments (TMA)
|1||Project 1||Part A – Design + Prototype|
|2||Project 2||Part B – Development + Testing (30%) + Tutorials (10%)|
Through a series of three parts that build on each other, you will complete a design project in this course. The scope of this project is to design and build an application for a smart mobile device that meets user needs. What you produce MUST be accessible and useable for the purposes of assessment.
At this stage you have completed Parts A and B
- You have identified a project idea to develop from within the three concepts – Change, Glance or Time.
- You have completed a need-finding on the concept and have summarised user experience and usability needs for your project.
- You have completed creating a story board and a prototype for your design
- You have completed performing a heuristic evaluation for the prototype you constructed. In Part C, you will complete the following
What’s this for? A UX agency perspective
Design prototyping the framework is a very powerful tool, but it can also be a nightmare to implement and demonstrate to a client. Often they will approach it like they would a finished product, and expect every link, every tool and every function to work. If it did….we may as well just build the final product, and it can be hard to find the balance.
Always remember; a prototype is a mock up, it’s to test a solution. Prototypes can be incredibly comprehensive, or very basic – it depends on what you want to test. However, make sure it is clear – using comment bubbles, instructions or tool tips – what functionality you are trying to test.
DON’T tell a user how your application is supposed to work, of course….a good prototype will be intuitive. We have experienced “spot-the-click” with some users, who will simply move their mouse around until the pointer appears… bingo, a working link! Users will often work their way along a navigation bar in a prototype, clicking each button from one end to the other. Make sure that your application isn’t going to throw an error because you forgot to implement a holding page – make it feel real, even if it’s not! If you have an online store where only one product works for testing purposes, make sure that is clear to your user.
Generate a summary for the Heuristic Evaluation (HE) you have completed in Part B of Project 1. You should have at least 10 useful comments (positive or negative) about the interface.
The HE summary chart should contain the following information:
- Describe the problem or positive feature, using screenshots (based on the UI and US perspective)
- Identify the relevant usability heuristics (from Nielsen’s Ten Usability Heuristics)
- Estimate its severity (for problems, use cosmetic, minor, major, or catastrophic; for positive comments, just say good).
- Decision to change the design – State clear reasons, why and Why not.
Report Part 1: Create a summary chart based on the heuristic evaluation report you submitted in Project 1. Be thorough.
With the HE summary you have generated in (1), now refine your prototype and produce your refined prototype. Submit the original and refined prototypes for marking.
Note: You should submit both of your original prototype and your refined prototype to your marker for marking purposes.
Report Part 2: Write a paragraph (150 words approximately) justifying why you have finally settled down with this prototype model.
Create a comprehensive development plan for the build of your interactive prototype. This development plan will guide your work to completion.
- Write down all the different components of your prototype.
- Split and define the various parts of your application into various activities. This could be much similar to “Use Cases and Use Case diagrams”.
(Note: You may present them as individual activities or link them together based on how they work.)
Use a spreadsheet or something similar for your implementation plan. You are free to structure the plan as you like, but if you’d like some hints an example development plan is provided for your reference along with this assignment for a sample prototype at
Do not copy the contents, but you could use the template. Thoughtfully structure deadlines. From your development plan it should be clear exactly what needs to be done, and when it will be done.
When you have completed the development plan, you should have a solid feeling for your interface and be ready to move into development.
Your plan should also list one or two outside constraints. These could include deadlines or exam dates for other classes, work, travels, or anything that will be most important for you to account for over the next few weeks.
Report part 3: Present the Development plan to the marker.
Choose a suitable App developer framework for your project. With this developer framework, you are going to develop the skeleton or the wireframe (not necessarily the actual contents). The frame work is like a webpage template will all navigation working with / without the actual contents in it. The goal is to get a navigational skeleton up there that someone can click around and get a good feel of the application’s flow.
(Note: Make sure that if you have a button or icon, it links to something, whether it’s an implemented page or simply a holding page. This will prevent you being marked down for “broken links” in error!)
Report Part 4: Write a paragraph of the App developer application / framework you have chosen and why?
- Argue clearly why this application is considered suitable to implement your project.
- Ask yourself questions like “Is there an alternative?”
It is expected that your review is quite critical, as it influences the successful completion and efficient user interface in your app.
Develop a coherent interactive design front-end for the prototype you have developed.
What’s this for? A UX agency perspective
Start by thinking about what content would be included in the project, move on how that content would be organized, then the metaphorical context in which it will exist. Your UI design should flow from your storyboards, but should be more formalized with actual interface design ideas and things like navigation and orientation cues for the user.
Note: While are developing the framework, Remember! You will fill in the blanks and finish the details later. This is a minimal requirement for the building part of this assignment. You are encouraged to go beyond at this stage. You have your design. It’s time to implement, so make this look as professional and slick as you can; you want your users to get the feel of a real application.
Guiding Principles for UI Design:
- Evoke curiosity
- Keep things intuitive
- Create (moderate) challenge, which leads to user discovery and interest
- Create an engaging experience for the user
- Make it multimedia! – Do something substantively different from what could be accomplished in print, or with video or audio alone.
Questions to consider as you design:
- How is my metaphor carried out in the design?
- What is the grid and layout system I’m using to organize the information on screen?
- Are the buttons and other elements consistently placed on screen?
- Is their placement reasonably intuitive to the average user?
- Can I use an icon instead of/in addition to text?
- Am I presenting the content in a clear, accessible way?
- Am I presenting too much material at once? Not enough?
Your design should include:
- 1) Placement and basic appearance of buttons and other controls, and description of rollover and “click” behaviour,
- 2) Rough text and image placements and styles,
- 3) Mention of colours/patterns of text, background, etc., and any special treatments of images (e.g., sepia-tone photos, animated GIFs),
- 4) Description of any audio components (prompts, background music, interface sounds), 5) Discussion of digital video or other “advanced” features you may include.
The final completed product would be an “.apk” file which could load into an emulator or to a mobile phone device for testing. Development methodology (Coding, App Inventor or Framework) does not really matter, as long as you are able to generate the “.apk” file.
Report Part 5: After completing the prototype skeleton, test run the source file either using an emulator or in your phone. Take snapshots or a short video of how the navigation works (the video should be less than 3 minutes) with suitable narration. Submit the video file to Moodle.
Next, develop a user test plan. Things that you will want to think about:
- What are you testing?
- What do you want to learn? What concerns, questions, and goals is the test focusing on?
- Where/when will the test take place (Test environment)?
- What tasks will you ask the user to perform that will help answer your questions?
- How will your participants share their feedback? (Think aloud, questionnaire/survey, post-test interviews…)
- Have you obtained consent from the evaluators? Did you attach the consent forms with this report?
- Did you brief the tester about your application and what to be tested?
A sample User test plan is uploaded for your convenience in Moodle
Report Part 6: Write a short paragraph covering most of the questions above. Call it “User Test Plan”.
Two evaluators to conduct UI and UX tests on your .apk file. One could be you, and you may select another person to conduct the testing for you.
Follow these instructions carefully
- Provide and brief a clear and concise test plan to your evaluators.
- Provide a list of UI and UX features to be tested in a template.
- Once completed, have a debrief with your evaluator. This will help to compare the opinions of the two testers working on your application.
- Write down any reactions or thoughts that came up. You will most likely forget them, so it’s important to write them down right after the user test.
Report Part 7: Write a short paragraph covering most of the questions above. This will form the third part of your report. Call it “Test Plan Results”
Note: Now as the last step of your work, submit your .apk file for marking. Though the end product of any project is very essential and appreciated, if at this point, you feel you have really worked hard, but could not finally produce the .apk file , do not panic. This project is about how you managed the project from Parts A to C and not 100% dependent on the end product. Submit as much evidence of your work or even the partially completed work as much as possible to your marking advantage. This could be in the form of screenshots, short videos, notes, development strategies used, and so on.
How to submit online: Submit the following documents to Moodle
- Reports 1- 7 created for Project 2 – Implementation + Testing
- Developed application
Marking Scheme – Project 2
This is only a guideline. Please refer to the project sheet to understand the deliverables expected by the marker.
|Name and ID number :|
|Marking Criteria||Max. points||Points obtained|
|Part 1||Heuristic Evaluation Summary Positive and negative comments on the UI and UX of the design. Heuristics rule identified Severity of the issue identified Reasons for change||10|
|Part 2||Refine your prototype Two prototypes (old and new) submitted Refinements are explained in the report Features in the new model explained Markers judgement in producing an effective prototype||15|
|Part 3||Development plan Development plan is relevant Individual activities explained. Development plan has timing that is realistic Constraints identified Markers judgement in producing an effective development plan||15|
|Part 4||Choice of App. Developer framework App developer choice Alternatives reviewed Pro’s and Con’s of the App developer explained||10|
|Part 5||UI Development Intuitive , functioning and engaging Balance between Text and Icons Consistent design Organisation of the screen layout – Grid, layout, Colours, Theme Functional errors||25|
|Part 6||User Test Plan||10|
|Part 7||UI and UX tests||15|
|Date of marking : Marker comments :|