System Paths
Our system path describes the “happy path” of daily use. This starts with setting an alarm in the evening, waking up to the alarm, browsing apps on your phone, and then getting up with the second alarm. After getting up, our user peruses the social features and cheers on friends.
In our system path, we also started to include a few dotted lines for ways the user could deviate from this happy path and how our app might correct this deviation.
Due to this System Path, it’s clear that we need to wireframe how users set their alarms and interact with social features.
Bubble Maps
We started by individually drawing our bubble maps and comparing our different groupings, bubbles, and approaches.
Our final diagram synthesizes the previous versions under three headings: Persona Features, Social Features, and Privacy & Legal. Items under disparate headings are connected via “bridges” drawn in yellow on the diagram.
Given this diagram, we choose to wireframe flows in the Personal and Social headings. Pages under the Privacy & Legal headings are not unique to this application, hence there is less of a need to wireframe these.
Wireflows
Turning off alarms flow (Ellie)
The turning off flow is the entry point to using the app at the start of the morning routine. The first alarm goes off, which triggers a widget counting down the time until the second alarm and app list notification. After the second alarm, the user presses a button to confirm they are up to turn off the alarm, after which they are congratulated for getting up. Following this celebration, there is a notification for the streak length and ability to share (for milestones) or go to the streak page. The user thus keeps their streak (adds one day) if they get up in time, which is determined based on their second alarm.
Setting Alarms/Apps Flow (Julie)
Below is our wireflow for setting alarms. In this flow, users can set different alarms for different days, set pairs of alarms for many days, and create a list of morning apps. As a good to have, we will also allow users to choose their ringtone. Lastly, our app will notify users of upcoming alarms to support running adjustments. You can view the original wireframe here.
Social Features (Sonya)
This series of mockups highlights some of the key social features of our product. The first pane shows the leaderboard, along with the user’s position in it.
Whilst viewing the leaderboard, the user has the option to click on any name and see a mini-profile. This is where the user can send virtual “Cheers” to the selected friend in order to motivate them in keeping their streak. From here, there is a jumping off point to the main profile, where the user can dive deeper and also remove the user as a friend, if desired.
Going back to the main screen, the user can click on the icon in the right-hand corner to view and respond to friend requests. Below these requests is the button which starts the “find friends flow”. This requires access to the user’s contacts. Once granted, the user can see a list of friends who are already using the app. They can also send invites with a single click to users who are not yet using the app.
Cohesive Wireflow
Connecting the flows was relatively straightforward, as the turning off alarms flow connects to both of the other flows, even though setting alarms would be the first step in the process (from the night before). Turning off the alarms in the morning flows smoothly into the social aspects of the app after the user gets up. See the file here!
