DIGITAL UX DESIGN

10th UX DESIGN INTERNSHIP BATCH

Design Mentor : Hariharan

Syllabus

1.Introduction (mobile ux , Web app Ux, hybrid, Native) Introducing feature and requirement (target, problem statement , featured list)

2.Competitor study, affinity mapping,card sorting

3. User flow ,Information architecture & conceptual model

4.UX Components & master component,Google material design

5.UX laws & Design principles & dark ux

Syllabus

6.Wireframe sketches

wireframe low fidelity (Balsamique , paper sketch))

7.Wireframe high fidelity

figma tool class (ux template extraction)

8.rapid prototyping

interactive prototyping

​

Syllabus

9.Heuristic principles

Usability Testing

10.case study

11.documentation

12.Placement mock test

​

1.Introduction

Digital UX design

Design as problem solving tool which focusing on various platforms to address problems. And one among that is Digital Platform where we will addressing User experience issues related to their Digital accessibilities .

Things you will learn

​

1. Understanding the digital medium

2. Human communication in digital Platforms

3. Redesigning for better usability

4. Deep knowledge of the Digital platforms like Mobile

apps, Web apps, Native apps,

Hybrid app, Desktop, Tab

Watch and many others.

Web App & Website

Web app - Amazon, Flipkart | Website - Chalk Piece website

Mobile application

Mobile is ubiquitous and inescapable—over 80% of the world’s population owns a smartphone. With smaller screen sizes and different functionalities, the mobile user experience is quite different. A user’s comprehension drops by 50% when they move from desktop to mobile. How do we overcome this? Well, just make your mobile user experience twice as intuitive! Easy, right?

​

Lesson 0.1 - Mobile UX Design: The Beginner's Guide | IxDF (interaction-design.org)

Mobile application

As the world has adopted smartphones—companies now understand the advantages of catering to mobile users:

• It caters to user's specific needs at the right moment and place.
• Users can access the mobile web in places where the internet is not easily accessible from other devices.
• Development for the mobile web can be cost-effective and even cheaper than standard websites.
• You can potentially reach a much larger user base. There are far more smartphone owners than desktop and laptop owners. And in developing nations, smartphones are often the only way for a user to access the internet

​

Hybrid app

Before ux design vs After ux design

Activity 1

Choose application and find out the flaw

Activity 1.0: Let’s discus swiggy application features

TOP 15 FEATURES OF SWIGGY APP:

• Rider Location Tracking
• Advanced Payment Services
• Promotional Codes
• Explore restaurants
• Track your Orders
• Reviews and Rating management
• Food Categories management
• Manage Restaurants
• Manage Food Cuisines
• Orders management
• Featured Restaurants
• Payment Gateway
• Commission management
• Advertisement services
• Multiple currencies and languages

User group / Target User

SWIGGY Target user:

Food buyer

Hotel owners

Delivery partner

Swiggy admin team

Problem statement

How might we get guidance for use genie in order to use courier services

Activity 2: List problem statement, user group and feature list from the document

2.Competitor study

Direct & indirect competitor

Competitor of swiggy

Direct competitor

• zomato
• Uber eats

Indirect Competitor

• Hotels
• Home food entrepreneur

Competitor study example

Direct competitor Analysis

Chalkstore Competitor Study

https://docs.google.com/spreadsheets/d/1otFyEqiCOgRJe_hpaE2Av1zjKB94GUjV_xE-sykqL8w/edit#gid=1301296342

Activity

1. Find any 2 digital competitors which competes directly in the market
2. List down main features that the product holds.eg : Ecommerce ( Product list, Payment, Tracking etc)
3. Write down how both the competitors are trying to solve the problem
4. Mention which unique features/idea makes their product better reach in the market

Time Limit : 10 mins

Presenting time : 1 or 2 mins

2.0.Affinity Mapping - What it is

