Project Components
For your project, you will need to select three components from the lists below to include in your design. You must select at least one component from Group 1 and one from Group 2. Some may be used in combination; for example you may choose to include a Data Visualization (Group 1) and then extend it with an Interactive Data Filter (Group 2). This would count as two components. If you have any questions about the components, please reach out to the course staff! You are also welcome to petition a component, so long as your TA signs off on your idea.
Group 1
Group 2
Data Collection Form
A form is used to collect data from users. Forms are ubiquitous on the web; you fill one out every time you purchase something or sign up for an event online. For this project, your form should meet the following requirements at a minimum:
- Contain at least five fields.
- Contain at least two different types of fields (text, radio, checkbox, etc.).
- Support data validation. Data validation functions check to see whether the user entered data into a form correctly. For example, if a particular field asks for the user’s phone number, the user should not be allowed to enter text or an incorrect number of digits. Your data validation functions should be intuitive based on your input fields.
- Follow the guidelines for good form design, which are covered here:
forms slides
Examples
Tutorials
Data Visualization
Depending on the problem your project aims to solve, it may be appropriate for your website to communicate data to users through a data visualization. For example, you may want to display a line graph that shows how a user’s mood has changed over time using data that the user inputted through a form. Or you may way to display a map that shows the locations of community organizations in a given area. Data visualizations allow you to share information with users in an easy-to-understand format that highlights connects the users might not otherwise notice. For this project, your data visualization should meet the following requirements at a minimum:
- Display at least one data visualization on your website. The format of this visualization could be a table, chart, graph, map, or network graph. The visualized data can come from any source (does not need to be inputted by the user).
- The data visualization should show the relationship between at least two different types of data. For example, a line graph might show how a user’s mood changed over time, showing the relationship between two types of data, mood and time.
- The data you choose to visualize should be related, and you should choose a visualization format that effectively demonstrates this relationship.
Examples
Tutorials
(tables, charts, and graphs)
User Profiles
By supporting user profiles, your interface can provide personalized content for each user. Profiles are sometimes utilized to allow users to store information, such as preferences or personal information like address and credit card number. Profiles can also be used to provide different classes of users with access to different features. For example, a website owner may want to add or edit content, but a website customer should not have access to these features. User profiles allow you to personalize your application to most effectively meet the needs of different users. For this project, your user profiles should meet the following requirements at a minimum:
- Provide a login feature that allows a user to enter their credentials.
- Provide support for at least two users. The application should look different for each user (i.e. display personalized information such as name, stored data, etc). These profiles can be hard-coded (i.e. create a separate HTML page for each user that includes their personal information).
- The two (or more) user profiles should be personalized to the user, at a minimum by showing their personal information when logged in. If it makes sense for your application and representative tasks, the two user profiles should provide access to different features. For example, if you created user profiles to allow a website manager to have access to different features than a regular user, the two user profiles you create should support different features.
Examples
Tutorials
External Data Integration
Depending on the problem your project aims to solve, it may be appropriate for your website to allow users to interact with content from external providers. For example, you may want to view streams of relevant content that have been posted to sites like Twitter, Instagram, YouTube, etc. Many of these companies provide support for web developers to integrate their content into external websites in user-friendly ways. For this project, your external content integration should meet the following requirements at a minimum:
- Integrate at least two different types of external content into your website. Note that simply adding social media buttons (Twitter / Instagram / Facebook) or embedding an iFrame is not enough. Rather, you should create a custom UI / interaction with data accessed from another website. We have already seen many examples of this in class (Spotify assignment, Yelp + interactive map in-class activity, etc.)
- External content should be integrated into your design in a seamless and usable way so that users can interact with the content as they would any other features.
- Provide a justification for why each type of external content is important or necessary for supporting one of your representative tasks (one paragraph per type of content).
Relevant Lectures
In order to complete this assignment, you will be using the JavaScript fetch API and the API Tutor (proxy server) to query Spotify. Relevant lectures and labs:
Branding
Professional websites typically use branding to provide a consistent visual experiences that users come to associate with a particular company or product. Branding is not only nice design that follows standard design principles; the colors, fonts, logos, and visual organization of a well-branded webpage come together to form a coherent visual experience. Developing a brand is complex, and companies often use other branding toolkits and paradigms (e.g. “material design,” “flat design”) to guide their designs. For this component, your branding should meet the following requirements at a minimum:
- Choose one of the branding approaches listed below, which you will use as a model to inform your own. If you want to use an approach not listed here, check with your peer mentor first.
- Use your selected branding inspiration as a guide for designing colors, fonts, widgets, and visual layout of your web application.
- Write a document (3 pages max) that describes your websites, values, branding approach, and inspiration, including screenshots.
Examples
Examples of branding approaches:
Tutorials
Chrome Extension
Ask your TA if you are pursuing this feature.
Perspectives
Tutorials
Interactive Data Selection
While static data visualizations help users understand data, interactive data visualizations can provide them with even more insights into the meaning of complex data sets. One of the most common types of interactive data visualizations allows users to select elements in a data set. For example, consider the line graph that shows how a user’s mood has changed over time. This graph may be more useful if the user can click on each data point in the graph to view more detailed information about her mood on that day. For this project, your interactive data selection should meet the following requirements at a minimum:
- Choose a data set that would be difficult for the user to understand without selecting (i.e. there is value in seeing information about individual data points).
- Show at least one new type of data when an individual data point is selected (for example, on the mood chart, you may show the notes the user wrote about their day when an individual day is selected).
- Include an interaction that allows the user to select individual data points in your visualization (whether it’s a graph, chart, or map) to view this additional information.
Examples
Tutorials
Interactive Data Filter
Another method that can help users gain meaning from data is the data filter. Data filters provide a simple way for users to view a subset of a larger data set based on provided criteria. For example, when viewing a list of restaurants in a particular neighborhood, a user might want to filter the list to only view restaurants that are cheap or open right now. Data filters allow users to easily personalize their view of the data by providing access to criteria that they might care about, such as restaurant price or hours. For this project, your data filter should meet the following requirements at a minimum:
- Choose a data set that your user would want to filter (i.e. it would be difficult for the user to find the data they’re interested in without filtering).
- Include at least two different criteria that the user can select to filter the data. These criteria should be helpful to the user given the user’s tasks and goals.
- The data display (whether in list format, map format, or another format) should update to show only the relevant data when the user selects a given filtering criteria.
Examples
Tutorials
Social Interactions
Web applications that support social interactions between users provide valuable connective and informational experiences that bring people back to their sites again and again. Social interaction can be provided through public comments on website content or private chat interfaces that allow two or more users to share messages. When appropriate, these types of social interactions deeply engage your users and help them build communities around your web application content. For this project, your social component should meet the following requirements at a minimum:
- Support at least one type of social interaction (either commenting publicly on website content of privately chatting with one or more other users). Users should be able to write social messages, post them, and immediately see their messages on either a comment board or chat interface.
- Select an appropriate level of anonymity for your users given the goals of your application. Users may be completely anonymous (no names or handles are displayed), partially anonymous (users choose a handle that is displayed with all content they post, but this handle can be different from their legal name), not anonymous (users’ legal names are displayed with the content they post). NOTE: if you choose to make users either partially anonymous or not anonymous, we recommend that you also implement the User Profiles component described earlier in this document to allow users to create identities as part of your web application.
- Display social messages in an intuitive manner given your application, for example in you may wish to display messages in chronological order. If your users are not completely anonymous it should be clear which user posted which content.
Examples
Tutorials / Libraries
Note: You don’t have to use an existing widget or library for implementing commenting or chat! You can write commenting functionality in HTML and JavaScript relatively easily, and will then have full control over the design and interactions. However, these libraries and widgets may be helpful depending on your design.
Gamification / Rewards
Rewards can be a strong motivator for behavior change. In web and mobile applications, rewards are often given in the form of points and badges which are given out in response to specific user actions of behaviors. Since points and badges are elements that have been adopted from video games, including these types of rewards in an application is often called “gamification”. However, rewards can take other forms as well; users could be rewarded with money or coupons, or could even set their own goals. For example, a user could decide that if she exercises every day this week, she will reward herself by going out to dinner. For this project, your rewards component should meet the following requirements at a minimum:
- Choose at least one type of reward (points, badge, coupon, user-defined reward).
- Design a set of rules for when the user should receive this award (e.g. if the user records that she exercised every day this week).
- Design an interaction that communicates to the user when a reward has been earned. If your rewards are points or badges, you may design an icon that you display when that point/badge is earned. If your rewards is user-defined, you may display a message with information about the reward when it is earned.
Examples
Tutorials / Libraries
For tutorials on implementing rewards / gamification, see:
Custom Calendar
While integrating a Google Calendar (External Content Integration Component) will suffice for many representative tasks, in some cases you may need to create a custom calendar to most effectively meet your users’ needs. A custom calendar could provide a way for users to set time-based behavior change goals for themselves. A custom calendar could also be used to communicate upcoming events in a community. Your custom calendar could adapt either how events are created, or the way in which they are displayed to users. For this project, your custom calendar component must meet these requirements at a minimum:
- Design one or more views for your calendar that make sense given your users’ needs (daily view, weekly view, monthly view, events view).
- Your calendar should have good visibility; important information should be easy to find and clearly displayed.
- Design an interaction that allows users to add events to your calendar.
Examples
Tutorials
For tutorials on implementing custom calendars, see: