Design by: Roxanne Mustafa
Student Project #2: General Assembly UXDI Winter 2013
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.
• ompetitive Analysis
• ard Sorting
• ser Flows
• ite Maps
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!
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!
• lear Fun Design!
• hildren at Forefront!
• arge simple Menus!
• ustomer Service!
Sketched out a storyboard for
Sara’s user ﬂow, the main user
persona for my prototype.
Users should have access to
checklist. User should have ability
to store a proﬁle and have option
to add another child to proﬁle.!
User must be taken through the
login process with ease in order to
set up child proﬁles and identify
items for each school’s code.!
When logged in, user must also be
informed of checklist items and
notiﬁed when non-school code
“must-have” items are purchased. !
Design Iteration 1:
High Level Mock Ups!
Created site maps, high level user ﬂow, then
mockups of wireframes to outline different user
John’s Flow was School Code Centric, Sarah’s
ﬂow was product centric!
Opportunities Identiﬁed: !
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. !
Design Iteration 2:
Created Wireframes for main pages of user ﬂows.!
Both users ended up browsing items school speciﬁc and non-speciﬁc
items, ie, both users need to be able to access the school landing page
and the general product browser page.!
Opportunities Identiﬁed: !
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
The prototype was created in Invision software.
Main user ﬂows including checkout were traced. I
conducted several usability tests.!
Needed to improve upon ﬂow and ease of use.
Some lay out issues to make choices more
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.!