Affinity Mapping is a practice used to organize ideas or insights. It allows large numbers of ideas stemming from brainstorming to be sorted into groups, based on their natural relationships, for review and analysis.

​

Grouping of ideas or insights

Activity 1

Give ideaconsuming to improvise youtube marketing for content creators

​

1. There is no download options

2 no video quality

3.charge consuming

4. descriptions

5. Recommendations

6. Fake contents & Fake influencers

7.long ads

8.lots of ads

9.skips ads

10. Caption

11. Education notes

12.unwanted like

�

13.info while playing videos

14.video suggestion at end 1q We have

15. Ads count

16. Copying celebrity content

17. Fake thumbnail

18.uploading content

19. Sensitive content not blocking

20. If blocked also same recommendations appears

21. Reduce ads for no premium member

22. Info while playing videos

23. Eye problem

24. Repeated shorts

Label

Label

Label

Label

2.1.Card Sorting/ Grouping

Video :https://www.youtube.com/watch?v=0tNPT6X9Lhc

Activity 2

​

Amazon prime

1. Profile
2. Menu
3. Category
4. Home
5. Settings

​

Find out the menus and submenu and do card sorting

3. User flow , Information Architecture & Conceptual Model

3.0.User flow

User flow is the path taken by a prototypical user on a website or app to complete a task. The user flow takes them from their entry point through a set of steps towards a successful outcome and final action, such as purchasing a product.

Checkout User flow Example

Search User flow Example

​

​

Google Yahoo

​

​

Activity

Gmail - web / mobile

1. Compose - send now, schedule send, with attachment , with cc
2. Delete
3. Chat

Instagram - app

1. Post - Select pictures, add filters add music, add description tag people, share post.
2. Story and tag another people
3. Search and Follow chalk piece account
4. Chat

​

​

Take any one task from the list and describe the user steps that needs to be done in order to complete the task within the product.

3.1.Information Architecture

Information architecture is a discipline that focuses on organizing information within digital products clearly and logically. It helps users answer the question, “Where can I find the information I’m looking for?”

Information Architecture Example

Activity

Take any one from list and try to frame the map of it .

​

1. College
2. Bus Stand / Railway station
3. Library

​

​

1. Ecommerce shop
2. Online Book /craft store
3. Movie website
4. News site

3.1.Conceptual Model

A conceptual model is a representation of a system. It shows how people, places, and things interact. They show the real-world features and interactions of your design idea.

Conceptual Model Example - Signin Flow

Activity

Gmail - web / mobile

1. Compose - it needs to cover “to,cc,subject,content,attachment”

Instagram - app

1. Post

​

​

Take any one task from the list and describe the conceptual steps that needs to be done in order to complete the task within the product.

4. UI Elements, Master Components,Material Design.

What is UI elements

UI elements are the visual elements that people can see on a website or app interface ( including the buttons, menus, text fields, progress bars, and so on). They enable users to interact smoothly with the website or mobile app and get what they want from it.

https://www.usability.gov/how-to-and-tools/methods/user-interface-elements.html

​

Part of the elements

• Shapes

​

• Colour

​

• Typeface

​

• Principle

​

Classifications of UI Elements

• Input Controls

​

• Navigation

​

• Informational Components

​

• Containers

Input Controls

• Buttons

• Checkboxes

• Dropdowns

• Text Fields

Navigation

• Search Field

• Breadcrumbs

• Pagination

• Tag

Information Components

• Notifications

​

​

• Tool Tips

​

​

​

​

​

​

• Pop Ups

​

​

Containers

• Forms

• Cards

• Accordian

Mention which element will be used in the topics listed down.

Create & Use Element

• Purpose
• Anatomy
• Specification
• Hierarchy_placement
• Variation
• States

​

​

​

https://drive.google.com/file/d/1YUa8Rv1YaGcPos2YVQo3SUwlVyIOc1RT/view

Activity

• Take any one digital product that you like and try to list down as many ui elements that you found.

