Unit IV – User Experience

Ecosystem Design

1
Unit IV : User Experience Ecosystem
Design
• UX Ecosystem
• Adaptive and Responsive Design
• UX Maps: Empathy Maps, Customer Journey Maps, Experience Maps, Service
Blueprints
• UX Strategy, Content Strategy
• UX Branding and Marketing
• Lean UX and Agile UX

2
User Experience Ecosystem
A UX ecosystem encompasses a set of
discrete but interdependent
components, including, different
domains (physical, digital, and hybrid),
different types of entities (data,
physical items, and people), and
different media.
Wikipedia tells us that an ecosystem is
a community of living organisms in
conjunction with non-living organisms
that interact as a holistic system.

3
Eg. Apple Ecosystem
Apple with its host of products analyze the user needs in different aspects of their lives and build a product to
satisfy a particular need. True about many companies but what apple does differently is the interaction between
these products. The products that talk to one another fluidly and enhance the functionality of the other as they
age.

Eg. iphone, iwatch , imac :these devices talk to each other and provide you with real-time, beautifully designed
analytics that just works! There are little hiccups and for most consumers, they just want to open the box and set
it up in five minutes and start using it. This is exactly what the apple ecosystem accomplishes. Seamless
integration between devices that makes the user think its all magic.

Some examples are:

1. You hand off that application you were browsing on your phone and its open on your mac now
2. Replying to your emails that you started on your mac but completed on your apple watch (sigh)
3. Replying to iMessage with your voice on your HomePod

4
Eg. Apple Ecosystem

5
User Experience Ecosystem
A UX ecosystem is a set of interdependent relationships that emerge between components
within an information environment. These components include:
1. People who are managing information, sharing data with one another, and collaboratively
building knowledge for themselves or an organization.
2. The goals and practices of these people, both as individuals and as collaborators.
3. The digital and analog technologies that they use to share information and interact with one
another in meaningful ways.
4. The information that these people share and value for their individual and collaborative
purposes.

6
UX Ecosystem
includes :

7
What is UX Ecosystem?
Concept of “User Experience Ecosystem”.
A UX ecosystem encompasses a set of discrete but interdependent components,
including, different domains (physical, digital, and hybrid), different types of
entities (data, physical items, and people), and different media.
How does this affect your work as a designer?
As a UX professional, you need to expand your skills and be able to focus on
broader experiences than just individual users engaged with single applications.

8
9
Goal of UX Ecosystem
Goal as a UX designer is to design a :
User-centered ecosystem of devices, objects and services across
platforms in a simple, delightful and cohesive way which requires
understanding people as social, cultural, and organizational
components who are linked to other people, other technologies, and
loads of information.

10
Structurally, an ecosystem consists of :
1. The actors who collectively create the customer experience – including the
employees and contractors, on the frontstage and backstage.
2. The practices they perform – the services or value they deliver to customers.
3. The information they require, use or share to contribute their parts of the service.
4. The people or systems these actors interact with to play their roles.
5. The services available to them – i.e., to ancillary (supporting) organizations such as
carriers.
6. The devices they use – e.g., smartphones.
7. The channels they communicate through – e.g., email.
11
UX Ecosystem Maps
Ecosystem maps are tools that designers create to understand the
relationships and dependencies between the various actors and parts
that contribute to creating customer experiences.
The maps reveal areas to optimize in services to deliver the best
customer experiences.
With the map of all the actors, ancillaries, information and other
components – it is easier to spot areas to improve.
Eg. There could be disconnects that keep information from flowing properly
between (e.g.) the store that should have processed orders and the app that
wrongly told customers these were ready for pickup.

12
Example:
Amazon’s
ecosystem

13
Amazon Ecosystem characteristics Amazon Ecosystem Includes :

1. Customer-Centric
2. Data-Driven
3. Automated
4. Global
5. Dynamic

14
Amazon Ecosystem
Map
The actors, devices, infrastructure and other
elements interplay to support the best customer
experiences.
The ecosystem is more than the sum of its parts;
the dynamics and connections between the
parts are crucial to the service’s—and
business’s—health. From your own ecosystem
maps, you’ll likely find breakpoints.
March 27, 2022. Amazon ecosystem of products
and services is vast and it comprises retail,
transportation, B2B distribution, payments,
entertainment, cloud computing, and other
segments.

15
Adaptive and
Responsive Website

