Blue Velvet Responsive e-Commerce Website Redesign
Crafting an Unforgettable Digital Journey: Unveiling the Transformational Story of a Local Austin Vintage Store's Responsive E-commerce Website Redesign, Blending Vintage Charm with Modern Accessibility.
Tools
Figma, Optimal Sort, Procreate, Whimsical, Notion, Trello
Methods + Approach
User Research, Affinity Mapping, Card Sorting, Personas, Journey Mapping, Competitive Analysis, Site Mapping, Feature Prioritization, Wireframing, Prototyping, Hi-Fi Mockups, Usability Testing
Client
Blue Velvet Vintage
Team
Solo Project
My Role
Lead UX Designer, Lead UX Researcher
Timeline
3 week sprint
Blue Velvet: The Best Little Vintage Store in Texas
Blue Velvet is a funky, long-standing shop packed with men's & women's vintage clothing in Austin, Texas. I happen to be a loyal patron of Blue Velvet, and it doesn’t hurt that it’s right down the street from me. Opening its doors in 1994, this mom-and-daughter-operated shop offers all of your vintage and costume needs. From Deco to Disco era, Blue Velvet features top-quality authentic vintage clothing that is guaranteed to satisfy any shopper’s vintage itch.
The Challenge
In the ever-evolving digital landscape, establishing a robust online presence has become imperative for businesses, particularly those in the retail sector. Blue Velvet, primarily an in-person shopping experience, has also ventured into Instagram sales. While utilizing Instagram for selling products offers convenience and cost-effectiveness, it presents challenges for customers seeking streamlined navigation and specific item searches. This limitation renders the platform unsuitable for e-commerce businesses. Blue Velvet does technically have an online shop. However, their website's confusing interface, coupled with perpetually out-of-stock items, suggests a lack of online inventory management.
The original Blue Velvet e-Commerce website.
The Solution
By redesigning Blue Velvet's e-commerce website, I aim to improve the online shopping experience for vintage enthusiasts. The new site will feature an advanced filtering system, empowering users to effortlessly navigate through an extensive inventory by size, condition, color, price, and era. The new site will introduce curated collections, enabling users to explore and shop based on their preferred styles. Moreover, the improved site organization will ensure a swift and seamless shopping experience.
Research
Voices from the Vintage Realm: Insights from Passionate Shoppers
To accomplish the goals of this project, I first needed to gain insight from regular secondhand clothes shoppers. I wanted to know their key values, preferences, and considerations when shopping secondhand clothes online. What makes a good or bad online shopping experience? From six user interviews, I was able to identify the following trends:
Unique finds & sustainable style
The top reasons users are motivated to shop secondhand are the ability to find one-of-a-kind pieces and because it is more sustainable.
Essential features of online shopping
Users value the ability to search, filter, save, and sort through items when shopping online.
Hurdles of shopping secondhand online
Users are discouraged from shopping secondhand online due to not being able to tell the fit or condition of the items.
Deciding factors in secondhand buys
Users mentioned the price, quality, fit, and style of the item as key factors in determining whether or not to buy a secondhand piece.
Heuristic Analysis: Diagnosing Issues with the Original Site
I asked the same six secondhand shoppers to complete a series of tasks on the original Blue Velvet website to pinpoint user needs and frustrations. The findings are summarized below:
5 / 6 Users
Felt the site’s navigation was redundant and confusing.
5 / 6 Users
Frustrated by the only featured item on the site being a gift card.
6 / 6 Users
Felt the site lacks personality and is visually unappealing.
5 / 6 Users
Value seeing high-quality photos of the garments pictured on models
Meet the Personas
In this UX case study, we explore the perspectives of two personas: the Trendsetter, passionate about discovering rare vintage pieces and sharing them with social media followers, and the Sustainable Thrifter, seeking efficient online shopping for high-quality, affordable items. By understanding their distinct needs, we can create a user-centric solution that caters to the diverse spectrum of vintage shoppers, fostering an inclusive and engaging online shopping experience.
Competitive Analysis
The competitive analysis revealed common standards in the online vintage resale industry, including filtering by price, size, color, brand, and condition, as well as search, sort, and save functionalities. To differentiate, additional features to consider are curated collections for browsing and a messaging system for direct buyer-seller communication. By incorporating these insights, the UX solution can create a competitive edge and offer a more comprehensive and engaging vintage shopping experience.
Content inventory analysis between Blue Velvet and major competitors.
Site Organization and Information Architecture
Card Sorting
In the UX case study for the vintage clothing shop e-commerce website redesign, a card sorting activity was conducted with 8 participants. The findings showed that participants initially grouped categories by gender, along with accessories, shoes, outerwear, and gift cards. Vintage t-shirts were initially grouped with men's clothing, but to promote gender inclusivity, a separate category was created.
Site Map for redesigned Blue Velvet shop.
Card sorting dendrogram results.
For the redesigned e-commerce website of the local vintage store, a comprehensive site map was created to ensure a clear and intuitive user experience. The primary navigation consists of key sections, including the shop, collections, store policies, and a contact page. The shop section is organized into seven major categories: women’s clothes, men’s clothes, outerwear, vintage tees, accessories, shoes, and gift cards. To address user frustrations regarding return policies, the policy information was incorporated into the primary navigation. Additionally, the contact page offers easy access to archived blog posts, reviews, and location and hours information. Curated collections were also introduced, allowing users to browse and explore specific themes or styles. This site map enhances navigation and provides users with a seamless journey to find desired items, policy details, and relevant store information.
Mapping the Site
Solidifying the User Experience: Task Flows
-
![]()
Colton's Task Flow
-
![]()
Ally's Task Flow
Design Iterations and Validations
Design Concepts and Early Explorations
Inspired by the layout of other e-commerce shops, I came up with sketch ideas to visualize solutions for users. Several features to point out in the redesigned site:
1
2
3
4
5
Filter option for customers to easily narrow down products
Curated collections to browse from
Personalized browsing (i.e. recommended products)
Search, save, and sort options to effortlessly browse products
Visual design and color consistent with brand identity
Design Studio
To visualize the proposed design concepts for the Blue Velvet e-Commerce redesign, I created a series of sketches, which offer a preliminary glimpse into the layout, navigation, and visual elements that aim to enhance the user experience. These sketches serve as a foundation for further iteration and refinement, while feedback from testing ensures seamless usability and alignment with the project objectives.
Home Page
Collections Page
Product Listing Page
Product Description Page
Checkout
Translating sketches into mid-fi wireframes
Wireframes serve as a pivotal step in the design journey, as they transform the conceptual ideas into a more concrete representation of the website's structure and functionality. By focusing on the essential elements and layout, wireframes allow for a deeper exploration of the user flow, information architecture, and responsive design considerations. The wireframes provide a visual blueprint that guides the development of the user interface, ensuring a seamless and intuitive online shopping experience for vintage enthusiasts.
Here are some of the key changes I made:
Streamlining Navigation
My understanding of the card sorting results, combined with the creation of a comprehensive site map, enabled a more intuitive and organized navigation structure. By aligning the website's categories and sections based on user preferences and expectations, I was able to enhance the overall usability and ease of finding desired vintage items. The streamlined navigation ensures that visitors to the Blue Velvet website can effortlessly explore, browse, and discover the unique treasures offered by the store.
Desktop header with dropdown menu
Now Offering Curated Collections
By incorporating curated collections, users now have the opportunity to browse through thoughtfully selected vintage items that align with specific styles or themes. This addition enhances the overall pleasure of the browsing experience, allowing users to discover unique and captivating pieces effortlessly. The curated collections provide a delightful and inspiring journey through the world of vintage fashion, making the Blue Velvet website a destination for vintage enthusiasts seeking a truly enjoyable and tailored shopping experience.
Featured collections on home page
Features Built for an Efficient Search
By introducing key features such as search, sort, filter (by price, size, condition, brand, and color), and save functionality, I aim to create a more efficient and streamlined shopping experience. Collectively, these features contribute to an enhanced user journey, facilitating seamless navigation and ultimately improving customer satisfaction and engagement on the Blue Velvet website.
An Aesthetic in Line with Brand Identity
The redesign of Blue Velvet's e-commerce website involved crafting a visual aesthetic that harmonizes with the brand identity. With the aim of creating a sense of contrast, complementary colors were carefully selected to evoke the desired ambiance. The website was designed to strike a balance between simplicity and the element of fun and quirkiness that reflects Blue Velvet's essence. To infuse a touch of nostalgia, shapes reminiscent of traditional 60s patterns were incorporated around the product cards. This cohesive design approach brings the Blue Velvet brand to life, providing users with an engaging and visually pleasing online shopping experience that resonates with the store's unique vintage charm.
Desktop footer with navigation quick links
Exploring the filters to the left on PLP page.
Lo-fi wireframe for Collections page
The Final Product
The final prototype embodies the essence of Blue Velvet's brand identity and provides a seamless and enjoyable online shopping journey for all vintage enthusiasts.
Validating my goals through testing
Our team wanted to gain insight into how users navigate the redesigned Blue Velvet site. I asked three users to complete a series of tasks on the website with the goal of understanding the needs and pain points users experience as they navigate the site. Overall, the usability testing revealed positive user experiences with some constructive suggestions for further enhancement. The results are summarized below:
3 / 3 Users
Found the navigation and categories to be intuitive
2 / 3 Users
Appreciate the curated collections to find new items
2 / 3 Users
Suggested moving the Save for Later and Add to Cart buttons to a more predictable spot.
Next Steps
Complete hi-fi screens for both user flows
Include “Added to Cart” feedback to give users the opportunity to continue shopping
Add a “Message Seller” feature
Increase padding on the site for a sleeker look
Make filter options an accordion menu
Reflection
Reflecting on the UX case study of redesigning Blue Velvet's e-commerce website, two key takeaways emerge from the project.
The Importance of User Research
By conducting user research, interviews, and usability testing, we gained valuable insights into the vintage shoppers' expectations, pain points, and desires. This user-centric approach allowed us to create a tailored and engaging online shopping experience that resonates with the target audience.
Balancing Aesthetics and Usability
The visual design of the website, with its complimentary colors, nostalgic patterns, and playful elements, successfully captured the essence of Blue Velvet's brand identity. Simultaneously, a focus on intuitive navigation, clear product categorization, and convenient filtering options ensured a seamless and efficient user journey. By finding the sweet spot between aesthetics and usability, I created a website that not only delights visually but also facilitates an enjoyable and productive shopping experience for vintage enthusiasts.