Overview & Collaboration

The purpose of this assignment is to familiarize yourself with best practices regarding effective navigation for interaction, and apply them to a new app design.

You are strongly encouraged to work with one partner on this assignment, but not anyone on your project team and not your a3 partner. If submitting as a pair, make sure to include both students names/IDs in the textbox of the Canvas submission, and only one person needs to submit. However, make sure that you don't put any identifying information in the design document itself. You can use Piazza to find a partner.

Reference

In the Android UI Guide browse through the "Add Components" section. Pay particular attention to Add the App Bar, Add a Floating Action Button and Menus. Also read through the Navigation Principles section. There is also a recently introduced navigation component in Android that we won't have time to cover, but you can read about it here: Navigation.

Deliverable: Study Room Tracker Design

For this design assignment, the goal is to focus primarily on information flow and navigation. You will be expected to organize required features into logical groupings and clearly indicate how the user would access these features. You should incorporate android elements as appropriate, such as the app/action bar, navigation drawer, tabs, settings, etc for a modern feel and effortless user experience. If you are not yet familiar with android style apps, you should review some through the online google play store or download them onto a device. Check out Slack or Old Navy for example. Also see pinned Piazza post @10 regarding icon resources.

Design an application for users to be able to coordinate usage of conference rooms on campus for studying. Here are user stories that your app design must support:

• As a study room regular, I want to let others know when I arrive and when I leave so that they can join me while I am there.
• As someone new to campus, I want to learn about the nearest rooms and the students who frequent them so I can potentially find some study partners.
• As a student who has difficulty concentrating, I want to be able to study in mostly empty rooms so that I am not distracted by other students.
• As a collaborative studier, I want to find rooms where similar students are studying so we can help each other learn.
• As a student working on a team project, I want to find study spaces that have enough room for all of us so we can work together there.

Given these user stories, here are functional requirements that your design must provide:

• Users can sign up for the app and login.
• Users can add and update their class year, major(s), and a photo.
• Users can check the current occupancy of multiple study rooms easily.
• Users can check into and check out from a particular room to indicate when they are there.
• Users can track how much time they spend in various study rooms during a week.
• Users can view profile information about other studiers.
• Users can chat with each other to arrange meet-ups.

It is up to you to determine the design elements that will appeal to and satisfy the needs of the app users, in accordance with the functional requirements above. However, the emphasis for this design assignment is information flow and navigational access to features. As such, you do not need to provide explicit details of the data content and aesthetics that might appear on each view. However, every mechanism (button, menu selection, tab, swipe, etc.) that provides the user with any kind of navigational action must be fully specified. Be very clear in your design document about the transitions and interactions between the various components and views.

Include a complete screen list with text descriptions as to the purpose of each. Be explicit about the navigation options, including the content of all menus. Your design document should include a complete wireframe of the app with respect to the purpose of each view and motion between them. You can ignore aesthetic details such as colors, font choices, etc. Do NOT include your name or any personally identifiable information in your pdf submission.

You can create your design in any electronic format of your choice (ie, nothing hand-drawn), however your final submission must be a pdf file only. We recommend trying out these websites with free/trial accounts: FluidUI, Proto.io, MockPlus, Figma. If the tool doesn't let you easily export to pdf with a free account, you can do screen shots to cut and paste the views into a design document (Word for example), and then save as pdf.

Grading: [5] screen list, [5] details of navigational elements (menu contents, wireframe, etc), [15] actual design.

Submission: Submit a complete pdf named a4_jhed1_jhed2.pdf on Canvas, and make sure to note both students names and jheds in the Canvas submission page comment box as well. Only one partner needs to do the submission if these specifications are followed correctly.