True Spirit
E-commerce Website Design
Objective:
Design an e-commerce website that reflects the uniqueness of TrueSpirit's school uniform clothing and accessory brand.
Challenge:
TrueSpirit offers fresh, modern looks that allow for youth self expression within school guidelines. Balancing student's desires to personalize their look with parent's shopping requirements and school rules was the primary design challenge.
Information Architecture
Compared and Contrasted Product Offerings to Determine Navigation Schemas
Identified commonalities and differences between product options for the three main categories: Boys, Girls, and Unisex, to inform design decisions about the global and secondary navigation. Initially, a faceted secondary navigation seemed ideal to accommodate the numerous filters and options, but sketching illustrated the benefits of a simpler global navigation with options embedded in the product detail pages.
Preliminary Sitemap
Defining the Site Taxonomy and Structure
Skeuomorphic Tab Design for Playful Youth Branding
Product Option Selection Embedded in Detail Pages
Used Sitemap Creation to Establish the Global Navigation Design
Finalizing the sitemap helped translate similarities between the product categories for Boys and Girls into a simplified Global Navigation with drop down menus. This decision arose from an assessment of the volume and complexity of options.
Created User Flows to Understand Various User Behaviors and Needs
Evaluating differing parental shopping approaches and needs informed design directions around decision points and multiple item purchases. Creating user flows based on key behaviors from personas helped establish a foundation for envisioning these navigation schemas.
Usability Testing
Reassessed the Global Navigation and Customizing Options
User testing with the clickable prototype validated design decisions about a simplified global navigation while helping to further refine the utility navigation. Hearing users articulate areas where their experience and expectations were aligned, or conversely mismatched, shed light on the successes and shortcomings of the UI.
Identified Key Features
Users interacting with the prototype confirmed that the clarity and scale of the sizing chart made finding and selecting the appropriate garment size easy. Test users also agreed that the custom embroidery feature added a valuable personalizing component that supports the core values of the TrueSpirit brand through encouraging individualized looks.
Custom Embroidery
Sizing Chart
The Final Design
Developing a strong connection with users both through the analysis of personas and effective communication during usability testing contributed to the success of this e-commerce site design. Gaining a deep understanding of the site's content proved essential to maintaining TrueSpirit's values during each design decision. The browsing, product selection, embroidery feature, and check out flows for both registered and non-registered users demonstrated the value of working at the intersection of brand strategy, information architecture, and user research.