16
Adaptive Designing

Charles Darwin wrote:

“It is not the strongest of the species that survives, nor the most
intelligent that survives. It is the one that is the most adaptable to
change.”

17
Adaptive Website
In computer science, the term “adaptive system”
refers to a process in which an interactive
system adapts its behavior to individual users
based on information acquired about its
user(s), the context of use and its environment.
Examples Of Adaptive Systems # GPS
navigational devices.
1. User is able to easily locate and navigate
2. system automatically changes the interface color
to a dark “night mode”
3. The system knows the user’s exact location and
the position of the sun,

18
 Adaptive and Responsive Website
An adaptive system is one that adapts
automatically to its users according to changing
conditions. Responsive design (or adaptive layout)
is a subset of adaptive design, an approach to Web
design in which a website is crafted to provide an
optimal viewing experience across a wide range of
devices.
Adaptive Examples:
•Adidas provides its mobile visitors with an m-dot
website that mimics the desktop website making a
seamless experience. It comes with lighter images
and simplified shopping process.

19
Adaptive Website
In adaptive design, a different website layout is created for each device’s screen. As
it loads, the site recognizes the size of the screen and serves up the layout that was
made for that viewport. Can create a different user experience for each of six
common screen sizes from very small to very large: 320px, 480px, 760px, 960px,
1200px and 1600px.
This is time consuming to design for six different screen sizes, the work can be
limited by referring to user analytics for screen sizes on which users access it most.
For example, if the analytics show that a majority of users utilize the site on their Apple iPad and
their Samsung Galaxy mobile phone, you would design the user experience for those two screen
sizes specifically instead of all six possible screen sizes.

20
The pros and cons of adaptive design
• In adaptive design, a different website layout is created for each device’s screen. That means
the UX designer has total control over each layout and user experience is optimal for each
screen size,
◦ For example, an adaptive site for a food delivery service might include a home screen for a
desktop computer that surfaces restaurant options and different categories of food along
with a restaurant location search feature. Meanwhile, the home screen for the same site on a
mobile phone might include only the restaurant location search feature.
• Adaptive sites are easier for developers to implement, and because they only deliver the
code necessary for the given screen size, they tend to load much faster than responsive sites.
• And even if all six screen sizes are designed for, uncommon screen sizes still won’t be covered.
• Adaptive design is often best used for a website redesign or enhancement. For example, if
a client needs a mobile layout for an existing website that they have no intention of
changing, adaptive design may be the best option.

21
The pros and cons of adaptive design

Adaptive Design

Responsive Design

22
Responsive Website
• A website created with responsive design serves up the same site to every device, but that site
is fluid and will change its layout and appearance based on the size and orientation of the
device.
• Developers use :
• CSS (Cascading Style Sheets, which is the language responsible for the visual element of every kind of
website.)to ensure each page of the site can reformat based on the size of the user’s viewport
• Breakpoints to tell the site when to adjust to accommodate different screen sizes.
• The same site may have a four-column layout on desktop screen, a three-column layout on
laptop screen and a single-column layout on a mobile phone. All have the same basic content
and design.
• UX designers work closely with developers to ensure the layout is usable on all screen sizes.
• UX designer to ensure that the site maintains its usability as it reformats.
• One way to do this is to make sure the most important content is prioritized on different devices,
especially at the smallest screen sizes.

23
Responsive Website

24
The pros and cons of responsive design
Advantage is that it takes significantly less work than adaptive design—both to create it initially
and then to maintain it.
responsive sites will accommodate an infinite number of screen sizes,
Responsive sites also do better in search engine rankings as they’re mobile-friendly.
Disadvantages :
require developers to do more coding,
But there may be certain devices on which a webpage isn’t arranged to create the best user
experience.
because the code for the entire website is delivered, a responsive site can be slower to load.
This can also compromise the user experience.

25
Decision of Adaptive vrs Responsive
§consider your audience first -know who they are and what types of devices they
tend to use
§depend on whether you have an existing site to work with or you’re starting
from scratch.
§if a client or company has the budget, then adaptive might be a better choice,

Responsive design will remain popular, but that might be because we have not yet found a
decent solution to the heavy maintenance that adaptive demands.

26
Decision of Adaptive vrs Responsive

