UX

Design Process
EMPATHY & DEFINE
• To empathize with the users’ problems & needs
• To understand the business' strategies and and its goals
• To identify the potential users including their behaviors, personality, pains and goals
• To gather essential information from the experts & stakeholders
• To define the product’s end goal or main goal for success
• To identify the potential product requirements such as features, contents, functionalities, etc.

Empathize, Research, Observe, Gather, Understand, Analyze

 Understand the Problem

• Interview the users/customers, clients and experts and empathize about their problems & needs (on
business or the product)
• Understand and research the business and product’s goals
• Observe how the users/customers interact with the product/s
• Learn the basics and then dive deeper on the structure of the business or the product
• Gather important information on the problem
• Conduct survey on users, interview with focus group sessions or usability tests

Empathy & Define

 Define the Problems
& End Goal

• With the help of gathered information, try to define the list of problems or the main problem needed to
be solved
• These problems could be something that are high risk, can arise in the future and needed to be answered
to achieve the product’s goal
• Define the product’s end or main goal to its users and business
• A goal answering to the question, “Where do we want to be six months, a year, or even five years from
now?”
• The end goal will be the focus of the project or the solution for the problem

Empathy & Define

 Gather Requirements

• Review all of the suggestions, clarifications or feedbacks from all stakeholders to get idea for the
requirements
• Gather the requirements needed to build the design such as important contents, design system or style
guides, documentations, etc.

Empathy & Define

 List “How Might We…” Questions

• These are questions that can help us innovate and find solutions to our problems so that we can achieve
the goal
• After listing all the possible questions, pick only the ones that can be main priorities or offer great
solutions and innovations (or voted many times)

Empathy & Define

 Create User Personas

• Gather all the types of possible users that will use the product in the real world
• Group them into at least 3 to 5 personas
• Use templates that will depend on the product or business requirements
• Define their:
‣ goals and motivations
‣ problems, needs, challenges or pain points
‣ current behavior
‣ context
‣ expectations for the product

Empathy & Define

❖ Customer Journey Mapping

• Customer Journey Map is used to map out the journey of a user in using a product/service, from the Discovery phase and up to their next
use or coming back for it. This helps us gain a deeper understanding on our users and also the business or product
• Customer journey mapping allows us to see the pain points and problems in a user’s experience, and with these data, we can provide our
solutions and improvements to the product.
• A journey map must include these 8 important elements:
* Persona (Choose only 1 persona that could represent all user/customer (but can also be more than one))
* Phases of the Purchase Journey (Phases from awareness, purchase and beyond)
* Touchpoints (A point of contact, interaction, or information gathering e.g Social Media, Website, TV ad)
* Customer Thoughts and Actions (Verbatim) (What customers do, think, and feel)
* Pain Points (The most significant issues that customers have when pursuing their mission)
* The customer’s emotional journey (The peaks and valleys in your customer’s emotional journey)
* Opportunities for Improvement (This section is where you can build on the pain points, emotional journey, and customer feedback
to start painting a picture of the future.)
* Moments of Truth ( A moment of truth is when an interaction occurs between a customer and the service provider that can leave a
lasting positive or negative impression on a customer. These are the moments your brand has the biggest opportunity to influence customer
decision, opinion, and action)

Empathy & Define

 ❖ UX Strategy Blueprint

