1. Designed by: Michael Iseri
Student Project. GA. UXDi. Winter 2013.

2. About the product:!
The TrueSpirit website is a modernized site designed to help busy parents who are comfortable with
technology find and purchase their child’s required school clothing more quickly and easily. It is
useful because it utilizes a shopping list to ensure they know what items they still need to purchase
and also keeps track of their child’s sizing information so they don’t need to constantly fill in certain
fields.
About the project:!
TrueSpirit is a company who believes that children’s uniforms should be created with a bigger focus
on modern fashion. They wish to cater to a younger generation of parents who are very computer
literate.
The constraint of this project was to create a website that could fulfill the needs of multiple personas
while also keeping the shopping experience fast and simple.

3. Features:
Global header and
navigation stay in
static positions at
the top of the page

4. Prototype
!
!

5. Research:
Method:
Create user flow charts and conduct
competitive analysis of other online
retailer sites.
!
Findings:
People can reach school landing pages
in many different ways. Navigating
through products can be unnecessarily
difficult. Sizing can often be confusing.
!
Opportunities:
Make a homepage that can be utilized by
multiple audiences. Make navigation
clear and easy. Help shoppers find the
right items.

6. User Interviews:
Method:
Look at other groups’ site maps to identify what they felt would be
a good organization method. Read through personas to identify
needs.
!
Findings:
Items may sometimes be hard to categorize, which may make
them difficult for a buyer to find them. Over-categorizing can lead
to unneeded “fluff.” Checkout process can often be much longer
than expected. Easily identifiable return process creates
confidence in buying.
!
Opportunities:
Creating broader categories may simplify the user’s experience.
Shorten checkout as much as possible to not discourage buyer.
Make returns simple and easy so people will return for more
purchases.

7. Site maps cont:
Method: !
Created site maps to decide how the
website should be organized. Created a
wireframe from this to get a more physical
experience of how this organization would
work.!
!
Findings:
Many instances, including search,
navigation, and finding items required too
much input. Some items were too hard to
navigate to without using search.!
!
!
Opportunities Identified: !
Shortening “distance” traveled to bring
browsing customers to items faster. !
!

8. Checkout Site Map:

9. Personas:
EXPERIENCED
John is a single dad of a teenage
daughter, starting the 6th grade.
John
He is comfortable with online shopping & likes it
because it is easy. Now that his daughter is getting
older, she is having more input into outfit choices.
John like to keep things organized, and to live within his
means and budget. He has two main credit cards and a
debit card, which he uses the vast majority of the time. He
prefers to bank with his community credit union. He is very
practical in his approach to finances and purchasing.
Kim
MONEY MATTERS
Sarah and her
husband have two
main credit cards they
use to get airline miles
and separate
checking accounts as
they divvy up bills.
They have some
school loans to finish
paying but have been
fortunate to not have
any credit card debt.
CLOTHES PURCHASING BEHAVIOR
Sarah shops online for convenience when possible, but
loves a good brick and mortar experience. She shops
for Gabe (3 1/2 years old) once every 4 months, buying
a bunch of basics that he’ll likely outgrow within 6
months. Within reason, she likes to be in-the-know
about kids fashion and seen as a hip mom.
trueSpirit
Sarah and her husband work hard to make a great life for their family.
Their oldest son, Gabe, is about to attend St. Luke’s, the best Pre-K-12
school in the city, which also happens to be a Catholic School. Sarah went to
public school and is a little overwhelmed.
TECH-LIFE
Sarah is a digital project
manager and is in
meetings all day. She
doesn’t have much time to
browse for online products
except for her lunchtime.
She likes to save items
while browsing and
purchase them at the end
of the day.
She uses a MacBook Pro
for home and work, an
iPhone, and an iPad for
late night games and
news reading.
“I want to have enough information so that
I know I’m buying the right thing.”
“Clothing should be reasonably priced.”
SPENDY
TECH SAVVY
He has a PC desktop
at home which he
shares with his
daughter. He is
considering buying an
iPad for his daughter
as he sees it as a
valuable educational
tool.
Make the process efficient.
Leverage existing relationships with retailers.
Ease of return/exchange process is really
important.
WEB
MOBILE
TABLET
CLOTHES PURCHASING BEHAVIOR
John tries to do as much of his clothes shopping online in an
effort to avoid large department stores, where he doesn’t feel at
home. He tires to stay with certain brands (Gap, and Hollister)
because he is familiar with their fit and sizing, and this is
practical.
Sarah is new to private schools
CONCERNS
FRUGAL
He works with a large, stable company, as an accountant, and uses a
Windows laptop and phone at work. Although his days are pretty busy,
he works independently quite a bit, and can usually find time to take
care of small tasks throughout the day.
NEW TO UNIFORMS
“I like the efficiency of online shopping.”
TECH AVERSE
TECH-LIFE
John refreshes his
system every few
years, usually when his
old technology is no
longer efficient. As a
single dad, he has to
keep to a budget.
MONEY MATTERS
DRIVERS
SAVVY SPENDER
PRAGMATIC PURCHASER
ADMINISTRATOR
DRIVERS
“I want our family to fit in.”
Jess
CONCERNS
“I hope I’m ordering the right things.”
TECH AVERSE
FRUGAL
She has been working at the school for 3 years & has gotten
to know the kids & parents. This year she has been tasked
with finding a range of vendors who are able to meed the
parents’ demands as well as provide uniforms which are
reflective of the school vision, goals, and spirit.
TECH-LIFE
She uses mostly Apple products,
although she recently switched to
a Samsung phone, which she
loves.
SPENDY
TECH SAVVY
Jess is an administrator at a private school.
MONEY MATTERS
Personally, Jess is a bargain shopper. She only buys what
she can afford, and having 2 kids in college, she
understand how expensive it is to have kids in school. She
pays for many things with cash, and has only one credit
card which she uses sparingly, and pays it off immediately.
At work, she has an iMac and at
home she has an older Mac
Book. She loves to read using
her iPad in the evenings and
mornings, catching up of news
and some email before heading
into work.
Provide clear way to find son’s required clothing.
Educate about care, comfort and fit.
“I want to make sure the parents’ needs
are met,alongside admin goals.”
CONCERNS
“Giving parent choice in their purchases,
while meeting quality and price goals.”
“Making it easy for shoppers to find items.”
TECH AVERSE
FRUGAL
SPENDY
TECH SAVVY
Be clear about the offering, providing great images
and multiple views, as well as detailed description
of items.
Wide range of price and quality of items, to meet
various budgets and tastes.
Provide a clear way to make returns.
Brick and mortar location is a bonus.
WEB
MOBILE
TABLET
SAVVY SPENDER
PRAGMATIC PURCHASER
CLOTHES PURCHASING BEHAVIOR
Although she is very comfortable with technology, and does browses clothes online, she is a
very tactile person and prefers to purchase clothing in brick and mortar stores. She loves
the shopping sites which can check in-store inventory for items. Target is one of her favorite
stores for the house, although she often shops for socks and pajamas there as well. Banana
Republic is her favorite when shopping for herself, because it is a good combination of
quality and reasonable pricing, especially because during their semi-annual sales.
Knowing that it is convenient for many parents to shop online, she has been tasked with
finding online uniform vendors. She has a set of price requirements which the school uniform
vendors and online retailers must meet, as well as quality and look for the uniforms.
trueSpirit
DRIVERS
trueSpirit
WEB
MOBILE
TABLET
SAVVY SPENDER
PRAGMATIC PURCHASER

