Eiko Clothing

Responsive e-commerce web pages for a sustainable and eco-friendly clothing brand.

Role: UI designer

Challenge

Eiko Clothing is a new brand that aims to reach young and environmentally aware consumers and aspires to become a leading name in the ethical fashion sector. With a natural and earthy aesthetic, the brand prioritises the use of organic materials and minimalist design.

Goal

The brand's core message is centered around the concept of "conscious fashion for a better planet." My role in this project was to assist in effectively communicating brand values and creating a visually appealing and accessible interface design.

DISCOVER PHASE

•••

DISCOVER PHASE •••

Research

To initiate this project the first step was to do secondary research and create a moodboard. The moodboard was particularly useful at the start of this project because it helped me visualize the design direction and set the tone for the project.

  • The intended audience comprises fashion-conscious young professionals (Gen Z & young millennials) due to the following factors:

    Environmental Priority: Emphasis on choices benefiting the planet.

    More health aware: Prefer toxin-free, sustainable attire.

    Financial Capability: Affluent young professionals are more likely to have disposable income.

    Investment Mindset: Willing to spend more on eco-friendly fashion, which would have a higher price tag than fast fashion due to the materials used and the production methods employed.

  • • Utilising emotive language to evoke feelings that align with the brand's environmental values helps establish a meaningful connection with the consumer.

    • Consumers must grasp the brand's overall impact and real-world outcomes.

    • To convey this, I've integrated phrases like "zero waste," "earth-friendly fashion," and "slow fashion," showcasing the specific benefits of selecting a sustainable brand, which educates and boosts consumer confidence in purchasing choices.

  • • Nature and fabric evoke brand essence.

    • Incorporate natural patterns, textures, and repetition into design.

    • Utilise outlined icons for a mirrored effect of nature's lines.

    • Opt for clean, simple visuals aligned with clothing aesthetics.

    • Choose between flat-lay photography or models in eco-friendly environments.

  • Charter and Helvetica were chosen for this brand because they complement one another well. Both are system fonts, resulting in fewer HTTP requests and energy consumption during loading. This ethical approach makes them an excellent option.

    • Helvetica = clean, modern, simple, minimalist.

    • Charter = classic, timeless, durable, long-lasting.

IDEATE PHASE

•••

IDEATE PHASE •••

User Flow

I designed the user flow by establishing a seamless "happy path" for users to purchase clothing effortlessly. This involved understanding user interactions and actions. I then created intuitive alternative paths to effectively guide users toward their goal.

Wireframes

I started by sketching low-fidelity wireframes, quickly capturing ideas to assess feasibility. After refining, I developed one iterated wireframe, progressing to high-fidelity for detailed user needs visualization. Ensuring optimal responsiveness for young, diverse, multi-device users, I utilized a grid system and adopted a mobile-first approach, focusing on relevant content and scaling up for desktop.

Design System

Using the moodboard research as a foundation, I created a design system. I retained the original fonts and established a type scale for mobile and desktop, ensuring readability.

Most of the original colour palette was also retained. However, when selecting hues and shades, I noticed that the chosen accent colour lacked saturation and appeared dull. Although there were no accessibility issues, I wanted to choose a colour that conveyed an eco-friendly vibe but also reflected the target audience so I opted for a brighter accent hue.

DELIVER PHASE

•••

DELIVER PHASE •••

Solution

In the design process, I made several key decisions that contributed to the final outcome. The minimal and simple aesthetic reflected the nature of the brand and emphasised quality over quantity and the benefits of slow fashion. This approach also ensured that the design provided enough space for the user's eyes and didn't overwhelm them with information.

I did face some challenges along the way. One of these was maintaining the website's functionality and ease of navigation while incorporating a minimalist style. At times, I wanted to strip the design back even further, but this had the potential to increase cognitive load and make the pages difficult to navigate.

Accessibility.

I consistently prioritized the accessibility of my design throughout the entire project:

  • I used readable fonts, appropriate font sizes, and colour contrast to make text easily readable for all users, including those with visual impairments.

  • Ensured the website is responsive and works well across different devices, including mobile phones.

  • Highlighted focus state on interactive elements, such as buttons and links, to make it clear which element is currently active or selected, essential for screen readers.

  • Used form elements with clear labels, placeholders, and error messages to assist users in filling out forms accurately.

  • Made sure product descriptions are comprehensive and provided all necessary details for users with various needs.

  • Offer multiple images that showcase the product from different angles or show various features. This gives users a comprehensive understanding of the product.

Key Takeaways

The key takeaways from the project are:

Design systems are a crucial and efficient way to design products. This project really emphasised the importance of developing a design system. It is not only necessary to maintain consistency and coherence in the design but having a system in place also significantly speeds up the workflow compared to designing without one. 

Keeping the user in mind at all times is vital. Thinking of the users' needs through each step of the design process allowed me to create not just something that was aesthetically pleasing, but also user-friendly and accessible.

Future Considertions

If I was to work on this project again, I would

  • Consider other ways to enhance the brand’s message and values to reflect its commitment to ethical and sustainable fashion.

  • Incorporate more storytelling elements into the copy to elicit emotions.

  • Explore creative ways to visually convey the brand's commitment to eco-friendly fashion, such as through patterns and graphics.

  • Dedicate more time to conducting subject matter research to ensure that I include the appropriate elements in my design.