Here is the slide show from project 2: True Spirit web design

1. a design by Alice Barton
Student Project: General Assembly UXDI 2013

2. About the Product
True 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 Project
True 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.

3. Given Personas
Note: These personas were not made by me
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 school
2. Easily find clothes that fit the student
3. Users can easily select the items they want
and checkout in just a few steps

4. Key Features
The Landing 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?”
The Collections Page
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!”

5. http://invis.io/AUKSTG8N

6. Case Study

7. Scenarios
How the user gets through their given tasks
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
!
!

8. 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. !
!
!

9. Design Iteration 2
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. !
LE
MP
SA
!
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. !
!
!

10. User Testing
METHOD:!
!
I tested the prototype with a variety
of users and made adjustments to
the interface based on my findings. !
!
CHANGES
•
•
•
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

11. Thank you for your time. !
You are all wonderful people.
Remember:
“Design isn’t just what it looks like. Design is how it works.”
–Steve Jobs