Kino Website User Testing

Part IV of a series documenting the design development of the Kino menswear brand

Introduction

Kino is a young apparel brand filling the large void between fashionable clothing that falls apart after just a few seasons of use and long-wearing outdoor garments that are best left within the confines of a jazzercize studio or military surplus store.

Kino is influenced by the high and low deserts of the North American West, and aim to make use of natural, timeless fabrics with a healthy reimagining for the 21st century. Our pieces are designed to be put through the wringer, and are optimized for an active lifestyle, whether on the bike, on the trail or around the city.

One of the ways that we seek to signal and demonstrate our commitment to an ever-evolving fashion landscape is via a quarterly Lookbook series. Each series highlights new and seasonably appropriate pieces from the Kino collections, as well as styling them in provocative ways with other garments.

Another way, more generally, that we seek to communicate quality to the consumer is through our web & media presence and brand identity. The website should both be a joy to use and evoke a sense of friendly professionalism that invites users to become part of the Kino brand.

This document pertains to the development, and subsequent response to a short survey testing the checkout functionality as well as the look and feel of the Kino website. I use the acronym DECIDE as a way to organize the process.

D — Determine Goals

E — Explore Questions

C — Choose Approach

I — Identify Issues

D — Decide how to deal with Ethics

E — Evaluate Data

Determine the goals:

What are the needs of the client?

• To sell the product to interested customers
• To convert curious browsers to paying customers
• To communicate a brand image of prestige
• To communicate a quality product
• To communicate an image of fashionability

What are the needs of the user?

• To see the products that are available for purchase.
• To have a realistic idea of how the product will fit
• To have a realistic idea of how the product looks or feels
• To know how a product could or should be used
• To purchase an item
• To track an order status

What are the goals of the website?

• Facilitate the buying/selling of the company’s product
• Communicate the quality and transparently exhibit the features of the products
• Communicate product’s use case, and how it excels, outperforms competitors
• Keep customers coming back, provide a compelling experience for new customers and useful tools for existing customers

What are the goals of the study?

• To determine whether the website as designed successfully communicates the brand image and level of quality desired by the client.
• To determine whether the website as designed evokes a positive user experience.
• To determine whether the website as designed facilitates and does not hinder the necessary functions of a typical e-commerce website.

Explore the questions:

After user participates in a simulated interactive checkout process.

Choose the evaluation approach and methods:

Select five individuals to send the interactive XD link and survey. Individuals will be in target demographic (Male, 25–40).

Identify the practical issues:

The interactive prototype does not capture the full website experience, survey will only be usable to evaluate the limited design contained therein. The sample size is not as large as preferred for an ideal test.

Decide how to deal with ethics:

Inherently the subjects of the survey will be individuals with whom the website and survey’s creator has a relationship. Within the scope of the project, it is admittedly difficult to conduct a truly randomized or blind user survey. This reality will be fully disclosed and kept in mind during the analysis and discussion of the results.

Evaluate, analyze, interpret and present data:

From the number of surveys sent out, a total of 6 respondents returned a completed survey within the allotted period.

Questions 1–3 all deal with the user’s perception of the product’s quality. All the respondents responded positively when confronted with these question, which supports the goal of communicating the client’s desired level of quality and prestige.

Question 4 similarly addressed the success of the website’s effort to communicate Kino’s brand identity. A majority of user’s responded positively, but a single user gave a neutral response.

Question 5, to contrast, assesses the user’s experience with the checkout process. A majority of the respondents reported a very positive experience with the feature. One respondent was not as impressed. This correlates with some of the responses received for Question 6, as discussed below.

Question 6 merely asks for the user to point out any interesting or frustrating aspects of the experience. In most of the surveys, it served as a collector for any miscellaneous or general qualitative impressions the user had.

One recurring response addressed the low discoverability of the Proceed to Checkout button, despite a large majority otherwise expressing a very positive experience with the checkout. Another response suggests providing a call-to-action bringing the user to their cart upon adding any product, and another suggests emphasizing the price of the product. This combination of responses validates the overall design direction of the checkout pages, and provides an easy opportunity for improvement.

“On the mobile version, the ‘proceed to checkout’ button was really difficult to access/locate.”

“In the cart, I had to scroll down to find the button to proceed to checkout. It would be nicer to see that brought upwards to avoid having a large white gap.”

“Second note, when navigating to the cart, the ‘Proceed to Checkout’ button was not visible until I scrolled down to look for it. Otherwise, the process afterward was very familiar.”

“I almost didn’t see the price immediately thinking there were prices listed until I scrolled down the page to see other items had prices. On its own line would be best and potentially in a different color.”

“I wasn’t immediately aware of where [the cart icon] was or where to click until I started looking. Perhaps a popup bubble or notification that comes up near its location would be helpful to prompt one to view their cart and checkout.”

Two respondents reported feeling distracted by an overuse of the bright pink text elements:

“While I understand the magenta accent comes from the logo itself, think using the lighter green fares better in favor throughout the site. Reserve the magenta for sales, clearance, or deals notifications, even as a website banner at the top that might display your COVID-19 operations message to shoppers.”

“The use of bright pinks connected with the visual structure of the kino logo, but were a bit too bright, or visually distracting.”

Other responses validated the cohesion and expression of brand identity in the design of the website:

“The general feel of the website was immediately intuitive as it follows a general organizational sense shared across many websites. The style and “vibe” fit both in presentation and content”

“Photography of selected wares are cohesive and strongly help define the brand.”

Overall, despite having a relatively small sample size of survey respondents to pull from, there is already a considerable amount of usable data to validate some of the design directions as well as converge on some actionable improvements for the user interface going forward.

Resolution

Taking into consideration the constructive feedback synthesized from user responses, the following changes should be made to the website design:

1. In the Cart Page, move the Proceed to Checkout button above the fold, so that it can be accessed and seen as quickly as possible, preferably incentivizing action from the customer.
2. Indicate items being added to the cart, or somehow direct the user’s attention to the cart icon when the item is added.
3. Emphasize the item names and pricing information on the category and home pages. Most user’s check prices first before they make the decision to purchase. Despite a temptation, as one respondent put it, to take a “luxury approach to pricing”, practicality should win out over image in this case.
4. Take a more reserved approach to utilizing the pink/magenta (prickly pear) color swatch, restricting to distinct attention-calling details.

Fig. 1 — The subtotal and Proceed to Checkout button are brought up directly beneath the last cart item, so the main call to action is seen above the fold (denoted by dotted blue line).

Proceed to checkout button is changed to the magenta color, as it falls within the principle of use for this accent color, drawing the user’s eye to the call to action.

Fig. 2 — The font size for each product’s title and price are increased from the previous draft. The font size is proportional to the size of the image used.

The product title and price are changed from the magenta accent color to the avocado shell (dark green) so that fewer details are vying for the user’s attention on this page.

Fig. 3 — A brighter contrast is used to denote the active product size and color selection (solid color vs previously used outline).

When the user clicks the Add to Cart button, it changes to Added, and a magenta ring appears around the cart icon to denote a change (possibly with a sort of brief pulsing).

Previous in the series: Website Wireframes, Static + Interactive Comps

Take me back to the Directory