​

• Write down the element and its purpose

What is Master Components

Master components are components that can be created and managed independent of any application. Master components are then leveraged to create application components either by referencing or copying them.

https://drive.google.com/file/d/19exMN8f9CZR8Wtb6jFHg19BdF8kXmF8L/view

Live Session

How to create a master component and use within a product

Android and IOS Guidelines

iOS : https://developer.apple.com/design/

Android : https://m3.material.io/components

Example product that uses the guidelines

Link for Components

https://drive.google.com/file/d/1YUa8Rv1YaGcPos2YVQo3SUwlVyIOc1RT/view

Master

UI Elements

Web/ mobile template

https://drive.google.com/file/d/1YUa8Rv1YaGcPos2YVQo3SUwlVyIOc1RT/view

https://www.usability.gov/how-to-and-tools/methods/user-interface-elements.html

​

https://drive.google.com/file/d/19exMN8f9CZR8Wtb6jFHg19BdF8kXmF8L/view

Activity

• Take any one digital product that you like
• select any one page in it
• recreate that page using the design kit components.

5.UX Laws, Design Principles, Dark UX

UX Laws & Types

• Its a collection of best practices that designers can consider when building user interfaces.
• Total 21 Laws are available
• Categorized as : Heuristic, Principle, Gestalt, Cognitive Bias

https://lawsofux.com/

Gestalt Laws

• Gestalt psychology focuses on how our minds organize and interpret visual data. It emphasizes that the whole of anything is greater than its parts.
• 5 Different types of gestalt laws are available

​

1. Law of common region
2. Law of Proximity
3. Law of Pragnanz
4. Law of Similarity
5. Law of Uniform Connectedness

Law of Common Region

Creating common regions around an element or group of elements is an easy way to create separation from surrounding elements.

​

Example

Law of Proximity

Objects that are close tend to join and they are understood as members of the same group.

​

​

Example

Law of Pragnanz

People will perceive and interpret objects in the environment in a way that makes them appear as simple as possible

​

​

​

Example

Law of Similarity

The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated.

​

​

​

​

Example

Law of Uniform Connectedness

Elements that are visually connected are perceived as more related than elements with no connection.

​

​

​

​

Example

Activity

• With the reference of the each gestalt laws you need to find a specific digital examples related to it.
• Mention why you think it is related to the law

Design Principles

• Design principles are fundamental pieces of advice for you to make easy-to-use, pleasurable designs. You apply them when you select, create and organize elements and features in your work.
• Total 7 design principles are there

​

https://99designs.com/blog/tips/principles-of-design/

7 Design Principles

1. Emphasis
2. Balance
3. Contrast
4. Repetition
5. Alignment
6. Movement
7. Whitespace

Emphasis

• Referring to the focal point of a design and the order of importance of each element within a design.

​

• Adding emphasis to an object creates a focal point, which grabs an audience’s attention. It’s where you want the viewer to look first, but doesn’t overpower the rest of the design

​

​

​

​

Example

Balance

• Objects in design carry weight just like in the physical world, but it’s called visual weight. The visual weight of a design needs to have balance. It’s like putting two objects on a seesaw

​

• Balance can be implied by size, shape, or even contrast. While it can utilize symmetry or equality, balance can also be achieved through asymmetry.

​

​

​

​

Example

Contrast

• Contrast creates space and difference between elements in your design.
• Contrast is most commonly associated with readability, legibility, and accessibility.
• The difference in objects could be light and dark, thin and thick, small and large, bright and dull, etc.

​

​

​

​

​

Example

Repetition

• Repetition is the recurrence of a design element, commonly utilized in patterns or textures.
• A repetitive element could be repeated lines, shapes, forms, color, or even design elements.

​

​

​

​

​

​

Example

Alignment

• In design, the alignment principle states multiple objects should be placed to allow certain elements of the assets to “line up” in a common position.
• The most obvious example of this is in document processing tools, which allow users to position their text to one side of a page, or in the center.

