a design by Alice Barton
Student Project: General Assembly UXDI 2013
About the Product
True spirit is a school uniform shopping site for parents who want to quickly ﬁnd
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 ﬁt 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
fulﬁll their needs. My goals were to create an interface that makes ﬁnding the
perfect clothes as easy and fast as possible.
Note: These personas were not made by me
Gets an email from her administrator and wants
to just get the best outﬁt for her son that are
within the guidelines of the school’s dress code.
Goes to the website already knowing that his
school is signed up and wants to buy the best
outﬁt for his daughter for the best price.
Create an easy way for users to ﬁnd clothes that
are approved by a school.
The website should base it’s schema on the
1. Easily ﬁnd clothes approved by the school
2. Easily ﬁnd clothes that ﬁt the student
3. Users can easily select the items they want
and checkout in just a few steps
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
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!”
How the user gets through their given tasks
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 ﬂowing user journeys: !
From the ﬁrst page, users should be aware that the site makes it very
easy for users to ﬁnd 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 ﬁnd perfect clothes!
3. Elegant display of clothing that gives users the impression that quality
Design Iteration 1
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
omnigrafﬂe to show how users might navigate through the site and view
their product information. !
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 Identiﬁed: !
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
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
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 Identiﬁed: !
I used these ideas to create a site where users have to sign up to view
clothing. They must enter a child’s ﬁt 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. !
I tested the prototype with a variety
of users and made adjustments to
the interface based on my ﬁndings. !
I made sure that users could still enter the
site and buy clothes without ﬁnding their
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
Thank you for your time. !
You are all wonderful people.
“Design isn’t just what it looks like. Design is how it works.”