Wireframes and Low-fidelity prototypes

Week 1

Product goal statements

A product goal statement is a short description of all the empathy maps, personas, user stories, and
user journey maps that helps us to focus our design to a set of problems and that we don't lose focus
on what's more important.

A goal statement defines the ideal solution for the design, the problem is defined in the problem
statement and the solution in the goal statement. It cover what a user can do with the product, who
does it affect and why product affects users in a positive way and how much is the products
effectiveness.

User flows

A user flow is the path taken by a typical user on an app or website so they can complete a task from
start to finish. A user map shows how a typical user will navigate through your app and this allows us to
make our navigation UX simpler and easier for users.

Storyboards and user flows

Creating a story board is a great way to ideate and outline the ideal flow for your design. A story board
is a series of panels or frames that tell a story about how the app should be navigated.

A storyboard consists of four key elements, the character, the scene, the plot, and the narrative. The
character represents your user and the scene represents the user's environment and where he is at
currently. The plot describes the benefit of the design and the narrative describes what problem does
the user have and how can our design help him.

A typical storyboard consists of six panels and each of them have supporting captions.

There are two different kinds of storyboards that UX designers use. There are big-picture storyboards
that give us a broad view of the user's experience with our product and what problems are they facing.
The second one is called the close-up storyboard focuses on the design of the product rather than the
user and how the user navigates through our design to complete his task.

Design fidelity

A design has different levels of fidelity. Fidelity means how close the design is to the actual product. A
low-fidelity design is just a quick idea of how the product should look like and are mostly used in the
ideation phase of the UX design process.
High-fidelity design are very much close to the final design and are more interactive than a low-fidelity
design and are used in the prototype phase of the UX design process.

Wireframes are are basic outlines of the design and only show how and where components should be
placed and are used to make the basic structure of designs.

Week 2

Information Architecture

Information architecture is how information is displayed out in your design. IA helps to organize the
content in your designs and makes navigation easier for the user. The more research you do the more
ways you'll learn to make the information architecture of your app easier.

Information architecture is like a treasure map, you need to guide your user to the X mark.

A good information architecture is built using these three things.

Organization: How different pieces of information are organized in your app.

Hierarchy: This shows what should the user focus on first and creates a tree like structure to
organize data and sub-data.

Sequence: The order in which the user should go through your design.

Information architecture is also a great way to create sitemaps for websites and mobile apps.

Basic principles of IA

There are eight basics principles of good information architecture that were created by Dan Brown the
founder of EightShapes. These principles help UX designers to understand their products and make
decisions accordingly.

Object principle: You should view your content as “living” and as something that changes and
grows over time.

Choice principle: People think they want to have many choices, but they actually need fewer
choices that are well-organized.
Disclosure principle: Information should not be unexpected or unnecessary.

Exemplar principle: Humans put things into categories and group different concepts together.

Front door principle: People will usually arrive at a homepage from another website.

Multiple classification principle: People have different ways of searching for information.

Focused navigation principle: There must be a strategy and logic behind the way navigation
menus are designed.

Growth principle: The amount of content in a design will grow over time.
Analog and Digital Wireframes

Creating wireframes of your designs on papers is the quickest and easiest way to get started with your
designs. Wireframes allow you design the basic structure of your app that you are designing.

Digital wireframes allow for more flexibility as oppose to paper wireframes. They can look somewhat
better than the paper wireframes and also can be interactive so you can create user flows and
interactive dialogs to show what would happen if the user clicked on a button.

Gestalt principle

Gestalt principles are used to describe how humans form connections between shapes and patterns
that are similar looking and simplify complex images to better understand them.

By grouping similar items together in your designs you can add a visually pleasing affect for your users.
Things like similarity between components, icons, and the distance between them affects how a users
feels about your app's design.

Week 3

Low-fidelity
A low-fidelity prototype is the next step in your UX design's life. You first make wireframes on paper
then you transfer them to your UX design software and then we add interactivity into those wire frames
and this is called a low-fidelity prototype.

A low-fidelity prototype defines which screen comes first and how users can navigate between different
screen and interact with dialogs and forms

Don't decieve your users

Whenever you go to a website you'll always see a popup saying that you should sign up for their
newsletter and get a discount coupon or flash deals that expire in 5 minutes or random products being
added into your cart. These are all wrong practices to get something from the user and this will end up
with the user having a terrible expereince and won't visit your site or try to avoid it.

A UX designer's job is to make sure that users are attracted to products that they design but this
doesn't mean that you should use unfair means. Always do the right thing as this will be rewarded in
the future.

Each business out there wants to hog all the attention of its customers and it's your job as a designer
and a user that you don't use any unfair means and make sure that your users get the best experience
possible.