27
User Experience Maps
• Powerful technique of visualizing the entire experience of the end-users with a
brand, app or any product.
• Allows designers to understand customer motivations, hesitations, needs and
concerns.
• User experiences and frustrations are depicted by story, makes use of visuals
and storytelling to illustrate the relationship a user has with a brand.
• The story is told from the customer’s perspective and offers insight into the
complete user experience.

28
Reasons to use UX mapping
• Get a bird’s eye view of the entire journey of the customers
• Resolve specific hurdles faced by your customers and understanding where
additional developments are required
• Increase customer retention rate
• Build higher and faster customer conversion rates by minimizing negative user
experiences
• Reveal the gaps between various departments and channels
• Build a better brand reputation and greater market visibility by ensuring a
smooth and enjoyable customer journey

29
UX mapping methods
There are different UX mapping methods used in UX design, and these visual
techniques help understand desired outcomes and goals. The type of method
that you’ll use depends on your target audience
• Experience mapping
• Empathy mapping
• Service design (blueprint) mapping
• Customer journey mapping

30
Experience mapping
It focuses on the understanding of general human behavior to achieve a specific goal. The prima
ry characteristic is that it is service and product agnostic. It depicts the journey of the customer in
chronological order.
Why use it:
◦ For getting a generalized understanding of the behavior of your customers
◦ To facilitate desired outcomes by minimizing negative customer experience
◦ To identify the reasons for churn and addressing them
When should you use it?
used before you’ve started designing the product.
• It’ll help to understand how your target audience is solving potential problems without the
product. will enable to identify opportunities and design a product that will solve negative
experiences.

31
Empathy mapping
Is a tool that is used to assess and articulate what you know about a particular user type.
It helps to understand the mindset of the users and visually represent what they might want to
say, do, think or feel. This understanding allows UX/UI designers in creating a shared knowledge
in their design decision-making.
Why use it:
◦ For establishing an alignment and understanding about a specific user type
◦ To build empathy for your target audience
◦ To capture the persona of the users and communicating it by illustrating their behaviours, attitudes and
pain points
When should you use it?
use empathy mapping at the start of the designing process; and, usually after the initial user
research.

32
Service design (blueprint) mapping
Visualizes the relationship between various service components, including props, people and
processes. All of these relate to touchpoints in the customer journey.
It is considered as part two of the customer journey mapping.
Helpful in complicated scenarios and ideal for omnichannel approach or need a cross-functional
effort.
Why use it:
◦ For identifying optimization opportunities and discover weaknesses to resolve
◦ To bridge the efforts between cross-departments
◦ To create one shared understanding of how service is provided to your customers by breaking
down the silos
When should you use it?
◦ When mapping the user experience using the service design (blueprint) method, you can use it
after customer journey mapping.

33
Customer journey mapping
A customer journey map focuses on the user’s interaction with the specific service or product. It is
utilized for comprehending the pain points and needs of the customers and addressing them.
It starts by compiling a list of user actions and goals. Then, it takes into account what users go
through when accomplishing a particular purpose.
When to use it:
◦ To point towards customer journey touchpoints that either delight or cause pain
◦ To better understand the customer journey to improve user experience
When should you use it?
Can be used at any point during the design process to determine how customers respond to the
product.

34
How to create a UX map?
1. Creation of user persona :Understand who your customers are, how they react to your brand a
nd what they need by creating a persona.
2. Defined customer stages :Customer stages refer to goal-oriented user actions, and it illustrates
the goals and motivations of your customers.
3. Defined user interaction :A touchpoint is basically whenever a customer interacts with your b
usiness.
5. Research and identification of friction points :The UX map will allow you to get the overall
picture of your customer’s journey with your product or service. Moreover, you can find out the
friction points by defining the customer persona and highlighting customer stages.
6. Resolving friction points: Once you’ve discovered the friction points, it’s time to resolve them
so that your customers don’t have a negative user experience. Again, UX mapping will help you t
ake the right actions.

35
How to create a UX map?

36
UX Strategy
Good UX in product development is accessible to all types of users in as many
use cases as possible.
By putting equal emphasis into solving for every use case and every problem,
teams risk stretching themselves too thin and arriving at a solution that works
well for all.
So how should teams decide which problems to solve or what features to
prioritize?
The answer is a UX Strategy.

37
What is UX strategy?
A UX strategy is the plan and approach for
a digital product.
UX strategies help translate user
experience to every touchpoint where
people interact with or experience its
products or services.
A solid UX strategy ensures that
◦ business vision, user needs, and
technical capabilities are aligned
◦ helps to prioritize a team’s attention
and resources by keeping them focused
on solving the right problems for target
users.

