Post on 29-Nov-2014
description
UXDI: STUDENT PROJECT #2ALLISON MARIE COOPER GENERAL ASSEMBLY STUDENT, WINTER 2013
ABOUT THE PROJECTtrueSpirit is an online school uniform shopping site for students’ families. This wireframe features a structure specialized for viewing specific inventories and saving student profiles, the ability to save favourites and purchase history, and get help easily. Unlike competitors, it has a backend for administrators to post personalized messages to their communities.
Given user research, concept models, we were tasked with creating a full site wireframe for trueSpirit, a school uniform e-commerce company.
We used competitive analysis research and the given personas to construct an ideal user flow narrative for a parent purchasing a uniform for their child.
*courtesy of the UXDi instructional team; not my work
Meet Sarah:
“I just want to make sure I’m buying the
right things.” !
!
• Provide clear way to find son’s required clothing.
• Educate about care, comfort and fit. • Provide a clear way to make returns.
*courtesy of the UXDi instructional team; not my work
THE TRUESPIRIT BRANDFRESH, NEW, MODERN, UPDATED !
LIGHTHEARTED, OPEN !
THERE WHEN YOU NEED US !
UNLIKE TRADITIONAL !
RECOMMENDS ACCESSORIES !
APPEALING, FRIENDLY, CURATED !
NOT IN YOUR WAY, SERVICE, QUALITY !
COMMUNITY, SCHOLARSHIP PROGRAM
*courtesy of the UXDi instructional team; not my work
IT ALL STARTS WITH AN EMAIL…
PROTOTYPE DEMO
FEATURES INCLUDE:
• subtle omnipresent help button
• global navigation to make it clear when you’re viewing the school-approved inventory vs the global true spirit inventory
• supportive brand language
• minimalist as-simple-as-possible checkout and signup flows to reduce barrier to entry
?
METHOD: RESEARCH & COMPETITIVE ANALYSIS
• inspiration drawn from other uniform/family clothing/uniform purchasing sites including Land’s End, Target; found similar patterns
METHOD: HYPOTHESIS/SITEMAPPING
• discussions re primary categories: fun? school spirit? boys/girls?
• “About us” page as separate site?
METHOD: DESIGN HYPOTHESIS 1
• Feedback from classmates: “too Amazon”
• is the backend required for customer reviews really worth it?
• removed this feature to be replaced by email feedback forms post-purchase
METHOD: DESIGN HYPOTHESIS 2
• User testing revealed this iteration as still too heavy— why extra side nav bar when it’s all on the top?
• big design problem: when is the user viewing the full inventory vs just the school-specific items?
METHOD: DESIGN HYPOTHESIS 3
• Borrowed elements from many different e-commerce sites
• Decision to focus on the most important user case: viewing inventory based on school-specific approved lists
• Feedback for final iteration led to further simplification
FUTURE RECOMMENDATIONS
• Tablet version! — use touch functionalities creatively for a more tactical and browsing-supporting environment
• AB testing/further research re different options for top navigation clarity
THANK YOU! • External sources: • Home page image: http://www.fashion-today.co.uk/benefits-of-
school-uniform/school_kids/ • Project briefs & personas: General Assemb.ly UXDi course, Dec.
2013 • Home page script font: Wisdom script,
Allison Cooper @allisonmcooper