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