Student project for website design for TrueSpirit.com, school uniform company.

1. Design by: Roxanne Mustafa
Student Project #2: General Assembly UXDI Winter 2013

2. About the Product:
True Spirit is a school uniform company that offers updated uniform fashions
including pants for girls and zip-up hoodies. True Spirit provides a checklist of
“must have” items from the school’s administrator for each school year and
recommends accessories allowed by the school dress code. Unlike traditional
suppliers, True Spirit encourages visitors to express their tastes, with some
limits. The Brand was described as light, modern, lighthearted, open, appealing,
friendly, curated, available but not in the way.
About the Project:
We were asked to make a website that reflects True Spirits goals. The website
needs to reflect the company’s easy returns and quality products that are true to
size. True Spirit also wants to reflect a fostering of community by supporting
education through scholarship programs. In addition, we were given 3 user
personas and were asked to build the website based on these three personas.
The website needs to reflect the brand goals of service, quality and community.

3. !
CASE STUDY

4. RESEARCH METHODS
!
• ompetitive Analysis
C
!
• ard Sorting
C
!
• ersonas
P
!
• cenarios
S
!
ITERATIVE
• ser Flows
U
!
• ite Maps
S
!
• ireframes
W
!

5. Competitive Analysis!
Findings:!
Some sites had clothes more prominent
while others featured children more.!
Clothes-Centric Cites tended to be
clean, bold, colorful yet simple design.!
Children-centric sites were minimalist, 2
color scheme, fun design, a lot of white
space, school searches were prominent.
Assistance was the forefront for all.!
Complimentors: People were Prominent,
fun poses, clear, white and black,
minimalist design, white Backdrop!
Opportunities Identified:!
To blend the fun children centric sites with
the simplicity of the clothes prominent sites.
Make the website clean, simple and
minimalist, simplicity and ease of use in all
decisions. This can be done with:!
• irect Product Links!
D
• lear Fun Design!
C
• hildren at Forefront!
C
• arge simple Menus!
L
• ustomer Service!
C

6. Card Sorting
What is the Global Navigation?!

7. Personas!

8. Scenarios!
Method: !
Sketched out a storyboard for
Sara’s user flow, the main user
persona for my prototype.
Findings:!
Users should have access to
checklist. User should have ability
to store a profile and have option
to add another child to profile.!
Opportunities Identified:!
User must be taken through the
login process with ease in order to
set up child profiles and identify
items for each school’s code.!
When logged in, user must also be
informed of checklist items and
notified when non-school code
“must-have” items are purchased. !

9. Design Iteration 1:
Site Map
User Flow
High Level Mock Ups!
Method: !
Created site maps, high level user flow, then
mockups of wireframes to outline different user
paths.!
Findings:
John’s Flow was School Code Centric, Sarah’s
flow was product centric!
Opportunities Identified: !
The website must allow for browsing with school
access codes and without. The site must allow
for customization for the high tech user and
simplicity for the low-tech user. !

10. Design Iteration 1:
(continued)
Site Map

11. Design Iteration 2:
High Fidelity
Wireframes!
Method: !
Created Wireframes for main pages of user flows.!
Findings:
Both users ended up browsing items school specific and non-specific
items, ie, both users need to be able to access the school landing page
and the general product browser page.!
Opportunities Identified: !
Create the home page so that a user can access school items and general
items from the beginning. Make sure the items have equal weight. Let the
user decide which type of customer they want to be.!
Do not forget to give the school administrators access from the home
page.!

12. Prototype: http://invis.io/7PLFGTJA
Method: !
The prototype was created in Invision software.
Main user flows including checkout were traced. I
conducted several usability tests.!
AWARENESS
Needed to improve upon flow and ease of use.
Some lay out issues to make choices more
functional.!
CORE PRODUCT EXPERIENCE!
User task of picking out a shirt within school code
without setting up an account yielded quick results
with functional buttons. Comparison to school
checklist was convenient and did not interfere with
the shopping experience. Logging into account at
the end as a guest was not distracting and allow
user to focus on path to purchase.!

13. True Spirit Invison Prototype

14. THANK YOU
!
ROXANNE MUSTAFA
mustrock@me.com