Vintage Brand was born to provide the modern fanatic the opportunity to relive the game by representing an iconic and unique design from the past. It offers the world’s largest selection of unique retro sports designs from historical works of art. The designs are represented on an array of different modern products that meets the demands of their various customers.

Vintage Brand didn’t have an online presence and it required an immersive digital storefront that was fast and mobile-first. Aesthetically—it needed to bridge the gap between modern and retro.

Design, build, and ship Vintage Brand's first e-commerce website

• Create a pleasant and user friendly shopping experience
• Make finding products easy and intuitive
• Build a modern UI that represents the brand essence of the company
• Build a scalable design system

Working closely with my product team, and marketing teams, these key metrics were identified:

• Modern and user friendly
• Easy to find products
• Increase customers YOY
• Increase repeat (loyalty) customers YOY
• Fast load speeds

Working with my product team, I led the following:

• Digital product experience strategy
• Research & usability testing
• Information architecture
• Wireframing
• UI & Visual Design
• End-to-end e-commerce design

I started with a brainstorming session with my product team to formalize a lean UX Canvas that would help identify and frame the problem space. Throughout several design sprints, I was able to quickly validate my ideas and test rapid prototypes with customers.

I used this research tool to uncover inspiration. But I also wanted to understand the direct and indirect competitive landscape. I compared and identified common features and opportunities for Vintage Brand. This would also help to differentiate the brand.

The company had initially defined a user persona that was based on previous analytics. I refined the persona with the latest research and analytics and identified the top user needs.

• Easy and intuitive shopping experience
• Easy to find products and intuitive navigation
• Helpful product suggestions
• Detailed product information and product reviews
• Easy checkout experience
• Brand trust and loyalty

Card sorting

I developed the navigation system with the help of an online card sorting exercise I conducted with existing users. In my opinion, there's no better way to help a business efficiently organize a complex nav system than by tapping into the user's mental models.

Site map

I designed the sitemap guided with the results of the card sorting exercise and combined it with navigation research I conducted in my previous comparative analysis. This would ensure the navigation was aligned with the user's mental models and aligned with navigation usability best practices.

I built a couple of user flows but focused on the needs and goals of our main persona. "Charles, the sports collector", the main persona's goal is to search and browse new products and to explore product details, which also include customer reviews. It was also, incredibly important to ensure that I minimized the steps it took to complete the checkout process.

Sketches and wireframes

I began to design the website once I collected my insights from the discovery phase. I ran a whiteboarding session with my product team to quickly create some concepts and get their feedback and buy-in, which is incredibly important in any product design project.

Prototyping

I made sure to prioritize the concepts that addressed the major user needs and then built and finalized a prototype using Figma for usability testing.

I conducted usability testing using usertesting.com to validate my prototype solution. I ran two studies, one with simple gray wireframes and the second with visual design. This would ensure that I had critical feedback on functionality that was separate from visual design feedback.

Key results

• Navigation was easy and intuitive
• Product details were adequate and provided enough context to persuade users to purchase
• New products were easy to locate
• Some users were unsure if the products themselves were"vintage " vs "new"

To create Vintage Brands' e-commerce site, I distilled the essence of the company down to its core elements. I created a digital design system to match the overall brand look and feel. User testing confirmed that my solution helps users quickly and intuitively find the products they’re looking for. A 2-step checkout process makes ordering a breeze.

Since the homepage acts as the user’s introduction to the company and its products—it was important for me to create a design that clearly communicates the brand and its product offerings. But just as important—the ability to convey trust, and visual legitimacy to invite users to explore products and make a purchase.

Keeping in mind, one of the most important e-commerce UX rules “If the customer cannot find the product, the customer cannot buy the product.”— I wanted to ensure our website made it easy for users to browse and find products. And since many users would enter the site without seeing the homepage, it was crucial to have a product category page that had a clear structure.

I wanted to ensure our product detail pages provided enough information about a product while not overwhelming them with too much. From the usability studies, the ability to zoom in on a product detail image was a huge purchase motivator. So I ensured users were able to get large image previews. Also, we doubled down and added product videos a few months after launching our MVP and we immediately noticed an uptick in conversion with the products that included the helpful product videos.

I created a simple checkout flow to ensure users knew exactly where they were in the process. From my research and user studies, I also knew that minimal data entry was a key indicator of checkout success. Therefore, working with my product team, I ensured that our customers only gave us the information that was essential for them to make a purchase.

Vintagebrand.com

Want to learn more about this project? Contact me at luis@designlp.com