THE
DESIGN
Our four-step process will
increase your knowledge and
confidence in User Experience
(UX) design.
PROCESS
Table of Contents
1. Research
2. Wireframe
3. User Testing
4. Look and Feel Design (UI)
Plan, Discuss, Discover
STEP ONE
Understanding your users is the first step. Knowing who and more
RESEARCH
importantly why a customer is using your product is the most
significant step in your entrepreneurial journey. Designing a
product with the end-user in mind will allow you to create a
product that customers can not help but love!
BENEFITS: User-centered design starts by setting objectives and goals. It sets
the foundation for strategy, design, and content. At the research
• Goal Analysis
stage, we help you to discover knowledge gaps and align your
• User and Stakeholder interviews assumptions with real user expectations.
• Personas
• Workflows
What matters to users isn't always what we
• Competitor Analysis “think” matters.
To create a great user experience, developers must first take the
time necessary to understand their end users. Conducting research
helps developers get into customers’ mindsets. You will want to
interview potential customers and stakeholders in the project.
Simple Persona Example Create a persona
The best way to get into a customers mindset is to create a
Persona of a typical user. Persona’s answer the question,
Empty Template “Who are we designing for?” and they help to align
strategy and goals to specific user groups.
A user persona is a valuable tool in the UX design process
because it reminds designers and other stakeholders that
they’re designing for real people. Rather than designing
for user group A and user group B. With a specific kind of
user in mind design decision can be made to make the
best experience possible.
Complete Template You may need to create different personas for
the different sorts of users your product will
represent.
Designers and developers are busy, we are in offices, we
have deadlines, and our users are somewhere we are not.
Printing out personas and hanging them on the wall is an
excellent way to keep our users in sight and in mind.
Your users don’t go away just because you
decide not to look at them.
Competitor Analysis Uber vs Lyft vs Instacart:
UX Analysis
Evaluating the competition for UX designers is a little
different than marketing or business competitor analysis.
We are specifically looking at the designs and functionality
a product uses to solve problems.
Intentionally look at designs of products that are both in
direct and indirect competition. Direct competitors are
designs looking to solve the same problems for the same
Direct
user niche. Indirect competition could have a a different
service, product, or user niche.
Let’s use well known companies as examples. The ride-
sharing apps Uber and Lyft are in direct competition, they
have overlapping customers due to the similar services
offered.
An indirect competitor would be Instacart, customers get
deliveries from local grocery stores and make payments
with their phones. Even though Instacart offers a much
different service, there will be an overlapping user base
Indirect
and it benefits the UX designer to analyze all three
companies.
*Halloween Themed
Turning ideas into rough design
STEP TWO
The Design phase of a UX project is collaborative and iterative.
Wireframe
Many different people will have ideas and input for your project
and the designs will be constantly updated as ideas are validated
or dismissed.
Put your ideas in front of users, get their feedback, refine them,
BENEFITS: and repeat. These ideas may be represented by paper prototypes,
wireframes, or interactive prototypes. At this point in the process
• Understanding your users'
behaviors all designs are as simple as possible, no branding, no images, no
colors, all deliberately created in low-fidelity to get feedback on
• Finding the right features functionality.
• Determining the layout
If you start with color and brand identity users will
• Defining a version one (v1) focus feedback on how the product looks rather than
product release
how it functions. At this point in the process
functionality is the most important aspect!
Create a Wireframe
A wireframe is a rough guide for the layout of a website or
app. The terminology used in design documentation often
gets used interchangeably, so let’s clarify the differences.
Sketch Wireframe
Think of wireframes as the blueprint. They give a solid
idea of where everything will eventually go. Wireframes
help you focus the placement of content for your
prototype.
Next comes the mockup—Visual Fidelity. Mockups focus
on visuals by using brand colors and placeholder images.
This stage happens after you get functionality feedback
from the wireframe stage.
Remember functionality is the most crucial
element. It is true that visuals attract
customers, but features keep them coming
back.
With the interactive prototype, you test your interface
ideas and generate the feedback necessary to keep the
design headed in the right direction.
Get your product In the user’s hand
STEP THREE
Getting feedback is an essential element in the design process,
USER
talk with users often. Do not wait until you have the perfect designs
or the ideal prototype. Fast iterations are important! Make a
version fast, give it to users, find out what users think, make
TESTING
changes based on feedback.
“If you are not embarrassed by the first version of
your product, you've launched too late.”
- Reid Hoffman, the founder of LinkedIn
BENEFITS:
• Understanding your users' A variety of methods can be implemented when collecting data
behaviors
from users. User interviews, survey’s, one-one sessions, A/B
• Finding the right features testing, and focus groups.
• Determining the layout Give the user a task such as, “Find the date and time the exhibit will
be open to the public.” or “Order tickets for the exhibit.” Then give
• Defining a version one (v1)
the user access to the app or website and sit back and watch. Write
product release
down the steps the user is taking to get the information, keep track
of how much time the task takes to complete.
Ensure that, as the observer, you do not try to help the user.
Consider ESTABLISHED FUNCTIONS
STEP FOUR
It is not a conversation of “copying” design, it is important to
LOOK & FEEL
understand that humans have a strong memory for where things
are visually located on the screen. Leverage this characteristic by
reserving commonly used locations for various elements such as
DESIGN [UI]
having the logo on the top left, search field on the top right, exit
icon on the top right, etc.
BENEFITS:
• Visual Appeal
Author/Copyright holder: Apple Inc. Copyright terms and license: Fair Use Author/Copyright holder: Microsoft Corporation. Copyright terms and
• Emotional Response license: Fair Use
Apple and Microsoft place their logo on the top left, and the
• Brand Unified Identity
search field on the top right of their websites. This consistency
helps users feel oriented when they browse a new and unfamiliar
site. Having inconsistent interface is like trying to communicate
with the user in several languages. Fonts, buttons, and labeling
needs to be consistent across the product. Keep it simple and
consistent.
Design should be subtle
A designer should think functionality first. No matter the
Sketch Wireframe Mockup
purpose of your project, UX and UI design are key factors
to whether it turns out to be a failure or a success. A
successful design is the one that is unnoticed by users.
Subtle design allows users to pay attention to their needs
rather than the interface.
Be open to new design methods.
An important element to remember is, you are not your
user. In the end you may end up creating something you
personally do not like, but if your customers love it and are
willing to pay for it then that is all that matters!
An interactive prototype can be made in either the
wireframe (low-fidelity) or a mockup (high-fidelity) stage.
Thanks for reading
DO YOU HAVE AN WEBSITE OR AN APP
IDEA?
Visit our website at [Link]
3r Strategy is a division of 3r Interactive, LLC
Jay Johns
Founder
3r Interactive, LLC
jay@[Link]