Design by: Jaclyn AndersonStudent Project | General Assembly UXDi Winter 2013A SCHOOL UNIFORM

E-COMMERCE EXPERIENCE

ABOUT THE PRODUCT: TrueSpirit is an e-commerce website for parents that makes it fast and easy to purchase school-approved uniforms for their kids. TrueSpirit customizes the user’s browsing experience by only showing products that their child is allowed to wear at their school, taking the guesswork out of uniform shopping. If the user is in a hurry they can quickly browse through the “Must-Have” list, and complete their shopping experience with just a few clicks. !!

ABOUT THE PROJECT:I was tasked with designing a web experience for TrueSpirit, a school uniform company. I was given preliminary user research data and personas to before getting started. I started my process by sketching out high-level user flows and later creating site maps and screen flows. I conducted user testing and developed multiple iterations of the product. In the end I produced a clickable prototype, a specification doc and a site map to demonstrate how I solved the client’s problem.

VIEW PROTOTYPE

hËîºö¤

We love your style!BINGO SEARCHES THE WEB TO FIND YOUR STYLE IN YOUR SIZE

ALREADY A MEMBER? LOGIN

+RZ�LW�ZèNV���

Sign up now!

V

Tell us your fit Tell us what color & styles you like

We’ll search for itemsyou might like

HELLO BEAUTIFUL HERE’S WHAT’S NEW FOR YOU

CASE STUDY

DESIGN RESEARCH

Method: I started out with 2 personas and some user research that had already been prepared before the start of the project. To supplement that information I spoke with 2 parents to hear more about their experiences buying school uniforms online. I surveyed the competition, noting my experiences on those sites.

Findings: Above all, I learned that parents want a quick and easy experience when purchasing school uniforms online. Additionally, parents want to make sure that they are buying items that are approved by their kids’ schools so they don’t have to worry about returning things. Opportunities Identified: - Create quick ways to browse staple items - Filter out products that are not on the school’s approved list.

Method: I ideated and sketched out possible user scenarios. - Shopping while short on time- Shopping without knowing what to look for

!And came up with the following user journeys: !FIRST TIME SHOPPER !REPEAT SHOPPER !SHOPPING FOR MULTIPLE KIDS !SHOPPING IN A HURRY !Opportunities Identified: - Finding the school profile should be painless - Checkout should be fast

USER FLOWS & IDEATION

DESIGN ITERATION 1

Method: I tested my wireframes with multiple users in a participatory design session and noted any areas of confusion or lack of clarity. !Findings: While the navigation was clear, the product detail page was unclear. Users were unsure of how to find a school. My checkout flow was missing some standard features. !Opportunities Identified: - Improve the visually hierarchy of product & category pages - Re-work the checkout experience - Simplify the “Find Your School” flow !!

DESIGN ITERATION 2

Method: I tested my wireframes with multiple users in a participatory design session and noted any areas of confusion or lack of clarity. !Findings: The shopping bag icon was not clear enough and caused some confusion. Some wording was unclear. Navigation back and forth between product and category pages was still unclear to some. !Opportunities Identified: - Add breadcrumbs to product pages - Refine copy !

PROTOTYPE

Method: I created a prototype using Omnigraffle and Invision that captured the screen-based version of the experience. !FIRST TIME SHOPPER - Finding school & viewing custom landing page !REPEAT SHOPPER - Saving information and creating an account in the checkout flow !SHOPPING FOR MULTIPLE KIDS - Switching between schools !SHOPPING IN A HURRY - Quick navigation to product detail pages - Optimized checkout process

hËîºö¤TrueSpirit is a school-approved uniform website for parents that provides a quick & easy shopping experience for busy parents. !- Simple checkout - Quick-view browsing - Customized experience

Thank you! !Jaclyn Anderson jaclynlenee@gmail.com @jaclynlen