a design by Alice BartonStudent Project: General Assembly UXDI 2013

About the ProductTrue spirit is a school uniform shopping site for parents who want to quickly find a school uniform that passes a school’s dress code and is in their child’s correct size. True Spirit allows parents to do all this in a few quick steps without the hassle of spending hours searching through hundreds of different clothing. It quickly shows you the most fashionable items or collections that fit both the requirements of the school and the student.

About the ProjectTrue spirit is a project developed in General Assembly’s UXDI class to challenge students to create a e-commerce website. We were given two personas of parents shopping for school uniforms and given the task to create a website to fulfill their needs. My goals were to create an interface that makes finding the perfect clothes as easy and fast as possible.

Given Personas

Sarah: Gets an email from her administrator and wants to just get the best outfit for her son that are within the guidelines of the school’s dress code.

John: Goes to the website already knowing that his school is signed up and wants to buy the best outfit for his daughter for the best price.!!Opportunities Identified: Create an easy way for users to find clothes that are approved by a school. !The website should base it’s schema on the following principals:1. Easily find clothes approved by the school2. Easily find clothes that fit the student3. Users can easily select the items they want

and checkout in just a few steps

Note: These personas were not made by me

Key Features

The Landing Page

The Collections Page

Users only have the option to sign up or sign in !Rationale: It gives users a personalized experience and eliminates the confusion of “Are the clothes I’m looking at within my school’s dress code? Are they in my child’s size?”

Users can look at a picture of students and select any individual items they have on !Rationale: This is one thing that frustrates me about other clothing sites. Ex. “I love that hat that she’s wearing! I want to get it!”

http://invis.io/AUKSTG8N

Case Study

Scenarios

Method: !I ideated and sketched out possible user scenarios. - Receiving an email from an administrator- Going to the site’s homepage and getting good clothes for a good price.

And came up with the flowing user journeys: !!AWARENESS From the first page, users should be aware that the site makes it very easy for users to find the right uniform for their child.!!SET UP AND FIRST RUN

Sarah will receive an email from her school’s administrator directing her to the site. John goes to the site on his own. In both instances, they will be guided to the landing page, where they will be directed to set up an account and enter their child’s size, etc. The site will then show them the best clothes for their child. !!CORE PRODUCT EXPERIENCE!1. Easy access!2. Fast way to find perfect clothes!3. Elegant display of clothing that gives users the impression that quality

is ensured

!!

How the user gets through their given tasks

Design Iteration 1

Method: !I created a site map by categorizing the company’s products into 3 main categories: girls, boys, and “swag”. I then created a basic wireframe in omnigraffle to show how users might navigate through the site and view their product information. !!Findings: After reviewing several other student’s websites (all of which had at least 1 brilliant iteration), I compiled my favorite ideas together and adjusted my site as appropriate.!!Opportunities Identified: !I decided that a unique way to shop would be to view clothes as collections, where users can click on individual pieces in a collection and buy them separately. Alternatively, users can also search by categories such as tops, bottoms, and accessories.!!Also, I found that a good alternative user experience would be to require them to make an account before entering the site. This will ensure that users are getting a personalized experience every time they enter the site. !!!

Design Iteration 2

SAMPLE

Method: !I carefully analyzed the works of my fellow colleagues as well as my instructor and adjusted my site plan accordingly. I was most inspired by Shamezo’s ideas of having collections, and the instructor’s fake website “Bingo” as an example of creating a landing page with just one option: to sign up.

Findings: People liked the idea of shopping in collections, and landing pages with a signup option can be a great way to personalize a website. !!Opportunities Identified: !I used these ideas to create a site where users have to sign up to view clothing. They must enter a child’s fit and school, as well as make a simple username before viewing clothing. The next page will be the collections page, where popular styles, as well as promotional items can be advertised. The difference here is that users can click on clothes within these collections and go straight to buying them. !!!

User Testing

METHOD:!!I tested the prototype with a variety of users and made adjustments to the interface based on my findings. !!CHANGES

<photo.JPG>!

• I made sure that users could still enter the site and buy clothes without finding their school listed!

• I put school results on the same page of the wizard as the entry to make it clear when they have found the right school.!

• I changed the viewing for individual products to show thumbnails instead of buttons to make the “add to bag” button stand out more

–Steve Jobs“Design isn’t just what it looks like. Design is how it works.”

Thank you for your time. !You are all wonderful people.

Remember: