ÉTUDE DE CAS 2
LANA DEL REY BOUTIQUE SITE INTERNET RESPONSIF
LE PRODUIT:
Le site Web LANA DEL REY est un site Web où vous trouverez des marchandises exclusives et des articles en édition limitée sur LANA DEL REY.
​
PDURÉE DU PROJET: janvier à mars 2023
​
Développer avec Adobe XD pour le CERTIFICAT GOOGLE
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.
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
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