​

​

​

​

​

​

​

Example

Movement

• Movement is controlling the elements in a composition so that the eye is led to move from one to the next and the information is properly communicated to your audience.

​

​

​

​

​

Example

White Space

• White space (or negative space) is the only one that specifically deals with what you don’t add. White space is exactly that—the empty page around the elements in your composition.

​

​

​

​

​

Example

Activity

• With the reference of the each design principles you need to find a specific digital examples related to it.
• Mention why you think it is related to the principle

Dark UX

• Dark patterns, recently also known as deceptive patterns, are user interface (UI), and user experience (UX) tricks designed to mislead users into doing things they don't want to do.
• They are often used to obtain personal information, increase engagement, or generate more revenue for the company.

​

https://app.uxcel.com/lessons/dark-patterns-024

Trick Questions

Sneak Into Basket

Fear Of Missing Out

Confirmshaming - Confirm shaming is the tendency to use language in UX design that guilts the reader in the option to decline, psychologically shaming them into opting in by making them uncomfortable.

Hiddencost

Friendscam

Activity

• Try to find dark patterns in digital applications that you use.

6. Sketching , Storyboard, wireframe , wireframe types and tools

Sketching

• It's a very efficient way of communicating design while allowing designers to iterate multiple ideas before settling on one.
• Once you've drawn out the problem, sketching is perfect for generating ideas for solutions. It's quick, easy, and everyone can see what you mean. It's also visual, so you and your team can quickly identify, discuss, and filter the good and bad ideas out.

​

https://www.toptal.com/designers/ux/guide-to-ux-sketching

Sketching Example

Sketching cheat sheet

Storyboarding

• A storyboard communicates a story through images displayed in a sequence of panels that chronologically maps the story’s main events.
• Components - Scenario, Visual, Captions
• Different ways it is used in UX process
• Research & Usability Testing
• Augmenting Journey Maps
• Prioritization & Common Ground
• Ideation
• Emotions , expression , action

https://www.nngroup.com/articles/storyboards-visualize-ideas/

Storyboarding Example

Activity 2

• Try to explain any one already existing digital product in a storyteller concept .
• Eg: Swiggy Genie

Wireframe

• What’s wireframe and types
• How we are going to build it using UI Elements
• Screens research of any digital product like what are the essential screens are there and what are its unique screens
• How a flow has been created using a wireframe
• Using tools how digitally its done

​

Wireframe

• A wireframe is a two-dimensional skeletal outline of a web page or app. Wireframes provide a clear overview of the page structure, layout, information architecture, user flow, functionality, and intended behaviors. As a wireframe usually represents the initial product concept, styling, color, and graphics are kept to a minimum.
• A wireframe is usually the initial iteration of a webpage, used as a jumping-off point for the product’s design.
• Types of wireframe

Low fidelity

Mid fidelity

High fidelity

​

https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/

Low-fidelity wireframes

Low-fidelity wireframes omit any detail that could potentially be a distraction and include only simplistic images, block shapes, and mock content—such as filler text for labels and headings.TOOL - Paper sketching

​

Activity 2

• Take any app and sketch the screen in plain paper
• Eg: Amazon Home Screen

Mid-fidelity wireframes

The most commonly used wireframe of the three, mid-fidelity wireframes feature more accurate representations of the layout. While they still avoid distractions such as images or typography, more detail is assigned to specific components, and features are clearly differentiated from each other :

TOOL : Balsamiq , Invision, UXpin - https://balsamiq.cloud/svozub6/pwvec55/rA453

Activity 3

Using Balsamiq tool creating screen

Eg: Google search screen

High-fidelity wireframes

Finally, high-fidelity wireframes boast pixel-specific layouts. Where a low-fidelity wireframe may include pseudo-Latin text fillers and grey boxes filled in with an ‘X’ to indicate an image, high-fidelity wireframes may include actual featured images and relevant written content. Tool - Figma ,XD

