Project of System Analysis and Design Class

Ball equipment simulation ordering system

A website for people to customize their product

It is complicated for university’s sports team to order their team suit. We tried to simplify the process of ordering in this project. On the website, a user can customize basketball jerseys, pants, and shoes. A user can also design the color, pattern, size of the equipment and manage previous orders in this system. 


On the other hand, we also designed the service for manufacturers, service staff, and maintenance staff to manage customer’s question and handle product status.


UX/UI Designer



2015/11 ~2016/1


Team Member





In college, there are a lot of sports teams that have needs to custom-made ball equipment, including jerseys, pants, and shoes. In addition to the choice of size and color, they also want to print personalized designs on their product. Our corresponding group asked us to design a ball equipment simulation ordering system for basketball teams. We needed to optimize the entire ordering process through our website.



We analyzed public needs and organized the requirements of the demand group into the following 16 functions:

  1. Simulate products: The system must include the three kinds of product: jerseys, pants, and shoes. It has to show the simulation picture after user decide what they want to buy. (Sneakers style reference NIKE website & Jersey and pants style reference Davillage website)

  2. Share: User can share the simulation picture on social media. For example, Facebook.

  3. Save pictures: User can save the simulation picture anytime.

  4. Customize design: User can change the color, number, font, and typesetting of product.

  5. Notify website error: If the website has problems, a user can write a letter to tell the maintenance staff.

  6. Maintain website: Maintenance staff can repair or update the system.

  7. View Message: Users can view the message on message board.

  8. Leave question: User can ask question on message board.

  9. Fill ordering detail: User fills in personal information, payment methods and size.

  10. Check ordering details: User check the ordering detail.

  11. Order number: User gets an order number.

  12. View Order: User can see previous ordering information.

  13. Log in to internal staff: Let internal staff and manufacturer log in background system.

  14. View all orders: Manufacturer can view all orders received.

  15. Changes order status: Manufacturer can change the status of the order.

  16. Answer questions: Customer service staff can log in to answer questions.


Design Process

1. We drew the System Context Diagram and Use Case Diagram to define the system's boundary, environment and the interaction in this system.


2. We made Use Case Template for every main function. Then drew Activity Diagram, Collaboration Diagram, and Sequence Diagram to decide every step in this system.

Simulate Commodity (by MA, MAN-JUNG)

3. We use State Chart Diagram and Class Diagram to confirm every operation in this system.

4. Finally, we finish the prototype by using the knowledge learned from Program Design, Database Management, and Web Programming.


A user can choose commodity at home page and can also select a different style by switching left and right.

Click the product image and enter the text you want to print. Then, select the typesetting you like.

A customer fills out the purchase of different sizes and contact information. The completed order will be displayed in the left column. The management screen of the manufacturer is the same, but the manufacturer can update the status of the order.

Users can view information on message board and leave a new message on it



    This is a tough project for us. In about two months, we needed to accomplish a website and reached other group's demand. Every week, we learned some new analytical methods and design methods then practiced them in our project. This report let me know more about how system design work, how to think more comprehensively from different user aspect, and lets me get a better analytical skill to measure user’s need. Although it was tried, it gave me a sense of fulfillment.


    However, because of the time constraints, there are many things that we didn't design thoroughly, especially the interaction flow. We had a lot of meeting to discuss this project but we did not confirm the detail of user interface before making a prototype and that cause some discrepancy. This experience lets me know the importance of reaching group consensus.