Design
Describe the final design of your interface. Illustrate with screenshots. Point out important design decisions and discuss the design alternatives that you considered. Particularly, discuss design decisions that were motivated by the three evaluations you did (paper prototyping, heuristic evaluation, and user testing).
Implementation
Reflection
Discuss what you learned over the course of the iterative design process. If you did it again, what would you do differently? Focus in this part not on the specific design decisions of your project (which you already discussed in the Design section), but instead on the meta-level decisions about your design process: your risk assessments, your decisions about what features to prototype and which prototype techniques to use, and how you evaluated the results of your observations.As a web application, our project was implemented with HTML, CSS, Javascript and JQuery (and JQuery UI) on the front end. For the back end, we used the Python framework, Flask. While all the pages are written with HTML and formatted with CSS, most of it is generated on the server side with Flask and Jinja2 templating. Through the use of Flask and Jinja templating, we were easily able to make each page within our site inherit a set of properties, notably the header bar that included the BrackeTracker logo and icons.
Implementation
As a web application, our project was implemented with HTML, CSS, Javascript and JQuery (and JQuery UI) on the front end. For the back end, we used the Python framework, Flask. While all the pages are written with HTML and formatted with CSS, most of it is generated on the server side with Flask and Jinja2 templating. Through the use of Flask and Jinja templating, we were easily able to make each page within our site inherit a set of properties, notably the header bar that included the BrackeTracker logo and icons.
Evaluation
As a web application, our project was implemented with HTML, CSS, Javascript and JQuery (and JQuery UI) on the front end. For the back end, we used the Python framework, Flask. While all the pages are written with HTML and formatted with CSS, most of it is generated on the server side with Flask and Jinja2 templating. Through the use of Flask and Jinja templating, we were easily able to make each page within our site inherit a set of properties, notably the header bar that included the BrackeTracker logo and icons.
Reflection
Describe the internals of your implementation, but keep the discussion on a high level. Discuss important design decisions you made in the implementation. Also discuss how implementation problems may have affected the usability of your interface.
Evaluation
Describe how you conducted your user test. Describe how you found your users and how representative they are of your target user population (but don't identify your users by name). Describe how the users were briefed and what tasks they performed; if you did a demo for them as part of your briefing, justify that decision. List the usability problems you found, and discuss how you might solve them.
User Testing Description:
Users were
-how conducted/found
Task analysis
There are a few main tasks involved with the Bracketracker. These tasks include:
- Create a tournament
- Update a tournament
- View a tournament
- Search for and Join a tournament
- Manage a tournament
| Create a Tournament | Search for/Join a Tournament | Update a Tournament | Manage a Tournament | View a Tournament |
|---|---|---|---|---|---|
Goal | To create a new tournament among friends & create a new bracket. | To join an existing tournament. | To update the score after a match.
| To ensure the tournament continues in a timely manner.
| To assess the state of the tournament.
|
Preconditions | Type of tournament | Tournament name; If tournament in "joining" stage | Tournament name; Player in tournament, which game/match; Score | Desire change; Manager in tournament | Tournament name; Player in tournament |
Location | On website | On website | On website | On website | On website |
Frequency of Use | Once per tournament | Once per tournament | Multiple times per day | As many as needed; many times a day | As many as needed; many times a day |
How Learned | By doing or watching | By doing or watching | By doing or watching | By doing or watching | By doing or watching |
Possible Errors | Non-Unique tournament name | Wrong tournament name; Missed "joining" period | Updating wrong game or score | Updating wrong feature or game | Viewing wrong tournament |
Time Constraints | None | Within "joining" period | Within scope of tournament | Within the scope of tournament | None |
Who Else Involved | None | None | Opponent | None | None |
Reflection
Discuss what you learned over the course of the iterative design process. If you did it again, what would you do differently? Focus in this part not on the specific design decisions of your project (which you already discussed in the Design section), but instead on the meta-level decisions about your design process: your risk assessments, your decisions about what features to prototype and which prototype techniques to use, and how you evaluated the results of your observations.As a web application, our project was implemented with HTML, CSS, Javascript and JQuery (and JQuery UI) on the front end. For the back end, we used the Python framework, Flask. While all the pages are written with HTML and formatted with CSS, most of it is generated on the server side with Flask and Jinja2 templating. Through the use of Flask and Jinja templating, we were easily able to make each page within our site inherit a set of properties, notably the header bar that included the BrackeTracker logo and icons.
User analysis
Listed below are three different types of people who might use BrackeTracker. We interviewed three people, each representing one of our three different personas:
...
- Age, gender, culture, language:
- The user base can span any age, gender, or culture. The website is mainly geared towards an English-speaking audience, but is not heavily dependent on large quantities of text, so non-English users will likely still be able to use the site without much hassle.
- Education (literacy/ numeracy):
- Does not require any significant advancement in literacy or numeracy.
- Physical Limitations:
- There are no special physical prerequisites - as long as the user can use a computer keyboard and mouse effectively, he or she should face no problems.
- Computer Experience:
- Must have basic proficiency with computers.
- Motivation, Attitude:
- People who are excited and motivated about the tournament at hand, and want the administrative work cut out!
- Domain experience:
- No previous tournament management experience needed per se; however, familiarity with basic tournament types (elimination, round robin, etc.) will allow you to set up the tournament faster.
- Application experience:
- No previous application experience necessary.
- Work Environment:
- This website is appropriate for almost any environment, from the workplace to a casual group of friends, to an extracurricular club, and more...
- Relationships with others:
- Since this sets up tournaments between friends, members need to be in email contact. However, other than a one-time email inviting people to the tournament, there are no other essential emails that need to be sent. Therefore, a tournament can be executed between people who are never in the same room (eg. if you were putting together an online chess tournament).
Task analysis
There are a few main tasks involved with the Bracketracker. These tasks include:
...