This presentation gives an insight into basic Website design, UI-UX and design analysis tools using an example. Hope it helps :)

1. Website homepage-
UX and UI analysis
Priyanka Sharma

2. Key Topics
• How does it work?
• User- Experience design
• UX-UI analysis of website
• Quantified UX analysis
• HFI analysis
• Design analysis-cum comparison of current and future
layouts

3. How does Webisdom work?
Define V
Resorts’
Objectives
Knowing
the TG
Understanding
the Digital
Habits & Needs
Effective TG -
specific
marketing
communication
Continuous
Measurement
& Monitoring
Continuous
Improvement
What to do?
• Marketing
Communication
• Brand
Uniformity
• Brand Identity
• Brand USP
Where to do?
• TG Centric
Contextual
Web
Properties
How to do?
• Analytics
Driven
Technology
• Timely
Execution

4. What is User Experience design?
User experience, defines as how
a product behaves and is used in
the real world, is critical to the
success of a Website.
If your users do not have a positive
experience using your site, the
likelihood that they will return is
greatly reduced.
UX -defining
ecosystem

5. • Human Factors International’s user-
centered research and design methods
have evolved to encompass elements
of marketing, conversion optimization,
and emotional design.
• UX designers find themselves in the
middle of a major shift in focus from
performance design to persuasion
design—and from user-centered
design
to success-centered design.
• As part of this evolution, HFI had to
develop new techniques and new
language to discuss the total user
experience, building a bridge between
business teams and design and
development teams.
HFI analysis- UX dimensions
The five dimensions of user experience

6. Tasks And Techniques Of UX Designers
• Current state of V Resorts website is holistically evaluated in the coming slides- both design and UX
per-se.
Evaluation Of Current System
• A study will be launched to compare the effectiveness and quality of experiences of different user
interfaces, once the new website is launched.
A/B Testing
• Designing how users should move through a system is another deliverable.
User Flows
• Knowing the audience enables to develop experiences that reflect the voice and emotions of users
using website data.
User Profiles And Personas
• Proposing changes in information architecture to enhance the user experience (e.g. user flow,
findability and efficiency).
Content Inventory
• A framework for writers and designers in which to work to ensure alignment with the owner’s goals.
Content Style Guides

7. Digital habits of Target Audience of
the website (e.g. a travel website)
• DINKS and nuclear families looking for
tourist places- offbeat resorts, holiday
gateways etc.
• Internet browsing and searching
• Online shopping
• Reading online blogs and articles on Lonely
Planet etc.
• Social networking

8. • The first things that strikes any visitor about a website’s homepage are the logos,
main banners coupled with navigation, social icons and call for action tabs (online
booking, testimonials etc.)
• Users and website designers should know the core objective of the site -information
purpose (e.g. a historical place) or sales (e.g. an ecommerce company) or marketing
(e.g. a tyre manufacturer).
• User might want to read articles/information relevant to the site, here structuring
and aesthetics matter a lot.
• The content placement in text boxes can make a site a lot messy or aesthetic.
• Footer and header design matters- should ideally be complete with corporate office
Google location and social icons.
Brief Analysis of V Resorts- User Interface (UI)

9. The way a website wants to market its experience is important.
• While designing, focus should be on If ease of navigation and user-friendliness. Website
should meet the expectations from the business and target audience in terms of look
and feel.
• Depending on website’s intent and necessity as per its business requirement , it can
adopt either image- based style or text- based style.
• Absence of in-site search option can be a sore point these days.
• Site should provide facility of cross-browsing between offerings (switching interest on a
whim) and potentially reducing ability for people to remember how to find something on
a subsequent visit.
• While integrating Facebook widget, developers should keep in mind that users should be
able to go to FB page from the website and vice-versa, hence utilizing the fan-base of the
brand by keeping them updated of the latest FB campaigns and postings.
Brief Analysis - User Experience (UX)

10. Branding
Statements Score/10
The website provides visitors with an engaging
and memorable experience
The visual impact of the site is consistent with
the brand identity
Graphics, Collaterals and Multimedia add value
to the experience
The website delivers on the perceived promise
of the brand
The website leverages the medium to enhance
or extend the brand
Branding Total
Quantified UX analysis
Functionality
Statements Score/10
Users receive timely responses to their queries /
submissions
Task progress is clearly communicated (success
pages /email updates)
The website/applications adhere to common
security and privacy standards
Online functions are integrated with offline
business processes
The website contains admin tools that enhance
administrator efficiency
Functionality Total

11. Quantified UX analysis
Usability
Statements
Score/10
The website prevents errors and helps the
user recover from them
Overall page weight optimized for main target
audience
The website helps its visitors accomplish
common goals and tasks
The website adheres to its own consistency
and standards
The website provides content for users with
disabilities
Usability Total
Content
Statements
Score/10
Link density provides clarity and easy
navigation
Content structured in a way that facilitates
the attainment of user goals
Content is up-to-date and accurate
Content is appropriate to customer needs
and business goals
Content across multiple languages is
comprehensive
Content Total

12. Spider chart representation
0
25
50
75
100
Branding
Functionality
Usability
Content
Website’s SPIDER CHART

13. Aspect Status
Responsive design
Landing page relevancy
Load time
PR of the website
Call to action / footer above the fold
Internal site search
USPs clearly identifiable
Social media buttons

14. • From the graphic style to the navigation, the website under scrutiny
should reflect the required brand imagery, reputation and invokes
certain interest in the minds of first-time visitors.
UI and UX Analysis -Verdict
• Site should not lack color.
• Site should be user-friendly, with no content cramming.

