unit Learnings

• Atomic Design - A design system that seeks to direct the design of interfaces with explicit hierarchy. We explored it’s benefits of flexibility, scalability, and reusability weighed against the time consuming process of atomic design.

• Ethical Design - From privacy and accessibility to functionality, convenience and delight, the well of ethical design considerations got ever deeper as we progressed.

• Aesthetic Design - The functional aspects of aesthetic considerations outside of beauty. We learned such utilisation as branding communication to driving user behaviour with principles such as colour theory.

• Universal Design Principles - A broad topic, we reviewed select principles with more direct implications in UX such as principles of alignment, proximity, typography, and language.

• Organisational Values - While strong organisational values might be restrictive in that certain design strategies may be cast aside, those same limits lend clarity and signpost key decisions.

Assignments

1. The fist assignment was to create a 5 minute pitch to a potential client representing the principles and processes of our fictional design agency.

2. Our second assignment was to perform a retro on a sprint that had gone poorly and assess the key decisions both positive and negative that led to the final outcome.

3. Our last assignment was to ideate on what UX would look like in an “ethical sports betting app” that seeks to limit user betting, resulting in a pitch of our concept. This involved analysis of the “dark patterns” currently utilised in the sports betting industry as well as the existing control measures available.

Learnings

• Autoethnographic Research - We performed basic independant research, informed on how to collect data while attempting to avoid bias.

• Research Artefacts - Learning to generate research artefacts such as user flows, experience maps, journey maps, and personas.

• Ideation methods - Such as crazy 8’s and BDA’s (before, during, after) used to clear some of the fog in problem solving.

• Figma - Basic introduction to Figma wireframing and concepting.

Assignments

1. We first had to generate a user experience map relating to searching for a listing in the RMIT online library and correctly citing the resource. This was based on our own autoethnographic research.

2. We next had to ideate on possible UX solutions to the pain points in the experience map, and create a proposal to RMIT explaining the “goldilocks statement” and our ideation processes around these solutions.

3. Finally, we put together a basic prototype of our chosen solution in Figma and presented it along side a pitch utilising artefacts such as user flows to validate design choices.

Learnings

• Forms of Research - Quantitative and qualitative research styles and when/where they are valuable to discovery.

• Proposals - How to analyse a client proposal and determine viability, and how to construct a proposal in response to sell your services to a client (including when to push budget concerns).

• Research Best Practices - From survey construction and quantitative analytics (Hotjar), to user interview best practices such as appropriate, bias free question construction and language, interviewer demeanour, and clarification of answer interpretation.

• Data Collection - Collection of data in Miro and utilising affinity mapping to uncover significant themes.

• Responding to Failure - How to go back to the data when expected effect from implemented UX strategy fails. Looking through a broader lens at research outcomes and forming a new strategy from understanding what went wrong.

Assignments

1. Proposal Review - Provided with a client proposal and a proposal in response from our fictional agency, we were asked to review the appropriateness and viability of our proposal.

2. Research Findings Report - An internal report critiquing the research methodology implemented. We were provided with three videos of user interviews as well as Hotjar analytics such as heat maps and exit surveys. As well as this critique, we were to utilise the research data to provide recommendations in improving UX and addressing user churn.

3. Report After Failure - After initial research outcomes failed to address the client’s user churn, we were required to review the process so far and develop new recommendations. From failure to budget correctly for appropriate research scale, to failure to push back on client’s established market segmentation, a report providing reviewed advice was generated.

Learnings - BA

• Stakeholder Requirements - Prioritising requirements of various stakeholders relative to how critical they are to the minimum viable product (MVP).

• Process Mapping - Outlining the granular steps of the process in question and which stakeholders are currently responsible for each step.

• User Story Mapping - Mapping the user interaction with the process, and technical actions of the platform that meet these interactions. From release one (MVP) to later releases addressing lower priority requirements.

Assignments - BA

• BA Report - We were tasked with performing a business analysis for the integration of two-factor authentication at “Medisafe”, a fictional medical insurance company. Provided with stakeholder interviews and a brief, we gathered requirements and mapped the process and user story. Balancing and prioritising the stakeholder requirements, we mapped a future state process, validated by how high priority requirements were fulfilled. A report was written outlining this process in detail.

Learnings - UI Prototype

• Colour Contrast - Utilising contrast plugins in Figma to ensure colours used have appropriate levels of contrast for low-sighted users and screen readers.

• UI Stack - The alternate screen states that require design to indicate loading, errors, required user input, etc.

• Figma - Coming back to Figma with some more depth into the prototyping functionality and component organisation.

Assignment - UI prototype

• We were to create an appropriate UI design for a prototype of the 2FA system that was the focus of the business analysis. Provided with limited information of the client’s target demographic as well as the medical insurance offering they provide, we were to investigate the market and validate a tone to the design. We presented our design rationale in a slide deck along side our prototype.

Establishing the tone

Medisafe, our fictional medical insurance company has a target demographic of 18-30 year olds. With this in mind along with the serious nature of the service, a mood board was generated. The concept of new independence and growth were instilled into the mood board through indoor plants in share-housing that need care and attention to grow healthy, a calm representation of health and responsibility with which the target demographic can connect.

Elements of note

The design outcome utilises limited imagery to avoid clutter, employed only to set the tone of the UI on the home screen. Multiple avenues to login or account creation are offered through the home screen and account portal to allow for a streamlined beginning to the journey. Language remains direct in a majority of the prototype to maintain user clarity, only becoming characterful in less functional elements of the design. Text has been sized according to best practice for legibility and accessibility.

Buttons and icons

Buttons have been designed with the consideration of legibility and accessibility in mind. The primary button is wide to allow ease of interaction for varied range of user movement. Green is pulled from the palette to encourage interaction, relative to a grey inactive state. Icons are consistent with iconography users have pre-established use patterns, ensuring expected effects.

elements of note

Colour is paired back to maintain a minimal interface, encouraging calm. The steps of account creation are represented in a header graphic that orients the user in the process, maintaining the user’s sense of control. Positive feedback is provided in input fields with green ticks appearing on fill, and progress button activating in green. Onboarding is provided before initiating the 2FA process, ensuring understanding and expected effect is established before the task begins.

UI stack

In an example of a UI stack, we can see the stages of the OTP input screen as the user moves through the process. The button to progress is grey in the empty and partial state, implying the need for further user input to proceed. However, the level of progress required is included in the button, providing clarity to the user around what is required of them in the process. The time in which the OTP will be active is also made clear to the user repeatedly.

UI stack

To further encourage the user’s progress, the input fields are highlighted in green when filled. Visual affirmation is then provided again with the progress button returning to the active green state, and button text instructing the user to ”verify”. After a loading graphic ensures the user that their input is being processed, an error would appear on incorrect entry displayed in a red used sparingly in the design. However, the colour is used minimally to avoid user frustration and more gently alert the mistake.