This is my new student project in General Assembly Sydney. The whole project aims to design a Mobile Web for a school uniform company. We worked as a group and walked through the whole design process together. Thank my lovely team members Sara & Deepa, who always contributed a lot of excellent idea in our design process. The slides are the basic flow I have gone through in this projects. I also presented how I worked with team members and how we worked together to reach our final design

1. SCHOOL UNIFORM COMPANY
Design By: James Feng
Student Project. General Assembly UXDI 2014, Sydney
(Thank my team members, Sara Michelazzo & Deepa Dhupelia, for their excellent work)

2. About the Product:
!
TrueSpirit is a new player in internet retail industry. It focus on K-12 children to
provide them with fresh modern and fashionable school uniforms. In order to expand
the business, TrueSpirit needs a well-designed and functional website to cater various
customs types. This website should provide parents with necessary features to choose
the right uniforms and accessaries for their kids, and also enable school administrators
to set the corresponding shopping list for their students’ parents based on their dress
code.
!
!
About the Project:
!
This is a group project.
!
Based on given personas, our team needs to provide appropriate online purchasing
experience via the prospective product.
The team was given the constraint of targeting mobile web(on iPad) as primary delivery
channels.

3. Case Study
The following case study is to demonstrate what I have done in this project and
how did I cooperate with other team members, Sara & Deepa.

4. Research
We started our design by the competitive research
Method:
Competitive analysis. We individually analysed existing
websites on the market individually to identity opportunities.
Findings:
• Most of the school uniforms websites have the products
•
•
•
categorised in individual school sections.!
The paths on some websites are not clear enough for
various user types to navigate through them.!
Some websites don't have the clear entry point for schools.!
The order form is complicated on certain websites.!
Opportunities Identified:
Find an appropriate way to combine the clear navigation and the
specific schools’ entrance.

5. Identify User Requirements
Review Personas:
Reviewed the given personas as a group. We used personas’
characteristics and behavioural attributes to identify possible
requirements regarding the website that was being designed.
Identify Requirements:
Based on the results from the process above, we identified all
the possible requirements of three various personas, in terms
of what the websites are going to offer.!
!
• Sarah: !
• Save items for later, because she usually browse
•
•
!
• John:!
• Need an efficient process to purchase uniforms for
•
!
online products during lunch time, which is
fractional and not enough to complete the entire
purchasing process.!
Need a way to ensure she purchase the right
uniforms for her son.!
Need enough information on quality and products
return.!
his daughter, because he is usually busy and only
have very limited time to complete the online
shopping.!
Need enough information to ensure the quality of
products, and return.!
• Jess:!
• Need a way to organise uniforms’ shopping list for
parents, based on school’s dress code.!
• Need a clear product detail description.

6. Information Organisation
Method:
Card Sorting. We put all the existing products categories on the table
to sort them into higher categories or new sub categories based on
their underlying relationships, common sense, and competitor
analysis. We have tried several different ways to categorise them,
label the results and compare the results all together to identify the
most optimal one.
Findings:
We identified two ways to organise our products categories, which are
both reasonable to some extents.!
1. boys/girls & winter/summer!
2. boys/girls & tops/bottoms/accessaries
Solution:
According to our previous competitive research, and common
usage in uniform industry, we divided to choose the second
finding, which is more recognisable to users.

7. Further Design & Refining
Based on our previous findings. We started following design activities.
• Create Site Map (individual work and discuss in group)!
• Create User Flows (individual work and discuss in group)!
• Create Navigation schema(group work)!
• Initial Interface Sketches (individual work and discuss in group)!
• Refining Sketches (group work)!
• Refining all Previous Work (group work)

8. Create Site Map
Based on the three corresponding scenarios as to three
different personas and the results of previous card sorting, we
discussed the site map together initially on the board. Then we
created it individually and collected all outcomes from three of
us. We discussed all the outcomes in next day and refined the
results ( I converted it into digital version and kept it for later
refinement,).

9. Create User Flow
I sketched the user flows for three personas, Sarah, John & Jess,
based on their scenarios individually. Brought them to the catch-up
meeting at next day. We altered the user flows together as a group!
!
After this, I took the results from the meeting to generate the refined
user flow in omnigraffle for further discussion, because we also
thought that we may need to refine our user flow with the site map
later and vice versa.

