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. Designed by Jaclyn Lenee Anderson http://jaclynlenee.tumblr.com/ @jaclynlenee

1. Design by: Jaclyn Anderson
A SCHOOL UNIFORM
E-COMMERCE EXPERIENCE
Student Project | General Assembly UXDi Winter 2013

2. 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.

3. ALREADY A MEMBER?
LOGIN
We love your style!
BINGO SEARCHES THE WEB TO FIND YOUR STYLE IN YOUR SIZE
Sign up now!
VIEW PROTOTYPE
V
Tell us your fit
Tell us what color
& styles you like
We’ll search for items
you might like
HELLO BEAUTIFUL
HERE’S WHAT’S NEW FOR YOU

4. CASE STUDY

5. 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.

6. USER FLOWS & IDEATION
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

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

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

9. 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

10. 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

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