38
How to Create a UX Strategy?
There are a number of methods product teams can use to create a
UX strategy.
At the core, it involves researching, planning, testing and validating
ideas before the implementation of design or development begins.
Some common approaches include:
1. Stakeholder Interviews
2. User Research
3. Competitive Research and Analysis

39
Why UX Strategy?

40
3 Ways a UX Strategy Helps Beat the
Competition
Assumptions are Validated
Risks are Minimized
Features are Prioritized

41
Case Study :WHAT IS ZEE5 ?
ZEE5 is an OTT platform owned by Zee Entertainment, one of India’s largest television broadcaster.
It was launched in India on 14 February 2018.
The number ‘5‘ denotes its presence in 5 continents. It follows a freemium business model that offers
both free and paid content to cater to a mix of audiences.
It competes with Disney+ Hotstar, Netflix, and Amazon Prime Video in India.

42
Research
It have 150 million+ worldwide
While ZEE5 has users across all age groups, women are our main target
audience.
Partnering with us will help you target your potential customers who are
the key buyers of every family.

43
Contd..
I interviewed both new and existing users to understand what they think of the app.
The questions were focused on onboarding and in-app navigation and features.
Some of the questions asked included:
1.Have you used the app before?
2.Is the interface easy to understand and use?
3.What do you think about menu items and navigation?
4.Are you able to find and watch content easily?
5.Which feature do you use the most/least and why?

44
Contd..
The key findings were:
1. Some users found the login and registration page confusing as they were identical.
2. Users were confused with the menu items. For example, they were confused between Videos and
Shows / Movies.
3. The app lacked clarity in how content was sorted.
4. Users couldn’t personalize their feed.
5. They could only choose the app and content language.
6. Some of them find app is easy to understand because of language.

45
Strategy used by Zee5
Switch content language
ZEE5 offers video content in 12 languages on the platform that include Hindi, English, Marathi, Telugu,
Kannada, Tamil, Malayalam, Bengali, Gujarati, Punjabi, Bhojpuri, and Odia. You can select multiple
languages if you want any time or stick to a single language. To change language settings, tap on Menu
(hamburger icon at the top left corner) > scroll to bottom > tap on ‘Languages’. You can also go to the
‘Display’ tab from within the Language option to change the language of the app.
Change quality of the video
If you are going to spend the whole day streaming videos, it is better to keep the video resolution (or
quality) low to save mobile data. You can also set the quality for downloading the videos. To do so head
over to the Menu > scroll to bottom > tap on Settings. Now tap on Quality under ‘Streaming Videos” as
well as Quality under “Download Videos” to change the respective resolution.

46
Cont..
Explore content
ZEE5 has curated the content in different tabs for you to easily watch what you want. You will find all the
television shows under the “Shows” tab at the Home and all the movies under the “Movies” tab. A whole
tab is dedicated to the News, premium ZEE5 content, and ZEE5 Originals.
Watch Live TV
ZEE5 also lets you watch some TV channels live on its platform. You can either scroll over the top bar to
reach the Live Channels or tap on Menu > tap on Live TV. You will see all the free channels, Hindi
Entertainment channels, Hindi movies, English entertainment, and all other types of channels categorised
based on genres.
Premium features and TV Guide
The premium features on ZEE5 not only removes advertisement but also include access to the premium
content and the ZEE5 Originals. Premium also enables users to ‘Download’ shows for offline viewing as
well as add these shows to ‘Watchlist’.

47
Content and Content Strategy
Content is the presentation of information for a purpose to an audience
through a channel in a form.

Content is found everywhere, everything we make has content. It’s in forms,

copy, images, videos, stories, metadata. In our design 80% is the content itself.

 Form of content: Blogs,Websites,Books,Video.

48
Relation between Content Strategy and
UX

49
 What is the Content Strategy Process?

 Discovery: Discovery phase that uses UX tools, user personas, and journeys,to identify the
needs and goals of the target audience and identify what channels the audience uses and
when.
 Audit and Analysis: audit and analysis phases which identify what content currently exists and
analyzes its usefulness and findability. During this process, a gap analysis is conducted to
identify what needs to be created to fulfill the needs of the personas.
 Strategy:A plan for sourcing information, as well as identification of what content should be