• Strategy is about uncovering the key challenges in a situation and devising a way of coordinating effort to overcome them for a desired outcome. It’s an
interlocking set of choices that aligns activity and shows causality: if we do this, then we expect to see that.
• UX Strategy Blueprint is a way for UX teams to simply lay down all of the important guides that the team will follow for the product and business’s
success. It’s a tool to provide the strategy for overcoming problems in UX project.
• Important elements of UX Strategy Blueprint:
* CHALLENGES - What are the hurdles to doing the solutions? What opposing forces must you overcome to be able to reach the desired
outcome?
* ASPIRATIONS - What experience do you ultimately want to deliver? Consider how you will impact your customers’ work and daily lives.
How does your solution transform what they capable of doing and who they ultimately are? Your aspirations should inspire your teammates
* FOCUS AREAS - Indicating your focus areas helps concentrate effort on the things that matter most. (e.g Type of Users, Regions, Services,
Use Cases, Areas of UX (IA, visual design, etc)
* GUIDING PRINCIPLES - In business strategy, the guiding principle indicates how you’ll win against competitors. For UX strategy, the
guiding principles are the approaches you’ll take to overcome the challenges and solve the problems you’re facing. 
* ACTIVITIES - What types of UX activities are needed to implement the strategy and achieve your aspirations? This includes such things as
user research, concept development, sketching, screen design, prototyping, and testing, as well as creating patterns or guidelines.
* MEASUREMENTS - How will you know your strategy is on track? How can you show progress and success? Often benchmarking and
comparison is needed.

Empathy & Define

DELIVERAB LES
✓ Problems List (*)
✓ Objectives List or Product’s End Goal (*)
✓ Survey, Interview, Research or Usability Testing Results (of current product)
✓ Analytics Audit and Content Audit of the current state of the product
✓ Requirements List and HMW Questions
✓ Value Propositions Canvas (*)
✓ UX Strategy Blueprint or UX Strategy Guide (InVision, Step 1 - 7)
✓ Empathy Map
✓ Storyboard of the Problems
✓ User Personas (*)
✓ Customer Journey Map

Empathy & Define

 IDEATE
• To explore or research for potential solutions and inspirations
• To strategize plans for the product’s structure, system, flow, design elements, features
and prioritizations based on the acquired knowledge on previous stage
• To construct user maps, flows, content strategy, Information Architecture (IA) and
design sketches
• To align each of the deliverables to solve the problems and achieve every goals

Plan, Brainstorm, Explore, Strategize, Sketch, Test, Iterate

 Research & Brainstorm

• Do research and studies on competitor products, popular case studies, other app features, design trends and
principles
• Brainstorm for solutions such as features, functionalities, copywriting & visual design inspirations
• Use mood-boards to collect all of the best features, screenshots, inspirations taken while doing research
• Find design inspirations on sites such as
- dribbble.com
- behance.net
- mobbin.design
- collectui.com
- uisources.com
- google images & etc.

Ideate
 Create the Product Flows &
Define the Specs & Requirements

• Build the flows and structure of the product by using different kinds of UX maps. With these, we can figure out
what are the different kinds of journeys our users will take and the logical steps towards achieving a goal.
• Construct what will be content strategy and Information Architecture (IA) for each step or screen
• Specify the functionalities, features, contents and other requirements needed for building the product
• Define prioritizations for all the gathered requirements by listing only the most important features needed to be
built on the current phase, cycle or release

Ideate
❖ User Scenario Mapping

• User Scenarios map out the steps of how the users (on the point of view of our user personas) can
achieve their goals by the processes and outcomes or experience we want to provide for them
• User scenarios provides help on discovering features, functionalities, requirements and Information
Architecture (IA) needed for each user’s tasks
• User scenarios are created by user researchers to help communicate with the design team
• Templating system:
‣ Grey - Steps
‣ Blue - Feature Ideas
‣ Yellow - Questions
‣ Green - Comments

Ideate
❖ User Stories Mapping

• User Stories Mapping provides a breakdown or detailed-view on each big stories (Epics) or tasks that a user
(first-person POV) will do to achieve their goals on the product
• User Stories are grouped to flow from left to right in the order that the user will encounter them and stacked
vertically to indicate priority in descending order of importance
• User stories helps to point out required features, screen, content or IA in each stories (from big to smaller sub-
stories)
• User stories are created by project/product managers to define the requirements prior to a sprint in agile
development and to remind the team about people’s needs throughout the whole project
• User stories prevents Feature Creep. It refers to the tendency to want to keep adding more features and
expanding the scope of a project in a release or when building an MVP.
• Minimum Viable Product (MVP) is the minimum collection of user stories that we could build, yet still deliver a
product of real value to people.

Ideate
❖ User Flow Mapping

• User Flows maps out a series of steps our users will take to achieve/complete the goals from the
features/functionalities we provided in the product
• User flow diagram is a visual representation of the user’s actions
• User flows must be simple enough or consists only of 4 - 7 steps and in a one directional pattern
• User Flowcharts can be used to map out the whole flow for a user’s tasks that includes all the decisions and in a
multi-directional pattern
• With the help of user flow maps, it will help us:
* visualize how a user completes the task in solving his/her problems
* reminds what steps or screens each user will take
* decide for the content strategy and Information Architecture (IA) of each screen
* present the flow of how our users will navigate between each tasks available

Ideate
 Sketch for Ideas

• Sketch for ideas that follows the design strategy, inspirations and flows for each features/screens of our
product
• Sketches can be Low-Fidelity wireframes or Task-Level or basic user flow maps
• By sketching our ideas, we can get a glimpse on how our solutions could look like when formed
together or when things become less abstract
• It’s also a form of brainstorming for the blueprint and flows of the product

Ideate
DELIVERAB LES

✓ Trial of Low-Fidelity Wireframes (*)

✓ Research and Brainstorming notes (*)
✓ Task-level User Flows (*)
✓ Mood-boards (*)
✓ Information Architecture (IA) documentation
✓ User Scenario Maps (*)
✓ Content Strategy Templates
✓ User Flow Maps (*)
✓ UX Strategy Blueprint or UX Strategy
✓ User Stories and User Journey Maps (*)
✓ Guide (InVision, remaining steps) (*)
✓ Rough Sketches of design solutions (*)
✓ Storyboards for our solution

Ideate
PROTOTYPE & TEST
• To construct the structure of our interface and information designs and making
our ideas/solutions tangible by using wireframes and prototypes
• To define the design systems, principles or guidelines that will be implemented
• To test each of the constructed wireframes and prototypes
• To gather feedback and suggestions for each test and iterations

Design, Wireframe, Prototype, Create, Polish, Present, Usability, Test, Iterate

 Start with Wireframes

• Build Low-Fidelity Wireframes or Medium-Fidelity Wireframes by combining all of the solutions

which includes the structures such as features, functionalities, content, Information Architecture (IA)
and by following the flows
• By starting with lower level wireframes, we’re starting to define our design decisions on how we want
to structure everything and test it out for the users first before we start the High-Fidelity wireframes
which needs more effort and time to create
• Starting on lower level wireframes enable us to revise our design decisions and structures and iterate
repeatedly more easier

Prototype & Test

 Test & Iterate

• After creating the wireframes, conduct usability tests with it to know the design decisions effectiveness
and validate our assumptions
• Take note and review the user feedbacks, and then refine the bad design decisions made by iterating to
other stages of the design process and then conduct usability testing again with the revised version

Prototype & Test

 Build the High-Fidelity
Wireframes & Prototypes

• Start to build the High-Fidelity Wireframes for each screen which must follow the design structure and decisions
you have set for the low level wireframes. These wireframes must be tested on the potential users with usability
testing and were also experts approved
• Design the UI by not just making it visually appealing and elegant, but also by following tested design principles,
UI patterns, rules, and tips from the design experts and best products
• Create the design system or style guide that includes important visual design elements such as typography, colors,
components, etc. If possible, based it on the company or business’ branding identity to create consistency with all
the business’ products
• If possible, build the Prototypes that will show interaction level of the designs to the users and then create
interaction elements such as UI screen and element animations, micro-interactions, etc.

Prototype & Test

 Test & Iterate Again

• After creating the High-Fid wireframes and prototypes, conduct testing methods again to know if the
visual design, interactions and new design decisions worked accordingly
• Take note and review the user feedbacks, and then refine the bad design decisions made by iterating to
other stages of the design process and then conduct usability testing again with the revised version

Prototype & Test

 Construct Additional User Flows

• Using the wireframes and prototypes, create high level types of User Flows such as Wire Flow
(Component Level), Screen Flow (Interaction Level) or Sitemaps (for web applications)

• With these additional documentations, we can present a more detailed view of the flows for our product
and features

Prototype & Test

DELIVERAB LES

✓ UI Wireframes (Low, Medium or High Fid) (*)

✓ UI Prototypes (*)
✓ Product or Feature Presentation
✓ Visual Design System or Style Guides (*)
✓ UI Element Files (Icons, Images, Fonts, etc) (*)
✓ Additional User Flows (Wire Flow, Screen Flow, Site Maps) (*)
✓ Usability Test Plan Dashboard or other testing checklists (*)
✓ Usability Testing Results Reports such as Analytics, Documentations,
Revisions List (*)

Prototype & Test

 DELIVERY
• To refine the final version of each design solutions
• To update all of the deliverables in each stages
• To finalize the design system or style guide
• To produce product presentations and documentations

Finalize, Improve, Update, Design System, Present

EVALUATE
• To refine the final version of each design solutions
• To update all of the deliverables in each stages
• To finalize the design system or style guide
• To produce product presentations and documentations

Finalize, Improve, Update, Design System, Present