E commerce Athleisure Website | UI + Design System + Brand Guide

Anush N

UI Designer
Shopify Designer
Shopify Developer
Adobe Illustrator
Figma
Shopify
Motus Gratis

Motus Gratis UI/UX Design Case Study

BRAND VISION & CHALLENGE

Motus Gratis aims to bridge mindful living and outdoor adventure through eco-friendly clothing for all ages. The challenge: craft an online experience that conveys the brand’s sustainability ethos, showcases products across categories, and inspires customers to explore both nature and their own well-being.

RESEARCH & INSIGHTS

Secondary Research: I examined market leaders like Patagonia (outdoor focus) and Lululemon (athleisure), noting their engagement tactics and storytelling. We also looked at sustainable fashion brand practices, uncovering that transparency, simple navigation, and social/environmental responsibility are critical to gaining user trust.
Key Takeaways: – Eco-conscious consumers crave authentic stories about materials, processes, and community impact. – A family-friendly approach—easy product filtering, clear sizing info, and intuitive category pages—keeps users engaged and confident in purchases.

DESIGN APPROACH

Our goal was to weave Motus Gratis’s mission into every user interaction. We combined earthy colors, organic shapes, and inviting typography to create a cohesive brand identity that feels warm, adventurous, and trustworthy.

BASIC BRAND STYLE GUIDE

Color Palette: Defined earthy tones that reflect the brand's eco-friendly focus.
Typography: Selected fonts that convey warmth and approachability, ensuring consistency across all platforms.
Iconography: Recommended icons that align with the adventurous and sustainable ethos of the brand.
Imagery Style: Established guidelines for using nature-inspired photography and illustrations to enhance the brand's narrative.

INDIVIDUAL PAGES & KEY FEATURES

Home Page: – A bold hero banner featuring nature-inspired imagery invites visitors to “Discover Sustainable Adventure.” – Quick-access categories (Men, Women, Boys, Girls) and a direct “Shop Now” call-to-action reduce friction for first-time visitors.
2. About Us Page: – Storytelling blocks highlight the brand’s origin, core values (eco-conscious, mindful exploration), and commitment to fair labor practices. – A dynamic timeline shows Motus Gratis’s milestones, adding authenticity.
3. Main Shop Page & Category Pages: – Product thumbnails have “Eco-Friendly” badges, encouraging users to explore sustainable choices. – Filter and sort options (size, color, price range, fabric type) are placed prominently, streamlining the shopping experience for different family members.
4. Product Pages: – High-resolution images show product details up close. – Dedicated sections for fabric composition, sizing charts, and care instructions build buyer confidence.
5. Sustainability Page: – Engaging infographics highlight material sourcing, carbon footprint reduction strategies, and ethical production. – A “Join Our Mission” CTA invites users to subscribe or learn more.
(WORK IN PROGRESS)
6. Blog & Detailed Blog Pages: – Content covers mindful practices, eco-friendly living tips, and fun outdoor activities for families. – Clear sharing options encourage community-building around sustainable lifestyles.
7. Cart, Checkout & Order Confirmation Pages: – Simple, step-by-step process, ensuring minimal abandonment by reducing user friction. – Post-purchase “Continue Exploring” prompt leads back to the blog or product recommendations.
8. FAQ & Contact Us Pages: – Common questions about materials, delivery, and returns are promptly addressed, reinforcing trust. – Contact form links to social channels and includes a location map for future in-person events or pop-ups.

TESTING & ITERATIONS

Usability Testing: Conducted remote sessions with eco-conscious families to refine navigation, ensure clarity around sizing, and confirm that sustainability information was easy to locate.
Iterations: We simplified category filtering, enlarged product imagery, and made the checkout process clearer after observing test users’ feedback.

OUTCOME & NEXT STEPS

Outcome: The site now authentically represents Motus Gratis’s adventurous, mindful brand persona. Early user feedback applauds the intuitive product categories, engaging visuals, and transparent sustainability messaging.
Next Steps: Future phases include personalized product recommendations, advanced loyalty features, and an expanded “Community” section for sharing user-driven stories of eco-adventures.

CONCLUSION

By combining thorough research, purposeful design choices, and iterative testing, we crafted a platform that propels Motus Gratis’s mission beyond just selling products. The website fosters a deeper connection with customers—sparking a shared passion for exploration and mindful living.
Partner With Anush
View Services

More Projects by Anush