The Ultimate Ux Design Guide

Ux THE ULTIMATE

User Experience Design Guide for your Website Design Thinking, Wireframing, and Design

Featuring industry professionals and expert tips.

Contents 4 Understanding User Experience (UX) Design 6 What makes a “good” UX Design? 8 Examples of “good” UX Design: 9 Designing your website’s UX 10

The UX Design Process

11 Step 1: Understanding your user 16 Step 2: Finding a solution 17 Step 3: Testing a solution 19 Fundamental UX Design Principles 22

UX Design Tool in Focus: Sketch

23

UX Design Instructors at Academy Xi

The Ultimate UX Design Guide for your Website | Academy Xi © 2018

2

Understanding User Experience Design What is User Experience Design (UX) and why do I need it for my website? Every time you interact or use a product, it’s an experience — and any experience you have with a product is the result of “good” or “poor” Design. UX design encompasses all points of a user’s interaction with a product or brand – how a user interacts with a mobile application, navigates a website, or feels about a product are all fundamental considerations within UX Design.

UX is the process of understanding and designing to solve problems to create satisfaction. Charbel Zeaiter, Co-founder Academy Xi.

The Ultimate UX Design Guide for your Website | Academy Xi © 2018

4

U

X Design is a user-centric process that prioritises the human experience above all elements. It takes into context who the user is and the circumstances in which a product will be used. The goal of UX Design goes beyond adding features or executing customer suggestions. Instead UX practitioners look to provide the best solution to the most number of users within the product’s target audience. UX Design considers all aspects of interaction within the lifespan of a user to create delightful experiences that drive customer loyalty. Good UX Design and practice is therefore essential for any business’ website. The right UX Design can bridge the gap between a business’ goals and objectives with the needs of its users. UX Design has the potential of increasing and retaining users, directly impacting a company’s bottom line. Therefore, a UX friendly website ensures a product or service is optimised to be useful, desirable, necessary, and reflective of your business’ goals. On the other hand poor UX Design, discourages user interaction and drives them to pursue a competitor.

The Ultimate UX Design Guide for your Website | Academy Xi © 2018

5

What Makes a “Good” UX Design? Exemplary UX Design meets the exact needs of the user, without fuss or bother… as well as possessing simplicity and elegance that produce products that are a joy to own and use. Don Norman, Co-Founder of Nielsen Norman Group

It’s clear that UX Design is integral to product creation and development. But what factors determine the quality of the user experience? Good UX is always rooted in data and research that guides a solid understanding of the user’s pain points and needs. Ultimately, good UX Design is not about the aesthetics of a website but is a design approach that is tailored for human use. It fills the gap between business goals and user needs. UX Design is contextual and rarely is there a one-size-fits-all approach. The value of a solution is dependent upon the context of a user’s problem. UX integrates elements that are:

Useful

Usable

Learnable

The Ultimate UX Design Guide for your Website | Academy Xi © 2018

Aesthetic

Emotional

6

Good design is actually a lot harder to notice than poor design, in part because good designs fit our needs so well that the design is invisible. Don Norman

In the design and development stage of your website, these questions will help determine the quality of your UX Design: • How useful is this website?

Does it fulfill a need? Does it provide innovative solutions? • How usable is this website?

Is it simple and easy to use? Is it designed in a way that is familiar and understandable? • How desirable is this website?

Are the visual aspects attractive to the user? • Is the information on your website discoverable?

Is the design navigable so that people find what the information they need? Is the Information Architecture (I.A) and the menu of the website logical and user-friendly for a first-time visitor? • How credible is the website?

Does the design encourage trust in the company or the product? • How valuable is this website?

Does it contribute to the company’s bottom line or mission? Does it improve customer satisfaction?

1

Peter Morville, President of Semantic Studios: Facets of User Experience

The Ultimate UX Design Guide for your Website | Academy Xi © 2018

7

Examples of “Good” UX Design: Airbnb

Robinhood

The Ultimate UX Design Guide for your Website | Academy Xi © 2018

8

Examples of “Good” UX Design: Slack

Gumtree

The Ultimate UX Design Guide for your Website | Academy Xi © 2018

9

Designing your website’s UX Whether it’s the ability to navigate a contact form or find pricing options, the usability and customer experience of a website is an integral part of the online delivery of a product or service. Customer experience relies on sophisticated knowledge of how customers perceive and interact with the world around them. It’s vital for a company and in one instance, 89% of consumers reportedly stopped doing business with a company after experiencing poor customer service2. UX Design principles take into account the look as well as the feel of a product and how a user interacts with the product or service through different touch points. UX Designers bridge the gap between aesthetically pleasing designs and the customers’ experience of those designs, whether they are digital or physical.

2

2011 Customer Experience Report, Right Now Technologies (www.rightnow.com)

