DGTL11003 User Experience Design

Unit : DGTL11003 User Experience Design, 2019 Term 2
Weighting : 40%

Objectives :

This assessment item relates to unit learning outcomes 1, 2, 3, 4 and 5.

Task :

This assignment requires you to create a user persona, a navigation map and an interactive prototype for a mobile application for a fictitious business named Feathered Friends, which sells pet birds and pet supplies. You are also required to write a report that explains your design decisions

Design brief :

Feathered Friends is a fictitious company that sells pet birds organised into the following six categories: budgies, canaries, doves, finches, parrots and other birds. They also sell pet supplies for bird owners organised into the following four categories: food, cages, health, and other supplies. The company has three stores at the following locations: Feathered Friends - Brisbane, 59 Comptons Road, Underwood QLD 4119. Phone 07 3807 2667 Feathered Friends - Sydney, 173 Victoria Avenue, Chatswood NSW 2057. Phone 02 9410 1767 Feathered Friends Melbourne, 67 Moray Street, South Melbourne VIC 3205. Phone 038306 1625 Feathered Friends has given you a design brief to create an interactive prototype for a mobile application that promotes their range of pet birds and pet supplies. They do not intend to sell pet birds or pet supplies online, instead preferring to direct customers to their physical stores.

Content and structure :

The design brief includes the following requirements about the content and structure of the prototype: The prototype must include a Home page that allows users to quickly navigate to the app’s two main pages: Birds or Supplies The prototype must include a Birds page that lets users navigate to six pages representing six types of birds that are for sale: Budgies, Canaries, Doves, Finches, Parrots and Other birds. Each link should include an appropriate photo and a text label. The prototype must include a Budgies page that lets users navigate to five pages representing five types of budgies that are for sale: Opaline budgies, Spangle budgies, Yellowface budgies,Clearbody budgies and English budgies. Each link should include an appropriate photo and a text label. The prototype must include a page of information about one sample type of budgie that is for sale (e.g. Opaline budgies). The page should include an appropriate photo, a description and a price. The prototype must include a Supplies page that lets users navigate to four pages representing four types of pet supplies that are for sale: Food, Cages, Health and Other Supplies. Each link should include an appropriate photo and a text label. The prototype must include a Food page that lets users navigate to four pages representing four types of bird food supplies that are for sale: Seeds, Pellets, Soft Mix and Treats. Each link should include an appropriate photo and a text label. The prototype must include a Seeds page that lets users navigate to five pages representing five bird seed products that are for sale. Each link should include an appropriate photo and a text label. The prototype must include a page of detailed information for one sample bird seed product that is for sale (e.g. Harmony Wild Bird Seed Mix 2kg). The page should include an appropriate photo, a description and a price. The prototype must include a Contact page that presents the contact details for the three stores.

Appearance and behaviour

The design brief includes the following requirements about the appearance and behaviour of the prototype. The prototype must be created with Adobe XD using the iPhone X/XS screen size (375 × 812). The interface must be aesthetically appealing to the target audience. The appearance and behaviour of the interface must demonstrate consistency throughout The navigation system must be simple enough to be considered intuitive by potential customers. Information must be easily located and logically organised. Each page except the home page must display a bar at the bottom of the page containing three icons that link to the Birds, Supplies and Contact pages. Each page except the home page must have a bar at the top of the page containing the page title and a back button or icon. Clicking the back button or icon should display the previous page in the information hierarchy. The appearance of the prototype should demonstrate the appearance of the complete finished mobile app. The colour scheme, font choices, page layout, text, images, navigation controls, icons, and so on, should all be fully developed. Links between sample pages should work as intended. The prototype must not include any placeholder text such as the ‘lorem ipsum’ filler text that is generated by some design tools. All text and images in the prototype must be meaningful to give users a clear indication of what they would see in the finished mobile app. The prototype may include images obtained from any source. They do not need to be referenced or acknowledged in any way. All image files must be optimised to minimise the file size while preserving image quality. Refer to Study Guide Appendix B: Optimising Image File Sizes for details.

User persona

