Redesigning E-Commerce Website
Project Timeline
Duration: 3 Week Design Sprint
March 2024 - March 2024
Role
Lead UX Designer
Project Overview
Plug Seven Records, a distinguished Melbourne-based record store, seeks to enhance their online presence to better reflect their unique curation and exceptional service. The objective is to redesign the existing website to improve user experience, streamline navigation, and provide comprehensive product details, ensuring that customers can easily browse, purchase, and enjoy their vinyl collections.
Solution
Our redesigned Plug Seven Records website concept solves the problems by offering detailed product information and high-quality images to boost user confidence. Enhanced search functionality and clear categorization streamline navigation, while a simplified checkout process with multiple payment options ensures quick, intuitive transactions. Immediate order confirmations and tracking information provide security. A minimalist design, wishlist functionality, and curated recommendations create a user-friendly interface. Continuous usability testing and WCAG compliance ensure accessibility, engaging users and building trust and loyalty among vinyl enthusiasts.
Research & Design Process
Heuristic Analysis
User Interviews
Competitor Analysis
Current State Usability Test
Competitor Analysis
Research Synthesis
Problem Statements
User Personas
User Flow
Journey Maps
Card Sort
Sketching
Mid-Fidelity Prototype
Mid-Fi Usability Test
High Fidelity Prototype
The Brief
To re-design, identify & fix pain points to improve the user experience of the existing Plug Seven Records website and increase user satisfaction & traffic.
While Plug Seven Records has an existing website, the store is not fully satisfied with its current digital platform, largely due to constraints in time and expertise.
The objective is to enhance the website to more effectively showcase their curated selection of quality records and personalized service, setting them apart from large e-commerce retailers, whilst creating a better user experience for users.
The Store
Who are Plug Seven?
Record Store / Label / Studio
Plug Seven is a Melbourne-based record store on Smith Street in Fitzroy, boasting a collection of about 10,000 records, focusing on genres like original Jazz, Soul R&B, Punk, and much more.
Sourced from global digging trips, the shop features both rare and new records, along with unique accessories like custom furniture for LPs, framed vintage posters, and original Hi-Fi pieces from the 50s-80s.
The Research
We employed a range of research methods to gain insights into competitor strategies and their e-commerce website features. This included conducting a comprehensive competitor analysis and a heuristic analysis of our current website to swiftly identify immediate issues. Additionally, we performed usability tests by guiding users through specific tasks on the website, which allowed us to validate our heuristic findings and pinpoint the areas requiring our focus.
Competitor Analysis
We conducted a comprehensive competitive analysis whereby, we took 12 companies across various competitor types and compared 4 key areas of there websites to see what the common trends between them were.
We also went through the purchase flow on each website to understand how they were commonly structured and the number of steps to purchase.
Elements Compared:
Homepage
About Us Page
Product Page
Purchase Flow
Key Findings
Home Page
Features thumbnails of new releases.
Includes a vertical dropdown menu.
Allows direct adding to the cart and wishlisting on some sites.
About Us Page
Commonly included, positioned at the top or bottom.
Provides company information like location, history, and values.
Product Page
Offers detailed descriptions and music preview options.
Allows adding to wishlist.
Includes product reviews on some sites.
Purchase Process
Features a pop-out cart menu with quick view.
Checkout process varies; quick checkout options are preferred.
Feature Analysis
What features where most common amongst the competitors?
Internal Music player
50%
Add to cart from main page
68%
Wishlist Feature
83%
Can purchase in 3 or less clicks from adding to cart
50%
Heuristic Analysis
Recommendations
Increase Text Size and Alignment
Enhance Visibility on Add-to-Cart
Fix Drop-Down Menu Functionality
Reposition Search Bar
Make Thumbnails Clickable
Current Site Usability Tests
Recommendations
Clearer Labelling & Menu Redesign
Improve clarity in labelling and restructure the menu for intuitive navigation.
Fix Category Placement & Functionality
Reposition categories for easy access and ensure functionality is fully operational.
Improve Search Bar Visibility
Place the search bar in a prominent, conventional location to enhance visibility for users.
Streamlined Checkout Process
Adopt a checkout process similar to popular websites to make it more familiar and user-friendly.
Who Shops at Plug Seven?
The typical customer is a young professional passionate about the arts, music, cinema, and video games. They prefer online shopping for vinyl records, valuing detailed product information and user-friendly, visually appealing websites. They seek seamless checkout, efficient search, and curated recommendations. Their main frustrations are poor navigation, inadequate product info, and complicated checkouts.
The Problem / HMW
HMW create an intuitive website that offers comprehensive product details, to ensure customers don't need to look to other websites for information.
HMW provide a quick and easy checkout process, enabling a quicker and smoother transaction for users. So that they can purchase quickly and can have trust in the store knowing that their purchase has been successful & is safe.
HMW Provide a user-friendly and well-organized website interface with features such as wish-list functionalities, whilst putting their record curation & expertise on display so that users will choose to visit Plug Seven instead of other competitors.
Grid elements
Starting with the basic square elements inspired by the shape of an album, we broke these squares into a flexible grid. This grid can be resized to fit the content as needed, ensuring a cohesive and adaptable layout.
Top & bottom banners & navigation
We then placed the fixed elements, including a banner and navigation bar featuring a re-imagined genre selection drop-down menu. Additionally, a play bar for previewing music samples was integrated, along with a bottom banner providing supplemental navigation.
Homepage
The homepage is composed of these fixed elements and showcases recommended albums, the latest releases, and a clear depiction of other unique aspects that make Plug Seven special, such as their role as a label.
Product page
The product page features a large image of the album, along with all relevant information users seek, such as reviews and track lists, providing a comprehensive and informative shopping experience.
Usability Mid-Fidelity
Leave the checkout pop-up visible for longer.
Add a confirmation page after checkout.
Adjust the position of search filters or add a label indicating "Filters" to enhance visibility.
Add more detail to the "leave review" section.
Change placement & the icon used for the "leave review" button to be clearer.
Provide a confirmation message after successfully leaving a review.
User Flow Created
The user flow we designed emphasizes the journey of a potential user browsing products from the homepage. It begins with navigating to a specific genre, followed by exploring products within that genre and selecting a product of interest.
On the product page, users can view detailed product information and read or leave reviews.
Finally, the flow concludes with the checkout process.
High Fidelity Prototype
Mood Board
& Style Guide
A comprehensive design system of components and a style guide was thought through.
The colours used across the website were taken from imagery of the physical store and then adjusted for accessibility.
Accessibility Considerations
Ensured all text used against main website background colour have a contrast ratio of at least 7.31
Ensured all call to action buttons achieve at least WCAG AA.
Ensured all call to action buttons use large or bold text
Ensured most elements on the website are large for visibility
Ensured most clickable buttons have hover states
Chosen a non-script body text font