The Ultimate UX Design Guide for your Website | Academy Xi © 2018

10

The UX Design Process From research to product development, a solid understanding of the user underpins any good UX design.

The Ultimate UX Design Guide for your Website | Academy Xi © 2018

11

Step 1: Understanding your user We invest in research, so we don’t build the wrong useable thing. Charbel Zeaiter, Co-founder Academy Xi.

T

he internet is overwhelmed with information and has become a freefor-all regarding digital products. The user experience is what separates the good from the bad. For example, on an average website a user is presented with a multitude of options, creating a paradox of choice: from numerous call-to-action (CTA) buttons on a website, or a menu containing too many page options. UX Design principles ensure choices simple for the user, actively curating an intended journey for a user. Whether it’s in the pressing of the right button on a website, or the ability to make a fast decision when shopping online, the principles of UX Design allow you to create experiences that delight the user as well as fulfilling business goals. The UX Design process begins with data collection. Designing a delightful customer experience relies on an in-depth knowledge of who your user is, and how they interact with the world around them. User research phase is arguably the most critical phase, as it helps reduce or remove assumptions from the decision-making process when designing for a user’s experience.

The Ultimate UX Design Guide for your Website | Academy Xi © 2018

12

UX research starts with a problem statement; usually, a hindrance or problem that affects a user’s ability to perform the desired action on site. The problem statement forms a hypothesis about a user that is then tested and refined. The process can look like:

Objective

Hypothesis

Method

Conduct

Analyse

UX research activities to understand your user’s behaviour and attitudes include: • One on one interviews • Observation and contextual inquiries • Personas • Interviews • Comparative studies • Competitor reviews • Participatory design workshops • Heuristic evaluations • Eye-tracking • Email surveys • Card sorting

The Ultimate UX Design Guide for your Website | Academy Xi © 2018

13

Different testing methods are applicable when you need to identify what people are doing on your website vs what people say they are doing. Here’s a breakdown: BEHAVIOURAL WHAT PEOPLE DO

Eyetracking

Intercept Surveys Email Surveys

Usability Benchmarking (in lab) Usability Lab Studies

Moderated Remote Usability Studies

HAPPY MIX OF BOTH

Ethnographic Field Studies

Participatory Design Focus Groups Interviews

Unmoderated Remote Panel Studies

Concept Testing Diary/Camera Studies Customer Feedback Desirability Studies Card Sorting

Unmoderated UX Studies True Intent Studies

WHAT PEOPLE SAY THEY DO

Intercept Surveys Email Surveys

ATTITUDINAL QUALITATIVE (DIRECT)

QUANTITATIVE (INDIRECT)

One-on-One Interviews Engaging in one-on-one interviews helps UX Designers discover new insights as they delve into deeper empathetic levels with a user to uncover their wants, desires, emotions, pain points and motivations. One-on-one interviews should be recorded and captured in so your face-to-face time is better spent observing body language and social cues. This helps determine how to conduct experiments, create solutions, and distribute those solutions to market. Engage in meaningful interviews as you as would with a family member or best friend. UX Designers employ all facets of engagement to probe the customer’s mind as they search for insights.

The Ultimate UX Design Guide for your Website | Academy Xi © 2018

14

Persona Creation Utilising user research and data, the UX Designer creates personas of their audience to identify their goals, motivations, needs, and behaviours. Personas add a human touch to your research. A ‘persona’ is an archetype: a fictional representation of the customer group who are experiencing problems. We use personas to drive design and feature decisions, focusing the product team on creating the right solution for the customer and reducing the subjective nature of feature decision-making. Personas help drive design and feature decisions by: 1. Identifying a user’s needs 2. Highlighting a customer’s desires 3. Focusing on a customer’s challenges Personas put a face to the research, helping identify user needs and visualise design solutions for user questions such as: • What does success mean for your customer? • What is it that keeps them up at night? • Who are the people that influence their decision-making? • Why does/doesn’t your customer need you? • How does your customer feel about you and your competition? • Where is the customer when they’re interacting with you? There are two types of personas: lean (proto) and detailed. Proto-personas efficiently tell a user’s story to stakeholders. Detailed personas are becoming less frequent as they require significant validation and take longer to create.

The Ultimate UX Design Guide for your Website | Academy Xi © 2018

15

Proto-Persona Example:

Proto-Persona Template: Name & Demographics

Behaviours

Pain Points

Needs & Goals

Tip: Don’t have the luxury of lengthy research time? Proto-personas give us enough of an understanding to move into concept and validation.

The Ultimate UX Design Guide for your Website | Academy Xi © 2018

16

UX Artefacts The UX Design process builds on your personas with the creation of Customer Journeys. Customer Journeys show the process a persona is likely to follow to achieve their goals – it’s a visual technique to map the time, context, device, and feelings of your customer at each interaction point of their journey from awareness to conversion.

