DESIGN THINKING

PROTOTYPE - LOW AND HIGH FIDELITY

(WITH PROS AND CONS)

Submitted by:

19BBS0204

MEEDINTI GOWRI NAMRATHA

 Prototyping

Prototypes are often used in the final, testing

phase in a Design Thinking process in order to

determine how users behave with the prototype,

to reveal new solutions to problems, or to find out

whether or not the implemented solutions have

been successful. The results generated from these

tests are then used to redefine one or more of the

problems established in the earlier phases of the

project, and to build a more robust understanding

of the problems users may face when interacting

with the product in the intended environment.

Prototypes are built so that designers can think

about their solutions in a different way (tangible

product rather than abstract ideas), as well as to

fail quickly and cheaply, so that less time and

money is invested in an idea that turns out to be a

bad one
 IDEA OF
THE PROJECT

To build a personal finance app targeted at Gen-Zers,

that helps them flexibly plan their budget and track their

spending. It gives users insight into their financial

situation and helps them stay in control for the long term.

Core features:
View spending tendencies graphically

View overall expenditure in each category in

pie chart format

View statistics by entering data

Check weekly, monthly and annual statistics

Use calendar view

Use budget planning features

Add shopping/other expenditure lists to track

and evaluate expenses

Low-fidelity prototyping

Low-fidelity (lo-fi) prototyping is a quick and easy

way to translate high-level design concepts into

tangible and testable artifacts. The first and most

important role of lo-fi prototypes is to check and

test functionality rather than the visual

appearance of the product.

The basic characteristics of low-fidelity

prototyping:

Visual design: Only some of the visual

attributes of the final product are presented

(such as shapes of elements, basic visual

hierarchy, etc.).

Content: Only key elements of the content are

included.

Interactivity: The prototype can be simulated

by a real human
 Low-fidelity prototyping:
PROS and CONS

Quick and cost Does not give an

effective. insight into the actual

models - lack of

Easy to make changes realism

and run new iterations.

Throw-away models Sometimes, low-fi

prototypes may not be

Gives an overall rough sufficient for your

view of the product in intended users.

less time and with less

effort

Such prototypes often

Advanced technical remove control from

skills are not required, the user, as they

the ideas and generally have to

creativity can interact in basic ways

flourish or simply inform an

evaluator.

Lastly, Encourages and

fosters design thinking.

Methods for
Low-fidelity
prototyping

Storyboarding

Sketching

Card sorting

Wireframing

Wizard of Oz
 Wizard of Oz
The Wizard of Oz method is a process that allows

a user to interact with an interface without

knowing that the responses are being generated

by a human rather than a computer by having

someone behind-the-scenes who is pulling the

levers and flipping the switches.

The Wizard of Oz method allows researchers to

test a concept by having one practitioner – the

‘Moderator’ – leading the session face to face

with each user, whilst another practitioner – the

‘Wizard’ – controls the responses sent to the user

via the chosen device.

 Tanya Maya (Wizard)

What she is seeing: What is happening:

Maya is the one creating the

graphics using other softwares. It

is not programmed.
 Tanya Maya (Wizard)

What she is seeing: What is happening:

Maya is sending messages and

notifications and interacting with

Tanya.
 Storyboarding
Storyboarding is an iterative, interaction design

methodology that uses a series of sketches or

pictures to demonstrate an end to end solution for

a user scenario. This type of low fidelity prototype

is used to illustrate design concepts and obtain

feedback early in the design process.

Storyboards are particularly useful for refining and

validating concepts before writing detailed

functional specifications. The technique enables

you to work effectively with your multi-disciplinary

team to create highly usable, user centered

designs.
 Story

Tara is a student. She also works as She usually spends the money

a part time librarian and waitress to earned on daily necessities,

pay for her tuition. She earns shopping, entertainment and

enough money. other activities.

But often, she often finds her account She is worried about having a long

balance low or nil in the last few days term debt. She doubts if she can

of the month. Seldom, she has nothing pay her debt off within 4 years of

to contribute to her savings. her study in college.

 Story

One day, while on a call with her aunt,

Tara installs a personal
who happens to be an expert in finances,
finance app and starts using
she learns about personal finance apps.
it.

After 3 months of cautious and careful Tara is relived. If she continues this,

tracking of her expenses, she manages she can pay off her debt in 3 years.

