Project: Designing for Modura, a new eCommerce clothing brand for trendy young professionals aged 18-25. The project goal is to create a stylish, user-friendly design that appeals to their fashion-forward sensibilities while being practical for their daily workwear needs. Let's dive into how I approached this project and the results I achieved.

Client Request

Design three screens for their new app.

• Sign-in Screen

• Home screen showing latest offers on garments.

• Screen showing details of an individual item of clothing.

Inspiration

To ensure Modura's design stood out and appealed to our target audience, I drew inspiration from various sources:

• Trendy eCommerce Websites: Explored modern eCommerce sites for layout and typography trends.

• Urban Fashion Brands: Looked at urban fashion brands to understand how they use color and imagery to appeal to young professionals.

Style Tile & Color Style Set

Creating the style tile ensured consistency and provided a focal point for me while building the app screens. Here’s what the style tile included:

• Logo: Clean, modern design that reflects the brand’s trendy yet professional identity.

• Brand Keywords: Casual, Trendy, Comfortable, Affordable, Modern, Young, Polished, Elevated.

• Color Style Set: I ended up using Cinnabar as the primary color for buttons and the hero heading, adding a pop of vibrancy and setting a sense of energy without being overwhelming. Neutrals were used to balance and keep the focus on the products.

• Typography: Reckless font for headings to add a bold, distinctive look that captures attention, and Proxima Nova for body text for its clean, modern appearance and excellent readability.

• Photography Style: High-quality, studio images for a polished and elevated vibe (all photos are placeholders).

• Icons and Illustration Style: Simple, modern icons that complement the overall design aesthetic.

Iterations:

Throughout the design process, I went through multiple iterations to ensure the design was balanced and cohesive across all screens. This included:

• Playing with Icon Sizes: Adjusting to ensure clarity and harmony within the layout.

• Trying Different Heading Placements: Experimenting to find the most visually appealing and functional positioning.

• Adjusting Button Sizes and Colors: Ensuring buttons were prominent and inviting.

• Selecting and Adjusting Photography Images: Choosing images that conveyed the brand's polished and trendy vibe.

Best Practices for Design Handoff

Changes Made:

• Alignment: Improved alignment for a clean, professional look.

• Reusable Components: Created reusable components for consistency and efficiency in design updates.

• Grid System: Implemented a grid system for structured, balanced layouts.

• Padding: Added appropriate padding to enhance readability and create a more breathable design.

Insights and Learnings

The highlight of this project on a personal level was being able to use, test, and figure out how to use variants, variables, and properties in the component state. This made the iteration process delightful and efficient. Additionally, it was a great exercise in balancing visual appeal with user functionality. Thank you for reading!

Gen-AI

Leveraging powerful AI generation tools, I've updated all the images to more accurately reflect and enhance the brand's identity.

Press "L" if you love it and feel free to give me some feedback, Have a great day!

Have an Awesome Project?

Let's create something amazing together! 🚀

Contact Me @ 📩 kitsiu213@gmail.com

Check Out My LinkedIn: https://www.linkedin.com/in/kitsiu/

Disclaimer: This case study is a conceptual project created for illustrative purposes only.