The first step in this assignment is to create a user persona of between 200 and 300 words for a typical user of the Feathered Friends mobile app. The persona should be prepared as a Microsoft Word document with a professional appearance named persona.docx. The persona should be a single A4 page that includes the following details for the fictitious character:
the user’s name; a photo of the user; a section entitled Background that describes in narrative form the user’s background, including details such as their age, gender, marital status, education, occupation, home environment, personal interests, and work environment; a section entitled Goals and Motivations that describes some of the user’s goals and motivations relating to the mobile app that is being developed (e.g. the user might place a high priority on seeing prices because of their tight budget); a section entitled Frustrations that describes some of the user’s frustrations relating to the mobile app that is being developed (e.g. the user might be frustrated by apps that present too many navigation options); a section entitled App Usage that describes the user’s level of competency using mobile apps and apps they commonly visit; supplementary photos that convey an impression of the user’s lifestyle, work and interests; and a personal quote from the user that reveals something about him or her. The persona may include images obtained from any source. They do not need to be referenced or acknowledged in any way. All images should be optimised to minimise the file sizes while preserving image quality. Refer to Study Guide Appendix B: Optimising Image File Sizes for details.
Once you have created the persona, use it to help you think about and focus on the kind of person you are designing the mobile app for.

Navigation map

The second step in this assignment is to create a navigation map that shows all of the pages in the prototype and how they will be linked to each other for navigation purposes. The navigation map should not attempt to show every page that will appear in the full finished mobile app. It should only depict the pages that will be included in the prototype.
Each page should be represented in the diagram by a box with the title of the page inside. Links between pages should be represented by lines.
Note that a hierarchy or tree structure is a very common way of organising information within a mobile app. Users generally find it easy to remain oriented in a hierarchical structure, knowing they can move up for more general information or down for more specific information
The navigation map may be created with the drawing tools in Microsoft Word. Alternatively, it may be created with a software application such as Adobe Illustrator or Adobe Photoshop and saved as an image file. It may also be drawn neatly with a pen, scanned, and saved as an image file. Regardless of how the diagram is created, the resulting image must be inserted into a single-page Microsoft Word document and saved with the file name navigation-map.docx.

Interactive prototype

The third step in this assignment is to create an interactive prototype of the Feathered Friends mobile app. The prototype should satisfy all of the requirements that are specified in the design brief. Although the prototype, by definition, will not be a finished product, it must clearly demonstrate the characteristics of the complete mobile app.

Before creating the prototype, consider preparing informal storyboards to guide your design work. Storyboards are sketches and notes that describe the appearance of each page. They can be as detailed or as rough as you like. Any storyboards that you prepare should not be submitted with your assignment.

The interactive prototype must be created with Adobe XD, a free software tool for designing and prototyping user experiences for web and mobile applications. Adobe XD is available in the on-campus digital media labs. It can also be freely downloaded for both Windows 10 and macOS from the Adobe website at www.adobe.com. To install and use Adobe XD, you need Windows 10 Creators Update 64-bit (version 1703 build 10.0.15063) or later, or macOS 10.12 or later. Refer to Study Guide Appendix A for details about how to use this software

Create a new empty folder for building your prototype. Download the free Adobe XD UI kit (Wires - Mobile.xd) from the unit website and save it in the development folder. You are encouraged to use this UI kit to build your prototype, but you may not use other UI kits.

Adobe XD lets you create your prototype using a range of screen sizes represented by artboards. Choose the iPhone X/XS artboard (375 × 812). Name the Adobe XD file feathered-friends.xd and save it within the development folder.

When you have finished building your prototype, prepare to share it with the marker by opening the file in Adobe XD, clicking the Share button, choosing Share for Review, and then choosing the option ‘Anyone with the link can view’. Click the Create Link button to create a link to the shared prototype. Test the link in a web browser, copy it to the clipboard and paste it into the Introduction section of your report.

Finally, save the folder containing your prototype as a zip file named prototype.zip. Minimise the file size by ensuring that you have not included any unnecessary files that were used during development such as Photoshop files or original photos. Optimising any images that appear in your prototype will ensure that it does not become excessively large. If the size of your zip file exceeds the upload limit that is set for this assignment, Moodle will not let you submit it.

Report

The fourth step in this assignment is to write a report that explains your design decisions. The report should be prepared as a Microsoft Word document with a professional appearance named report.docx. Use left-justified alignment for the text. Provide a heading for each section. Check your grammar and spelling before submitting the assignment. Ideally, have someone else proof-read your assignment.

The length of the report should be between 600 and 800 words. The word count is considered to be from the first word of the introduction to the last word of the conclusion. It includes in-text citations and direct quotations. It excludes any title page, abstract, table of contents, list of references or appendices. No abstract, table of contents or appendices are required for this report.

Report structure

The following outline explains how to structure your report. It lists the headings for each of the sections of your report, and the topics that should be discussed.

