Be Unravelled

Challenge

Be Unravelled required several refinements to align with the brand's vision, ensure a seamless user experience, and improve mobile usability. The key challenges included:

1. Inconsistent Typography & Colors – Some text was black while others were green. Headings and section titles had inconsistent colors.
   
   

2. Mobile Banner Issues – The desktop banner was simply resized for mobile, making the image look zoomed-out instead of optimized.
   
   

3. Blurry Images on Desktop – Product images appeared low-resolution, impacting the perceived quality of the journal.
   
   

4. Typography Adjustments – The call-to-action (CTA) buttons needed to be in Lato Thin, and quote formatting needed adjustments.
   
   

5. Mobile Layout Issues – Several elements, such as Learning, Reflection, and Inspiration titles, were larger than section headers. Additionally, certain text needed to be split into multiple lines for readability.
   
   

6. Text Readability – Off-white text on some sections appeared too thin, making readability difficult.
   
   

7. Hotspot Text Issues – On interactive elements, the text was too small to read comfortably.
   
   

8. Footer & Navigation Updates – The footer needed to be simplified, and unnecessary elements (like "Powered by Shopify") removed.
   
   

9. Product Page Refinements – Better alignment, button styling, and clearer descriptions.
   

Solution

1. Standardized all headings, text colors, and button styles for a uniform brand aesthetic.
   
   

2. Created a custom mobile banner to ensure a properly scaled image rather than a resized version of the desktop banner.
   
   

3. Uploaded high-resolution product and homepage images to improve clarity on both desktop and mobile.
   
   

4. Applied Lato Thin typography to CTA buttons using custom code.
   
   

5. Adjusted mobile text layout by resizing section titles, ensuring text splits correctly for readability, and improving line breaks after commas.
   
   

6. Increased text contrast to enhance readability without disrupting the minimalist design.
   
   

7. Enlarged hotspot text on interactive elements and adjusted positioning for better visibility on mobile.
   
   

8. Simplified the footer by removing unnecessary elements and organizing links into "Quick Links" and "Resources" sections.
   
   

9. Improved product pages with clearer descriptions, better alignment, and updated button styling to enhance clarity and trust.

Results

The website now has a more cohesive design with consistent typography, improved readability, and a better-structured mobile experience. Product images appear sharper, ensuring a high-quality look and feel. The user experience has been significantly improved with better navigation, a simplified footer, and optimized text placement. Hotspot elements are now more legible, making interactive features more engaging. The overall effect is a modern, minimalistic, and professional website that effectively communicates the brand’s vision and enhances the shopping experience.