Wireflows:
First, we focused on our log in/sign up flow. Our solution is meant to help users stay connected with family and friends who are not physically present. Thus, (at least for our MVP) we require that users select certain contacts they wish to have represented as fish (our passive nudge system). For users like Corporate Cole (one of our main personas who is a new grad busy with work), we enable automatic contact synching so that the user does not have to manually input contact names, phone numbers, etc. To enable busy users like Corporate Cole and On-Campus Gavin to reach out directly to contacts from our app, we request 3rd party permissions to apps like iMessage, FaceTime, etc.
Our next flow is our app’s main feature: adding and managing “fish bowls.” As a high level overview, fish bowls are where users can add and organize contacts (i.e. fish) they wish to stay in touch with. For example, as a new grad, I could create a fish bowl called “College Dorm” that contains the contacts (i.e. fish) that I want to stay in touch with from my old college dorm. Within the bowl, I can customize the fish that represent my contacts. This customization includes visual and aesthetic elements, but also requires that users enter frequency goals for each contact. For example, within my “College Dorm” bowl, I add 2 contacts: my former roommate and my former down-the-hall neighbor. For my roommate’s fish, for instance, I add a frequency goal of “1 call a week.” Now we can analyze the wireflow and see how it’s tailored to users like Corporate Cole and On-Campus Gavin. When making a bowl, we provide default options (like frequency settings and fish aesthetics) so the user’s don’t have to design everything from scratch. Once the user has finalized their fish customization, the user can select a bowl to feature as a widget on their home screen. This is pivotal for the passive nature of our solution — through implicit and subtle nudges we hope to help the user (like a busy Corporate Cole) passively register their distanced relationship health, versus an active, time-consuming alternative. When the user realizes they have not been living up to their frequency expectations for a certain contact, we provide easy and quick calls-to-action through the 3rd party connection to iMessage, FacetTime, etc (from the start of this flow).
Sketchy Screens:
Eli’s Orignial Screens:
Sarah’s Feedback:
- I like the carousel layout because it helps you be more intentional with one bowl rather than getting overwhelmed with several bowls (tile layout)
- I wonder if the home and profile buttons should be at the top, while the edit/add fish buttons should be at the bottom.
- Maybe you can add descriptions/health bars below the “Bestie Bowl”, which you can view if you scroll/swipe down
- Where does the home button take you? Would it make sense to swap out the home button with the settings button?
- If we did the 1 tile layout, how can you view other fishbowls? Would there be a back/home button here to see the other fishbowls?
- For the obnoxious screen
- I like that you were explicit about drew being the dead fish
- I like that you put a CTA – call to revive Drew. Making a nudge personalized and quantifiable (ex: Send a quick text to Drew!) could be something interesting to play around with in the aquarium overview
Eli’s Updated Screens:
(Eli’s justification in the image)
Drew’s Original Screens for Selecting a Bowl:
Eli’s Feedback:
- Visual version of the bowl is much more clear than the fish-by-fish view, but I think there is room for them both. The fish-by-fish view offers a more numerical nudge (fish stats, health, etc), whereas the bowl view offers a visual nudge (based on the visual health of the fish in the bowl).
- For the “selecting a bowl” screens, I prefer the visual view over the numerical view. It offers a bird’s eye view when trying to understand the general health of the entire bowl. The numerical tile approach could be better if I’m looking for an in depth breakdown the entire aquarium.
- For your “revive a fish screen,” I think the calls to action feel too much like click bait. We can lower the intensity and still achieve the desired effect of having the user reach out to revive the fish.
Drew’s New Screen:
Drew’s Justification
- Incorporated feedback to eliminate the numerical view to prevent overwhelming the user with bowl details.
- Added a small icon in the bottom right hand corner that easily allows the user to create a new bowl, and enter the new bowl flow.
- Added a small prompt at the top, instructing users on how to navigate into the bowl details screen.
- To align with universal design choices for the application, I also elected to remove the tab bar at the bottom and include a profile and settings icon at the top of the screen, though I considered removing the settings icon and nesting that functionality inside of the profile page.
Sarah’s Original Screens for Interacting with Fish Friends:
Paige’s Feedback:
- I actually like the screens that emphasize the bowl because the detail of the fish will hopefully motivate the user to reach out so we need to be able to see it (i.e. user sees sad face and reaches out)
- It could be cool to do a dynamic view of the bowl depending on which areas need attention socially
- I also like the zoomed in view of the fish when you are adding it to the bowl because we are playing into the idea that the characteristics of the fish matter
- We should maybe explore more ways to make the fish in the bowl emphasized and clickable. In this layout it might be hard to do that
- We made a feed button that calls the fish, which could be a good metaphor. We need to make a design decision about metaphor for reviving fish
- Do you select fish to add to the bowl or do you create fish as you go and add them to bowl? It was kind of unclear from the second screen
- Gravestones might be a little extreme for the real app lol
- I like that each fish description is simple and just has name, pattern, frequency.
Sarah’s New Screens:
Sarah’s Justification:
- Added exclamation marks on the second screen (overview) to encourage users to click on fish for detailed health checks and interaction tips.
- Provided variations of fish close-up designs to determine whether a more cartoonish style or a practical, tip-focused layout is preferred.
- Replaced “Feed to Revive” with “Level-up” to align better with Paige’s feedback.
- I also like the idea of dynamic view but that feature could be something that can be implemented in the prototype to zoom in where attention is most needed.
- Replaced the gravestones with health bars instead so the imagery is less intense for our users.
- Introduced idea of evolutions between fish that could easily notify the user how often they want to interact with fish.
Paige’s original screens:
Drew’s Feedback:
- Back buttons
- manual vs automatic contact population
- Could be nice to allow different access to different users/fish in a tank
- Could highlight which contacts are already on the app
- Could have some more visuals
- For the first registration screen, it could be nice to add a phone number verification step. Could also ask for more user information
- If we want to enable fish customization, we could give the user the option to do so when they select a contact to add to a tank/aquarium. This would also add some visuals to the selecting contacts screen
- On the initial registration screen, we should give users the option to login as well if they already have an account. If we wanted to go for a more social app then we could also add a step in the registration flow to customize a user’s own fish. Need to make a decision on how social we want this app to be
- Frequency of contact as well
Paige’s Updates Screens:
Paige’s Justification
- Incorporated feedback to add back arrows. Also added a progress bar to show simple registration
- Forced user to create initial fish in registration, as having a fish is necessary for using the app
- After this task, the user will need to create a tank
- The user would skip this whole task if they already have an account! In that case, they could log in just by confirming their phone number
Key Changes and Design Decisions
- Manual option during registration
- Registration
- Where do we customize their fish?
- What is our call to action? Visuals (actual visuals of the fish) or the statistics (i.e. my goal was to reach out every day but I haven’t reached out to X in 4 days!)
- Explicit actions – call to revive, etc.
- Multiple views of the fish bowl – overall health and details where fish appear in list
- No tab – just profile and settings in the corner
