Website homepage- UX and UI analysis

Priyanka Sharma

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

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

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

• 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

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

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

• 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)

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)

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

Quantified UX analysis

Usability

StatementsScore/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

StatementsScore/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 accurateContent is appropriate to customer needs

and business goalsContent across multiple languages is

comprehensive

Content Total

Spider chart representation

Branding

Functionality

Usability

Content 0

25

50

75

100

Website’s SPIDER CHART

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

• 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.

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.

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.

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.

Future Website - IntersectionsFirst 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.

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.

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.

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.

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.

Current Website - RotateTurning 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.

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.

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.

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.

THANK YOU!