10. EXPERIENCED
John
MONEY MATTERS
John like to keep things organized, and to live within his
means and budget. He has two main credit cards and a
debit card, which he uses the vast majority of the time. He
prefers to bank with his community credit union. He is very
practical in his approach to finances and purchasing.
John is a single dad of a teenage
daughter, starting the 6th grade.
He is comfortable with online shopping & likes it
because it is easy. Now that his daughter is getting
older, she is having more input into outfit choices.
TECH-LIFE
John refreshes his
system every few
years, usually when his
old technology is no
longer efficient. As a
single dad, he has to
keep to a budget.
He has a PC desktop
at home which he
shares with his
daughter. He is
considering buying an
iPad for his daughter
as he sees it as a
valuable educational
tool.
He works with a large, stable company, as an accountant, and uses a
Windows laptop and phone at work. Although his days are pretty busy,
he works independently quite a bit, and can usually find time to take
care of small tasks throughout the day.
CLOTHES PURCHASING BEHAVIOR
John tries to do as much of his clothes shopping online in an
effort to avoid large department stores, where he doesn’t feel at
home. He tires to stay with certain brands (Gap, and Hollister)
because he is familiar with their fit and sizing, and this is
practical.
trueSpirit
DRIVERS
“I like the efficiency of online shopping.”
CONCERNS
“I want to have enough information so that
I know I’m buying the right thing.”
“Clothing should be reasonably priced.”
TECH AVERSE
FRUGAL
SPENDY
TECH SAVVY
Make the process efficient.
Leverage existing relationships with retailers.
Ease of return/exchange process is really
important.
WEB
MOBILE
TABLET
SAVVY SPENDER
PRAGMATIC PURCHASER

11. Scenarios:
Method:
Ideated and sketched out possible user flows.
Including arriving from an administrator’s email,
navigating to the school’s landing page
independently, and browsing for items without
guidance. This helped influence the decisions for:
!
Product awareness
!
First run scenarios
!
Site navigation
!
Opportunities:
Make the user aware of what they need to get. Try
to guide the user to their “happy path” the first
time they use the product. Make it clear on where
the user actually is within the page.
!

12. Design Iteration:!
Method:
Created wireframes to see how well users could
physically navigate from one place to another.
Findings:
A little unclear on which category user was actually in.
Difficult to couple navigation with tabs. Filters seemed
out of place. Knowing how shipping was calculated was
useful.
Opportunities:
Be more clear on what tab goes to the navigation. Let
users know how shipping was calculated, or at least
give them options.

13. Design Iteration Hypothesis:!
Method:
Re-test new wireframes. Testing method of having multiple
approaches to reaching and interacting items.
Findings:
Linking the tabs to the navigation visually helps clarify the
navigation. Quick-view bags made browsing easier. Checklists
made finding items much more clear and concise. Ability to
edit bag in multiple stages was helpful.
Opportunities:
Make editing items through pop-up bag allowed faster
changes without having to leave current product page. Make
finding items through checklist to allow faster navigation. Allow
checkout page to be reached from multiple methods for
smoother purchasing.

14. Prototype:!
Method:
Create a prototype through invision prototyping tool.
Experiences:
First-run through
Finding your school
Finding required items
Adding items to bag
Purchasing items bag

15. Other Features:
Optional ability to create a profile quickly and
easily during the checkout process. Profile
can later be edited by clicking in the top right
corner.

16. Other Features:
Profile creation, editing, and
usage allows for parents to
create “bios” for their children.
This gives them the ability to
store their child’s school,
shopping list, previously
purchased items, and sizing info
to quickly and easily purchase
new items through an “add all”
functionality when the time
comes. The profile page alerts
parents when they haven’t
updated the profile after a
certain amount of time to make
sure their child’s sizing info is upto-date.

17. Other Features:
Simple and clear pop-up shopping cart
which can be used to edit items in cart or
proceed to checkout screen

18. Other Features:
Quickview allows users to add items to their
cart from the browsing screen. This, in
addition to the pop-up bag allow users to
quickly move from browsing large category
pages to the checkout process.

19. Thank you.
Michael Iseri
mr.iseri@gmail.com