OVERVIEW
OVERVIEW
Aura Moon is a website offering timeless jewelry for various occasions. The project brings thoughtful brand identity with UI/UX design, focusing on a seamless user experience, intuitive navigation, and iterative improvements based on user research.
Aura Moon is a website offering timeless jewelry for various occasions. The project brings thoughtful brand identity with UI/UX design, focusing on a seamless user experience, intuitive navigation, and iterative improvements based on user research.
COURSE
COURSE
UX Design 2
UX Design 2
MY ROLE/ DURATION
MY ROLE/ DURATION
UX/ UI Designer
UX Researcher
Brand Designer
September 2024 - December 2024 (10 weeks)
UX/ UI Designer
UX Researcher
Brand Designer
September 2024 - December 2024 (10 weeks)
TOOLS
TOOLS
Figma
Google forms
Figma
Google forms
METHODS
METHODS
Design Brief
User Interview
Usability Test
Wireframe & Prototype
Design Brief
User Interview
Usability Test
Wireframe & Prototype
DESIGN BRIEF
Company Background
Company Background
The company provides a wide selection of jewelry from rings, necklaces, earrings to bracelets. The business specializes in high-quality craftsmanship and premium materials, offering timeless and fashionable designs for all occasions.
The company provides a wide selection of jewelry from rings, necklaces, earrings to bracelets. The business specializes in high-quality craftsmanship and premium materials, offering timeless and fashionable designs for all occasions.
Goals
Goals
Create an engaging and intuitive platform where customers can easily browse products.
Increase customers engagement through storytelling, visually appealing product layout to encourage purchases.
Communicate that the store provides both everyday pieces and special occasion jewelry and emphasize the quality.
Create an engaging and intuitive platform where customers can easily browse products.
Increase customers engagement through storytelling, visually appealing product layout to encourage purchases.
Communicate that the store provides both everyday pieces and special occasion jewelry and emphasize the quality.
Target Market
Target Market
Age: 20-50 years old
Gender: Primarily female but inclusive of males who are looking for specific occasions such as Valentine’s Day or engagement.
Income: Middle to high-income who are looking for everyday wear or high quality jewelry for special occasions.
Age: 20-50 years old
Gender: Primarily female but inclusive of males who are looking for specific occasions such as Valentine’s Day or engagement.
Income: Middle to high-income who are looking for everyday wear or high quality jewelry for special occasions.
THE LOGO
Heading (Playfair Display, semi bold)
Main header (font size 56)
Sub header (font size 48)
Secondary header (font size 32)
THE FONT
Product Title, Special highlight (Allura)
Font size 28
Font size 32
Bold Text RegularText (Open Sans)
bold font size 18
regular font size 16
DESIGN BRIEF
Company Background
The company provides a wide selection of jewelry from rings, necklaces, earrings to bracelets. The business specializes in high-quality craftsmanship and premium materials, offering timeless and fashionable designs for all occasions.
Goals
Create an engaging and intuitive platform where customers can easily browse products.
Increase customers engagement through storytelling, visually appealing product layout to encourage purchases.
Communicate that the store provides both everyday pieces and special occasion jewelry and emphasize the quality.
Target Market
Age: 20-50 years old
Gender: Primarily female but inclusive of males who are looking for specific occasions such as Valentine’s Day or engagement.
Income: Middle to high-income who are looking for everyday wear or high quality jewelry for special occasions.
COURSE
UX Design 2
MY ROLE/ DURATION
UX/ UI Designer
UX Researcher
September 2024 - December 2024 (10 weeks)
TOOLS
Figma
Google forms
METHODS
Design Brief
User Interview
Usability Test
Wireframe & Prototype
THE LOGO
THE FONT
Heading (Playfair Display, semi bold)
Main header (font size 56)
Sub header (font size 48)
Secondary header (font size 32)
Bold Text RegularText (Open Sans)
bold font size 18
regular font size 16
Product Title, Special highlight (Allura)
Font size 28
Font size 32
MAIN COLOR
MAIN COLOR
Dusty blue: Background and main sections. Representing the serene, calming hues of the moon, aligning with the brand's theme.
Soft Gold: Accent color for headings, buttons, and highlights. Representing the luxury and high quality of the brand.
Ivory: Used for the background or text on darker sections. Adds elegance and a clean aesthetic.
Charcoal black: Used for text and icons on lighter backgrounds.
Dusty blue: Background and main sections. Representing the serene, calming hues of the moon, aligning with the brand's theme.
Soft Gold: Accent color for headings, buttons, and highlights. Representing the luxury and high quality of the brand.
Ivory: Used for the background or text on darker sections. Adds elegance and a clean aesthetic.
Charcoal black: Used for text and icons on lighter backgrounds.
ACCENT COLOR
Burgundy: Use for smaller interactive elements such as button and icon. Add in some femininity and maturity.
Pale Purple: Use for call-to-action buttons, making the design feel more welcoming and versatile.
Off White: Border, button or icon outline.
ACCENT COLOR
Burgundy: Use for smaller interactive elements such as button and icon. Add in some femininity and maturity.
Pale Purple: Use for call-to-action buttons, making the design feel more welcoming and versatile.
Off White: Border, button or icon outline.
ACCENT COLOR
MAIN COLOR
SAMPLE IMAGE
Dusty blue: Background and main sections. Representing the serene, calming hues of the moon, aligning with the brand's theme.
Soft Gold: Accent color for headings, buttons, and highlights. Representing the luxury and high quality of the brand.
Ivory: Used for the background or text on darker sections. Adds elegance and a clean aesthetic.
Charcoal black: Used for text and icons on lighter backgrounds.
Burgundy: Use for smaller interactive elements such as button and icon. Add in some femininity and maturity.
Pale Purple: Use for call-to-action buttons, making the design feel more welcoming and versatile.
Off White: Border, button or icon outline.
WIREFRAME
SAMPLE IMAGES
WIREFRAME
WIREFRAME
USABILITY TESTING
Usability Testing
Data Takeaway
Users are highly satisfied with the Aura Moon website, especially its easy navigation and efficient checkout process. All participants rated their experience a 5 (strongly agree), reflecting the site’s success in these areas. However, 60% indicated they would return, highlighting the need for improvements.
20% (1 user) rated checkout amounts and price information clarity as a 3 (Neutral), suggesting that they found it hard to read and digest all of the information in the cart summary.
Data Takeaway
Users are highly satisfied with the Aura Moon website, especially its easy navigation and efficient checkout process. All participants rated their experience a 5 (strongly agree), reflecting the site’s success in these areas. However, 60% indicated they would return, highlighting the need for improvements.
20% (1 user) rated checkout amounts and price information clarity as a 3 (Neutral), suggesting that they found it hard to read and digest all of the information in the cart summary.
Interview Takeaway:
Increase font size for filters and enlarge the “Shop Now” button for better visibility.
Introduce clearer navigation cues, such as a dedicated “Home” button.
Implement smoother page transitions for better browsing experience.
Interview Takeaway:
Increase font size for filters and enlarge the “Shop Now” button for better visibility.
Introduce clearer navigation cues, such as a dedicated “Home” button.
Implement smoother page transitions for better browsing experience.
USABILITY TESTING
Interview Takeaway:
Increase font size for filters and enlarge the “Shop Now” button for better visibility.
Introduce clearer navigation cues, such as a dedicated “Home” button.
Implement smoother page transitions for better browsing experience.
Data Takeaway
Users are highly satisfied with the Aura Moon website, especially its easy navigation and efficient checkout process. All participants rated their experience a 5 (strongly agree), reflecting the site’s success in these areas. However, 60% indicated they would return, highlighting the need for improvements.
20% (1 user) rated checkout amounts and price information clarity as a 3 (Neutral), suggesting that they found it hard to read and digest all of the information in the cart summary.
FINAL DESIGN
HOMEPAGE
PROMOTION
PRODUCT PAGE
PRODUCT DETAIL PAGE
CART PAGE
CHECK OUT PAGE
HOMEPAGE
PROMOTION
PRODUCT PAGE
PRODUCT DETAIL PAGE
CART PAGE
CHECK OUT PAGE
HOMEPAGE
PROMOTION
PRODUCT PAGE
PRODUCT DETAIL PAGE
CART PAGE
CHECK OUT PAGE
HOMEPAGE
PROMOTION
PRODUCT PAGE
PRODUCT DETAIL PAGE
CART PAGE
CHECK OUT PAGE
FINAL DESIGN
HOMEPAGE
PROMOTION
PRODUCT PAGE
PRODUCT DETAIL PAGE
CART PAGE
CHECK OUT PAGE
HOMEPAGE
PROMOTION
PRODUCT PAGE
PRODUCT DETAIL PAGE
CART PAGE
CHECK OUT PAGE
HOMEPAGE
PROMOTION
PRODUCT PAGE
PRODUCT DETAIL PAGE
CART PAGE
CHECK OUT PAGE
HOMEPAGE
PROMOTION
PRODUCT PAGE
PRODUCT DETAIL PAGE
CART PAGE
CHECK OUT PAGE
USABILITY TESTING