Lana Del Rey Merch
Project Overview
Lana Del Rey merch is a platform that combines intuitive UX aspects with reasonable price points and offers items such as music, clothing, and posters to fans all over the world. The goal is to make purchasing enjoyable, quick, and simple for all types of fan users. I believe that by designing a compact and user-friendly interface, anyone can use it.
Kickoff
Client - Project for Practice (No Client)
My Role - UX/UI Designer
Timeline - 5 Weeks , October 2022
Tools - Adobe XD, Photoshop, Principle, Paper-Pen-Pencil
Responsibilities - Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design
The problem:
The websites for available online musician merch are cluttered, have ineffective systems for looking through things, and have confusing checkout procedures for other country users.
The goal:
Create a user-friendly Lana Del Rey Merch website by offering a variety of products, easy navigation, and a quick payment procedure.
Understanding the user
● User research
● Personas
● Problem statements
● User journey maps
● Competitive audit
● Ideation
User research: summary
Conducted user interviews to better understand the target user and their needs, which I eventually translated into empathy maps. When they need to own products from the musicians they like I found that many of my target audience treat online shopping as a fun and relaxing hobby. To the dismay of many target users, many shopping websites are overwhelming and difficult to navigate. This made an activity that would typically be enjoyable for them hard, negating the objective of relaxing.
User research: Pain Points
Navigation
Because shopping website designs are frequently busy, the navigation can be complicated.
Information Architecture
Websites frequently have text-heavy menus and other content that is challenging to understand and navigate.
Interaction
On Merch by musicians websites, small buttons make item selection challenging, which occasionally causes users to make mistakes.
Experience
Online Merch shopping websites don’t provide an engaging browsing experience
Empathy Maps
Personas
I created four user personas based on the user interviews and survey to help make design decisions:
User journey map
I created a user journey map of Ada’s experience using the site to help identify possible pain points and improvement opportunities.
Competitive audit
Competitive audit goal: Compare the browsing and order process of each competitor's site.
Click to view
Ideation
I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit.
Starting the design
● Sitemap
● Paper wireframes
● Digital wireframes
● Low-fidelity prototype
● Usability studies
Sitemap
I used this data to create a sitemap because I was aware that visitors' major gripe with websites was their inability to easily navigate them. My objective in this circumstance was to make knowledgeable information architecture decisions that would improve overall website navigation. I made the decision to use an easy-to-understand framework.
Paper wireframes
Next, I sketched out paper wireframes for each screen in my website, keeping the user's pain points about navigation, browsing, and checkout flow in mind. The home screen paper wireframe variations to the right focus on optimizing the browsing experience for users.
Because Lana Del Rey Merch fans and customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Digital wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience. Prioritizing useful button locations and visual element placement on the home page was a key part of my strategy.
Because Lana Del Rey Merch fans and customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience. Prioritizing useful button locations and visual element placement on the home page was a key part of my strategy.
Low-fidelity prototype
I linked all of the screens involved in the main user flow of adding an item to the basket and checking out to produce a low-fidelity prototype. At this stage, design members had given me input on my designs about elements like button placement and page arrangement. I paid close attention to their comments, and I put a number of their suggestions into action where they addressed user annoyances.
View
Usability study
Study Type - Unmoderated usability study
Location - India, remote
Participants - 7 participants
Length - 30-60 minutes
Parameters
Usability study: Findings
1
Cart Quantity
Users couldn't change the number of products in their cart once they reached the checkout
2
Checkout Address
Users cannot change the delivery and billing addresses provided in the account
3
Payment
The user wants to check out and pay quickly throughout the payment procedure
Refining the design
● Mockups
● High-fidelity prototype
● Accessibility
Mockups
High-fidelity prototype
View
Usability study for a High-fidelity prototype
Click to view
Affinity Diagram
Changes Done After The Usability Study
The user wants to check out and pay quickly throughout the payment procedure.By offering convenient payment methods like Google Pay and Apple Pay, add express checkout
Before usability study
Afer usability study
Mockups: Original screen size
Mockups: Screen size variations
Based on my prior wireframes, I took into account concerns for extra screen sizes in my mockups. Given that consumers shop using a number of devices, I believed it was crucial to optimise the browsing experience for various device sizes, including mobile, to give users the best experience
Onboarding Screen
UI Style Guide
Iconography
Buttons
Going forward
Conduct follow-up usability testing on the new website
Next Steps
Identify any additional areas of need and ideate on new features
Takeaways
Iteration of High – Fidelity from the research.
Impact:
Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.