Diego Cagara

ARTSCARF


Conducting UX research and usability testing

to create a user-friendly online shopping experience

The ArtScarf website’s landing page directly addresses the user with encouraging copy and a clear CTA that concisely remind them of the website’s main feature.


— PROJECT NAME

ArtScarf


— WHAT I DID

Content strategy, UX research, UX Writing, research survey, competitor analysis, conversation mining, content style guide, user persona, user journeys, web prototyping


— TOOLS

Figma, Google Docs, Google Slides, Google Forms, Whimsical, Airtable


— DATE

Winter 2019 – Spring 2020

While taking the high-intensity UX Writing Academy course with UX Writing Hub, my project was to create ArtScarf.


ArtScarf is a fictional e-commerce website that allows people to design their own custom-made scarves online, choose their preferred material/size and even electronically upload their own design. It strives to empower consumers to express their creativity and individual sense of style.


PROBLEM: Ensure the online shopping experience clearly guides the user to available scarf options and the online designing process.



GETTING VOICES WITH A RESEARCH SURVEY

I created and distributed a free 14-question Google Forms survey over LinkedIn that 45 people took. It asked questions relating to a person's age, scarf shopping behavior, sense of style, and what motivates them to shop for a scarf. To view the survey, click this link.


Some of the key findings (below) I found were that most people were female, they own just 1-3 scarves, were aged 26-35, and there was not a clear preference between scarf shopping online or in-store.

TRACKING KEYWORDS WITH CONVERSATION MINING

Conducting conversation mining, I browsed through online review sites and social media comments left by people who shopped for scarves online to research what types of keywords people used when shopping for scarves online.


It offered direct insight into what people's top wants and needs are when scarf shopping online, and this would help inform my UX writing process later on:

Among the top desires consumers had were about the scarf material, its level of comfort, and functionality to stay warm.

UNDERSTANDING THE TARGET USER

My research helped me develop a user persona that outlines what ArtScarf's target user is.


I learned that ArtScarf would best appeal to a young female adult scarf enthusiast who would enjoy the chance to customize a scarf online that showcases their sense of style while keeping them warm. Such a shopper would treasure the combination of fashion and function.

Meet Stephanie: a 27-year-old living in a seasonal climate who wants to express her casual sense of style with a scarf she can design online which would also help her stay warm.

INSPIRATION FROM COMPETITOR ANALYSIS

I then researched real-life online stores and how they used concise copy and web design to allow consumers to customize clothing (including scarves) online.


Gathering these insights with Airtable, I also noted how the competitor websites each wrote their vision/mission statement, their products' average costs, how they designed their website layouts and wrote copy, and what other specific features they offer (like offering different sizes/materials and how shipping works).




CRAFTING THE CONTENT STYLE GUIDE

My research found that a target user feels more likely to shop online if the website feels trustworthy by showcasing honest-sounding copy that concisely promote what services/products the website offers, and informing the user of the benefits of customizing their own scarf online.


As the online scarf design process may confuse the user, it's important to keep encouraging the user on with concise copy and a smooth design layout that makes the user journey easier.

MAPPING OUT THE USER JOURNEYS

I also mapped the user journeys (using Whimsical, an online UX design application) where I imagine how a user may navigate ArtScarf's website.


I mapped out how after a user visits ArtScarf's website, their next steps can include exploring what scarf options are available, learning what ArtScarf is, getting straight to designing their own scarf, and even signing up/logging into their account.


USABILITY TESTING AND INITIAL PAGE PROTOTYPES

After conducting my research, I used Whimsical (an online UX design application) to create page prototypes. These prototypes included copy that related to the top scarf-related keywords I found during my research, as well as taking inspiration from real-life e-commerce sites.


I then asked 5 people from my personal network — whom I know have an affinity for scarves and online shopping — to look at printouts of the initial page mockups (see 3 screenshots below). I gave them the freedom to annotate, highlight and even write on the printouts how they felt about each design element and the copy.


The first prototype of the landing page for ArtScarf.

The first prototype of a product page for ArtScarf.

The first prototype of a checkout page for ArtScarf.

FINAL PAGE PROTOTYPES

After receiving constructive feedback from my 5 peers, I considered them as I slightly revised small design elements and CTA copy (see 3 screenshots below).


I maintained the "Design your scarf" CTA in the landing page and the top menu (because it's the website's number-one feature). I also simplified the search bar into a magnifying glass. In the checkout page, I used a grey text box to better distinguish the order summary details (to the left) from the checkout forms (to the right).

Here's the final prototype of the landing page for ArtScarf. Its clear "Design your scarf" CTA reminds the user of ArtScarf's main feature. The page's subheadline and slogan further reinforce what benefits ArtScarf offers.

Here's the final prototype of a product page for ArtScarf. With clear information hierarchy, the product's final price is more visible than the original price to promote a sense of urgency to the user. The "Start design" CTA is a clear next step for the user.

Here's the final prototype of the checkout page for ArtScarf. Using a grey box for the order summary section easily separates it from the checkout section. Clear CTAs like "Edit design", "Quantity" and "Continue to payment method" give the user options on how to move forward.

CONCLUSION

This project taught me the importance of conducting competitor analysis, conversation mining and usability testing when creating a brand new website. It revealed what important keywords people use when searching for online scarf shopping and what matters most to them (material, comfort, sizing, etc.).


Sending the free research survey and developing a user persona further informed of what types of people out there would be open to an e-commerce website like ArtScarf.