You will not be submitting your preliminary design work but we  recommend you use the following process

You will not be submitting your preliminary design work but we  recommend you use the following process.

Storyboard out how your proto persona will use your chosen feature (building on  the CW1 scenario if appropriate) to build empathy and refine the experience  from the user’s perspective. Focus on the goal you are helping the user achieve,  make sure you are clear where interaction with the app begins and why (what is  the Call to Action?) and where the user journey end. Iterate the journey to  refine the user experience. Capture this process, the questions that arise and

the changes you decide to make for your portfolio.

Now sketch how the user interacts with the app screen by screen to complete

the task represented by your user story. Based on your feature set, develop a

simple site map, and based on your chosen scenario, sketch the interactions and

screen layouts for your chosen journey. Sketch the user flow through the app as

a set of low fidelity hand drawn wireframes to communicate clearly how the user

interacts with the app to complete the task and achieve their goal. Keep ‘walking

through the journey’ of using the app step by step from the point of view of your

user and rapidly iterate and improve the user flow. Capture this process, the

questions that arise and the changes you decide to make for your portfolio.

Stage 3 Final Concept Design

Represent, as a mid-fidelity Figma prototype, the final screen layouts, and

interaction design from the start to the end of your refined user flow. This mock[1]up should communicate your final UI and interaction design including where

appropriate example content. Make sure you include the home page of the app

within your prototype even if the initial Call To Action in your journey is a

notification received on the home screen of the user’s phone.

Use your knowledge of UX laws and heuristics, and apply tools such as grids,

colour palette generators and libraries, to support decisions over spacing,

alignment, navigation, usability, and accessibility, in a way that visually directs

and motivates the user towards the intended outcome.

4

An intuitive navigation depends on good design as much as it does on

familiarity; in other words, users like things to be where they expect them to be

(see Jakob’s Law). As such, your design should reflect the distinct characteristics

expected in iOS, Android, or cross-platform design. For example:

• Visual metaphors

• Navigation

• Visual hierarchy

• Typography

• Icons, glyphs and buttons

• Use of colour and animations

Design Systems, even basic ones, allow UI designers to rapidly change any

aspect of a design, including adapting a UI to different contexts of use, all the

while collaborating with others. Employ this skill by:

• Adopting an Atomic Design approach using Figma’s components, variants

and instances

• Documenting your design elements ready for handoff (to developers)

• Including signposting where necessary (for interactions)

• Designing for responsive and adaptive (breakpoints)

Handoff (to developers) is the last step in the design stage, and the first in a

period of back-and-forth communication with the developers’ team. While you

are not expected to produce a handoff file or documentation, it is

important to work within that mindset, i.e., making sure that your prototype is

as close to finished as possible. This means that:

• It follows relevant Web Content Accessibility Guidelines (WCAG 2.0)

• It has been checked against Nielsen’s heuristic checklist for usability

• Sizes and proportions have been checked (no blurred pixels)

• Expected interactions are clear

• The device frame used matches the chosen OS

Create a second flow on your Figma board that communicates the underlying

design system to represent the atomic design of the app. You can call this

second flow “Style Guide” or “Design System”, as appropriate.

5

Coursework Two – Submission

Submission: The deadline for submission of CW2 is 1pm Friday, Semester One,

Week 14.

Submit your Figma prototype as a clickable web link cut and pasted into an A4

word document. Check before submitting that the link is clickable and works (no

password protections, please).

Make sure the Figma design board contains two flows

Flow 1 (App Name):

• The prototype itself

Flow 2 (Design System or Style Guide):

• Your concept statement including the feature set and experience design

principles from CW1. If you have changed this concept at all e.g. revised

the feature set, clearly but concisely describe what you have changed and

why. (This description of your concept will not be assessed but is needed

to understand your Figma prototype).

• The agile user story for your example user flow.

• Your basic design system.

Follow this naming convention for your files – Student ID-module code[1]coursework number (e.g. F234567-22DSP831-CW2) - and do not include

your name anywhere within the filename title or text of your submission.

Submit your word file electronically via LEARN.