Design By: James Feng

Student Project. General Assembly UXDI 2014, Sydney (Thank my team members, Sara Michelazzo & Deepa Dhupelia, for their excellent work)

SCHOOL UNIFORM COMPANY

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.

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.

Research

• 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:

Findings:

Method: Competitive analysis. We individually analysed existing websites on the market individually to identity opportunities.

Find an appropriate way to combine the clear navigation and the specific schools’ entrance.

We started our design by the competitive research

Identify User RequirementsReview 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

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

• John:!• Need an efficient process to purchase uniforms for

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.

Information Organisation

Method:

Solution:

Findings:

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.

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

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.

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)

Further Design & Refining

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,).

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.

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.

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.

Refining The Rough Sketches

We brought our sketches to the meeting and discussed them together

• Home Page!• Product Page!• Product Category Page!• Navigation

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!

Design The Checkout

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

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.

Create Wireframes & Design InteractionsWe 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.

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.

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!

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

Features Demonstration

— Thanks our lovely team member Sara Michelazzo for the visual design

Following pages are several screenshots for demonstrating the prototype

Features Demonstration-1

Home Page:

1

2

3

4

5

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

WHAT PROBLEM IS BEING SOLVED WITH EACH ELEMENT?

FREE DELIVERYFree 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 RETURNSHaving 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.

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

SALESWe’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.

6 FEATURED ITEMSWe’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.

GIRLS BOYS SHOP BYSCHOOL SIGN IN

REGISTER

IMAGE

Polo shirt $ 30

IMAGE

Polo shirt $ 30

IMAGE

Polo shirt $ 30

IMAGE

Polo shirt $ 30

IMAGE

Polo shirt $ 30

IMAGE

Polo shirt $ 30

Enjoy school and express your style

FREE DELIVERY FOR PURCHASES OVER $50

EASY RETURNS.All you need is the included delivery stickers! Attach these and drop off

at the post office.

“I can’t believe my kid’s t-shirts look brand new after more than 40 washes”

Sarah JacksonCustomer, and mother of 3.

FEATURED ITEMS

CHECK OUT OUR SALES

HOW TO WASH

1

23

45

6

Features Demonstration-2Category Page - Quick Buy Mode

1

2

3

4

5

6

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

WHAT PROBLEM IS BEING SOLVED WITH EACH ELEMENT?

ALTERNATIVE VIEWSThis 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.

QUALITY INFORMATIONIn 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.

SIZE HELP Standard measurements for our product line: for customers like John and Sarah who want to make sure they buy the right thing.

FILTERHelps efficiency of online shopping, for those who have little time to shop (eg. Sarah in her lunch breaks.

SAVED ITEMSQuick 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.

Home > Girls > Tops > Polo Shirt

ADD TO BASKET

Color

$ 30Polo t-shirt

Size

1

S M

Quantity

XS L

CLICK TO ZOOM

SAVE ITEM

Size Help

FILTER

CLICK TO ZOOM 100% cotton. Machine wash cold, gentle cycle

XL

ADD TO BASKET

Color

$ 30Polo t-shirt

Size

1

S M

Quantity

XS L

CLICK TO ZOOM

SAVE ITEM

Size HelpXL

100% cotton. Machine wash cold, gentle cycle

Color

$ 30Polo t-shirt

Size S MXS L

SAVE ITEM

100% cotton. Machine wash cold, gentle cycle

GIRLS BOYS SHOP BYSCHOOL SIGN IN

REGISTER

21

4

3

6

5

Features Demonstration-3School’s Landing Page - For Sarah

1

2

VIEW BY YEARQuick 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.

WHAT PROBLEM IS BEING SOLVED WITH EACH ELEMENT?

FREE DELIVERY AND EASY RETURNSInformation 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).

St. Luke’s School

FREE DELIVERY FOR PURCHASES OVER 50$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

Kindergarten Girls

VIEW

KindergardenBoys

1-6 PrimaryGirls

1-6 PrimaryBoys

7-10 High SchoolGirls

7-10 High SchoolBoys

11-12 SeniorGirls

11-12 SeniorBoys

VIEW

VIEW

VIEW

VIEW

VIEW

VIEW

VIEW

GIRLS BOYS SHOP BYSCHOOL SIGN IN /

REGISTER

IMAGE

IMAGE

IMAGE

IMAGE

IMAGE

IMAGE

IMAGE

IMAGE

1

2

Features Demonstration-2Account 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

THANK YOU James Feng knight212908@gmail.com