UX Designers repeatedly utilise Customer Journeys to determine the emotions of the user and identify opportunities for improvement.

The Ultimate UX Design Guide for your Website | Academy Xi © 2018

17

Step 2: Finding a solution

W

hen you have a solidified understanding of your user (their emotional needs, journey to conversion, and pain points), it’s time to test and refine a solution through a wireframe or a prototype.

A final product design relies on a robust wireframe or prototype that acts as a guide to the design and development of any website or function. Here’s a comparison of both options: Wireframe

Prototype

Simplified

Detailed

Low fidelity

Middle - high fidelity

Created quickly

Requires more time

Basic sketching

Includes interactive capabilities

A wireframe represents simplified versions of the features and functions of a product. Wireframes can be a simple sketch. They don’t require high fidelity functionality so, take out your pencils and get your ideas onto paper! A prototype is middle to high fidelity, and has content and interactive capabilities that are close to the final product. It should give the tester a taste of the product’s look and feel, and how users will interact with the final product. Using low fidelity methods such as whiteboards and paper allows UX Designers to adapt and refine features and designs quickly before anyone becomes attached to a particular design solution. This process includes detailing of the concepts in the form of wireframes: the design blueprint that detail the hierarchical page structures, content areas, and interactions between functions and pages. Whichever method you choose, an idea should be tested and refined before it’s finalised into the design. Don’t forget: If you dive straight into the design process without completing the previous stages, you’ve done so based on an assumption and personal experience. Making an assumption allows a higher degree of risk and bias, which may result in a design solution that is not truly aligned to a customer’s needs. The Ultimate UX Design Guide for your Website | Academy Xi © 2018

18

Step 3: Testing a solution Testing and refining your solution gives you an opportunity to explore low fidelity concepts by putting them in front of real customers. This allows UX Designers to see if they’re on the right track to creating a useful, usable, and meaningful solution. This process is collaborative and iterative and it’s a critical stage that helps establish the fundamental UX Design Principles for the product. In the testing phase the UX Design process comes in many forms, though typically may borrow its quick iterative process from an Agile Development methodology. UX Design adopts a lean, rapid, and focused approach to product updates and releases, to ensure products are delivered quickly and effectively. A successful solution will always employ elements of Design Thinking.

The Ultimate UX Design Guide for your Website | Academy Xi © 2018

19

Design Thinking Design Thinking is an activity that brings people together from varied disciplines who would otherwise not collaborate. It encourages cooperation and empathy as teams explore problems and engage in creative prototyping. Design thinking lends itself to creative concepts that help UX Designers focus on volumes of ideas.

The ability to use Design Thinking to help shape new ideas and really break away from conventional problem solving is some of the things I love about UX. Stefano Portaluri, Senior UX Researcher at SBS

Tips to encourage Design Thinking include: • Create a space of collaboration • Introduce the team to user personas and customer journeys • Hone in on specific concepts • Get hands on and incorporate Design Thinking as a tactical activity Read more about Design Thinking on the Academy Xi Blog.

The Ultimate UX Design Guide for your Website | Academy Xi © 2018

20

Fundamental UX Design Principles Effective UX Design combines the application of principles with industry standards to help create innovative products. UX Design begins and ends with people and UX Design principles – when applied – can improve accessibility and support users across multiple devices:

1. Designing with Empathy: Human psychology is an integral part of UX Design. More than knowing what the user wants and what they expect, UX Designers should also consider accommodating their emotions and needs. It’s at this phase, where empathy comes in. Overlay persona and Customer Journey Map with notes on empathy maps. An example of an Empathy Map:

Example: Ding is an app that helps Chinese labour workers learn English and apply for work. The app uses an Empathy Map to identify the pain points labour workers experience during immigration. By asking users what they hear, think, and feel, the app determines the needs of their user base and UX Designers can redesign the platform using empathy. The Ultimate UX Design Guide for your Website | Academy Xi © 2018

21

2. Designing for Accessibility & Ease of Use Exceptional UX Design expands from ‘Design Thinking’ to ‘accessibility thinking. This shift is described as ‘universal design for usability for all people by considering there are no average users and that variation is the norm.’4 This means that UX Design must be easy-to-use and must reduce the cognitive workload of a user. Tips for accessibility design: • Consistency • Clear colours, labels, and fonts • Aim to adopt a strong visual and informational hierarchy • Adapt commonly used icons such as the ‘burger menu’ or universal ‘play’ button [ Example ] Netflix is an example of a product that designs for accessibility. In addition to offering subtitles that support deaf and hard of hearing, Netflix also offers an audio description service that enables visually impaired people to use their product.

