ModCloth.com IA & Redesign
Created for HF740: Information Architecture
This project was completed for HFID740: Information Architecture. The assignment was to improve the navigational structure and page design for key portions of the site to facilitate a simpler, more intuitive user journey. The final deliverable included key scenarios, user journeys, revised sitemaps, and wireframes for two pages. For my project, I selected the women’s clothing retail site ModCloth.com.
Navigation Challenges
The primary challenge with the current navigation was the high volume of pages contained within primary, secondary, and tertiary levels of the dropdown menus. Additionally, much of the terminology used was vague or misleading.
Key Scenario 1
Woman shopping for clothing online
“I just received my paycheck and have a little extra money to spend. I want to browse one of my frequented clothing sites to find something to purchase, even though I don’t necessarily need it.”
Key Scenario 2
Woman shopping for an occasion
“I have an upcoming winter wedding, and I don’t have anything suitable to wear. I need to find something that fits the weather and the occasion, fast.”
High Level Issues
Key Scenario 1
- User cannot see all available options simultaneously
- Filters do not adequately address budgeting needs
- The site erroneously displays items that are not yet available
- Active and inactive states are not synced, creating confusion
Key Scenario 2
- The “wedding” option mixes attendee, bridal party, bridal, and décor options together
- No option to sort by seasonal appropriateness
- Categories for wedding guests are limited and may be irrelevant
Global
- The navigation is filled with vague and unnecessary categories
- On mobile, the navigation scroll goes well below the fold
- Indicators on filtering options are misleading
Wireframes
Wireframes were created for the Navigation, Product Landing, and Product Detail pages to accommodate the revised sitemap and to directly address the global and user-based issues identified in the key scenarios. The wireframes were designed mobile-first, and then modified to fit a larger desktop screen.
Revised Navigation
Current
- An overwhelming number of primary and tertiary-level links
- Lack of prioritization or hierarchy
- Unclear or misleading category names
Revised
- Significantly decreased primary and secondary navigation items.
- Removal of a tertiary level from the main navigation
- Restructured hierarchy based on user priorities and journeys
- Clear, basic category names
Revised Product Landing Page
Current
- Limited search and filter flexibility
- Excessive copy and information
- No information about quantity
- Availability confusion
Revised
- Flexible filtering options
- Reduced copy and iconographic clutter
- Added item quantity information
- Removed misleading information
Revised Product Detail Page
Current
- Order of elements is driven by marketing
- Lack of clear headings
- Unclear product availability
- Cluttered content
Revised
- Reprioritized layout of elements
- Headings added to each element
- Clear product availability
- Scaled-back content
Conclusion
- The navigation was likely the biggest challenge for both target users; it has been cleaned up substantially to decrease clutter, redundancy, and confusion, and to create clear paths for users to follow.
- In-navigation and in-page nomenclature has been clarified to remove confusing or “cutesy” terminology that may have obscure meaning for users.
- More flexible filtering and sorting options, including the ability to select multiple filter categories, gives users the option to be as broad or as narrow as they like while searching for clothing.
- As a next step, I would conduct a usability test of the mobile and desktop wireframes, targeting female shoppers between the ages of 18-35.
