CSE 134B: Client-Side Web Languages

Winter 2017 | University of California, San Diego CSE Department

Homework #1 - Specifying a Web Application

This homework presents an opportunity to explore the ideas and potential "design" of the Web application we plan to build as our class project.

The Professor has found that most Web applications include common parts such as authentication (sign/login/logout/password recovery), management of content assets using the CRUD pattern (Create, Read, Update and Delete) which generally involves a list or grid view, and often some messaging and alerting. As a way to try most of these common patterns out quickly the simple TopicDex application was defined.

The rough aim of the TopicDex application (mobile, desktop or tablet) is an application that allows user(s) to keep track of the favorite X or collection of X out of some universe of things that may exist. For example, we might imagine a GoTDex which catalogs all the Game of Thrones characters that we may have in a card game about that show, or a list of Star Trek characters, Pokemon cards/characters, US Coins or Stamps, Comic Books, etc. The first consideration of our application is to pick the topic we want to build our app around. This topic will then dictate the kind of data items you would want to track in your app. All proposed data forms to be tracked must track image(s), text field(s), number field(s), at least one ordinal field (one choice of many - for example air, fire, water, etc. types of Pokemon) and at at least one boolean field (good or evil, have or don't have, dead or alive, etc.).

Given that you know you will be using HTML, CSS, JavaScript, images (GIF, JPG, PNG, etc.) and then hosting this using Firebase many students will want to start coding right away. This is a very bad idea. Clearly we have but the vaguest idea of what we should do, so better to specify more clearly what to do by coming up with a plan and employing UCD type thinking. The iteration before coding will allow us to figure things out before we spend a lot of time on more time consuming tasks later in the quarter.

To address the vague challenge presented above groups should think about who might track their TOPIC, why the users do it, what challenges they may face, and what they might want to monitor. In other words you need to specify user personas, state their problems and come up with a possible app solution all before you write a single line of code. To this end the professor would like each team to create document(s) that cover the following topics:

  • An executive overview of the problem as you see it
  • A study of users including personas.
  • A logical flow diagram for a proposed app
  • A wireframe of the proposed app
  • Any important notes on risk, execution, etc. that you think is important to consider now

Important Tips: Do not assume that what you are doing visual design at this stage. Also do not think too deeply about execution yet.

The form of what you are turning in is a PDF document of the key components presented above. You are not to implement any HTML, CSS or JavaScript for this assignment. However, your wireframe may be created using tools such as Axure, UXPin, Balsamiq, Sketch, Visio, OmniGraffle, LucidChart or any other tool you feel appropriate. The focus of the assignment here is specification and communication as opposed to tooling or coding. Grading will focus on clarity of thought and presentation over anything and as such there are multiple forms of an excellent submission.

Back to CSE134B


  • 5pts for executive overview
  • 10pts for user thinking
  • 5pts for system/interface flow diagrams/discussion
  • 15pts for wireframe
  • 5pts for strength/weakness/risks/execution evaluation
  • 10pts for document presentation quality

Total: 50pts, the top three teams receive 10 extra points and glory.

Send your answers to the TAs via email by 8:59PM Friday Jan 20th.