Wireframe Tools

The 7 best wireframe tools

• Adobe XD , Sketch for detailed, vector-based design
• Moqups for beginners
• Figma for a free wireframe app
• UXPin for handing off design documentation to developers
• MockFlow for project organization
• Wizard for AI-assisted wireframing

https://cliquestudios.com/free-wireframing-tools/ - Wireframe tools

​

https://zapier.com/blog/best-wireframe-tools/

​

Wireframe - Major feature in the screen

​

• Food orders
• Search food by location
• Offers
• Instamart
• Genie
• Dineout
• Profile
• Invite friend
• Self location mapping

Wireframe - one User flow

​

• Food order User flow

Wireframe unique screens

Eg : Swiggy unique screens - unique screen that cover major feature of the screens

​

Home Screen

Ordering food

Asking genie

Purchasing in instamart

​

Wireframe screens name

screens like onboarding , login , Home Screen , settings , help !

​

​

^{Swiggy Home Screen}

Activity 4

Using figma or adobe xd wireframe kit; create a screen

Activity 5 - wireframe screens redesign

Using adobe wireframe template or figma wireframe template redesign from existing design (solve any issue and redesign it)

​

7.Figma Tool

Work Area

Pages, Layers,Assets & Preview

Tool Areas

Frame

https://www.altamira.ai/blog/common-screen-sizes-for-responsive-web-design/

Grids

https://www.nngroup.com/articles/using-grids-in-interface-designs/

https://www.geeksforgeeks.org/grid-system-in-ui-design-beginners-guide/

Typescale

https://m2.material.io/design/typography/the-type-system.html#type-scale

Live Demo

Exporting File

8.Prototyping

What is Prototyping

A prototype is “A simulation or sample version of a final product, which UX teams use for testing before launch.”

Why Prototyping is Done

• Save budget. Receiving customer feedback at early stages and making improvements to the prototype takes almost no cost as opposed to making changes to the already implemented product.
• Save time. A well-developed structure and arrangement of blocks in the future will help the designer not to make great changes to the finished layout since the main part of the project will be coordinated.
• Simplify the workflow. When directly creating a page design, the developer acts according to the plan. They don’t need to think about how to correctly arrange blocks and calculate the distance to individual elements.

​

Why Prototyping is Done

• Facilitate interaction with the customer and other team members. When developing a design, a prototype is a kind of technical requirement, which has already been agreed upon with the customer and other project participants.
• Help the business owner increase conversion. UX prototyping means not only designing individual pages/screens of a product from a usability point of view but also drawing up a business strategy. The correct placement of the CTA and navigation elements, banners with promotions, and so on affects the conversion.

​

​

Types of Prototyping

• Low Fidelity Prototyping
• Mid Fidelity Prototyping
• High Fidelity Prototyping

​

​

​

https://www.geeksforgeeks.org/prototyping-in-ux-design-benefits-types/

Low fidelity Prototyping ( Paper )

Low fidelity prototypes are quick, cheap, and highly collaborative. It is good to rapidly test the broad concepts in software design. Also, you don’t have to be more advanced in designing skills to create low-fidelity prototypes. You only need to represent the basic key elements without getting into too many details

Mid Fidelity Prototyping (Clickable)

Once you’re done with the hand-drawn prototype, you can turn them into interactive clickable prototypes. Clickable prototypes give much more detail than the low fidelity prototypes and it gives closer look to the final design of the product. You can find a certain level of interactivity in clickable prototypes.

High Fidelity Prototyping (Advanced Interactions & Transitions)

High fidelity prototypes feature the various components, interactive elements, and content of the final product. High-fidelity prototypes look like real app. Creating this prototype is costly but using this prototype users get the feeling that they are interacting with a live application. Designers can test every single element of the software before moving to the actual development of the product.

Tools for Prototyping

