Team 1 – 7A Blogpost

Architectural Design of the Solution

Bubble Diagram:

Our bubble diagram led us to identify 3 key pieces of functionality that our app should have:

1. A homepage that tells the user about their tiktok usage
2. A friends screen that allows users to manage their friends
3. A settings page where users can adjust their usage and notification preferences

System Map:

Our system diagram explains how users interact within the system of our app.

Wireflows:

As we created the system path and individual bubble maps for our apps, we noticed similarities between the flow and what we pictured our app to look like. In particular, everyone envisioned some kind of login flow, a screen to ask for the contact information of the user’s friend, and a screen time setting page. This also coincided with the user story map we generated in 6B. The wire flow we decided on for our login flow encompasses these ideas into one process that is easy to navigate and understand for our users. The login flow includes following the initial user profile setup, collecting friend information, and setting screen time. We also drew out a simple idea for how our home screen should be displayed.

 

Additionally, we envisioned the two distinct user flows that would arise once their friends have accepted or denied their request. To generate these user flows, we iterated through our system map to determine the screens necessary to satisfy each step. The key point that caused the branch into two distinct flows is the decision that happens upon notifying a friend. If an extension request is accepted, users will see a “request accepted” screen for around 3 seconds once they open TikTok, then will automatically be redirected to their regular TikTok app. On our app, users will once again see the request status (i.e. “Accepted”), along with other information displayed on the home page such as daily and weekly TikTok usage. If an extension request is denied, users will be brought to a rejection screen where they can then exit to access other apps. Critical for both of these screens was 1) effectively communicating where in the process users were with respect to their time limits and requests, and 2) prioritizing nudges that encourage exiting TikTok.

We identified 5 key wireflows for our app, and divided them up amongst our team. The 5 we identified were:

1. Signing up and logging in to the app
2. What does our user see when their time runs out?
3. What does the user’s friend see when user runs out of time?
4. Once the friend responds to their request for more time, what does the user see?

1. Subcase a: Friend accepted request
2. Subcase b: Friend denied request

Individual Wireflow Diagrams

The individual wireflows and their respective owners are below:

1. Signing up and logging in to the app [Lavender]

2. What does our user see when their time runs out? [Amber]

3. What does the user’s friend see when user runs out of time? [Julia]

4. Once the friend responds to their request for more time, what does the user see?

1. Subcase a: Friend accepted request [Yubin]

2. Subcase b: Friend denied request [Alex]

 

After drawing these separately, we combined them into one cohesive wireflow.

Final Cohesive Wireflow Diagram  

We’re excited to test our assumptions and build this!