Project Context
Personal Project
Project Timeline
Project Role
User Research,
Market Research,
UI Design, Branding
Figma, Photoshop, Illustrator
Project Timeline
January 2024
UI Design
Fragrance Reimagined: Elegance and Creativity through UI
Fragrance Reimagined: Elegance and Creativity through UI
A UI redesign for Jo Malone's English Pear and Freesia, showcasing elegance and creativity in user experience."
Project Context
Personal Project
Project Timeline
Jan 2024
Project Role
User Research,
Market Research,
UI Design, Branding
Tools
Figma, Photoshop,
Illustrator
Project
Context
Personal Project
Project
Timeline
January 2024
User Research,
Market Research,
UI Design, Branding
Project
Role
Figma, Photoshop,
Illustrator
Tools
Overview
This project focused on developing an information page for Jo Malone's 'English Pear and Freesia' fragrance to enhance user engagement and understanding of the brand's signature scents. The primary goal was to design a clean, intuitive user interface that aligns with Jo Malone's sophisticated brand image while ensuring seamless navigation and an immersive experience for users.
Jo Malone
Web Design
Overview
JoMalone Web Design
Focusing on developing an informative page for JoMalone's 'English Pear and Freesia' fragrance to enhance user engagement and understanding of the brand's signature scents. The primary goal is to design a clean, intuitive user interface that aligns with Jo Malone's sophisticated brand image while ensuring seamless navigation and an immersive experience for users.
Design Challenge
Design Challenge
JoMalone's webpage needs clearer scent explanations despite its brand recognition.
JoMalone stands as a prominent high-end perfume brand favoured by many. Yet, perusing their website reveals a challenge for buyers: discerning the distinct scents of their perfumes.
One key issue I noticed was that the product pages were functional but lacked emotional appeal. For a brand like Jo Malone, the experience should evoke the same feelings as using their products: elegance, luxury, and a sense of indulgence.
This obstacle is particularly daunting for newcomers to fragrance purchases or those exploring the brand for the first time.
The solution should not only provide legible instructions, but create an imagery of the scent.
JoMalone's webpage needs clearer scent explanations despite its brand recognition.
JoMalone stands as a prominent high-end perfume brand favoured by many. Yet, perusing their website reveals a challenge for buyers: discerning the distinct scents of their perfumes.
One key issue I noticed was that the product pages were functional but lacked emotional appeal. For a brand like Jo Malone, the experience should evoke the same feelings as using their products: elegance, luxury, and a sense of indulgence.
The solution should not only provide legible instructions, but create an imagery of the scent.
How Can We…
How Can We…
…design a webpage to inform customers about both the brand's products and it's overall image?
…design a webpage to inform customers about both the brand's products and it's overall image?
Problem Space
Jo Malone's webpage needs clearer scent
explanations despite its brand recognition.
Image courtesy of Jo Malone London
Detailed descriptions of each fragrance
would benefit enthusiasts, especially
newcomers navigating the selection process.
Image courtesy of Jo Malone London
Market Research
I conducted market research on the high-end fragrance brand 'Diptyque' to compare various fragrance brands and their web designs, analyzing how each brand presents information about their fragrances.
Image courtesy of Diptyque
"Diptyque" has successfully established its brand identity by assigning unique stories to each scent line.
They craft individual stories for each scent through captivating videos, effectively conveying the essence of each fragrance to users.
Image courtesy of Diptyque
Image courtesy of Diptyque
The distinctive narratives create an image of the ideal wearer for each scent, and the product page provides clear information about the fragrance.
To address this, I designed a product page that tells a story. The page incorporates:
Elegant typography to reflect the brand’s identity.
Soft, neutral colors and subtle gradients to create a calming visual experience.
High-quality visuals of the product, paired with descriptive text to engage the senses and bring the fragrance to life.
To address this, I designed a product page that tells a story. The page incorporates:
Elegant typography to reflect the brand’s identity.
Soft, neutral colors and subtle gradients to create a calming visual experience.
High-quality visuals of the product, paired with descriptive text to engage the senses and bring the fragrance to life.
Problem Space
Jo Malone's webpage needs clearer scent
explanations despite its brand recognition.
Jo Malone's webpage needs clearer scent explanations despite its brand recognition.
Image courtesy of Jo Malone London
Image courtesy of Jo Malone London
Problem Space
Detailed descriptions of each fragrance
would benefit enthusiasts, especially
newcomers navigating the selection process.
Detailed descriptions of each fragrance would benefit enthusiasts, especially newcomers navigating the selection process.
Market Research
I conducted market research on the high-end fragrance brand 'Diptyque' to compare various
fragrance brands and their web designs, analyzing how each brand presents information
about their fragrances.
Image courtesy of Diptyque
"Diptyque" has successfully
established its brand identity
by assigning unique stories to
each scent line.
"Diptyque" has successfully
established its brand identity
by assigning unique stories to
each scent line.
Image courtesy of Diptyque
They craft individual stories for
each scent through captivating
videos, effectively conveying
the essence of each fragrance
to users.
They craft individual stories for
each scent through captivating
videos, effectively conveying
the essence of each fragrance
to users.
Image courtesy of Diptyque
The distinctive narratives
create an image of the ideal
wearer for each scent, and the
product page provides clear
information about the fragrance.
The distinctive narratives
create an image of the ideal
wearer for each scent, and the
product page provides clear
information about the fragrance.
UI Design
Product Overview
Upon clicking onto the page to access information about the fragrance, users are presented with a product overview page offering a comprehensive overview of the brand's fragrance, providing buyers with a general impression of its scent.
Responsive
UI Design
Scent Taste Note
The product detail page provides a description written by the lister, including key details such as purchase date, freshness, and more. If you're interested, you can directly contact the poster to inquire about the product.
Similar Products
Next, the buyer will come across a section where they can explore other products featuring the same aroma. This curated overview aims to facilitate a comprehensive understanding, making it convenient for the buyer to view all related products in one place.
Gallery Page
Between each scroll, images are strategically placed to visually represent the aroma's essence. These images not only enhance the aesthetic appeal of the website but also provide a visual depiction of the specific scent offered by Jo Malone, aiding in the user's understanding and appreciation.
UI Design
Product Overview
Upon clicking onto the page to access information about the fragrance, users are presented with a product overview page offering a comprehensive overview of the brand's fragrance, providing buyers with a general impression of its scent.
Scent Taste Note
The product detail page provides a description written by the lister, including key details such as purchase date, freshness, and more. If you're interested, you can directly contact the poster to inquire about the product.
Similar Products
Next, the buyer will come across a section where they can explore other products featuring the same aroma. This curated overview aims to facilitate a comprehensive understanding, making it convenient for the buyer to view all related products in one place.
Gallery Page
Between each scroll, images are strategically placed to visually represent the aroma's essence. These images not only enhance the aesthetic appeal of the website but also provide a visual depiction of the specific scent offered by Jo Malone, aiding in the user's understanding and appreciation.
Responsive UI Design
Recognizing that many consumers shop on their phones, a responsive design was implemented to showcase the website's versatility on mobile screens.
Recognizing that many consumers shop on their phones, a responsive design was implemented to showcase the website's versatility on mobile screens.
Recognizing that many consumers shop on their phones, a responsive design was implemented to showcase the website's versatility on mobile screens.
One challenge was capturing the essence of a fragrance—a physical, sensory experience—through a digital medium. I addressed this by incorporating storytelling elements, such as poetic descriptions and videos of the product in use, to immerse the user in the experience.
Another challenge was creating a design that feels luxurious while remaining user-friendly. To solve this, I avoided overly complex layouts and focused on clean, minimalist design principles. Subtle animations, like hover effects and smooth transitions, add a touch of sophistication without overwhelming the user.
One challenge was capturing the essence of a fragrance—a physical, sensory experience—through a digital medium. I addressed this by incorporating storytelling elements, such as poetic descriptions and videos of the product in use, to immerse the user in the experience.
Another challenge was creating a design that feels luxurious while remaining user-friendly. To solve this, I avoided overly complex layouts and focused on clean, minimalist design principles. Subtle animations, like hover effects and smooth transitions, add a touch of sophistication without overwhelming the user.
Reflection
My takeaway from this project is the significance of responsiveness and a deep understanding of the user's needs and preferences.
Crafting designs that not only align with the brand's image but also prioritize user-centricity presents a significant challenge. Drawing inspiration from thorough research proved to be enlightening in generating UI designs. It was a rewarding challenge to undertake the creation of an entirely new webpage while ensuring the preservation of the brand's identity. Notably, my success lay in effectively capturing the essence of the brand through meticulous research.
Reflection
More Works.
My takeaway from this project is the significance of responsiveness and a deep understanding of the user's needs and preferences.
Crafting designs that not only align with the brand's image but also prioritize user-centricity presents a significant challenge. Drawing inspiration from thorough research proved to be enlightening in generating UI designs.
It was a rewarding challenge to undertake the creation of an entirely new webpage while ensuring the preservation of the brand's identity. Notably, my success lay in effectively capturing the essence of the
brand through meticulous research.
My takeaway from this project is the significance of responsiveness and a deep understanding of the user's needs and preferences.
Crafting designs that not only align with the brand's image but also prioritize user-centricity presents a significant challenge. Drawing inspiration from thorough research proved to be enlightening in generating UI designs. It was a rewarding challenge to undertake the creation of an entirely new webpage while ensuring the preservation of the brand's identity. Notably, my success lay in effectively capturing the essence of the brand through meticulous research.
More Works.