3. Designing for Mobile With smartphones becoming a ubiquitous device in our everyday lives, designing for mobile experiences is an important consideration, though depending on the context of the user. Designing for mobile experiences can include mobile responsive pages and applications. Mobile UX Design needs to be efficient as user behaviour is typically short and distracted.

Australia remains one of the leading global adopters with 88 percent of Australians who own a smartphone. - Deloitte Mobile Consumer Survey 2017

3 4

https://uxdesign.cc/ding-ux-design-case-study-ec3de5cc517 Ron Mace, Founder of the Center for Universal Design

The Ultimate UX Design Guide for your Website | Academy Xi © 2018

22

Mobile UX Designs should, therefore: • Prioritise designs for a core purpose: If your app or mobile website is dedicated to the purchase and delivery of food, ensure the path is clear as mobile users are less forgiving. Analyse the most popular features of the app and continue to improve its intuitiveness. • Help users navigate the app: Clear labels, consistent menu bar placements, and clean page titles help your mobile users stay on track and navigate their path. • Allocate spacious tap targets: Mobile screens are smaller than desktop screens, so allow ample space for users to tap. • Always ask for permission: Mobile devices will often require push notifications or changes to a user’s settings – whenever there is an extra action, always ask for permission (don’t be pushy) and provide clear instructions. • Be succinct: Avoid lengthy descriptions and aim to stick to a primary Call to Action (CTA) per screen. • Use mobile to your advantage: Rather than adapting a web experience to a smaller screen, designing a mobile-specific experience makes it easier for users to take an action. For example, ‘call’ actions or ‘map’ integrations give users an instant way to engage with your business.

The Ultimate UX Design Guide for your Website | Academy Xi © 2018

23

UX Design Tool in Focus: Sketch Sketch is a vector-based design app for Mac, focused entirely on User Interface Design. It’s simple and easy to use and it’s a fraction of the cost of Adobe Photoshop. Sketch helps a UX Designer through the iteration to collaboration phase. Why we love Sketch: • Change and iterate as you go, without ever needing to start over. • Work on multiple designs at the same time and create different options for a problem • Create interactive designs that you can test and validate • Ability to integrate a wide range of plug-ins • Collaborate with stakeholders and teams with real-time updates See more tips on how to use Sketch on the Academy Xi blog Or, discover extra UX Design tools include: • Pop App • InVision • Axure • Balsamiq

The Ultimate UX Design Guide for your Website | Academy Xi © 2018

24

UX Design Instructors at Academy Xi: Featuring the best UX Design Instructors:

Robert Williams Role: Lead UX Instructor Company: Academy Xi Location: Sydney Taught at Academy Xi: User Experience Design

Robert has been working in the digital space for over 10 years. He brings to the table a wealth of experience from his early days in digital and graphic design to his current position as lead UX designer. Robert’s digital story began with a degree in visual design where his career took off in Melbourne with numerous roles developing consumer-facing web products. Since then, he has studied multiple multimedia and design courses which have propelled him into UX roles for Optus, Vodafone, PwC and Symplicit. Known to empower his students through the notion that everyone has the ability to understand and create a strategy, Robert says, “I believe UX design is intuitive; sometimes it just takes a little prod or influence to reassure that intuition.”

The Ultimate UX Design Guide for your Website | Academy Xi © 2018

25

Ben Gilmore Role: User Experience Lead Instructor Company: Academy Xi Location: Melbourne Taught at Academy Xi: User Experience Design

Ben Gilmore is currently the User Experience (UX) Design Lead Instructor at Academy Xi. He has over 17 years experience in UX Design and four years of experience in managing Design teams across various industries including telecommunications, health, and education. With a strong passion for his work and a deep interest in Design methodology, Ben’s enjoys Agile and Lean UX and the overall process of product and service delivery. “My strengths lie in effective communication and the interpretation of business requirements and users needs. My focus is a strong collaboration design process between disciplines and achieving creative solutions based on user research and data”, says Ben.

Sabine Selbach Role: UX and Product Design Lead Company: 99designs Location: Melbourne Taught at Academy Xi: User Experience Design Sabine Selbach has over 10 years of Design experience in a variety of environments including International corporations, startups, tech companies, creative agencies, and design-led consultancies. She is currently working as the UX and Product Design Lead at 99designs Sabine is delivering the next generation of human-centred experiences and digital products. “I’m passionate about teaching industry best-practice design frameworks and methodologies, mentoring and guiding designers to reach their potential, as well as building and establishing visions for design teams and projects”, says Sabine.

The Ultimate UX Design Guide for your Website | Academy Xi © 2018

26

Ux

For more information on UX Design, see our syllabus or explore our range of part-time and full-time courses:

part-time

full-time

The Ultimate UX Design Guide for your Website | Academy Xi © 2018

27