top of page
smartmockups_lchvd8y4.png

Lana Del Rey Merch 

smartmockups_lchve427.png

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

Hotjar_ Website Heatmaps & Behavior Analytics Tools copy.png

● 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

Empathy Map  (2).png
Empathy Map  (1).png
Empathy Map .png

Personas

I created four user personas based on the user interviews and survey to help make design decisions:

Persona pdf_page-0001.jpg
Persona pdf_page-0004.jpg
Persona pdf_page-0002.jpg
Persona pdf_page-0003.jpg

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.

User Journey_page-0001.jpg

Competitive audit

Competitive Audit Report_page-0001.jpg
Competitive Audit Report_page-0002.jpg
Competitive Audit Report_page-0003.jpg

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.

7.Crazy eight .jpg

Starting the design

8346dcb07a2984d98b9d221aaa57098c copy.png

● 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.

Sitemap.png

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.

8.Paper.png

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.

gv_page-0001 copy.png

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.

Home Page – 4.jpg
Shop – 1.jpg
Video – 1.jpg
ACCESSORIES – 1.jpg
TEES – 1.jpg
MUSIC – 1.jpg
OUTERWEAR – 1.jpg
SIGN IN – 5.jpg
Welcome Page – 3.jpg
SIGN IN – 6.jpg
SIGN IN – 4.jpg
Payment – 2.jpg
Payment – 3.jpg
Check out – 7.jpg
Check out – 9.jpg

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.

df.png
Subzxczxcject (4).png

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.

Adobe XD 03-01-2023 18_06_31.png

View

Usability study

gv_pagtyjghje-0001 copy.png

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

sdf.png

● Mockups

● High-fidelity prototype

● Accessibility

Mockups

Landing Page 1.jpg
Homepage 1 – 9.jpg
Music Page.jpg
Homepage Top Albums 4 – 1.jpg
Homepage Top Albums 4 – 7.jpg
Homepage Top Albums 4 – 9.jpg
Search 2.jpg
Homepage Top Albums 4 – 17.jpg
Homepage Top Albums 4 – 2.jpg
Homepage Top Albums 4 – 8.jpg
Homepage Top Albums 4 – 10.jpg
mUSIC.jpg
Homepage Top Albums 4 – 12.jpg
mUSIC – 1.jpg
Account My Info.jpg
Homepage Top Albums 4 – 18.jpg
Homepage Top Albums 4 – 15.jpg
Video pause – 1.jpg
Video Play – 1.jpg
Web 1920 – 6.jpg
Web 1920 – 7.jpg

High-fidelity prototype

Adobe XD 04-01-2023 15_16_05.png

View

Usability study for a High-fidelity prototype

Click to view

Affinity Diagram

Untitled.jpg
Untitled (1).jpg
Untitled (1).jpg

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

Homepage Top Albums 4 – 19.jpg

Before usability study 

Homepage Top Albums 4 – 16.jpg

Afer usability study 

Mockups: Original screen size

smartmockups_lchir0f4.png
smartmockups_lchiqi3s.png
smartmockups_lchisrho.png
smartmockups_lchis7ny.png
smartmockups_lchitdv3.png
smartmockups_lchirkec.png

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

smartmockups_lchj6tme.png
smartmockups_lchiqi3s.png
smartmockups_lchkhjht.png
pngegg.png

Onboarding Screen 

UI Style Guide

Group 304.png
Group 305.png
Group 306.png

Iconography

Group 307.png

Buttons

Group 309.png

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.

What I learned:

I discovered that even a minor design adjustment can significantly effect the user experience. The most crucial lesson I learned was to always keep the user's actual demands in mind when developing design concepts and solutions. With a broad problem in hand, I needed to plan the research and design process in order to narrow down to the core of the challenge.

User-centred design: I am glad that I kept the process user-centred. Otherwise, I wouldn't be able to look at the problem with neutrality, nor can I spot some of the most fatal usability issues in my original design.

If you like the song you heard on the homepage, you can listen to it.

White MustangLana Del Rey
00:00 / 04:25

Let’s connect!

Thank you for your time reviewing my work on Lana Del Dey Merch app! If you’d like to see more or would like to get in touch, my contact information is provided below.

bottom of page