the blob life: customizing your profile
Site-mapping our way to convergence and clarity
In discussing how we might combine our individual wireflows to converge on a concept for our overall application, we created this site map to clarify the various user interactions we currently expect.
Our app’s functionality: serviceable tasks
Before divvying up tasks, we outlined the following core actions to decide how we might divide and conquer the design of our overall app:
- Onboarding (screens: sign up + add friends)
- Update your profile (screens: profile, customize blob character)
- Notifications: beep your friend + receive post-adventure notifications (screen with prompt to view progress + post about activity)
- See recommendations for outdoor activities (screens: view 3–5 generated ideas, nav bar)
Screens not covered above:
Playground view (core screen of app)
Below is the outlined flow I created for the “edit profile” task, which encompasses a few “mini-tasks” (i.e., changing your nickname, customizing your blob character, and — not really “editing your profile” but related because it’s an action within the profile view — viewing your logged outdoor activity).
For these tasks, there only really exists a happy path, so the task flow diagram is relatively straightforward. We will likely restrict the user nickname to 10 characters (hopefully the ethics of this aren’t too concerning because it’s a “nickname”), and the user is limited to choosing blob characters they’ve already unlocked. However, note that these limitations are embedded in the singular action itself and don’t result in different action options (i.e., there’s no choice but to change your nickname to something that is at most 10 characters).
Disclaimer: these screens aren’t that “sketchy” because our group ended up using my wireflow as a base for our converged application — since I’d already designed some low-fi screens for my wireflow, which I think already effectively communicate the possible screen design for this task flow, I didn’t think it would be that productive to retroactively re-sketch a version of what I had already created. :) work smarter!
Instead, on this iteration, I incorporated a bottom nav bar for the app (which will probably be extended to include a tab for the new “Recommendations” use case we’d converged upon). Then, I used these screens to show different states of the app + to better illustrate the “edit profile” task flow I focused on.
Sub-task 1: change nickname
Below, the left screen shows the playground view, where a user can see all of their friend blobs. Since I’m a hermit and haven’t left the house in days, my blob is grey and sad, wah 😢
If I want to edit my profile, I can either 1) tap on my own blob in the playground view or 2) tap on “PROFILE” in the new bottom nav bar to navigate to my profile.
In my profile (middle screen), we have the starting state, where I can see my current blob level, health status, and logged outdoor activity. If I want to change my nickname, I can tap on the ✏️ icon to do so.
Sub-task 2: customize blob character
We’ve changed our nickname, but what if we’re feelin’ a different blob today? We can change dat too.
To customize your blob character, simply tap on your blob in the profile view (left). The middle screen displays the different blob characters that a user can choose between — note that the big brain “???” blobs are those which haven’t been unlocked yet, so the user only has 3 options below.
Despite the higher-than-sketchy-fidelity of the above screens, I wanted to note that we are not particularly attached to these designs (as I recognize that is often the concern with higher-fidelity prototypes too early in the design process).
Our team is planning to join our individual task flows together this week, so I imagine some pieces of the playground screen + profile screens I’ve designed will work their way into our final prototype, but I’d really like to see what other ideas my teammates have!
Once we bring our task flows together, we will be using the style tile we created last week (you can see our branding writeup here) to revamp these lower-fidelity screens + flesh out our core flow mockups for usability testing.