top of page

 CASE STUDY 
LANA DEL REY STORE RESPONSIVE WEBSITE

THE PRODUCT:

The LANA DEL REY STORE is a website where you will find exclusive merchandise and limited edition items about LANA DEL REY.

PROJECT DURATION: January to March 2023

Develop with Adobe XD for GOOGLE CERTIFICATE

 EMPATHIZE 

RESEARCH PROCESS

PROJECT OVERVIEW

 The problem: 

Being unable to find great and special content of Lana Del Rey in one website. 

 The goal: 

Find exclusive and special merchandise of Lana Del Rey on one website.

 My role: 

Being the UX & UI designer of this website.

 Responsabilities: 

  • User Research (Itw, create personas…)

  • Problem Statements

  • User Journey Maps

  • Wireframing

  • Prototyping

  • Testing

USER RESEARCH: SUMMARY

I conducted interviews and created empathy maps to understand the users I’m
designing for and their needs. A primary user group identified through research
was people were unable to find merchandise of Lana Del Rey on one website. 


This user group confirmed initial assumptions about Lana Del Rey customers, but research
also revealed that time was not the only factor limiting users who are fan of Lana del Rey.
Other user problems included obligations, interests, or challenges that make it
difficult to get exclusive merchandise of this artist.

USER RESEARCH: PAIN POINTS

1

Working adults are too busy to spend time searching for hours the perfect gift or exclusive merchandise of this artist.

2

There is not a website where you can find exclusive content about this artist.

3

Many shopping website are not accessible for every user.

 PERSONA : JAMES 

PROBLEM STATEMENT:

James is not a fan of Lana Del Rey.

He needs to find and buy a gift for

his husband who is a huge fan

because he wants to make him happy.

Screenshot 2023-05-20 at 1.57.06 PM.png

 PERSONA : MELISSA 

PROBLEM STATEMENT:

Melissa love Lana Del Rey. She needs to find limited edition album and special merchandise of her favorite artist because she can not find high quality or stylish merchandise of her and wants to complete her collections.

USER JOURNEY MAPS

Mapping James’s user journey revealed how helpful it would be for users to have access to a dedicated Lana Del Rey Store website.

Mapping Melissa’s user journey revealed how helpful it would be for users to have access to a dedicated Lana Del Rey Store website.

 IDEATE 

DESIGN PROCESS

SITEMAP

Difficulty with website navigation was a primary pain point for users, so I used that knowledge to create a sitemap. 

 

My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.

PAPER WIREFRAMES

HOME PAGE

*Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.

Next, I sketched out paper wireframes for each screen in my app, keeping the user 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.

PAPER WIREFRAME

HOME PAGE - SCREEN SIZE VARIATIONS

Because LANA DEL REY’s 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

HOME PAGE

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.

Easy access to shop products

Homepage is optimized for easy browsing through the main image feature and nav menu options

DIGITAL WIREFRAME

HOME PAGE - SCREEN SIZE VARIATIONS

LOW FIDELITY PROTOTYPES

To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of adding an item to the cart and checking out.

At this point, I had received feedback on my designs from members of my team about things like placement of buttons and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.

 USABILITY STUDY 

PARAMETERS

 Study type: 

Unmoderated usability study.

 Lenght: 

20-30 minutes.

 Participants: 

5 participants.

 Location

United States, Remote.

 USABILITY STUDY: FINDINGS 

INSIGHTS

These were the main findings uncovered by the usability study:

1

Users need more icons next to the features to create a clear difference between them.

2

Users need some features to go back to every step easily.

3

Users need to have the title clickable to make it easier for his navigation on the website.

 REFINING THE DESIGN 

MOCKUPS

Based on the insights from the usability study, I made changes to improve the site’s checkout flow. One of the changes I made was adding more icons next to feature to improve Accessibility like the option to edit the quantity of items in a user’s cart using a simple “+” or “-” option. This allowed users more freedom to edit their cart without going through a complicated process to add or remove items. Also add arrows and link every steps to go back easily in the confirmation checkout process

BEFORE USABILITY STUDY

AFTER USABILITY STUDY

Also after a second round of usability study, some of the users prefered to have more recommendations on the home page. I decide to add a carousel instead of a simple image to have a better option to gain more contains for users on the website.

AFTER USABILITY STUDY

BEFORE USABILITY STUDY

MOCKUPS - ORIGINAL SCREEN SIZE

I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users shop from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible.

MOCKUPS - SCREEN SIZE VARIATIONS

HIGH FIDELITY PROTOTYPES

smartphone-and-mobile-phone-free-png.webp

My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study, as well as several changes suggested by members of my team.

 ACCESSIBILITY STUDY 

1

Used icons to
help and make an easier
navigation.

2

3

I used headings with different sized text for clear visual hierarchy.

Used detailed imagery for articles

and merchandising to help all users
better understand the designs.

 GOING FORWARD 

TAKEAWAYS

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 learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.

NEXT STEPS

1

Conduct follow-up usability testing on the new website

2

Identify any additional areas of need and ideate on new features

© 2023, Camille Quentin, All rights reserved

bottom of page