transforming living spaces interactive med-fi prototype

In a shared living space, it is difficult to be aware of expectations (both explicit and implicit) and to keep people accountable for following them. In a shared living space, it is difficult to be aware of expectations (both explicit and implicit) and to keep people accountable for following them.

What if we had a way to 1) explicitly list all our expectations and 2) use this list as a maintenance tool to remind us of our agreed-upon obligations? What if we had a way to 1) explicitly list all our expectations and 2) use this list as a maintenance tool to remind us of our agreed-upon obligations?

collaboratively coexist value proposition collaboratively coexist Introducing coList. Collaboratively coexist with coList.

tasks Our users can user tasks list everything they expect their roommates and themselves to do to upkeep an enjoyable shared living space. merge their expectations with those of their roommates. maintain their shared expectations. simple complex

revised interface design change #1 before

revised interface design change #1 after

design change #1 revised interface design In response to feedback about the somewhat sterile look of our previous iteration, we changed our overall aesthetic to provide a friendlier, warmer, and more collaborative atmosphere by introducing user avatars and a digital house. This digital house, which will be more dynamic and interactive in further iterations, is the visual focal point of our app and allows the user to feel “at home” and a part of a shared household community even on the go. #1 why

revised interface design change #2 before

revised interface design change #2 after

design change #2 revised interface design We found that users were confused when interacting with the card UI/UX used in reviewing housemates’ expectations (now called “tasks” in-app), not knowing whether to swipe or tap. We decided to get rid of the cards altogether, opting for a simpler, easily editable interface and in-app notification system to alert users of newly proposed tasks (above). #2 why

revised interface design change #3 before

revised interface design change #3 after

design change #3 revised interface design One of the hardest parts of redesigning was getting the personal and house data right, because not only was it a huge part of our third task of accountability and tracking but also a major source of interest in our usability testing. In the graph shown, the user can see her personal completion rate compared to the collective house’s (in the previous design, it was compared to individual housemates), decreasing aggression while still encouraging follow-through. #3 why

design change #3 revised interface design There is also a more “human” factor to the profile; before, the graphs commanded more attention, while now, the user avatar is center-stage, further connecting the person (and responsibility) with the data. Information about the user (“I’m a lighter sleeper…”) has been added to encourage dialogue about preferences. Finally, users can more easily edit their information, such as their status (available, busy, sleeping), also visible on the home page as their avatars walk around, to lightly communicate availability to their housemates. #3 why

med-fi flow TASK. Our user can revised interface design list everything they expect their roommates and themselves to do to upkeep an enjoyable shared living space. merge their expectations with those of their roommates. maintain their shared expectations.

revised interface design

med-fi flow TASK. Our user can revised interface design list everything they expect their roommates and themselves to do to upkeep an enjoyable shared living space. merge their expectations with those of their roommates. maintain their shared expectations.

revised interface design

med-fi flow TASK. Our user can revised interface design list everything they expect their roommates and themselves to do to upkeep an enjoyable shared living space. merge their expectations with those of their roommates. maintain their shared expectations.

revised interface design Keeping users accountable and invested by personal and house data

revised interface design swipe down swipe up Reminding users of their (shared) tasks and letting them check which ones they’ve completed or still need to do

prototyping tools prototype overview interface design interactive prototype

prototyping tools prototype overview Easy: Figma’s styling system makes reusing and referencing components easy and efficient; it is great being able to have multiple people working on the design document at the same time Hard: Figma doesn’t integrate with prototyping tools as well as Sketch does, so we had to use images rather than native layers; Figma can be slow, as it works in the browser

prototyping tools prototype overview Easy: Justinmind is easy to pick up and has more advanced features than Marvel or Invision, rivalling Framer without needing to code Hard: Even small interactions can mean multiple screens/changes to make; it was a headache integrating Justinmind with Figma, and then after that, it was a headache figuring out how to export and host Justinmind (in comparison, exporting on Marvel/Invision/Framer is easy, with ready embedding options)

trade offs prototype overview After coming up with all the features of our app, we had to make tough calls about what to prioritize for this med-fi prototype in regard to time and feasibility of our prototyping tools: we ended up leaving out some screens (such as onboarding) showing only one perspective/flow to keep the prototype easy-to-follow, and putting aside (for now) some of our more ambitious ideas, such as showing our 3D-rendered characters move and being able to rotate the house

trade offs prototype overview Content: we prepared ready-made content to put into the input boxes; these appear after click events Flow: there are only four meaningful flows you can go through in this prototype (the flows displayed above) Onboarding: the user in our flows has already been using the app for a while - we jump straight in to better showcase the app’s main features Hard-coded/ assumed features

prototype overview prototype link https://bit.ly/2QfmFam

appendix

Night-time view of the home screen