A brick-and-mortar’s digital transformation to responsive e-commerce.
Their gender-neutral ongoing core collection promotes all-inclusivity.

“The process of personal style is not driven by the pronoun we use to identify ourselves.” 

desktop prototype | iPhone prototype

00 Introduction

CLIENT — designlab
ROLE — UX | UI designer

TIME frame — 80 hours
budget — shoestring

focus — e-commerce
concentrate — ui

Background

LOGO is a successful retail business offline, with over 400 brick-and-mortar stores globally in 32 countries. As customers increasingly cite for online services, LOGO has decided to begin their digital transformation.

Personal Challenge

To narrow the scope and explore solutions for a more specific problem, I wanted to identify an underserved consumer group in the retail business. Besides the overarching goal to optimize online browsing and checkout, I’d like to acknowledge and pay respect to the customer through term-appropriate copy, and to distinguish and promote LOGO through socially aware branding.

Solution

Post-user-research, I realized that the non-binary, gender fluid retail market has remained mostly untouched, and is being slowly adopted by only gender neutral brands. Given the diverse context of metropolitan areas such as New York City, this was surprising to me. On the technical side, consumer behavior shows a shift from web browsing to mobile, so it’s important to design smooth mobile flows.

01 Research

SECONDAry research | competitive analysis
focus group interviews
observation
analyze findings | prepare proposal

Methodologies

1. Competitive Analysis: an analysis of competitors.

2. Focus Group Interviews: an interview guide to gain qualitative insight from various groups of individuals.

3. Observation: walk-throughs of user journeys on e-commerce platforms.
   
   

Competitive Analysis

Noting the similarities and differences between competitor approaches to the middle market helped me observe their common struggle to market and sell products online in compensating for decreased footsteps in stores. Across the board — Uniqlo, Zara, H&M, and ASOS — there is buildup of backend inventory and a clunky mobile experience. Uniqlo's non-traditional solution is to target men and offer smart fabrics. ASOS is the most matured online.

Focus Group Interviews

In one-on-one interviews, I was interested in the user's holistic shopping behavior and how that might influence their habits and perceptions of brands. To foster and retain customer loyalty, I wanted to be aware of post-purchase emotions and the possible repercussions as the product experience continues beyond the checkout point.

Key Findings

1. There is a business and social service opportunity to answer the retail needs and wants of the gender-fluid, non-binary community.

2. Competitors’ digital transformations are not optimized, some with delayed multichannel adoption. Website design and usability are often immature with excessive navigations and complex checkout flows.

3. The mobile experience is lacking although consumer behavior shows a shift from web browsing to mobile. Users prioritize ease of use above privacy and security concerns.
   

02 Define

provisional archetypes
persona
empathy map
storyboard
—
project goals
product development roadmap
product requirements

Product Development Roadmap & Requirements

To determine key features for LOGO, I walked through competitor websites and prioritized these features according to level of disposability — crucial features (1 or 2) versus nice-to-haves (3 or 4).

03 Information Architecture

card sort
—
Site map
task flow
user flowS

Card Sort

I wanted to see which clothing subcategories can be built into the unisex core collection as opposed to the default cis-gender labels, women and men. A hybrid open-closed card sorting exercise, with “men”, “women”, and “core” as given categories confirmed that certain articles of clothing and accessories, such as “leisurewear” and “loungewear”, are more gender-neutral compared to terms such as “skirts” (women) and “polo shirts” (men).

Site Map

In mapping the bare bones of the LOGO site below, I figured out a page hierarchy with no dead-ends for a non-disjointed digital experience.

User Flows

I explored two channel entries into the site — mobile and desk top — and error messages along user journeys.

04 Design

initial sketches
HI-FI wireframes
—
mood board
logo
brand style tile
—
ui kit
HI-FI responsive ui designs

Initial Sketches

The high-level requirement is to create a functional and aesthetically-pleasing home page that visually communicates LOGO’s brand and concept, clarifies all site features available, and encourages exploratory and purposeful browsing of product content. I referred back to the product development roadmap to check my UI requirements.

The three pages I wanted to build out were:

1. Home Landing Page

2. Product Grid — Graphics Collection

3. Detailed Product Page — Basic Tee

Besides sketching out a more traditional home page presentation, I also played with the idea of piecing together a human figure with product images to introduce the S19 Basics, Men, and Women collections. It’s important for me to prospect conceptual versions in developing UI with a balance between design and product content.

High-Fidelity Responsive Wireframes

With responsive design in mind, I created high-fidelity wireframes for desktop, tablet, and iPhone off the traditional version of my sketch mock-up. A cleaner, straight-forward layout is more readily adaptable across other interfaces. Below are some examples.

Mood Board

The images for LOGO are mostly from Join Chapter and CLO, featuring models with whom the LGBTQIA community can see themselves in. Check out the mood board at https://pin.it/cvwjyetybahch3.

High-Fidelity Responsive UI Designs

Designing high-fidelity UI screens for desktop and iPhone with prototyping in mind kept me thinking of flows and user journeys. I created two versions of the home page to gauge which visuals resonate with which users, in what ways, and why during user testing.

05 Implementation & Reiteration

HI-FI prototype
—
usability test
affinity map
analysis of findings
—
priority revisions

High-Fidelity Prototypes

With InVision, I created high-fidelity interactive prototypes for desktop and the LOGO website adapted to iPhone interface (non-app). Give the prototypes a whirl or check out the video run-throughs below.

desktop video run-through

iphone video run-through

Usability Testing

The idea was to cover decisions made in the UI design, branding, information architecture, and non-binary gender concept, but I also specifically wanted to test the “double tap to add a product to your wishlist” feature, as inspired by Instagram’s “double tap to like” feature.

Goals

My technical objective was to test the usability of LOGO’s website adapted for the iPhone interface with a focus on ease of navigation, unsurprising screen transitions, effectivity of CTA buttons, and overall stress level throughout browsing and checkout.

My user and business objective was to test whether LOGO, as an all-inclusive brand, will be equally embraced by cis-gender users and non-binary, gender-fluid users. To determine what aesthetic the LGBTQIA community better connects with, and which term — “basics” or “neutral” — more respectively communicates products intended for male and female physiques while leaving identity-labeling open, I created two prototype versions:

• Version 1 using the term “basics” to describe the unisex core collection, with a clean, minimalist aesthetic.

• Version 2 using the term “neutral” to describe the unisex core collection, with an edgy, streetwear aesthetic.

Analysis of Findings

Key Takeaways

1. Version 2 of the landing pages was preferable to version 1 in terms of vibe and aesthetic.

2. The price point estimation assumed from product images and overall interface design was mostly mid-level, affordable.

3. The term “neutral” was preferable to “basics” in terms of non-binary identity consideration.

4. The “double tap to add product your wishlist” feature elicited an 100% positive response rate and 100% relativity to Instagram’s “like” feature, with a need for pop-up or overlay instructions. However, the feature can be ageist as it resonates more with younger generations.
   

06 Conclusion

Reflection
Next steps

Reflection

With my background in menswear design, this was a cathartic case to take on. My intimate insight into the design process and understanding of retail business stakes were advantages in user research. After the first batch of user testing, I recognized the value of having a product viewed by many eyes to gain perspectives and circulate ideas. People from other industries often have a great eye for very particular problems, and creative proposals for each. At the end, it’s my pleasure to filter these ideas to create the best solution.

Next Steps

• Build out more features and continue to refine design based on feedback.

• Android interface roll-out and user testing.

• Concentrated testing on the LGBTQIA user.