Sketchy Screens
Login Setup (Lavender)
For the login setup, I wanted to create a simple layout that is straightforward for the user. At the bottom of the screens, I decided to add in a small bar that keeps track of which page of the short onboarding process the user is at so that it is easy to navigate (and swipe back and forth between the pages if the user inputted something wrong). The flow is easy to understand and includes the initial set up steps of inputting the user’s name, email, password, and phone number, and giving consent to link the app to their TikTok account.
Login/Forgot your password? (Lavender)
I also designed a login flow that allows users to sign in easily by linking their accounts to google, apple, or facebook. While designing this screen, I also thought a “Forgot your password” wireframe would be important for when users might have accidentally logged out and need to reset their passwords. For this login flow for users that forgot their login info, I followed the generic “Forgot your password” flow of other apps and have users input in their email address to reset their password.
Setting up screen time preferences + Request/Confirm a friend (Amber)
For the first friend and time preferences screens, I wanted to design an intuitive layout that clearly conveys potential user actions at each stage. While designing the “Add a Friend” screen, my goal was to emphasize simplicity to expedite the onboarding process. Only information critical to our MVP was asked to add a friend. For the “Daily Limits” screens, a simple display that shows all information without needing a scroll was employed. A nudge to instruct users on how to navigate the screen was also included into the design.
Change friend (Alex)
In the event that our user hopes to change their accountability friend, they can change the assigned friend utilizing this screen here and it should link to the request/confirm friend screen.
Home Screen (Alex)
This screen should compose of multiple components including the status on your friend’s request if you’ve sent an extension request as well as your overall Tiktok chart breakdown. And it should display whether or not you’ve run out of Tiktok screen limit.
Respond to a friend request (Yubin)
For my screens, my goal was to depict the two potential responses from an extension request. Both stem from the user action of opening TikTok after their time limit has been reached. In both cases, a text message request is sent to a friend such that users can appoint friends even if they don’t have the app. If a request is denied, a user can communicate further with their friend over text or navigate to a separate app. If a request is accepted, users are automatically redirected to TikTok.
Extending screen time (Julia)
I explored 2 ideas for the requesting extension part of our app. Both ideas aimed to add more of a social aspect and dynamism to the user requesting more TikTok time from their friend. Idea 1 shows a video of their friend saying something related to their screentime and requires the user to watch that before asking to extend their time. Similarly, idea 2 shows a montage of images of their friend looking disappointed before asking the user if they want to request more time from their friend. We decided not to move forward with this idea in our MVP product because it adds complexity to the onboarding process of a user because they need to add pictures of their friend. We may add this into our final clickable prototype.
As a team, we discussed the benefits and drawbacks of each screen to make necessary modifications.
