1. transforming living spaces
interactive med-fi prototype

2. 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.

3. 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?

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

5. 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

6. revised interface design
change #1
before

7. revised interface design
change #1
after

8. 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

9. revised interface design
change #2
before

10. revised interface design
change #2
after

11. 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

12. revised interface design
change #3
before

13. revised interface design
change #3
after

14. 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

15. 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

16. 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.

17. revised interface design

18. 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.

19. revised interface design

20. 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.

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

22. 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

23. prototyping tools prototype overview interface design
interactive prototype

24. 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

25. 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)

26. 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

27. 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

28. prototype overview
prototype
link

29. appendix

30. Night-time view of the home screen