Your SlideShare is downloading. ×
UXDI Project 2- Ecommerce Mobile Web
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

UXDI Project 2- Ecommerce Mobile Web


Published on

This is my new student project in General Assembly Sydney. …

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

Published in: Design, Technology, Business

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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