Reference no: EM133886268

UX Design Tools and User Flows

Before beginning, download the Weekly UX Tasks 5 to 7 (UX Design) word document template from the Moodle Assessments section.
Revise week 5 content and complete the following in the downloaded document template as required. As this is an advanced unit, you are expected to solve exercise problems yourself, although the tutor is available for advice.

Part 1:
Part 1 exercises relate to learning and applying techniques from the software Pencil in relation to this week's content.
Pencil
The software Pencil (by Evolus) is used for creating, flowcharts, wireframes and mockups.
Pencil is open source with free unlimited use and can accomplish tasks to some degree that better known and expensive counterparts such as Adobe XD, Figma, and InVision are capable of.
Your assessments will require the use of Pencil, and will be exported to a standard image format (flowcharts and wireframes), and html format (interactive prototypes). Get professional assignment help service now!
Only Pencil will be taught in tutorial classes including how to export flowcharts, wireframes and interactive prototypes. Other software has much steeper learning curves and would take much longer to learn, and therefore you must NOT use them for assessments.

Evolus Pencil Familiarisation
Begin by starting the Pencil software.
Click > New Document or "Create a New Document" on the main canvas area.
Click > Settings
Make sure Show grid is checked. Set Grid Size to 10 pixels.
Make sure Snap objects to objects is checked.
This can assist you in the lining up and laying out of a balanced design, by one object lining up to another. Accuracy is important in design.
You may like to Snap objects to grid as well, that is up to you.
You may also like to alter the text scale suitable for your monitor.
Close the settings when done.
On the left-hand side of the window are a series of elements within themed tabs with which you can create flowcharts, wireframes and mock-ups.
Begin by selecting Common Shapes and dragging different objects onto the page and play with the handles to see what the different types of handles will do for you.
Click on the Properties tab on the right to expand all the properties for the selected object.
Try adding text to the shapes (double-click on an object) and alter the fonts, sizes, colours, and alignment.
You can double-click any object to edit the text later as well.

Drag in the following elements to your canvas:
Common Shapes > Bitmap
Basic Web Elements > Pane
Basic Web Elements > Heading 1
Basic Web Elements > HTML Texts
Desktop - Sketchy GUI > Image
Desktop - Prototype GUI > Button Primary
Desktop - Prototype GUI > Button Cancel
Desktop - Prototype GUI > Checkbox
Desktop - Prototype GUI > Radio Button
Desktop - Prototype GUI > Text Input

Right-click each object and see what options they have.
Look inside their "Action >" menus and try different options.
The Bitmap (will display "No Image" on your canvas) has the option to embed an image,
right-click, select Action > Load Embedded Image and select an image file.
View their properties and make changes.

Double-clicking objects allows you to add or modify text.
While adding text:
Pressing ENTER will finalise the text.
Pressing SHIFT+ENTER will add a new line of text.
Try these two options to see how they work.

Drag in the following elements to your canvas:
Flowchart > Process
Flowchart > Decision
Flowchart > Straight Connector
Common Shapes > Plain Text
Arrange the Process and Decision side-by-side. Double-click them to add text to them.
Connect the straight connector to nodes on the Process and Decision.
They are now connected, moving them also moves the connector.

Once you are familiar with Pencil operations, move to step b. (There is nothing to submit for step 1a).

Creating a Simple Form
Start a new Pencil file and Recreate this simple form BUT modify the properties and appearance to your own style (this is not related to your assignment scenario) - the example uses mostly default properties (except the Log In button colour). Make yours unique but with good usability!
Once complete, click > Export...
Set the output type to rasterized graphics (PNGs) and export the image, then add the image to your Weekly UX Tasks 5 to 7 document.

Part 2:
Crop any excess space (if any) around the sides of the image and resize the form to display it clearly in your document.

Part 2 exercises relate to your major assignment. Revise the requirements and your scenario, complete the following:
Your Scenario
Take a screenshot of your entire scenario and paste it into your document.
User Flow Charts
Use your knowledge of flow charts and processes from previous information technology units.
Revise week 5 content for an example of a User Flow that follows an example User Story.
You are going to create several user flow charts for your scenario product based on your user stories. This will help you to determine the number of interface screens you will need in your UX Design.

Requirements:
Create a user flow chart for each user story you created in tutorial 3.
It should contain all the steps it would take a user to complete that task.
Decision points and relationships between each step should be shown.
Use Plain Text labels as required for decisions and additional details.
If you create a step-by-step process in one flow chart, you can use that process as a single step in another flow chart (the week 5 example shows "Registration Process" as a single rectangle, but would then needs its own flow chart to explain the steps in that process.
Once complete, click > Export...
Set the output type to rasterized graphics (PNGs) and export the image, then add the image to your Weekly UX Tasks 5 to 7 document.
Crop any excess space (if any) around the sides of the image and resize the flowcharts to display each clearly in your document.