design for startup Gaza sky geeks

1. Design
for Startups

2. Introduce
Hello 

3. Who I am ?
System Analyst and Usability Engineer
Since 2010 Till Now
Skills and Quality Construction Company
Web and Mobile Design Lecturer
Since 2012 till now
University College of Applied Sciences
UX Designer and Information Architect
Freelancer
And because of the Siege
I am not a UX Designer at booking.com 

42. What is UX ?
User experience (abbreviated as UX) is how a person
feels when interfacing with a system. The system could
be a website, a web application or desktop software
and, in modern contexts, is generally denoted by
some form of human-computer interaction (HCI).

44. How UX designers work
• A good UX designer is not just a person who handles
the button shapes and placement.
• Their job is to identify problems that could arise in
the user experience and find solutions for them, so
that when you launch your product everything is
seamless.
• They will ask a lot of questions, and that’s important
because they will focus not only on color scheme
and functional performance, but also on speed,
functional performance and pretty much everything
else that your end user will be paying attention to

45. When to bring UX to the table
• You should make sure that the UX designer is one of
the first people you hire.
• Collaborate with UX designers rather than hiring
them on a full-time position.

46. How much is just enough?
The more engineers you have on your team, the more
UX designers you need to find. Think of a ratio of
about 1 UX designer to every 3-5 engineers, which
may sound high but in reality is the only solution that
will give you the competitive advantage of a well-
though-of functional design.

48. User Research
• Find out the needs of your user

49. Tools of User Research
Generative Methods
When you already have ideas to drive incremental
improvements (evolution)
Evaluative Methods
When you need ideas to drive innovation (revolution)

50. Some of Generative methods
• Focus Group
• Interview
• Immersion
• Participatory Research
• Contextual Inquiry

51. Some of Evaluative methods
• Usability Testing
• Eye Tracking
• Mouse Tracking
• A/B Testing
• Closed Card Sorting

52. The Result of User Research
• Understanding the users
• Getting a full screen about the context
• Understanding the user behavior
Later it will be converted into:
• Functions List
• Personas
• Wireframes
• User task flows and scenarios

53. Functions List

54. Prioritize List
What is most important, what is nice to have, what is
in the middle

55. Personas
Personas are fact-based (derived from user research)
fictional representations of your users. They
represent the goals, motivations, characteristics
and behaviors of the most important groups of your
users.
Here’s a sample persona (attaching a photo to a
persona helps us imagine a real person we’re building
the site for):

57. Effective Personas
• Represent a major user group for your website
• Express and focus on the major needs and
expectations of the most important user groups
• Give a clear picture of the user's expectations and
how they're likely to use the site
• Aid in uncovering universal features and
functionality
• Describe real people with backgrounds, goals, and
values

58. Questions to Ask During Persona
Development
Define the Purpose/ Vision for the Site
• What is the purpose of the site?
• What are the goals of the site?

59. Describe the User
• Personal
• What is the age of your person?
• What is the gender of your person?
• What is the highest level of education this person has received?
• Professional
• How much work experience does your person have?
• What is your person’s professional background?
• Why will they come to the site? (User needs, interests, and goals)
• Where (or from whom) else is this person getting information about your issue
or similar programs or services?
• When and where will users access the site? (User environment and context)
• Technical
• What technological devices does your person use on a regular basis?
• What software and/or applications does your person use on a regular basis?
• Through what technological device does your user primarily access the web for
information?
• How much time does your person spend browsing the web every day?

60. User Motivation
• What is your person motivated by?
• What are they looking for?
• What is your person looking to do?
• What are his needs?

61. Elements of a Persona
• Persona Group (i.e. web manager)
• Fictional name
• Job titles and major responsibilities
• Demographics such as age, education, ethnicity, and
family status
• The goals and tasks they are trying to complete using
the site
• Their physical, social, and technological environment
• A quote that sums up what matters most to the persona
as it relates to your site
• Casual pictures representing that user group

62. Create the IA

64. What is the IA ?
”The art and science of organizing and
labelling websites, intranets, online
communities and software to support usability and
findability”
Wikipedia

65. In Simple Terms
Easy to find, Easy to understand content

66. Figure out the metadata
• Metadata is information about information. It’s
what helps users find the content they’re looking
for.

67. Let’s say you want to buy a coffee grinder, and go to a
website that you know that sells those. If you browse
around and can’t find it, it’s a sign of bad metadata. If
you get your metadata right, you’ve already cleared
the first hurdle of effective site design.

68. • You have to determine what kind of information to
store about stuff that people care about – life coffee
grinders. Maybe they’d like to search by blade size?
Color? Brand?
• Knowing what are all the different parameters and
variables you need to store in your system is crucial
for excellent search results.

69. Create User Scenarios
A scenario is a story about someone (your user
persona) using your website to carry out a specific
task or goal:
like booking a flight, buying yoga pants or applying to speak at
an event.
Scenarios work together with personas by serving as
the stories behind why the particular persona would
come to your website.

70. Create User Scenarios
• What does the persona hope to accomplish on your
website?
• What can help him complete the task at hand?
• What might cause friction?
• You should focus on users and their tasks rather
than on your site’s organization and internal
structure.
• As a result, you will get insights to what content the
site must have and how it should be organized.

71. Map user tasks to individual web
pages
• Before you even start thinking about actual design,
you need to have the content in place.
• Next step is to decide what happens on your web
pages and how many pages exist on your site

72. • Each page must do two things:
• help the user accomplish one specific task,
• make the next step easy to access.

