Material

Responsive Web Design
ROLE
Research
UX/UI Design
Information Architecture
Visual Design
Branding
User Testing
STATUS
Academic / Conceptual

Creating immersive, branded impressions across every device.

Material Clothing Co. is a conceptual clothing retailer producing stylish, high quality clothing at an accessible price point. The company is expanding into a digital storefront and conducting a rebrand.
Research

Goals

  • Understand what motivates users to choose one online store over another, especially concerning stores new to them.
    ‍‍
  • Understand what users expect from an online shopping experience, especially as it pertains to clothing.
    ‍
  • Understand the mid-range online clothing market and how to best differentiate Material Co. from its competition.

"It's really tough to be impressive, expectations are pretty high"

-User quote
Research

Interviews

I surveyed users between the ages of 22 and 36 of varying genders and price ranges about their habits, preferences, and general impressions about shopping for clothes online.

My questions focused on brand impressions, quality, product presentation, and interaction.

  • User interviews revealed that perceived brand image largely contributes to attraction and trust of new online stores.
    ‍
  • Location specific sizing and currency adds to a user's perception of quality.
    ‍
  • Users find many clothing sites to be cluttered, making it difficult to identify items of importance.
    ‍
  • Users trust a strong brand identity with descriptive imagery, transparent product quality, and consistent logistics.

User Habits

  • 2/3 of users do the majority of their shopping online.
  • This is generally because users prefer the convenience and wider selection available online.
  • All users prefer desktop to mobile shopping.

Insights

  • For users, convenience is the #1 reason for shopping online, but can easily be reversed by cluttered websites and misleading imagery.
  • "It takes a lot for an online retailer to be impressive."
  • Other e-commerce patterns and platforms (such as Amazon) influence expectations for shipping and returns.
Research

Competitor Analysis

  • Brand image contributes largely to trust and attraction of new online shops.
  • Customer reviews and photos are a major point in evaluating quality and fit.
  • Sizing based on country is very important.
  • Diverse imagery gains trust - IE - lots of different product shots, contexts, and sizes.
branding

Imagery

For any fashion brand, striking imagery is a critical step in establishing brand identity. My process began with identifying a photographic style to define the brand and establish a conversation with web design descisions.

Photography was guided to grayish, off-white backgrounds with diverse representation, dynamic model poses (without over-exaggeration) and clean, simple product shots.

Final Look
In the brand look exploration, two distinct identities revealed themselves - a clean and elevated minimal look vs a youthful trendy look.

Ultimately, the clean, minimal, and timeless look felt most appropriate, but working between different options helps triangulate a look.
Branding options and explorations.
Information Architecture

Testing

I tested users via Optimal Workshop for the ideal categorization of items and site indexing. I also researched existing navigation and architecture patterns relevant to the behavior and structuring of responsive e-commerce pages.

Information Architecture

Flows

The large majority of site traffic begins at a landing page funneled by social media or web search. A user flow based on our persona of Hillary and a simple task flow of buying socks test the ease, efficiency, and navigation logic.

DESIGN

Wireframes and Sketches

After preliminary sketches, I assembled mid-fi wireframes to see how the imagery and interactions might work together.

Iterations
As the project progressed, the iterations progressed in distinctly different directions. As with the brand design, I like to explore multiple options that test the limits of layouts and interactions in order to return to something more approachable with the addition of something I've learned along the way.
DESIGN

Final UI

As most users are directed to a site via search or socials, the landing page becomes an important first impression and brand touchpoint. It's equally important to deliver on the promise of the landing page by providing a seamless experience all the way through checkout that retains a consistent feel between devices.
‍
Features
  • Fully responsive site with cohesive experience that retains a branded feel between devices.
    ‍
  • Landing and product pages expressive true brand identity- modern, clean, and elegant.
    ‍
  • The landing page directs customers to Men's or Women's home stores, while the logo will always return users to landing page.
    ‍
  • The cart features a hover state itemized list which displays a photo of the item on rollover.
Consistency
Streamlined checkout is essential in creating consistency in the transition from browse to purchase.

Other projects

Product
Slang
Product Feature
Airbnb x Blue Apron
Product
Coda iOS

Innovative digital products and interactions. I believe good design has the ability to change the way we think about and interact with the world around us.

Web Responsive Booking flow redesign
Video Recruitment app
Coda iOS
Slang
Material