https://webflow.com/blog/prototyping-tools

1. Figma

2. InVision Studio

3. Adobe XD

4. Webflow

5. Axure RP

6. Origami Studio

7. Justinmind

8. Sketch

9. Fluid UI

10. Framer

11. Marvel

12. Proto.io

13. Principle

14. Balsamiq

Prototyping Example

1. Figma - Creating one basic prototype

2. InVision Studio - Creating one basic prototype

9.Heuristic Principles & Testing

What is Heuristic Principles

The UI can not be confusing, demanding, or cause stress to the visitors. Instead, user journeys should be so fluid that their navigation becomes intuitive and effortless.

Nielsen’s heuristics are general principles, meaning that they do not determine specific usability rules. Instead, the heuristics are general rules of thumb you can follow to help create more accessible, user-friendly, and intuitive digital products.

Heuristic evaluations are not a replacement for usability testing or speaking to users. They provide a foundation for improving the experience on the side of user testing, or before you go into a usability test.

Why Heuristic Evaluation is Done

• Identify and focus on specific issues without having to speak to users
• Discover usability problems with individual elements and how they impact the overall user experience
• Provide quick and inexpensive feedback to designers
• Gather and give feedback early in the design process
• Conduct usability testing to further identify and understand problems
• See improvements in important business metrics, such as bounce rate, user engagement, and click-through rate

References

https://www.nngroup.com/articles/ten-usability-heuristics/

https://careerfoundry.com/en/blog/ux-design/usability-heuristics/

https://uxdesign.cc/user-experience-is-one-of-the-hottest-topics-in-day-today-designers-life-fb314978e1ff

1. Visibility Of System Status

The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.

2. Match Between System & Real World

The design should speak the users' language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.

3. User Control & Freedom

Users often perform actions by mistake. They need a clearly marked "emergency exit" to leave the unwanted action without having to go through an extended process.

Example :

4. Consistency & Standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.

Example :

5. Error Prevention

Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions, or check for them and present users with a confirmation option before they commit to the action.

Example :

6. Recognition Rather Than Recall

Minimize the user's memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed.

Example :

7. Flexibility & Efficiency of use

Shortcuts — hidden from novice users — may speed up the interaction for the expert user so that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

Example :

8. Aesthetic & Minimalist Design

Interfaces should not contain information that is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.

Example :

9. Help users recognize, diagnose, and recover from errors

​

Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.

Example :

10. Help & Documentation

​

It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.

Example :

What is User Testing

User testing involves getting end users and customers to test and evaluate a product, feature, or prototype. Test subjects use the item and identify various pain points and positive attributes so that businesses can enhance their user experience before going to market.

https://www.nngroup.com/articles/usability-testing-101/

https://maze.co/guides/usability-testing/#:~:text=Types%20of%20usability%20testing,-The%20kind%20of&text=All%20product%20research%20and%20testing,Remote%20or%20in%2Dperson

https://blog.hubspot.com/service/user-testing

Types of User Testing

1. Usability Testing
2. Focus groups
3. User Interviews
4. Surveys
5. Session recordings
6. Heatmaps
7. A/B Testing
8. Beta testing

https://www.hotjar.com/user-testing/types/

https://blog.hubspot.com/service/user-testing

What is Usability Testing

Usability testing focuses on how and to what extent a customer uses your product to accomplish a specific goal. This plays a part in the user experience but is not the entire experience.

So: User Testing has to do with functionality, while Usability Testing has to do with user behavior.

Usability Testing

Types of Usability Testing

1. Qualitative or quantitative
2. Moderated or unmoderated
3. Remote or in-person

Qualitative or Quantitative

Qualitative usability testing focuses on collecting insights, findings, and anecdotes about how people use the product or service. Qualitative usability testing is best for discovering problems in the user experience. This form of usability testing is more common than quantitative usability testing.