published where and when. It can also include brand guidelines, a migration plan if systems
are changing.
 Content Creation:Using search engine optimization and target audience insights, quality
content is created and delivered on the appropriate channel.
 The entire process needs to be maintained as well as improved based on audience insights.

50
What is User experience marketing?
• User experience can impact users positively or negatively when they visit your
website/product.
• Without a positive user experience, marketing tactics can be affected,
• Marketing and UX design are really both about making a product as desirable to the
customer or user as possible.
• You need customer satisfaction for the adequate growth of your business.
• Building a positive user experience is essential to boosting customer's satisfaction and
the best way to differentiate your product in this competitive marketplace.

51
INTERACTIONS OF UX AND MARKETING

52
 Marketing and UX
1. Increasing conversion rate :marketing content to provide more engaging and
unique interactions with customers.
2. Developing a Content Strategy : By focusing on the user, branded content
naturally becomes more useful and creates smooth and enjoyable user
experiences.
3. Humanizing the Brand: By applying UX principles to marketing initiatives,
brands can better understand users and take steps in caring for their needs.
An example of where a brand didn’t listen to users well would be Snapchat’s
user experience redesign fail.

53
4. Building Customer Loyalty : UX can help marketers by ensuring customers are
always made the first consideration when applying new strategies, design
overhauls, and keeping the engagement at its highest.
5. Improving SEO :Search engine optimization (SEO) is still key to building brand
awareness. The very foundation of UX is built on ease of use and navigation
efficiency, UX strategies help marketers continuously provide positive UX on site.

54
What is UX and Branding?
BRANDING: A brand or any other
feature that identifies one seller's
good or service as distinct from those
of other sellers.

55
Branding in Relation to UX:
Example: If someone uses your digital bank and
t h i n k s “d a m n , t h i s b a n k i s g o o o o o d . N o
bureaucracy, fast, simple and practical” he
automatically relates the benefits of the product to
your brand. Therefore, the perception of your
company, the branding of this bank will be
something like “an easy to use bank without
bureaucracy” in the eyes of this consumer/user.
It’s your product UX creating a perception around
your branding.

But here good is relative. Good for me may not be good for you. Just like
something bad for you can’t be bad for me. It only reinforces the subjectivity of
perception.

56
 UX in Relation to Branding:
Example: Think about a medieval restaurant.

Customers might face problems using those swords and spears

to eat but no one will say “that restaurant was nothing
medieval, it’s fake news”.

Will it influence the image, the perception that users will have
of this restaurant? Yes! It can influence the number of
customers and the revenue, but the values, the identification,
the dramatisation that this restaurant wanted to give to the
public was spot-on. It stimulated their consumers to think alike,
to form a tribe and then, a branding.

“Your brand is formed primarily, not by what your company says about itself, but what the company does.”

57
 Relationship:
The greatest similarity between UX and Branding is that both
depend on the user’s perception of their artifacts. UX, in relation to
its products and services. Branding, in relation to the brand.

L i ke U X , y o u c a n ’ t D E S I G N t h e e x p e r i e n c e b u t y o u c a n
design FOR the experience.

Branding is the same. You can’t CREATE the perception of your

audience but FOR the perception.

58
Importance of UX in Branding:
There are countless examples of how user experiences have impacted brands, for better or
worse.

For instance, Disneyland. Almost everyone returns elated from a vacation at Disneyland. This
is because the user experience of Disneyland is regarded as precise and sophisticated, right
down to the smallest detail. And it’s no surprise that Disney features within the top eight in
the 2019 ranking of Forbes, The World’s Most Valuable Brands.

59
 Branding concerns the brand of a country, company, 
organisation, or individual person. … User Experience … 
relates to the strategic creation and deployment of a 
particular experience, or the impact of a specific experience 
on the people who interact with it.

60
Lean UX and Agile UX
Because they share so many of the same hopes and attitudes, Lean and Agile UX design share a
great deal of common ground.
•Both focus on people, processes, and products to minimise resources and costs
•They operate on continuous communication and collaboration
•Each complete team holds regular meetings with stakeholders and users
•They both operate through product planning, building and testing

61
Lean UX Process
1. Outlining required outcomes through assumptions and hypotheses
◦ Business outcomes
◦ Product users
◦ Intended user requirements
◦ Product features

2. Designing the product

3. Deciding on a minimum viable product (MVP)
4. Validation