15. Website Design Analysis illustration
• In coming slides, I’ve carried out a detailed analysis of a website’s current
and proposed designs using some tools.
• Every single design aspect being analyzed has a clear rationale behind it.
• The assessment was done w.r.t. following attributes of design and usability
– Grayscale, Contrast, Spacers, Intersections, Blur, Mirror, Rotate and Zoom.

16. Current Website - Grayscale
The logo and navigation drop-
back, a positive thing on the
content side.
Although the V Resorts site is
very colorful due to the
background image, but “Online
Booking” and “Group
Bookings”, “Customer
Testimonials” are being
highlighted due to text being
placed in contrast boxes.
The banner text is not getting
lost due to high contrast
(opacity effect) and is being
appropriately highlighted.Grayscale Tool- Taking the color out of a design helps us see where the
user’s eyes will gravitate to on a page.

17. Future Website- Contrast Logo is standing out brilliantly.
On the right top corner, social
icon FB is prominent due to
contrast shift.
Call to action- “Online Booking”
is getting highlighted with its
due share of contrast .
“Group Bookings”, “Customer
Testimonials” which are
important call for action tabs are
catching attention.
Banner text has just the right
contrast shift, which means that
the design is balanced.
Trip Advisor ratings are badly
done and have no contrast.
Contrast- this tool tests whether the design still hold together or not
upon turning up the contrast on a page. It makes heavy areas stand
out more than lighter areas.

18. Future Website - Intersections
First intersection points at Home
which is appropriate.
Second intersection prompts
visitors to choose resorts by theme,
which is important selling point for
the company.
to V Resorts description
Third intersection draws visitor
attention at property tie-up.
Fourth intersection grabs user
attention towards Online booking.
Fifth intersection takes users
Intersections- This tool is used to take a look at where the major lines
of the page force the eye to focus.

19. Current Website - Blur V Resorts logo is large, legible and is
the most prominent headline on the
page. Because of this, users will focus
on it first.
Banner text is not clear, however
round small banner catches attention,
which has some call to action.
This major call for action has been
given its due share, catches
immediate user attention after the
logo.
Side navigation is hard to discern
when blurred, but the amount of
items let users know the top 5
solutions available to them.
V Resorts’s USPs and steps are
not properly highlighted.
Blur- This tool is used to make sure that webpage has solid hierarchy
and weight. If someone can only glance at the page for a few
seconds, this will help ensure that they get something valuable.

20. Future Website - Blur
Blur- This tool is used to make sure that webpage has solid hierarchy
and weight. If someone can only glance at the page for a few
seconds, this will help ensure that they get something valuable.
V Resorts logo is large, legible
and is the most prominent
headline on the page. Because
of this, users will focus on it
first.
Banner text is not clear,
however rectangular box will
catch user attention, which
has some call to action.
These major call for action
tabs are prominent even after
blurring, catch immediate user
attention after the logo.
Side-navigation is hard to
discern on blurring but it gives
message to user about some
product category.

21. Current Website -Mirror
Mirror- Mirroring a design can point out areas of
misalignment and hierarchy.
Mirroring the main page
reveals that many of the
initial design choices in the
redesign have remain intact.
Multi-colored masthead
coupled with Facebook and
Twitter widgets, Blog and
Friend referral contribute to
the busyness of the page.
The mirror helps to highlight
how disconnected all the
elements on the page feel.

22. Future Website - Mirror
Mirror- Mirroring a design can point out areas of
misalignment and hierarchy.
Mirroring the main page
reveals that many of the
initial design choices in the
redesign have remain intact.
Page does not look busy or
cluttered, but looks clean and
tabs are precise and catch
attention.
The mirror helps to highlight
how elements on the page
are connected and balanced.

23. Current Website - Rotate
Turning the screenshot to the left
reveals that the weight of the page
is top aligned– readers don’t have
an anchor on the page to lead
their eyes down the other links.
Looking below shows just how
dense this page is with non-
clickable content. In some areas
this is welcome, but in other areas
it exposes "content cramming" on
the homepage.
Rotate- The rotate tool is great for making it easier to see page
weight and balance of elements.

24. Future Website - Rotate
Rotate- The rotate tool is great for making it easier to see page
weight and balance of elements.
Turning the screenshot to
the left reveals that the
weight of the page is more
or less balanced– readers
have an anchor in the form
of Choose a natural protocol
and Consult a Dr. tabs to
lead their eyes down the
other links.
Looking below shows page
is populated with clickable
titles. They help in reducing
content density and enables
user to choose what they
want to see and explore
further.

25. Current Website - 50% Zoom
Zoom- This tool is use to look at your site as a smaller thumbnail
whether the layout hold up or The best websites still get the story
across at a small size.
The main logo image and related
tagline is still sharp and crisp at
this size, which gets the point
across that this is a health-related
website.
The banner heading gets lost but
the paired small round banner
still pops up against the image.
The rest of the copy is blurred,
including the three headlines. But
“Top 5 Solutions” are still legible,
letting users know that the site is
all about solutions for ailments.

26. Future Website – 50% Zoom
Zoom- This tool is use to look at your site as a smaller thumbnail
whether the layout hold up or The best websites still get the story
across at a small size.
The main logo, social icons etc. are still
sharp and crisp at this size.
The banner heading is somewhat hazy but
the paired rectangular banner pops up
against the image which is a major call for
action.
The rest of the highlights the images,
blue tabs and headlines. User-flow is
being maintained by neat arrangement of
tabs and headings, and call-for-action
icons.

27. THANK YOU!