10. Create Navigation Schema
We discussed our navigation schema together, and one of our team members, Sara, converted the
idea to the outcome in omnigraffle, Which was used to refine with site map and user flows later.

11. Initial Interface Sketches
We started to sketch our initial product layout separately based on
previous discussion. We tried to generate ideas as many as possible
as an individual.!
!
Then we came back to filter through the individual sketches, based
on personas, scenarios and user flows.!
!
At this stage, we mainly focused on product page, products category
page & Home Page. We used John as our target persona at this
stage, because we identified John as our normal user, who usually
lands on the home page. As to Sarah and Jess, the former one
stands for the users who access the website via a landing page and
the latter one stands for schools’ administrators, who required
different path on the website.

12. Refining The Rough Sketches
We brought our sketches to the meeting and
discussed them together
• Home Page!
• Product Page!
• Product Category Page!
• Navigation

13. Refining All Previous Work
Method:!
We put all the work( site map, user flows, navigation schema &
Interface sketches on the wall. We wanted to user all the work we
had to refine with each other in order to identify any part that could
be improved. !
We have identified missing points in user flows, and site map.!
Beside, we improved our design on global navigation in the group
discussion.!
!
Outcomes:!
Two Missing part in site map.!
Three user flows needed alteration to optimise users’ online
experience.!
Improved the search, school selection & shopping bag on the
global navigation bar.!
We needed to design the interface for check out process!
•
•
•
•

14. Design The Checkout
We worked on check out process together to design the basic
flow based on our two major personas, Sarah & John.

15. Design For Jess ( Persona of school’s administrator)
I took this part individually as an initial attempt. Then we went
through the sketch in next day’s meeting.!
!
We improved the initial sketch as a group and reached an
agreement on it.

16. Create Wireframes & Design Interactions
We converted all the sketches so far to digital version(wireframes) and put
them on the table. We went through them from beginning to the end based
on the user flows, in order to identify any missing screen and add
interactions between each pages. This is a preparation of the prototype.

17. Prepare Prototype For Usability Test
I used omnigraffle to create the initial prototype based on three personas. Then,
we improved the prototype together as a group.
Then we improved and tested our prototype on an iPad for usability testing purpose.

18. Usability Test
We designed our questions for usability testing as a group.!
For this student project, we designed several questions to test two major
part of our prototype. One is normal purchasing process the other one is
check out process.!
Key Findings:
• We expect picture to zoom.. but user expected to go to
details page.!
!
• One user would have saved his profile if it didn’t include
credit card.!
!
• One user said he’d prefer just to use images rather than
navigation menus.!
!
• User went to sales button to find polo shirt rather than top
navigation bar. (we could perhaps re-do these links to boys
and girls).!
!
• Check out works well!

19. Prepare Presentation & Design Specification
We put all the refined work together to design specification as a group.!
!
Thanks Deepa for her excellent work in generating our design specification
and presentation keynote.!

20. Features Demonstration
Following pages are several screenshots for demonstrating
the prototype
— Thanks our lovely team member Sara Michelazzo for the visual design

21. Features Demonstration-1
Home Page:
WHAT PROBLEM IS BEING SOLVED WITH
EACH ELEMENT?
GIRLS
1
SHOP BY
SCHOOL
BOYS
SIGN IN
REGISTER
CAROUSEL
The carousel provides users with
information about the brand: The
messaging is modern and fresh. Images
and text are used to convey the “why, how
and what” for the company.
Enjoy school
and express
your style
1
2
3
4
5
6
FREE DELIVERY
Free delivery erases a barrier for buying
online: cost of shipping. This is good for
frugal users like John, and those who shop
online for convenience like Sarah.
EASY RETURNS
Having an easy return option helps alleviate
concerns for users such as John and Sarah.
We’ve highlighted this point for error recovery
- shoppers have an easy way to correct a
mistake purchase.
2
FEATURED ITEMS
We’ve provided a snapshot of some of our
current products, so that shoppers can get
an idea of average prices, and have a quick
entry point if they are just browsing.
This also makes it easy for frugal shoppers
to compare sales prices with regular item
prices.
EASY RETURNS.
All you need is the included delivery stickers! Attach these and drop off
at the post office.
3
CHECK OUT OUR SALES
REVIEWS
Rather than just making statements about our
product quality and level of service, we have
provided reviews from current customers, to
reinforce these points and reassure new
customers like Sarah and John.
SALES
We’ve made it easy for frugal shoppers like
John to access sales items. This also helps
the business to deal with remaining stock
from past seasons.
FREE DELIVERY FOR PURCHASES
OVER $50
4
“I can’t believe my kid’s t-shirts
look brand new after more than
40 washes”
IMAGE
5
IMAGE
Sarah Jackson
Customer, and mother of 3.
HOW TO WASH
Polo shirt
$ 30
Polo shirt
$ 30
FEATURED ITEMS
6
IMAGE
Polo shirt
IMAGE
$ 30
Polo shirt
IMAGE
$ 30
Polo shirt
IMAGE
$ 30
Polo shirt
$ 30

22. Features Demonstration-2
Category Page - Quick Buy Mode
WHAT PROBLEM IS BEING SOLVED WITH
EACH ELEMENT?
GIRLS
1
BREADCRUMBS
Breadcrumbs assist with user orientation,
and give the structure of the site.
For users, we are teaching them the
hierarchy of the site, so that they learn
navigation. Users also know where they are
at a glance, and how to go back.
1
SHOP BY
SCHOOL
BOYS
Polo t-shirt
$ 30
Size
Size Help
S
L
M
100% cotton.
3
ADD TO
BASKET
Machine wash cold, gentle cycle
Polo t-shirt
$ 30
SAVE
ITEM
Color
SIZE HELP
Standard measurements for our product line:
for customers like John and Sarah who want
to make sure they buy the right thing.
4
Size
Size Help
Quantity
XS
S
M
L
FILTER
Helps efficiency of online shopping, for
those who have little time to shop (eg.
Sarah in her lunch breaks.
6
SAVED ITEMS
Quick way to build favourites lists - for users
like Sarah who like to save to purchase
later. Also users like Jess: to help her build
lists of recommendations for parents.
CLICK TO ZOOM
Machine wash cold, gentle cycle
Polo t-shirt
$ 30
CLICK TO ZOOM
XL
1
100% cotton.
5
XL
1
Quantity
QUALITY INFORMATION
In line with TrueSpirit’s promise: We only sell
quality products, we have included
information about garment materials, wash
and care instructions, and a zoom function to
focus on the fabric. Also for customers like
Sarah, who want to be educated about care
and comfort of the garments.
4
XS
5
6
SAVE
ITEM
Color
CLICK TO ZOOM
3
FILTER
2
Home > Girls > Tops > Polo Shirt
ALTERNATIVE VIEWS
This is the list view of our products, which
allows easy scroll and quick 1-click
selection straight to shopping bag. This is
for our experienced users and regular
visitors to the site, those that are more tech
savvy like Jess, and process efficient like
John.
2
SIGN IN
REGISTER
Color
100% cotton.
Machine
Size wash cold, gentle cycle L
XS S M
ADD TO
BASKET
SAVE
ITEM

23. Features Demonstration-3
School’s Landing Page - For Sarah
WHAT PROBLEM IS BEING SOLVED WITH
EACH ELEMENT?
GIRLS
1
VIEW BY YEAR
Quick and easy image view of the school’s
entire range of uniforms by grade.
Users know whats coming for future years
of their children at St Luke’s School.
BOYS
SHOP BY
SCHOOL
SIGN IN /
REGISTER
St. Luke’s School
Kindergarden
Boys
Kindergarten
Girls
1
IMAGE
IMAGE
VIEW
VIEW
2
FREE DELIVERY AND EASY RETURNS
Information on these offers for this view as
well (as Sarah may not go through the
home page if she goes straight to the
landing page).
1-6 Primary
Girls
IMAGE
1-6 Primary
Boys
IMAGE
VIEW
VIEW
7-10 High School
Girls
7-10 High School
Boys
IMAGE
IMAGE
VIEW
VIEW
11-12 Senior
Girls
11-12 Senior
Boys
IMAGE
IMAGE
VIEW
2
FREE DELIVERY FOR PURCHASES OVER 50$
VIEW
EASY RETURNS
All you need is already in the box, attach the new delivery stickers
at the box and call the number to organize the pick up

24. Features Demonstration-2
Account Confirmation Email For John
Once John press the “ Yes, save for next time” button, an user account will be created automatically for
John, and an email with initial login information will be sent to John

25. THANK YOU
James Feng
knight212908@gmail.com