to have some money to add to her She’s committed. She recommends

savings in the fourth month. the app to her friends and family.
 Card Sorting
Card sorting is a method used to help design or evaluate

the information architecture of a site. In a card sorting

session, participants organize topics into categories that

make sense to them and they may also help you label

these groups. To conduct a card sort, you can use actual

cards, pieces of paper, or one of several online card-

sorting software tools.

Card sorting will help you understand your users'

expectations and understanding of your topics. It is often

most useful once you have done some homework to find

out about your users and understand your content.

Knowing how your users group information can help you:

Build the structure

Decide what to put on

Label categories and navigation

Cards - Unsorted
Profile Upload
picture
Balance bills

Spending Email Password

Credit Cash flow Income

Cash flow View

Cash flow
trend graphically
Cards - Unsorted
View in Seamless
Enter Syncing
Pie chart data across devices

Icons Financial Tip of Font

the day pop up

Notes Reminders Colour

and lists and alerts theme

Simple and
Dark mode Logos
fast UI
Cards - Sorted
Profile Upload
picture
Balance bills

Spending Email Password

Credit Cash flow Income

Cash flow View

Cash flow
trend graphically
Cards - Sorted
View in Seamless
Enter Syncing
Pie chart data across devices

Icons Financial Tip of Font

the day pop up

Notes Reminders Colour

and lists and alerts theme

Simple and
Dark mode Logos
fast UI
Cards - Categorized
Spending Income

Credit Balance Cash flow

Categories

Profile Seamless
picture Syncing
across devices

Notes Simple and

Email and lists fast UI

Password

Dark mode
User

User Profile experience

 Enter Statistics
data

View in
Pie chart Cash flow
Upload
bills

Cash flow View

trend graphically

Data

Font
Design

Colour
Logos
theme

Financial Tip of Reminders

Icons
the day pop up and alerts
 Wireframing
A wireframe is a static, low-fidelity representation

of your product, and in the world of web and

mobile design, a basic guideline of your website

or app – the skeletal framework – for both

designers and developers to follow.

However, depending on who you talk to, i.e.

designers vs. developers, you’re bound to get a

different answer as to what a wireframe is.

For instance, developers tend to use wireframes

to better understand the core functionality of a

website or app, whereas designers may use them

to show the navigation flow between site screens.

 Login

Transactions
 Budgets and Statistics

Calendar View and tip of the day

 Sketching
Sketching is useful at almost every stage of the project.

You might want to come back with a design modification

during mid-development or even post launch. Most of the

times you want to quickly visualize new ideas and so

burst out with pen and paper even when you have high

fidelity design ready! It’s faster to communicate and

validate design changes on paper than on high fidelity

Photoshop designs.

Designers use different type of Sketches depending on

who they are working with and what they need to

communicate. Sketches are great when —

Designer/product manager is thinking through all the

initial ideas running through his head,

Outline the steps in a user flow

Explore and validate variety of layouts

High-fidelity prototyping

High-fidelity (hi-fi) prototypes appear and function as

similar as possible to the actual product that will ship.

Teams usually create high-fidelity prototypes when

they have a solid understanding of what they are

going to build and they need to either test it with real

users or get final-design approval from stakeholders.

The basic characteristics of high-fidelity prototyping

include:

Visual design: Realistic and detailed design — all

interface elements, spacing, and graphics look just

like a real app or website.

Content: Designers use real or similar-to-real

content. The prototype includes most or all of the

content that will appear in the final design.

Interactivity: Prototypes are highly realistic in their

interactions.
High-fidelity prototyping:
PROS and CONS

Engaging: stakeholders Takes longer to produce

can instantly see their than low-fi prototypes.

vision realised and will

be able to judge how Test users are more

well it meets their inclined to focus

expectations, wants and superficial

needs. characteristics,

not the content

User testing involving Designers are often

high-fi prototypes - The loathed to make

closer the prototype is to changes.

the finished product, the

more confidence Software prototypes may

the design team give test users a false

will have in how impression

people will

respond to, Making changes to

interact with prototypes can take a

and perceive the design. long time

 P r o t o t y p e

Viewing

transactions

Adding a

transaction
 P r o t o t y p e

Using icons

and

categorising
P r o t o t y p e

Adding

budgets and

tracking

expenses
P r o t o t y p e

Viewing and

analysing

statistics