2. About the Product
True Spirit is an online e-commerce website specializing in selling modern, fashion forward uniforms.
The True Spirit team strives to improve the experience of uniform shopping by encouraging clean
design and allowing more freedom of expression.
!
!
!
About the Project
This project designed while I was enrolled in the UXDi Immersive course at General Assembly. My
goal was to develop a prototype for a mock uniform website and provide a clear way to find your
school, browse and purchase uniforms. I chose to base my user flow on John Bean; a single father
looking to shop for his eleven year old daughter Asha. (The True Spirit company and persona
information were provided by the instructional team).
5. Research
Method !
I researched a variety of e-commerce websites
to get an understanding for common practices
associated with online shopping and uniform
shopping. Some of the companies that I
researched included: Gap, Lands End, French
Toast, Target, Walmart, Warby Parker, and
Anthropologie ).
!
Findings !
There is a great need to improve the ecommerce experience.
Most sites are unattractive to browse through
and cluttered.
Opportunities Identified!
Create a layout that is clean, simple and easily
adaptable to mobile and tablets.!
6. Scenarios
Method !
I was provided 3 personas by the instructional
team. Two parents; Sarah, and John and one
administrator; Kim. I began with a task flow to
identify what steps would need to be taken to
purchase clothing on a uniform website. My
next step was to create a site map to identify
the areas of need for my website.
!
Awareness !
Stay true to brand identity!
!
Set Up and First Run
!
Core Product
!
Opportunities Identified!
!
!
!
7. Design Iteration 1
Method
I began with sketches for a homepage, category
page and product detail page.
LE
P
AM
S
!
Findings
It was challenging to identify what information I
should include in the website. The True Spirit
brand promoted a modern and open feel and I
tried my best to incorporate that feel in to my
design.
!
Opportunities Identified
Design a website that would be easy to convert
to mobile or table application in the future. This
would allow for a more open feel to the website.
!
!
8. Design Iteration 2 - Hypothesis
Method
I updated my design in electronic format.
Findings
The footer was stronger as a large section at the
bottom of the page.
LE
MP
SA
!
Opportunities Identified
The long scroll would be a more effective method
of browsing through the homepage content.
!
9. Prototype
Method
I created a prototype in OmniGraffle and
InVision that captured the screen-based
version of the experience.
LE
MP
SA
!
Set Up And First Run
Searching for school checklist
information
Core Product Experience
Finding school checklist information
Viewing product category and detail
page
Adding to bag
Checking out
!
11. Thoughts
John
John wanted a shopping experience that
was efficient, detailed and easy to
navigate.
!
Features
Clear global navigation
Large ‘Find Your School’ search graphic’
The ability to save for later (John had
limited amount of time to purchase
today)
The ability to navigate to your checklist
quickly
!
13. 0.0
Home
3.0
School
Merchandise
3.1
iPhone Case
3.2
Logo T Shirt
3.3
Logo Headband
3.4
Mascot Toy
3.4
Backpack
4.0
Boys
4.1
Tops
4.1.1
Products
4.2
Bottoms
4.2.1
Products
4.3
Outerwear
4.3.1
Products
4.4
Accessories
4.4.1
Products
5.0
Girls
6.0
New Arrivals
5.1
Tops
7.0
Shop Collections
6.1
Products Page
2.0
Left Header
1.0
Search
7.1
Products Page
2.1.1
School
Checklist
2.1
Find School
1.1
Search Results
2.2
Sign Up
2.3
Account
1.1
Search Results
5.1.1
Products
2.4
Bag
8.0
Sign Up for Emails
5.2
Bottoms
5.2.1
Products
2.4.1
Checkout
8.1
Store Data
5.3
Outerwear
5.3.1
Products
5.4
Accessories
5.4.1
Products
9.0
Global Footer
9.1
Company
9.1.1
Our Story
9.1.2
Scholarship Program
9.1.3
TrueSpirit Careers
9.2
Services
9.2.1
Gift Cards
9.2.2
Embroidering / Monogramming
9.2.3
Hemming
9.3
Customer Service
9.4
Policies
9.3.1
Contact Us
9.4.1
Privacy
9.3.2
FAQs
9.4.2
Security
9.3.3
Returns / Shipping
9.3.4
Manage & Track Orders
9.4.3
Cal Transparency Act
14. Sarah’s Task Flow
John’s Task Flow
Email Link
Home
Homepage
Girls
Boys
View all uniform
styles
View all uniform
styles
Choose Styles
Choose Styles
Style Results
Style Results
Product Details
Product Details
Add to Bag
Continue
Shopping
Add to Bag
Continue
Shopping
Checkout
Checkout
