Julie: Turning Off Alarms, Streak/Leaderboard
One of the problems we brought up from our initial sketches was how to best display the app list that the user picked out between the two alarms while the user is browsing the phone. In the sketchy screen above, we explored a solution where:
- User wakes up to their first alarm
- User turns the alarm off with a swipe motion to indicate that they have woken up
- The app then shows user a list of app icons that the user picked out the night before
- Instead of having to navigate outside of the app to use these apps, the user can click on each icon, browse the app, close it and move on the the next icon
The sketchy screen also shows that while the user is browsing, they can view a floating list of apps that are still on their “to-dos” list. The 4th and 5th screens show how the user views their streaks and their friend’s streak. The app automatically pops up a card UI that shows the length of their streak and whether or not their current morning added to or broke the streak. Then, the user can choose to expand the card, which takes them to the app page that shows them how many streaks their friends have.
Ellie: Setting Alarms/App List
In this flow, the user can go through the process of setting their two alarms and choosing apps for their app list. I added the “recommended” apps section in the first screen on the second row based on critique from teammates. We also discussed how to best represent the two alarms, and this design (having an alarm 1 and an alarm 2 card) is what we explored for these sketchy screens, but we will likely need to explore additional formats.
I used the format of an alarm 1 and alarm 2 card to try to help address the potential for conflicting alarms, and I integrated similar design patterns such as choosing repeat days from interfaces such as Google Calendar and choosing the alarm time from Apple alarms. The app list and search also follow existing patterns of lists and search features, and the addition of the recommendation section hopefully makes it easier on users to see popular apps.
Above are additional explanations of different grid layouts and use of white space for the alarm page and app list.
Sonya: Onboarding Flow
I created the flow that users go through to get set up on our app. This includes signing up for an account, agreeing to the terms of service, and starting to set your first alarm. When this flow ends, users immediately get plopped into the alarm flow described above. In this final state, I prioritized getting only the required information from users and then sending them on their way (to enjoy the rest of our app!).
The image here is the result of several iterations. Between iterations, I got the following feedback from my teammates, which I incorporated into the design.
- Initially, I was asking way too many questions, which ballooned the number of steps in the onboarding process. We agreed that we need to make this process as fast and easy as possible and bury any additional questions in the settings pane.
- On the flip side, I got feedback that the onboarding process sucks. I should create a moment of delight in the middle of it. For this reason, I added a little success screen with a pretty graphic that congratulates the user and motivates them to keep moving forward.
- We debated whether to ask for the user’s name. Ultimately, we decided to include it because it quickly adds a sense of personalization, which makes users feel more invested in the setup experience.