62
Lean UX
Lean User Experience (Lean UX) design is a mindset, culture, and a process that embraces Lean-Agile
methods. It implements functionality in minimum viable increments and determines success by
measuring results against a benefit hypothesis.
It introduces a system that emphasizes the following:
Removing waste. The system seeks to cut through common, time-consuming tactics like frequent
documentation by creating minimal viable products that drive learning quickly.
Constant collaboration. Lean UX brings together teams from “designers, developers, product
managers, quality assurance engineers, marketers, and others” through frequent contact and
communication (From Lean UX).
More experimentation. Designers leverage rapid experimentation with their designs to uncover more
grounded information and lessons on their products.

63
Lean UX Process
All members of your organization need to
be on board and understand Lean UX for it
to be effective.
https://www.invisionapp.com/inside-
design/lean-ux/
https://xd.adobe.com/ideas/perspectives/l
eadership-insights/designers-guide-lean-
agile-ux/

64
Agile UX
The Agile design model values individuals and collaboration over process and focuses very much on
flexibility and response. It is intended to make the process user-centric and sensitive to input and feedback
as the development proceeds and not getting bogged down in formality or paperwork if opportunities to
innovate and advance present themselves.
The Agile UX process
Agile design breaks down each project into smaller, more manageable chunks and sub-projects, known
as sprints. A sprint is as long as the project needs, allowing for time to plan and iterate as required.
The Agile process depends heavily on a cycle that incorporates iterations that plan, design, build, test, and
review. When the sprint review outlines changes that need to happen to improve the product and better
achieve the desired outcomes, a further sprint is set.
Each iteration of the product develops through close communication and collaboration.
Plan out the feedback points – Allocate suitable time to design and deliver the product and recruit testers.
Define the intended user story – What does the entire team hope to see based on audience research?
Create a prototype – Will a wireframe be enough, or will you need something closer to a final version?
Recruit users for testing – Each test user must align with target audience characteristics.
Complete the research and report the findings – Vital to both end-user and team members to consider
further steps or moving towards the product launch.
65
An Agile sprint team typically features a Product Owner, a Scrum Master and Development Team
Members.
The Product Owner is responsible for the product and delivering the required values.
The Scrum Master controls how the team works together to ensure efficiency and productivity.
The Team Members hold the necessary skills to carry out the work, whether design, development, UX or
something else entirely.
As with Lean UX design, Agile provides the same type of ‘rinse and repeat’ process, with further sprints
growing out of the results of earlier versions until a final model is realised.
The main difference between the two techniques would appear to be that Lean UX focuses on the user and
meeting their needs in product development while Agile is more about efficient communication and
cooperation in delivering the project.
where the parameters and objectives of a project are pre-determined and fixed, Agile design might present
the better solution as it offers a quicker defined route to completion and enables you to identify and
structure the delivery steps.
Where less certainty exists in a project, lean design offers the opportunity to quickly test hypotheses on
real users and develop successive interim products that increasingly meet user needs and preferences.

66
Some interesting and useful reading
• https://www.apexon.com/blog/6-ux-mistakes-causing-cart-abandonment-and-how-to-fix-
them/
• https://usabilitygeek.com/how-to-use-emotional-content-for-your-e-commerce-site/
• https://uxmastery.com/creating-conversation-ethical-considerations-trust-and-designers-
responsibility/
• https://uxdesign.cc/redesigning-the-ux-and-digital-service-eco-system-for-the-non-profit-
organization-arces-dd0d0b25abf4

67
Data analytics in UX
6 steps to UX analysis
1. Identify user issues. When you first
review your UX data you'll be looking at
hundreds, possibly thousands of data
points. ...
2. Organize your UX data. ...
3. Look for recurring issues. ...
4. Prioritize fixes. ...
5. Share your findings and
recommendations. ...
6. Build and test new features.
68
Google Now App (Context awareness)
Boarding Pass
Activity Summary
Next Appointment
Weather
Traffic
Restaurant reservations
Stocks
Sports
Event Reminders
Currency

69
70
Service Design Principles
Service design is all about taking a service and making it meet the user’s and
customer’s needs for that service.
1. genuine comprehension of the purpose of the service, the demand for the service and the
ability of the service provider to deliver that service.
2. based on customer needs rather than the internal needs of the business.
3. designed to deliver a unified and efficient system
4. based on creating value for users and customers and to be as efficient as possible.
5. Services must be designed in conjunction with a clear business case and model
6. Services should be developed as a minimum viable service (MVS) and then deployed.
7. Services should be designed and delivered in collaboration with all relevant stakeholders

