TIMELINE
September - October 2021
Three Week Sprint
TEAM
Solo conceptual project, completed as coursework for General Assembly's User Experience Design Immersive
MY ROLE
UX Researcher
UX Designer
METHODS
Heuristic Analysis, User Interviews, Affinity Mapping, User Personas, Competitive and Comparative Analysis, Card Sorting, Task and User Flows, Site Maps, Wireframing, Prototyping, Style Guide
TOOLS
Figma, Trello, Whimsical, Zoom, Google Workspace, Zeplin
The Challenges
1. Cannonball & Tilly lacks an e-commerce presence.
Cannonball & Tilly is a brick and mortar vintage store in Los Angeles, with an impeccably curated collection and a large clientele. Despite its popularity, it currently has a very basic website. It lacks e-commerce functionality, is difficult to navigate, and is not mobile responsive. Brick and mortar vintage shops like Cannonball & Tilly haven’t had much of an incentive for e-commerce until recently, but the Covid-19 pandemic has made in-person shopping almost impossible. In order to survive in this new climate, vintage stores will need to pivot to selling online.
2. Customers are reluctant to purchase vintage clothing online.
Customers are wary of purchasing vintage online because they don’t have access to enough details (fit, condition, era) to make an informed purchase. Many vintage lovers don’t feel catered to by existing online vintage stores, whether it’s due to a lack of size inclusivity, a lack of gender inclusivity, or a lack of communication with the seller. To transition into e-commerce successfully, Cannonball & Tilly needs to build users' trust with clear and detailed information, approachability, robust searching and filtering options, and more inclusive offerings.
The Outcome
Usability test results of the final high fidelity prototype were resoundingly positive. Four out of four testers successfully completed each of the three user flows. Here's some of the feedback the redesign elicited:
"I really appreciate how clean it is visually. It doesn't feel overwhelming, like a lot of vintage sites do."
"This is a really thoughful solution that should absolutely be brought before the business."
"I would feel so confident ordering from this website – everything I need to know is right there."
The Solution: Vintage for Every Body
Cannonball & Tilly has a new source of revenue and a broader reach.
My redesign replaces Cannonball & Tilly's informational website with a fully functioning mobile responsive e-commerce site, enabling the shopkeeper to reach a wider audience, and to bring in revenue even when in-person shopping is not an option.
Customers feel supported, seen and catered to by the business.
The redesigned site offers customers a curated experience that mimics the individual attention they would receive when shopping in person. It anticipates their needs and thus earns their trust, ensuring that the online vintage buying experience feels intuitive, easy and rewarding. Above all, it celebrates the wide diversity and myriad unique styles of vintage lovers, and strives to represent and cater to all bodies.
Here's how the redesign supports customers, meets the needs of the business, and reinforces the message of inclusivity on every page.
1. a window display that reflects the customer
The home page is comprised of modular content blocks that allow the business endless possibilities for customization, depending on what they want to highlight. The full width image slider above the fold functions as the virtual equivalent of a window display, and provides the business an opportunity to capture customers' attention with prominent calls to action. A clear advantage this display has over its brick and mortar counterpart is that Cannonball & Tilly can feature a diverse cast of real models, as opposed to mannequins, reinforcing the message to customers that their clothing is for every body. This message is echoed further down the page with an Instagram showcase of customers wearing finds from the store.
Home page with modular content blocks
2. filters that foster freedom
Customers who don't want to be limited to searching one category at a time have several powerful filters at their fingertips — color, fabric, price, era, size, and type.
It is up to each customer how, or even if, they want to use these filters to aid in their search. This freedom to dictate parameters is particularly important for non-binary customers, who can feel frustrated and excluded when items are siloed into gendered categories.
3. a tailored experience
Customers can sign up for a personalized shopping service, where they will receive tailored recommendations based on their personal preferences, measurements, and aesthetic. This option takes the guesswork out of trying to find the right size, and echoes the one-on-one experience in-person shoppers are used to. Account holders can update their preferences at any time, and can save favorite items for later reference.
Account onboarding flow
4. a detail-oriented product page
No two vintage items are the same, and in order to successfully convey the unique properties of each item, a vintage store's product page has to provide a high level of detail. The template needs to be comprehensive but flexible enough that it can be easily customized to each listing.
5. an interwoven thread of communication
The product page clearly spells out the return policy, so that customers are aware before purchasing that in most cases they cannot return the item. This is standard practice for vintage sellers, but it can engender hesitation from customers who are used to big box sellers' forgiving return policies. To combat this reticence, the redesigned product page encourages customers to email the seller directly, via a pop-up contact form. If a shopper wants more photos of the item or has additional questions, they can communicate directly with someone at the store. This fosters a sense of trust on the part of the consumer, and increases their confidence in purchasing a non-returnable item.
Product-specific contact form
For a full picture of how I arrived at my final design decisions, read on for a deep dive into my research process.
Or feel free to skip straight to the good stuff:
BUSINESS ANALYSIS
The Store's Problem: Empty Virtual Racks
Cannonball & Tilly is one of the best vintage stores in Los Angeles.
Owner Laura Kranitz has an amazing eye for one of a kind vintage finds, and has been sourcing rare and collectible items for over 22 years. The store opened in 2012 in the heart of Little Ethiopia, on LA’s westside, and has become a destination for discerning Angelenos seeking bold, bright, unique fashion from every era. As Laura likes to say, “We don’t sell subtle.”
Laura is an arbiter of timeless taste, as well as a valued resource for Hollywood’s busy costume designers. Her clientele reads like the attendees at an A-lister’s party: Lake Bell, Mindy Kaling, Paris Hilton, Dita Von Teese, Britney Spears, Lily Allen and Kelis are all regulars.
You’d think a store with a stellar reputation like Cannonball & Tilly would have a stellar web presence to match. Unfortunately, the website is riddled with usability issues. I performed an analysis of the existing site, in accordance with Jakob Nielsen's Usability Heuristics.
Heuristic Analysis of Existing Website
The website needs some love to make it worthy of the fabulous store it represents, and I was up for the challenge, but first I needed to find out what was missing in the vintage e-commerce realm.
I started by interviewing eight vintage fashion connoisseurs.
USER RESEARCH
The Customer’s Problem: ‘Fits That Don’t Fit
As a vintage collector myself, I love getting lost among the racks of a well curated shop, thrilling at the prospect of finding a one of a kind relic and making it my own. I imagined this would be a very difficult experience to replicate online, and my user research confirmed many of my suspicions. The general consensus of the eight people I interviewed was that it’s almost always preferable to shop in person if you can.
- "I like to be able to try things on."
- "If I hold it up to my body, I can tell if it's going to fit."
- "I'm a tactile person."
- "You can check for damage, like holes or stains."
- "I like to feel the fabric. If it's polyester, I won't buy it."
- "Let's face it, sometimes vintage clothing smells funky."
Unfortunately, the Covid-19 pandemic has made it very hard, if not impossible, to indulge in the physical experience of hunting for the perfect piece.
And it has accelerated what was already becoming a paradigm shift — the pivot by customers and retailers alike from brick and mortar shops to e-commerce.
No one wants to see their favorite stores go under, but these little boutiques will probably have to adapt to selling online if they’re going to survive.
Many of my interview subjects expressed dismay that they couldn’t support gems like Cannonball & Tilly during the pandemic, and were instead relegated to browsing Etsy. Etsy listings rely on each individual seller to do their due diligence, and they often lack crucial information regarding age, measurements, or condition.
Interview Insights:
Finding the right size can be tricky. Vintage sizing doesn't correlate to modern sizing, and sellers often don't list measurements.
Vintage has an inclusivity problem. Plus size customers’ needs aren’t taken into account, and neither are those of nonbinary customers.
When you can’t touch or try on the clothes, photos and descriptions are all you have to go on, so good photos and detailed info are key.
Communication with sellers is very important, because buyers will often have questions about an item, and most vintage isn't returnable.
Shoppers who know what they want can be frustrated by arbitrary categories and a lack of filters. They need more searching autonomy.
On the other hand, customers who feel nervous shopping for vintage online would appreciate some extra guidance.
High quality or rare vintage can be pricey. Customers are more likely to purchase a special piece when they have access to payment plans.
The process of synthesizing and mapping insights from my user interviews unearthed three main personas: Sage, Autumn and Aimee.
Sage Breslin
"I don't like to shop by gender because it limits my options. I will usually look under both men's and women's clothing."
• collects designer vintage
• likes highly curated stores with a specific niche
• likes stores that offer payment plans
• photos of designer labels are crucial
• dislikes it when items are categorized by gender
• likes to filter by decade, color and designer
Sage needs a better way to filter vintage clothing according to their parameters. They also need a way to view all clothing, irrespective of gender.
Autumn Padilla
"As a plus size person, I hate searching vintage by size. It usually only turns up a few items that will fit me, if any. It makes me feel like the only fat chick in the world."
• likes the sustainability of vintage
• buys vintage accessories online - size isn't an issue
• has a hard time finding vintage clothing in her size
• needs model measurements, including height
• seeks out styling suggestions and lookbooks
• always looks at the sale section first
Autumn needs a better way to shop for size inclusive vintage clothing online because she has a hard time finding items that will fit her. She also appreciates styling help.
Aimee Howe
"Don't sell vintage unless you know what you're talking about."
• is an experienced seller and collector of vintage
• distrusts the authenticity of many items
• doesn't trust sellers to accurately date items
• often has specific questions she needs answered
• likes being able to save items she's considering
• almost always knows exactly what she is looking for
Aimee needs a better way to communicate with online vintage sellers so she can trust the authenticity of their offerings. She also needs a better way to save favorite items.
COMPETITIVE AND COMPARATIVE ANALYSIS
Virtual Window Shopping
To get a feel for the current landscape, I conducted competitive and comparative analyses of nineteen other e-commerce clothing stores. I looked at thirteen vintage small businesses; two multiseller vintage platforms, Etsy and Thrilling; The RealReal, a popular luxury consignment store; and three modern clothing stores.
I paid particular attention to how other businesses were addressing the main needs I pinpointed earlier in my research: accurate measurements, gender and size inclusivity, detailed listings with good photos, an open line of communication, customizable search methods, guidance when desired, and payment plans.
Here are the biggest takeaways from my research.
Sizing and Measurements
I took note of how vintage stores were photographing and displaying their clothing, as this is an important metric shoppers use to determine how an item will fit. I also examined how diverse the models were on sites that featured them.
Clothing Display Methods
Of the 13 vintage clothing sites I analyzed:
• 60% photographed clothing on a model.
• 45% used hangers.
• 40% used mannequins.
These approaches varied within each site.
Model Measurements and Diversity
Of the 60% that used models:
• Half listed each model’s measurements.
• A quarter featured plus size models.
• Only one store featured a nonbinary presenting model.
Gender and Size Inclusivity
The majority of the websites I looked at weren't actively marketing to nonbinary or even male identifying customers; the model styling, visuals, branding and language of 84% of them read as overtly feminine.
Most of the stores I analyzed were geared towards cisgender women. Those with a broader range of items tended to sort them into the gendered categories of "Men's" and "Women's."
While some strides are being made by small businesses, it's clear that there is room for improvement in terms of gender inclusivity in the vintage e-commerce space.
Not Sustainable
Not Size Inclusive
In researching both vintage and modern stores, I noticed that businesses selling new clothing tend to be more size inclusive.
The vintage clothing industry, while far more sustainable than fast fashion, could stand to learn from the latter's embrace of the plus size community.
Communication and Transparency
It's pretty standard for vintage stores to have a strict no-returns policy, since their items are one of a kind (and if they've provided enough info, customers should be able to determine whether the items fit the bill).
85% of the sites I analyzed do not allow returns or exchanges. However, only 15% mention this on the Product Detail Page, which means that customers risk missing the fact that their purchase is final sale.
Seasoned customers like Aimee often have very detailed questions about the items they're considering, as do customers like Autumn who might have concerns about fit, so I looked for contact links on each PDP. Only 15% of the sites offered users a direct way to contact the seller about a specific item.
Searching and Filtering
7 out of 8 interviewees stated that they prefer to use filters to narrow down their search for vintage items. Strangely, none of the vintage stores I analyzed offered any way for customers to filter items.
In an absence of data from vintage sites, I compared the filtering options provided by two multiseller platforms, one consignment store and three modern clothing sites.
Personalization, Suggestions and Styling Help
My user research unearthed a wide variety of opinions and preferences on the subject of styling suggestions, ranging from enthusiasm to annoyance. When it comes to curation, one size definitely does not fit all.
"If there's a lookbook with a featured trend, I'll definitely browse through it to get inspired."
"I like seeing personalized recommendations based on my browsing history."
"I have a very particular sense of style, and I don't respond well to a bombardment of suggestions."
"I like what I like and the recommendations I get never seem to be relevant to my taste."
The common thread linking these opinions is that customers want suggestions that are tailored to them. I investigated the various methods vintage sellers were using to market to customers, and the degree to which these methods felt optional, customizable or personalized.
- 60% featured a newsletter
- 40% featured curated collections or lookbooks.
- 30% displayed links to related items on the Product Detail Page.
- None offer the option to save favorite items or to list style preferences.
In contrast, the multiseller and consignment platforms I analyzed offered account holding customers several options to personalize their experience, such as:
- allowing customers to save and track items.
- letting customers save their size preferences and apply them to all searches.
- notifying customers when an item they like is on sale.
Payment Plans and Layaway
Half of the shoppers I interviewed stated that having access to some form of payment plan increases their chances of purchasing a vintage item online. Vintage can be expensive, especially if it's a rare or designer piece, and layaway has long been a standard offering at brick and mortar stores. I was curious to see what methods vintage sellers were offering online, especially in light of the recent proliferation of pay later apps, such as Afterpay and Klarna.
- 45% offer traditional layaway: customers pay in a series of installments and then receive the item once they've paid in full.
- 40% offer access to pay later apps, which allow customers to pay over time but receive their items immediately. These apps function as an intermediary lender, which means that the sellers get paid immediately as well, making it a more appealing choice for small businesses.
- 15% offer neither option.
IDEATION
Finding the Thread
Armed with a more thorough understanding of the current trends and patterns in the realm of vintage e-commerce, I was ready to begin the process of trying to solve Autumn, Sage and Aimee's problems. I started by listing and prioritizing potential features, weighing my observations of other sellers' offerings against my users' needs.
I began envisioning a bespoke service users could sign up for. This could solve Autumn’s problem of feeling overwhelmed and ignored when trying to find her size. It could also make Aimee feel more connected to the business and more in charge of curating her style choices.
Customers could create accounts with their own personal measurements and styling preferences. Shoppers would be able to request items in certain styles, from certain eras, or in certain categories. The store would assist them with sourcing the perfect pieces for their closets. Users would also be able to save items they like to a collection of favorites, for purchase at a later date.
With Sage in mind, I decided to do away with any kind of gendered categories, leaving it up to the user to explore all options. Nonbinary customers like Sage would be able to shop all clothing and use the extensive filter options to narrow down their search.
I also made it a point not to categorize clothing by size, because this can be an immediate deterrent for plus size customers like Autumn. Plus, experimental dressers like Sage often intentionally wear oversized or shrunken garments for aesthetic reasons. Since some users still prefer to narrow down their selections this way, I included size as a filtering option.
INITIAL SKETCHES AND WIREFRAMES
Tailoring the Experience
I began to chart a happy path through the site for each of my personas, mapping out the tasks each user would need to complete to satisfy their particular needs.
As I plotted the steps they would need to take to complete their tasks, the information architecture of the site began to take shape. I worked on the site map and the task flows simultaneously, letting each mapping process inform the other.
In preparation for constructing the site map, I compared the categorization methods of eight e-commerce clothing sites, both vintage and modern, in order to ascertain where users expect to find certain items. I paired this analysis with an open card sort in which I asked six participants to categorize Cannonball & Tilly’s current Etsy inventory.
There was a lot of variation, both among the e-commerce shops and the card sorters, but certain categories were popular with both customers and shops: Accessories, Dresses, Jewelry, Outerwear and Tops.
I made sure to incorporate these categories into my navigation architecture.
Once I had the site navigation mapped out, I was able to move into the design phase. I began by sketching some potential page layouts.
In terms of the site’s visual aesthetic, I didn’t have much to go on from the store’s existing online presence. There was no logo on the store’s website, Etsy storefront, or Instagram account.
I initially took inspiration for the logo from their hand-painted storefront, choosing a similar typeface and layout. The logo evolved through a series of iterations.
Inspired by the butterfly on the shop's exterior, and with a nod to the owner's fondness for mod finds, I created a vector illustration in a style evocative of 1960s psychedelia.
I opted for a more delicate and decorative typeface, Arsenal, to complement the new logo. I also incorporated the tagline from their website, “We don’t sell subtle,” because it conveys the store’s bold aesthetic so well.
Due to the ever-changing and wide-ranging nature of a vintage store’s inventory, the store’s visual aesthetic can’t pull directly from that of its stock, because it’s too varied. It is all the more important for the branding and layout to feel simple, open and uncluttered, and this is an advantage the digital space has over the physical space (usually every inch of brick and mortar vintage stores is packed with clothes and accessories).
When creating wireframes for the website, I employed ample use of white space, large sans serif fonts, and simple graphics. This provides a framework that lets the unique and bold clothing breathe and feels more approachable to users.
USABILITY TESTING
Trying it On For Size
I conducted four usability tests of my prototype with its three user flows, presenting my testers with a scenario for each persona.
The tests proved insightful in several ways. Overall, the results were very encouraging. Four out of four users were able to complete the tasks in all three flows, ending with the purchase of an item.
- One tester was confused about where to click in the main navigation to view all clothing, so I added View All to the Clothing dropdown menu, even though Clothing itself was already clickable: sometimes a bit of redundancy is necessary.
Clothing Dropdown Before
Clothing Dropdown After
- I initially had Autumn's persona use the sort menu to narrow down her price range, but my testers expected her to us the price filter instead. I changed Autumn’s flow so that instead of sorting by price low to high, she uses the filter dropdown to view items under $100.
Before: Sort by Price
After: Filter by Price
USER INTERFACE DESIGN
Pulling the Look Together
As I moved the wireflows into high fidelity, I returned to the brick and mortar storefront for inspiration. I pulled a color palette from the exterior's brightly painted mural by artist Bunnie Reiss. I incorporated the bright pastel hues into my butterfly illustration, and after experimenting with the different hues on the home page, I opted to focus on the teal. It was the least likely to clash with a constantly rotating inventory of brightly colored clothes.
It was still a bit too bright, so I selected two tones that were less saturated - a pale tone for highlighted text and the header navigation, and a darker tone for buttons and the footer. I paired them with a cool dark grey for the text.
I felt it was important to incorporate images of diverse models, as my personas really needed to see themselves reflected in order to feel welcome. They also really needed good photo documentation of the items themselves, since they couldn’t examine them in person using all their senses. I made sure that the images I used were as size and gender inclusive as possible, which was a challenge given that stock footage tends to skew cisgender and slender.
For the product pages, I settled for photos of clothing on mannequins, although if I were to publish the site for the business I would stress the need for photos of real people wearing the clothes, accompanied by the models’ own measurements.
Mobile Responsiveness
In 2021, users are increasingly likely to browse and shop online using their smartphones, so it's imperative that e-commerce sites are optimized for mobile screens. With this in mind, I redesigned the pages of my prototype to adjust accordingly at a typical mobile breakpoint.
I prioritized the most important features, adjusted the text styles, and decreased the number of products displayed in each row from three to two. On the Product Detail Page, I moved the thumbnail gallery from the left side of the page to beneath the hero image, and implemented a horizontal scroll.
HIGH FIDELITY PROTOTYPES
The Solution: Vintage for Every Body
My final design for Cannonball & Tilly offers customers a curated experience that mimics the individual attention they would receive when shopping in person.
- Customers like Sage have several powerful filters at their fingertips — color, fabric, price, era, size, and type. It is up to each customer how, or even if, they want to use these filters to aid in their search.
Customers like Autumn can sign up for a personalized shopping service, where they will receive recommendations based on their personal preferences, sizing, and aesthetic.
Customers like Aimee can save favorite items to their account for later reference, and can contact the seller directly from the PDP with questions about an item.
Above all, the website celebrates the wide diversity and myriad unique styles of vintage lovers, and strives to represent and cater to all bodies.
Sage's Flow
Sage (they/them) is a collector of 90s designer vintage. They wear a limited color palette, primarily black. They know that Cannonball & Tilly carries a great selection of designer vintage and they want to see everything black and 90s-era that’s available. They especially love Moschino. Sage finds a gorgeous Moschino coat, and can tell it's the real deal, thanks to the detailed product info and the closeups of the label. However, it's pretty pricey. Luckily, they discover that Cannonball & Tilly offers Afterpay, so they decide to splurge and pay over time. Sage is local to Los Angeles, and opts to pick up the coat in person to save on shipping costs.
Autumn's Flow
Autumn (she/her) has heard Cannonball & Tilly are size inclusive and that they offer a special sourcing service. She wants to try it out, especially since she’s been looking for a few specific things. During onboarding, she notes that she's interested in pieces from the 60s, 70s and 80s, jewelry, and shoes. She also wants to find some warm jackets and some 60s mod-style shift dresses. Shortly after signing up, Autumn receives an email with a link to her personalized picks. She’s hoping to find a dress to wear to an event, but is on a budget and wants to stay under $100. Luckily, the email includes a discount code for signing up. She double checks to make sure the item will fit, and is reassured by the detailed sizing information. She decides to purchase the dress, and uses the discount code at checkout to stay under budget.
Aimee's Flow
Aimee (she/her) is a seasoned vintage shopper. She recently signed up for an account with Cannonball & Tilly so that she could easily save and track favorite items. She loves sixties fashion, so she's excited to see that the shop has a featured collection focusing on the era, which she accesses from the homepage slider. She finds a pricey but pristine-looking designer dress she's interested in, but she needs more info before she's willing to make such a large purchase. She emails the seller from the link in the product detail page, requesting a few more detail photos, and soon receives a reply. Satisfied, she purchases the dress using Afterpay.
Recent Work