Quantitative usability testing focuses on collecting metrics that describe the user experience. Two of the metrics most commonly collected in quantitative usability testing are task success and time on task. Quantitative usability testing is best for collecting benchmarks.

Remote vs In Person Testing

Remote usability tests are popular because they often require less time and money than in-person studies. There are two types of remote usability testing: moderated and unmoderated.

Remote moderated usability tests work very similarly to in-person studies. The facilitator still interacts with the participant and asks her to perform tasks. However, the facilitator and participant are in different physical locations. Usually, moderated tests can be performed using screen-sharing software like Skype or GoToMeeting.

Remote unmoderated remote usability tests do not have the same facilitator–participant interaction as an in-person or moderated tests. The researcher uses a dedicated online remote-testing tool to set up written tasks for the participant. Then, the participant completes those tasks alone on her own time. The testing tool delivers the task instructions and any follow up questions. After the participant completes her test, the researcher receives a recording of the session, along with metrics like task success.

​

Usability Testing Tools

1. Maze
2. Lookback
3. UserTesting
4. Optimal Workshop
5. UsabilityHub
6. Loop11
7. Userfeel
8. Trymata
9. Hotjar
10. UserZoom
11. Qualaroo
12. GetFeedback
13. CrazyEgg
14. Userlytics
15. Userbrain

Activity

1. Choose any one application of your choice (Web / Mobile)
2. Perform UI testing on it
3. Try to evaluate heuristic references in your testing and list it out

10.Case Study

What is a UX Case study

UX case studies are examples of design work which designers include in their portfolio. To give recruiters vital insights, designers tell compelling stories in text and images to show how they handled problems. Such narratives showcase designers’ skills and ways of thinking and maximize their appeal as potential hires.

Requirements Needed Before Creating A Case Study

1. Identify a Problem that you are willing to solve
2. From the first day till the final solution gather every research materials that you documented
3. A proper tool to work on the case study ( Figma / XD )
4. Typo Errors for the documents needs to be done
5. Every research stage should be explained in short and understandable way

https://www.linkedin.com/pulse/8-step-guide-write-amazing-ux-case-study-reetika-gupta-1c/

Stepping stages in a Case study while documenting

1. Why Chosen this problem and what is the solution that you got out of your research
2. Overview of your project
3. Timeline
4. Team members worked on it
5. Stages of research that is covered and Tools used
6. Who is the target audience

​

Step 1 : Empathize

1. Qualitative research ( User interview Q & A)
2. Quantitative research (Survey)
3. Competitor Analysis

​

​

Step 2: Define

1. User Persona
2. Empathy Mapping
3. Customer Journey Mapping

​

​

​

Step 3: Ideate

1. Affinity Mapping
2. User flow
3. Card sorting
4. Storyboarding
5. Information Architecture

​

​

​

Step 4: Wireframe & Prototyping

1. Low Fidelity
2. Mid Fidelity
3. High Fidelity

​

​

Step 5: Testing

1. Testing Concepts
2. Feedback from it

​

​

Tools for Uploading UX UI Casestudy

1. Cargo
2. Adobe Portfolio
3. Behance
4. Pixpa
5. Dribbble
6. Coroflot
7. Crevado
8. Carbonmade
9. Portfolio box
10. UXfolio
11. Best practices

Example UX UI Case Study

https://www.behance.net/gallery/113994573/Travel-UX-UI-Case-Study?tracking_source=search_projects|ux+ui+case+study

https://www.behance.net/gallery/175591637/Pharmacy-Mobile-App-UIUX-Design?tracking_source=search_projects|ux+ui+case+study

https://www.behance.net/gallery/172660999/UXUI-MOBILE-APP-FOR-ONLINE-EDUCATION?tracking_source=search_projects|ux+ui+case+study

https://www.behance.net/gallery/172959069/UX-Case-Study-TourIT-A-Travel-App?tracking_source=search_projects|ux+case+study+travel+

Demo

Thankyou