Mockingbird Wireflows & Sketchy Screens

Check out the workflows on figma here

Wireflow 1: Signing Up

This wireflow primarily captures the initial onboarding (signing up) process that will be the first thing the users encounter. Since all of our personas are young post grads who are both familiar with technology and are weary of having too many different accounts/passwords, it’s important for us to give them options to avoid doing so. The option to use Google or AppleID to sign up gives them a quick and easy option so that they don’t have to remember an extra password and username combination. 

More important, however, is our inclusion of the option to continue to the app without signing up. The most important features of our app will still be accessible without an account–the user can track their friendships manually and have plants continue to passively represent their interactions. This will help some of our personas, such as Anxious Allie, rest easy because she knows her data isn’t being collected. However, the option to sign up and connect contacts helps people like Busy Bea because they won’t have to take the time to manually log interactions.

Wireflow 2: Adding a Plant

This wireflow illustrates the process of adding a new plant, which symbolizes a friendship in the app. The user is guided through different steps, starting with importing contacts or manually entering a unique name. This ensures that each friendship is distinct and identifiable within the app. A key feature of this flow is the ability to select a plant type based on the desired level of contact with a friend. Low-contact friendships are represented by cacti, medium-contact by herbs, and high-contact by flowers. This visual metaphor helps users intuitively categorize their relationships while reinforcing the app’s theme of maintaining connections.

Additionally, the inclusion of a pot selection step adds an extra layer of personalization, making each plant feel unique to the user. Once confirmed, the plant is added to the collection, where users can track their interactions and be reminded to reach out when needed. This structure makes the process both engaging and meaningful, helping users nurture their relationships in a way that feels natural and rewarding.

Sketchy Screen 1: Adding a Plant

Original sketchy screens by Emma

Critiques:

  • A little unclear what the plant at the center top of the first screen is
  • Generally would prefer a more environmental/garden feel (see Full Plant Overview) and to add from there
  • “Frequency” is unclear
    • Does the user type in natural language? Dropdown menu?
    • What does “frequency” actually apply to?
    • Maybe we want the user to be able to specify frequencies for calling, texting, and seeing each other in person
  • Plant options should have frequency imbedded in them (with option for further customization)
  • Would be nice to see plants a little bigger
  • Plant should be bigger and easier to see
    • Maybe add further customization with choosing a pot. 
  • Can make the “add to widget” option more immersive by showing the widget
  • Could try to keep some more language in theme (eg, “Plant!” Instead of “Add”)

Edited version:

Justification: The edited version improves clarity by making plant options larger and incorporating frequency selection within them. The interface now has a more immersive garden theme, making the interaction feel more natural and engaging. Additionally, the wording aligns better with the overall theme (e.g., using “Plant!” instead of “Add”).

Sketchy Screen 2: Full Plant Overview

Original sketchy screens by Houston

Critiques:

  • On the first and second screen, maybe we could try a similar display where the shelves/ garden are centered and not cut off by the screen
  • Unclear the purpose of the shovel icon, maybe keep the shovel and label it with a word under “remove” or something
  • Too many details on screen 3, taking away from the goal of displaying the plants (with the window)
  • I like the “hi/ welcome back” feature
  • On the fourth screen, not clear what the circled  numbers are representing/ if it is a button or not
  • On the 5th screen, I think the (4/6)  should be displayed differently and not next to the persons name as it may be confusing to users

Edited version:

Justification: The changes enhance visual organization by centering the shelves/garden for a more balanced display. Labels were added to ambiguous icons (e.g., the shovel) to improve usability. The updated version simplifies the interface, removing excessive details that distracted from the main goal of showcasing the plants.

Sketchy Screen 3: Single Plant Care

Original sketchy screens by Nils

Critiques:

  • The alert is distracting on the first screen
  • The most common buttons on the first screen are further from the bottom of the screen (inconvenient for users)
  • Second screen, unsure what the buttons do
  • Third screen, missing name. Also, “goal” looks like “good”
  • On the fourth screen, ways to input interactions is not obvious
  • Fourth screen, could reduce friction by adding a button for the user to do the desired goal (in this case, calling)
  • The friend’s  picture is a nice touch – it might be nice to have that on other screens as well
  • Fifth screen: confusing to see plant pot with level indicators like a thermometer
  • All screens: unclear how to get out of this view

Edited version:

Justification: The revised version improves usability by repositioning common buttons closer to the bottom for easier access. It also reduces ambiguity by clearly labeling buttons and including a friend’s picture across multiple screens for consistency. The interaction flow was refined by adding a button to quickly initiate the desired action (e.g., calling a friend), reducing user friction.

Sketchy Screen 4: Adding a Widget

Original sketchy screens by Alison

Critiques:

  • It would be nice to be able to see different widget sizes and what they may look like
  • What happens when a user taps the widget? Does it open a specific plant’s view or are there quick actions?
  • It could be cool to create groups of plants to display if there are bigger widgets
    • There could be automatic groups with people you log the most interaction with
  • There is no easy way to tell a plant’s health based on the screens

Edited version:

Justification: The update introduces different widget sizes and clarifies their functionality, ensuring users understand what happens when they tap a widget. It also incorporates the ability to group plants dynamically, making the widget more informative and relevant to user interactions. The revised version offers better visual cues to indicate plant health.

Avatar

About the author