Skip to main content Link Search Menu Expand Document (external link)
CIS1950

Project Milestone 1 - by Friday April 14th, 11:59pm

In this milestone, you will get to work on your project’s design stages. No code required yet!

Critique Session

Quick note before you jump in, the lecture before this milestone is due (Thursday April 13th) will be a critique session. You will conduct peer reviews of other groups in a fun workshop. More details in class!

Now, let’s get a quick recap of the design stages covered in our workshop class on 3/30. Read through the writeup carefully, and the Submission section will include details on what to submit for the milestone.

Stage 1: User Stories

The first stage is coming up with your app’s user stories. User stories are a technique used in software development to capture and communicate a user’s requirements or desired features in a concise and easily understandable way. A user story is typically a short sentence or paragraph that describes a specific action that a user wants to perform, why they want to perform it, and what benefit they expect to receive from it.

Here are some key steps to follow when creating user stories:

1. Identify your users:

Determine who your target audience is and what their needs and goals are. This will help you create user stories that are relevant and valuable to your users.

2. Write user stories from the user’s perspective

Each user story should be written from the perspective of the user, using the format "As a [user], I want to [action], so that [benefit]". For example, "As a busy professional, I want to quickly add new events to my calendar, so that I can stay organized and on schedule."

3. Keep it simple and specific

User stories should be concise and specific, focusing on one feature or functionality at a time. Avoid adding unnecessary details or technical jargon that may confuse the user or the development team.

4. Prioritize user stories

Determine which user stories are most important to your users and prioritize them accordingly. This will help you focus on the features that provide the most value to your users.

Stage 2: Lo-fi Prototype

A Lo-Fi (low-fidelity) prototype is a basic, simplified version of a product or interface that is used to test and validate design concepts and ideas. It is a rough, low-tech representation of the product or interface that can be created quickly and inexpensively, allowing designers to quickly test and iterate on their ideas without investing too much time or resources.

For the purposes of our final project, make sure you have a sketch for every screen (and popup, modal, etc.) of your app.

Stage 3: View Hierarchy Diagram

After reviewing and refining your Lo-Fi prototype, and upon finalizing your app screens, start preparing for the Hi-Fi prototype through creating a View Hierarchy Diagram.

A View Hierarchy Diagram for an android app is a visual representation of the relationship between the user interface elements (Views) in an android app. It shows the layout of the UI elements and how they are organized and connected to each other. This diagram is useful for understanding the structure and layout of an android app’s UI, as well as for debugging and troubleshooting issues related to the app’s layout.

You will create a diagram for every screen in your app.

TL;DR - create a diagram that list all of your app’s views in a hierarchy, one per screen, similar to the ones we drew in class.

[OPTIONAL] Stage 4: Hi-Fi Prototype

A Hi-Fi (high-fidelity) prototype is a more polished and detailed version of a product or interface that closely resembles the final product. It is typically created after the Lo-Fi prototype stage and is used to further test and refine the user experience, as well as to gather feedback from stakeholders, investors, and other members of the team

It is usually developed through Figma or similar software, although some designers prefer to draw traditionally by hand. For the sake of the project, you are not required to have a hi-fi prototype, although it is highly encouraged and recommended.

Stage 5: App Architecture Diagram

After finalizing the overall look for your app, and right before you start coding; that’s the perfect time for your App Architecture Diagram.

An App Architecture Diagram for an android app is a visual representation of the overall structure and organization of an android app’s architecture. It shows the various components of the app, how they are connected, and how they interact with each other. This diagram is useful for understanding the overall architecture of an android app, as well as for debugging and troubleshooting issues related to the app’s architecture.

We have been using the Model-View-ViewModel architecture throughout the class, and your project will be using it as well.

Here are some key steps to follow when creating your app architecture diagram:

1. Identify the components

Identify the various components of the app’s architecture, such as UI Controllers, Views, ViewModels, Networking, LiveData, Observers, and other necessary components.

2. Map the relationships

Map the relationships between the app’s components, such as how Activities and Fragments interact with Views, how Presenters and ViewModels interact with Views, and how Services interact with other components.

3. Create the diagram

Use a tool such as Lucidchart or Draw.io (or draw by hand if you prefer) to create a visual representation of the app’s architecture. It is sufficient to creating a high-level overview of the architecture as long as each component is clear, along with components’ relationships.

Submission

Submit the following to canvas, as part of one publicly accessible Google Docs document by Friday April 14th, 11:59pm (one submission per group):

  1. [Stage 1 - User Stories]
    • your app’s target audience group (user persona) along with a short paragraph describing your audience in relation to your service
    • minimum of 5 user stories
    • order of priority for the user stories (most important to least important)
  2. [Stage 2 - Lo-Fi]
    • Clear scans of your Lo-Fi prototype, drawn on paper. Drawings must be clear and orderly. Do not draw squiggly lines.
    • Include all of the screens of your app, along with arrows or any form of description of the navigation graph
  3. [Stage 3 - View Hierarchy Diagram]
    • A View Hierarchy Diagram for each of your app’s screens
  4. (OPTIONAL) [Stage 4 - Hi-Fi]
    • Link to your Figma design (or clear, crisp scans if drawn by hand)
  5. [Stage 5 - App Architecture Diagram]
    • An App Architecture Diagram specifying your app’s components and their relationships. Level of detail is similar to diagrams covered in class. Include it as a PNG if designed using a website/software, or clear scans if drawn by hand