Title page

The title page should display the unit code, the unit name, the assignment number, the assignment name, the assignment due date, your student number, your name, and the word count. Microsoft Word has a feature for counting the number of words in a document.

Introduction

The introduction should briefly explain what you intend to present to the reader. Concisely describe the prototype that you created. Include a hypertext link to your shared online prototype. Do not include any conclusions in the introduction.

Discussion

This section should explain how the prototype satisfies the requirements given in the design brief and how it adheres to or doesn’t adhere to concepts and principles for this type of interactive interface as presented in the textbook. Discuss specific aspects of your design and justify your design decisions with references to supporting statements from the textbook. Discuss any problems that arose during the development of the prototype and how you handled those problems. Consider using sub-headings in this section to organise your arguments.

Conclusion

The conclusion should summarise the major outcomes of your design work and what you have learned from the experience. Do not introduce any new material in this section.

References

This section should provide a complete list of references to any works that are cited in your report, such as books, journals, periodicals, newspapers and websites. References must be provided whenever you quote, paraphrase or summarise the work of another author.

Referencing

The prescribed referencing system for this unit is the Harvard system, which is also known as the author-date system or the name-year system. An Abridged Guide to the Harvard Referencing Style can be downloaded from the following address:
www.cqu.edu.au There are two parts to the Harvard system of referencing: (1) citing the author, date and page numbers in the text or main body of your writing; and (2) referencing the source of the information in the reference list at the end of the assignment. Read the first part of the referencing guide carefully to ensure that you understand how to perform both of these steps correctly. The Academic Learning Centre (ALC) at CQUniversity can provide assistance with referencing. Please contact the ALC through the following website if you would like help:
www.cqu.edu.au

Writing style

The report may be written in either the first-person style or the third-person style. Writing in the first-person style means using personal pronouns in your writing (e.g. ‘I conducted this evaluation to ...’). In contrast, writing in the third-person style means removing personal pronouns from your writing and using alternatives (e.g. ‘The purpose of this evaluation was to ...’). Academic reports are commonly written in the third-person style because avoiding personal pronouns (such as I, me, mine, we, us, or our) creates the impression of an objective, unbiased point of view. However, some students might feel that approach is inappropriate for this report because they are providing a personal judgement on the basis of reasonable evidence. For that reason, the report may be written in either style. Similarly, it is acceptable to write the report in either the past tense or the present tense, but try to be consistent.

Screenshots and images

Screenshots and other images are not required in your report, but if you include them, please optimise the image files before inserting them into your Word document. Optimising an image file means minimising the file size while preserving the image quality. Study Guide Appendix B explains how to optimise image files, and it can be downloaded from the unit website. Optimising any images that appear in your report will ensure that your Word document does not become excessively large. If the size of your Word document exceeds the upload limit that is set for this assignment, Moodle will not let you submit it.

Submission

This assignment must be submitted electronically via the unit website. You must submit the following four files: a Microsoft Word file named persona.docx containing your user persona; a Microsoft Word file named navigation-map.docx containing your navigation map; a zip file named prototype.zip containing your Adobe XD file feathered-friends.xd, your UI kit, and any other essential files for your prototype; a Microsoft Word file named report.docx containing your report. Instructions for submitting assignments electronically are available on the unit website. Before you submit the assignment, check the assessment criteria to ensure that you have covered everything.

Help with creating a zip file

If you are a Windows user, you can create a zip file by right-clicking on the file(s) or folder(s) that you want to compress, selecting Send To > Compressed (Zipped) Folder from the pop-up menu, and finding the newly created zip file in the same directory. To rename the zip file, right-click it, choose Rename from the pop-up menu, and type the new name.
If you are a Mac user, you can create a zip file by right-clicking on the file(s) or folder(s) that you want to compress, selecting Compress Items from the pop-up menu, and finding the newly created zip file in the same directory. To rename the zip file, click the icon of the zip file, press the Enter key, and type the new name.

Plagarism

The work that you submit for this assignment must be your own. You must not take the words or ideas of others and attempt to pass them off as your own when completing this assignment. Refer to the University’s Plagarism Policy for more information. All files that are uploaded will be submitted to the originality checking service Turnitin.com.

Assessment criteria

The assignment will be assessed against the following criteria. Penalties will be applied for late submission and for failing to comply with the assignment’s requirements.

To Download Click Here > DGTL11003 User Experience Design Assignment-3.pdf