71
Information Design Principles for
Service Design
Data shall be normalized between the organization and its customers
and within the organization itself
Data shall be easy to transfer and be reusable within the
organization and within the partner network
Wherever possible data entry shall be avoided and be replaced by
data lookup, selection and confirmation utilities instead

72
Technology Design Principles for Service
Design
Technology should always be used to enable a service; it
should not be the driver of a service.
Technology should be pulled into a service design rather
than pushed into it.
Technology design is to be flexible enough and agile enough
to allow fast modification in the face of changing customer
requirements

73
The 5 Pillars of Good Design Leadership

Listen first - - primary role is not to teach but to listen. Understanding the team
and the context they operate in is the starting point before trying to change
anything.
Find purpose - Good leaders are storytellers who can create narratives that can
inspire every stakeholder involved
Create alliances -The leader is responsible for being the voice of the team
internally as well as externally.
Balance structure and flexibility -Recognize the potential in your team and trust
them to be independent creative problem-solvers.
Adapt goals and monitor -Design leaders can identify countless opportunity
areas to improve in an organization, but how should they prioritize?
74
Gamification in UX
“gamification” stands for the technique of exerting game mechanics into the non-game environment,
such as websites and mobile applications.
Gaming Mechanisms
1. Challenge
2. Points
3. Badges and stickers
4. Leaderboards
5. Journey
6. Constraints
https://uxmag.com/articles/gamification-in-ux-design-designing-fun-experiences-for-
serious-situations

75
 Examples

Progress Bar Leaderboard Challenge

76
Tools for Design

77
Tools for Design
Invision
Figma
Adobe XD
Sketch

78
Invision studio
Easy sharing of whiteboard and interactive
designs with stakeholders with multiple
options and accessibility restriction.
Easy feedback using voice chat or
comments.
Make presentations interactive
choose from multiple Android and iOS skins
when presenting your mobile designs
upload JPG, PNG, PDF or GIF files for
prototyping
Components to reduce rework

79
Invision Rapid Prototyping

80
Invision sharing feature

81
Figma – Design Review feedback

82
Figma- Component Library

83
 Figma – Features
1. Brainstorming
Figma is a handy tool for brainstorming. You can use text boxes to write anything
you might need to refer to later, along with using different shapes and adding
comments—plus much more.
2. Designing Website Pages
In Figma, you can choose from numerous dimension sizes to accurately depict what
your page would look like. For example, you can choose from different iPhone sizes
if you’re making something that will feature on a smartphone.
3. Creating App Prototypes
When creating an app prototype with Figma, you can add text and change its fonts
and sizes. You’re also able to integrate several plugins, along with numerous other
things.
84
 Figma – Features
4. Project Management
Figma has several tools you can use for project management. For example, you can
collaborate with numerous people and gauge their opinions. On top of that, you can
use the shapes and text in Figma to create project timelines.
5. Mind Maps
Figma lets you get creative with your mind maps in multiple ways. In addition to typing
text, for example, you can use various markers to draw out what you’re trying to say.
Moreover, you can add connectors and different kinds of stickers.
Figma is one of the best interface design tools on the market, and it has plenty of uses
for designers. But even if you’re in another creative field, you can use Figma in several
other ways. It’s handy for the early planning stages, and you can use it alongside
numerous apps to make collaborating with others easier.
85
Adobe XD

86
Adobe XD
Design: Create design layout elements, add artboards, and import
resources from other applications such as Adobe Illustrator, Adobe
Photoshop, and Adobe After Effects. You can also use plugins to
automate repeat operations or parts of designer workflows that are
tedious, complex or repetitive.
Prototype: Select objects or artboards in your design and create
interactions between artboards. Auto animate, timed transitions
Share: Once your project is ready to be reviewed, you can share
prototypes or design specs, or export the project or assets with your
stakeholders.
87
 Sketch (https://www.sketch.com/)
A user interface sketch, or
sketch , is a mock-up of a
graphical user interface that
you create while you design an
application.
You create sketches by adding
drawing elements to the
sketching editor. You can also
add existing images, parts, and
other sketches to a user
interface sketch.
A MAC App for designers
Web app for sharing

88
Sketch web app interface

89
90