Step by step process that leads to the development of a good User Interface.

1. www.hgsinteractive.co
m
The theory of great UX Design

2. x
The UX process begins with strategy
and goes on till the testing phase.
Let us take you through each stage
in detail.

3. www.hgsinteractive.co
m
Strategy

4. x
1. Design Strategy
Strategizing is important from the outset of the project because it articulates the
brand, guiding principles, and long-term vision of the organization. The strategy
underpinning a UX project will shape the goals of the project—what the
organization is hoping to achieve with the project, how its success should be
measured, and what priority it should have in the grand scheme of things.

5. x
1. Design Strategy
Technique What it is When we use it
Competitor Analysis Performing an audit/review of competing
websites and apps; conducting user testing
of competing sites; writing a report that
summarizes the competitive landscape.
Strategy, Research
Stakeholder Interviews Conversations with the key contacts in the
client organization funding, selling, or
driving the product.
Strategy, Research

6. www.hgsinteractive.co
m
Research

7. x
2. Research
Often referred to as the Discovery phase, the Research phase is probably
the most variable between projects. Complex projects will comprise of
significant user and competitor research activities, while small startup
websites may skip all research activities other than some informal
interviews and a survey.

8. x
2. Research
Technique What it is When we use it
Contextual Enquiry Interviewing users in the location that use the
website/app, to understand their tasks and
challenges.
Research
Surveys Crafting an online survey, primarily to solicit
feedback from current (or potential) users.
Research
Content Audit Reviewing and cataloguing a client’s existing
repository of content.
Research
Diary Study Asking users to record their experiences and
thoughts about a product or task in a journal over a
set period of time.
Research

9. x
2. Research
Technique What it is When we use it
User Interviews User interviews are a key activity for understanding the tasks
and motivations of the user group for whom you are designing.
Interviews may be formally scheduled, or just informal chats (for
instance, in a suitable location that your target demographic are
present).
Research
Heuristic Review Evaluating a website or app and documenting usability flaws and
other areas for improvement.
Research, Analysis
User Testing Sitting users in front of your website or app and asking them to
perform tasks, and to think out loud while doing so.
Research, Analysis, Design,
Production
Personas A persona is a fictitious identity that reflects one of the user
groups for who you are designing.
Analysis
A/B Testing Good for testing new or experimental features before releasing
them to all customers.
Design,Research

10. www.hgsinteractive.co
m
Analysis

11. x
3. Analysis
Aim of the Analysis phase is to draw insights from data collected during
the Research phase. Capturing, organizing and making inferences from
the “what” can help UX Designers begin to understand the “why”.
Communicating the designer’s understanding back to the end-users helps
to confirm that any assumptions being made are valid.

12. x
3. Analysis
Technique What it is When we use
it
Use Cases A use case is a list of steps that define the interactions between a user and a system. Use cases, especially when
used as requirements for software development, are often constructed in UML, with defined actors and roles.
Analysis
Storyboards A storyboard is a tool inspired by the filmmaking industry, where a visual sequence of events is used to capture a
user’s interactions with a product. Depending on the audience, it may be an extremely rough sketch, purely for
crystallizing your own ideas.
Sometimes it can be useful to create a slightly more polished version of this—a comic—to communicate the
sequence of events to key stakeholders, in order to achieve buy-in for a concept.
Analysis
Affinity
Diagramming
A business technique for identifying and grouping patterns within unrelated data. Analysis
Personas A persona is a fictitious identity that reflects one of the user groups for whom you are designing Analysis
Scenarios A scenario is a narrative describing “a day in the life of” one of your personas, and probably includes how your
website or app fits into their lives.
Analysis

13. x
3. Analysis
Technique What it is When we
use it
Mental
Models
A mental model diagram is a fishbone or horizon diagram where the top towers represent individuals' motivations,
emotions, and stories related to their experience in achieving a particular goal, regardless of the tools they use. The top
part of the diagram is person-focused, not solution-focused. The bottom towers of the diagram represent the features of
your organization's offerings, aligned beneath the appropriate upper towers that they support the best. You can see
where your organization's design and business requirements support people's goals well and where they need
improvement. The diagram as a whole is generative, not evaluative, helping your organization realize weaknesses and
gaps in the way you support people and adapt existing products, services, or processes to particular behavioral
audiences or situations.
Analysis
Experience
Map
An experience map, or customer journey map, is an extended version of a mental model. Rather than looking at one
moment in time for a single user, an experience map is a holistic, visual representation of your users’ interactions with
your organization when zoomed right out.
Because many organizations and the projects within them are large and complex, an experience map is usually captured
on a large canvas—a necessarily big poster that you can zoom in or out of to explore the details.
Analysis
Card Sorting Card sorting is a technique where users are asked to generate a folksonomy, or information hierarchy, which can then
form the basis of an information architecture or website navigation menu.
Analysis

14. www.hgsinteractive.co
m
Design

15. x
4. Design
Design phase of a UX project is extremely collaborative (involving input and
ideas from different people) and iterative (meaning that it cycles back upon
itself to validate ideas and assumptions). Building on the user feedback loop
established in previous phases, the premise of the Design phase is to put ideas
in front of users, get their feedback, refine them, and repeat. These ideas may
be represented by paper prototypes, interactive wireframes, or semi-
functioning prototypes, all deliberately created in low-fidelity to delay any
conversation relating to graphic identity, branding or visual details.

16. x
4. Design
Technique What it is When we
use it
Collaborative
Design
Inviting input from users, stakeholders, and other project members. Design
Workflow
Diagram
A workflow diagram (or activity diagram) is a graphical representation of activities and actions conducted by
users of a system.
Design
Sitemap A sitemap is a complete list of all pages available on a website. Design
Wireframe A wireframe is a rough guide for the layout of a website or app. A prototype is similar in that while far from
being a polished product in terms of visuals or functionality, it gives an indication of the direction that the
product is heading. “Mockups” is the term I use for wireframes that have been created in high fidelity, but
for some people these three terms are interchangeable.
Design

17. x
4. Design
Technique What it is When we
use it
Paper
Prototype
Paper prototyping is the process of creating rough, often hand-sketched, drawings of a user
interface, and using them in a usability test to gather feedback. Participants point to locations on the
page that they would click, and screens are manually presented to the user based on the interactions
they indicate.
Design
Mood Board A mood board is a collage, either physical or digital, which is intended to communicate the visual
style a direction is heading (or should be heading). Stakeholders may use a mood board to provide a
visual designer with the atmosphere they would like their site to convey and the colour palette to
explore.
Design
A/B Testing Good for testing new or experimental features before releasing them to all customers. Design,Researc
h

18. www.hgsinteractive.co
m
Production

19. x
5. Production
The Production phase is where the design is fleshed out, content and digital
assets are created, and a high-fidelity version of the product is validated with
stakeholders and end-users through user testing sessions. The role of the UX
Designer shifts from creating and validating ideas to collaborating with
designers & developers to guide the project to ensure everything is on the
right track.

20. x
5. Production
Technique What it is When we
use it
Beta Launch Releasing a closed beta release of your product involves allowing only a select group of users to use the
software and provide feedback before it becomes available to the wider public.
Design,
Production

21. www.hgsinteractive.co
m
Usability Testing

22. x
6. Usability Testing
Usability testing refers to evaluating a product or service by testing it with
representative users. Typically, during a test, participants will try to complete
typical tasks while observers watch, listen and takes notes. The goal is to
identify any usability problems, collect qualitative and quantitative data and
determine the participant's satisfaction with the product.

23. xThank you