foodprint
Web Design
•
“The design is not just what
it looks like and feels like.
The design is how it works”
—
Steve Jobs.
Learning outcomes of today’s session
•
Designing a website that is highly
usable.
•
Designing a website to enhance
conversion.
•
Designing a website for different
customer segments.
•
Optimizing
landing pages.
•
Pursuing
A/B testing.
•
Developing a
mobile first
design.
© Varqa Bahar
Design for usability
© Varqa Bahar
How can we make websites more usable?
|
FOLLOWING WEBSITE CONVENTIONS |
CREATING EFFECTIVE VISUAL HIERARCHIES |
BREAKING PAGES INTO CLEARLY DEFINED AREAS |
ELIMINATING DISTRACTIONS |
FORMATTING CONTENT TO SUPPORT SCANNING |
MAKING IT OBVIOUS
WHAT IS CLICKABLE
Following website conventions
Creating
effective visual
hierarchies
Breaking pages into clearly defined areas
© Varqa Bahar
© Varqa Bahar
© Varqa Bahar
Eliminating
distractions
© Varqa Bahar
Formatting
content to
support
scanning
Making it obvious what is clickable
How can we make websites more usable?
FOLLOWING
WEBSITE
CONVENTIONS
CREATING EFFECTIVE
VISUAL HIERARCHIES
BREAKING PAGES
INTO CLEARLY
DEFINED AREAS
ELIMINATING
DISTRACTIONS
FORMATTING
CONTENT TO
SUPPORT SCANNING
MAKING IT OBVIOUS
WHAT IS CLICKABLE
© Varqa Bahar
Class discussion
•
Go through the website of
•
Evaluate the usability of the website:
•
Does the website follow website conventions?
•
Does the website have visual hierarchies?
•
Do they break pages into clearly defined areas?
•
Did they eliminate distractions? Or are there any distractions?
•
Is the content formatted in a way to support scanning? Or is it
like
a
brochure?
•
Is it obvious what is clickable on the website?
© Varqa Bahar
Design for conversion
Design for conversion
•
What are you offering?
•
Why should I pick you? (What is the UVP?)
•
What do you want me to do next?
© Varqa Bahar
Design for conversion: https://miro.com/
Core design principles for conversion
Call to action
Context
Clarity
Congruence
Design for conversion: Magento
Core design principles for conversion
Credibility
Closing
Continuance
Design for conversion: https://marvelapp.com/
© Varqa Bahar
© Varqa Bahar
Design for conversion: https://marvelapp.com/
Design for conversion: Magento
Web design for different
customer segments
© Varqa Bahar
© Varqa Bahar
© Varqa Bahar
Designing website for different customer segments:
New vs existing customers
Designing website for different customer segments:
men and women
Conversion rate optimization: A/B testing
Version A
Version B
Never stop A/B testing to optimize conversion rate of the website.
© Varqa Bahar
Landing page
© Varqa Bahar
Landing page “matching” the ad
•
Product/service
•
Message
•
Visual components
© Varqa Bahar
Mobile first design
· Websites should be designed primarily for mobile devices and adapted to larger screens rather than the other way around.
· Designers need to be aware of differences in needs between mobile and desktop users.
Learning outcomes of today’s session
•
Designing a website that is highly
usable.
•
Designing a website to enhance
conversion.
•
Designing a website for different
customer segments.
•
Optimizing
landing pages.
•
Pursuing
A/B testing.
•
Developing a
mobile first
design.
© Varqa Bahar