73. There are three types of pages on
your site:
• Navigation pages. These help users determine
where to find what they want, and give them access
to it. Their goal is to send users somewhere else.
Typically that’s a home page or search results page.
• Consumption pages. These are the “somewhere
else” you usually go to: articles, videos, pricing
information and so on.
• Interaction pages. These pages let users enter and
manipulate data. Think search page or a sign-up
form.

74. • Each type of page is optimized for a different kind of
user task.
• Understanding the type of page you need helps you
tailor the interface design.
• When you draw a site map or map out your user
flows, it’s important to note there whether a page is
a navigation page, consumption page or interaction
page – and design accordingly.

75. Techniques for figuring out the
optimal menu structure
Card sorting
You have a bunch of pages on your website that need
to be categorized. What should go where? Card
sorting lets you figure out where people would want
to find something.

78. How the basic method works:
• You take a set of index cards (e.g. those yellow post it notes)
and write a term (e.g. name of the page, content) on each
one of them. Each card represents a (category) page on your
website. If you’re an audio-video ecommerce site, you might
write down things like ‘digital SLRs’, ‘Canon lenses’, ‘DVD
players’ etc.
• Test subjects (people that you’ve recruited for this purpose,
representatives of your ideal customer) are given a set of
index cards with terms already written on them.
• You ask people to put the terms into logical groupings, and
find a category name for each grouping.
• This process is repeated with each test subject.
• After going through the exercise with all the test participants,
you analyze their output and start seeing patterns.

79. 3 main types of card sorting:
• Open card sorting. This is where the test participants create their
own names for the categories. It gives you insight to how your
customers think and mentally classify items.
• Closed card sorting. Here participants are provided with a
predetermined set of category names. Their goal is to assign the
index cards to these fixed categories.
• Modified Delphi method. This is different from the rest. Here
participants work one after another, refining a single model. The
first test subject does a traditional open card sort. The following
testers start with whatever the previous tester created. A
participant can choose either to modify that organization (rename
or restructure stuff), or even scrap the whole thing and start over
(create a new, different organization). You repeat the process until
participants are no longer making any significant changes (the
structure stabilizes).

80. SKETCHING

81. A Sketch is Not a Wireframe

82. • When you sketch, you are trying to get a basic
concept of how the app will work in user interface
form.
• The specifics of the user interface aren’t important
here. What matters most is understanding what the
user will basically see on each screen that will lead
them to the desired result.

83. Sketching Always Comes Before
Wireframing

84. Sketching Is Not Drawing
• Your Sketches Don’t Need To Look Good; They Only
Have To Convey Your Idea.

85. How To Sketch
• DIVERGENT SKETCHING
In the beginning, you will want to capture different
ideas for your mobile app or website. Start
sketching different versions of a single key screen or
parts of it. Your goal is twofold: to generate a lot of
different ideas, and to explore and evaluate them —
at the same time. The more ideas you come up
with, the more options you will have to choose from
later on.

86. Divergent
Sketching

87. CONVERGENT SKETCHING
• Once you have sketched multiple versions of a
screen, pick the one that best solves the problem.
• Unfortunately, a single sketch will rarely check all of
the boxes. In most cases, you will have to combine
ideas or parts of ideas into a single winning concept.
To do this, you will need to explore in more depth
by making a more detailed sketch on a single page.
Use the white space to annotate. Jot down all
questions, new ideas, important or unclear areas,
and things to discuss. This will help others to
understand your thought process.

88. THE COST OF SKETCHING
+

89. Wireframing

90. WHAT IS WIREFRAME ?
• A wireframe is a skeleton of a page. It shows the
priority and the organization of things on the screen
and how users will get to other parts of the site.
• Wireframes range in fidelity from quick sketches on
a whiteboard to detailed computer renderings.
• While wireframes will vary in their level of detail,
they generally reflect the designer's ideas about the
placement of elements on the page, the labeling of
elements, site navigation, and how the user will
interact with the site.??

91. Fidelity Levels

92. BLOCK DIAGRAMS

93. Grey Boxes

94. High-Fidelity Text

95. High-Fidelity Color

96. High-Fidelity Media

97. High-Fidelity Interactions

98. Annotated Wireframes

99. Tools

100. SOME OF A LOT
• Balsamiq Mockups
• Axure
• UXPin
• Invisionapp
• Justimind

101. I LOVE
uxpin.com

102. User Flow
How the user go
from different
website pages

103. MOCKUP

104. PROTOTYPE

105. WHAT IS A PROTOTYPE?
It’s a simulation of the final product. It’s like an
interactive mockup that can have any degree
of fidelity. The main purpose of building
prototypes is to test whether or not the flow of
the product is smooth and consistent.

106. PAPER PROTOTYPE

107. PAPER-SOFTWARE PROTOTYPE
POP Marvel

108. User Experience Design
Visual Design
The Interface is the Product
The USER

152. USABILITY
Looking Beyond ‘Ease of Use’

153. DEFINING EASE OF USE
The extent to which a product can be used by
specified users to achieve specified goals with
effectiveness, efficiency, and satisfaction in a specified
context of use
ISO 9241 standard

154. THIS DEFINITION CAN BE
EXPANDED TO :
• Effective
Effectiveness is the completeness and accuracy with which users achieve specified
goals
• Efficient
Efficiency can be described as the speed (with accuracy) in which users can
complete the tasks for which they use the product.
• Engaging
An interface is engaging if it is pleasant and satisfying to use
• Error Tolerant
Prevent errors caused by the user’s interaction, and to help the user in recovering
from any errors that do occur.
• Easy to Learn
allows users to build on their knowledge without deliberate effort.