Haus Capstone | Nachun

HAUS

Project Duration: Aug. 2022- Apr. 2023

HAUS was a group capstone project conducted at the University of Michigan-Dearborn to complete my master's program in Human-Centered Design and Engineering with a concentration in UX Design.

HAUS is an app designed to improve household management through increased communication regarding household responsibilities, proper management tools for not just yourself but your other household members, and a quick and easy way to manage personal and group finances for any and all expenses. This page dives deeper into the process of making this app, from conceptualization to final product.

The Problem

While brainstorming ideas for what to do our capstone project on, my team and I tried to remember some of the struggles we have experienced in life, and one of my teammats suggested an app or service that could help people manage their chores, pay their bills, and other household management services. We explored this idea by asking a few people for a potential interview and quickly found that many other people struggle to manage their homes properly, especially college students who were not really friends with the roommates yet or barely knew them.

User Research

We used many different user research strategies to identify our target audience and their pain points which really helped to structure the rest of the project going forward.

Literature Review and Benchmarking

The first thing we did while recruiting potential participants for interviews was look at relevant journal articles, census data, and other household management apps in the iOS app store.

Our intial findings with our literature review was that there is a trending increase in non-family households as the years go on, more time being spent inside as a result of COVID-19 and many jobs being moved to a work-from-home model, and about 1/3rd of all food purchased going to waste as a result of poor planning and communication among household members.

For benchmarking, we explored 5 different apps, Our Home, Reminders, Unfilth Your Habitat, Tody, and Home Routines. Although each app had different features or services, the two problems we realized with these existing apps is that they are all incredibly outdated with some being last updated as late as 2015, and that users currently have to use a whole suite of apps to accomplish the tasks we wanted HAUS to be able to accomplish.

Interviews

We reached out to a variety of people to try and get the best understanding of the roommate/housemate experience in a 1 on 1 interview via Zoom. Our questions mostly focused on experiences with household manangement (chores, bills, food waste, communication methods, etc.), and then asked for more specific experiences on what makes living with someone else either a really great or really negative experience. We had 11 total individuals and one focus group consisting of four people. Initially, we expected to find some differences between users if they lived in different house types (for example, a house would need yard work as a chore while an apartment would not), but after conducting the interviews, we quickly realized that roommates, familes, and couples were better category definers than the house type. Below is a screenshot of our questions as well as some of the breakdowns for types of users in our initial interviews.

Affinity Mapping

All interviews were recorded and played back to gather further insight and anything else we might have missed during the interview. After going over the interviews and reviewing our notes, we created three affinity maps for each of our three users. The affinity map is another way to visualize all of our data from our participants and see where there are underlying similarities in terms of experience, pain points, and any other fitting category in the context of the project. Although each affinity map differed slightly, we aimed to group statements from our interviews in 5 general categories: group characteristics, chores, challenges, food waste, and finances. Some affinity maps had a few other specific categories, but we mainly dividied all of the content into those five sections as shown below. We used these affinity maps to create our final user personas. Here is an example of our roommate affinity map:

User Personas

Using the data we collected from our affinity maps, we aimed to create three personas for our three different user types. These personas helped us highlight the motivations and pain points behind these users, and we often referred back to them during the design stage to help us stay on track of what are the core issues of each group were. Here are the three personas we created:

Ideation

After highlighting the pain points for our various users, we found five major areas we wanted to focus our ideation on: general app design and aesthetics, communication, billing, food waste, and duty distribution. We started our ideation process on an online prototyping tool called Miro, and put five large post-it notes with these five categories. My teammates and I each took one category and ideated for 5-10 minutes to generate as many ideas as we could for that one topic, and then rotated until each person had brainstormed for each topic. We focused on quantity over quality for this first round of brainstorming, including some very outlandish and impossible ideas! Those ideas help us think about the pain points in different ways.

Idea Filtering

After generating our ideas, we created our own idea filtering system using some of the stickers on Miro. Each member of the group read each idea and put a heart sticker if we thought we should develop the idea further for one our of deliverables of this stage, the Idea Book. Each idea that got two hearts or more (with a few exceptions) moved on to a second round of filtering. These heart stickers are shown on the image above.

In our second round of idea filtering, we developed another rating system using some of the different stickers. After writing out all of the ideas that made it passed the first round, we assigned a point value to five differnt stickers. Each group member rated the ideas in each section on a scale of 1-5, and the ideas that got a score of 12 or higher move on to the final ideas we wanted to implement into our app.

These are some screenshots of our finalized list of ideas along with their individual and total scores.

Idea Book

The Idea Book was one of the deliverables required for this course. It is essentially a collection of our fleshed out ideas that made it to through the final round of idea filtering. Each idea explains the name, its description, and a potential example use case as shown below. The rating of each idea was also taken directly from our diagram above for idea filtering, as shown in the top right hand corner of each page in the idea book.

Information Architecture

After finalizing the list of features and ideas we wanted to implement into our app, we created an information architecture to help shape our future wireframes. The information architecture shows the overall navigation of the app from page to page, and it was created in Miro. Each section is color coded for our major categories, and a larger, zoomable version of the image is availble here.

Wireframing

We began developing some wireframes to help visualize our information architecture. They were quickly done in Adobe XD and mainly focused on creating the home page of every category as well as one or two other small functions that section could do. Below are examples of our chats and chores wireframes. We expanded on our wireframes to create our first minimum viable product (MVP) in our prototyping stage coming up!

Protoyping

Moving into our prototyping stage, we used our wireframes and information architecture to create our first MVP in Figma. We each began prototyping two sections per team member, but I was responsible for the final designs and overall vision of the app. It was at this stage that we chose the final font, color palette, and logo of our app as shown below. We chose this logo because we liked that the left leg in the H doubled as the chimney of a standard house!

Prototype 1 MVP

Below is a video walking through our first prototype. We prototyped what we considered to be one or two of the core functions for each section in order to conduct our first usability test. Our final five categories included a Chats sections that housed all of the messaging, a Chores section that housed all of the duty distribution tools, a Calendar section for all of the various scheduling tools necessary for great communication between household members, the food section which has the shared grocery list and digital fridge to help stop food waste, and a finance section for all bills and personal finances that users wanted to keep track of.

Usability Test 1

After creating our MVP we developed a few tasks in order to test our first prototype in a usability test. Participants were asked to perform 1-2 tasks per section in a zoom call with all three of us present. Each interview had someone leading the usability test, a "think-aloud" note taker, and a "click counter". We asked each of our participants to do the "think-aloud" method where the participants explain their decisions and thoughts as they move through the tasks. Errors were our success metric, in that we predetermined an ideal number of clicks it would take to complete each task, and we counted the number of clicks it took for each of our participants to do each task to compare the numbers. The tasks are listed below:

Tasks:

Chats Section:
1. Cristine sent you a message. Go see what she has to say and respond accordingly!
2. Tamara Messaged you and is a bit upset. Help resolve this issue by scheduling a time to talk
Food Section:
1. Go to your digital Fridge and add cheese to your grocery list
2. Go into the group grocery list and add Cheesecake to share with your roommates
Chores Section:
1. Add “Take out the trash” from the unassigned list to my list
2. Add a new chore titled “Water the Garden”, with description and time, assigned to Cristine.
Calendar Section:
1. In the task section, filter for school tasks
2. Add a guest coming over, Joshua
3. Joshua would come over to study on January 28, 2023, with the extra note of: “please don’t be loud”
Finance Section:
1. Schedule a payment for April 28, 2023 with a reminder in your calendar, for $850.00, with a memo message that the payment is for rent, coming out of your

We had 5 total participants for this first usability test with the average age being 37, most common house type being "house", most common relation to household members being "family", and average people in the home at 3 people.

Usability Test 1 Results

Our first usability test was successful in a few ways, namely the Finance task and the Chores task having very little error and the feedback we received reflected that. In terms of where our first usability test fell short, we realized the tasks were either too straightforward or had too much guidance. People also did not understand the concept of the "digital fridge" with the way it was designed in this iteration. The common phone gesture of "swiping" is also not very intuitive on a computer using a keyboard and mouse. This led to many of our participants having trouble trying to filter between tasks. We also missed many areas where affordances should have been placed to show participants where or what to click. Finally, our users had trouble sticking to the think-aloud method which we thought was due to the way we briefly explained it before the testing period. We looked to improve all of these areas in the second round of usability testing, which we conducted one week after finishing the first test to make our necessary changes.

Prototype Iterations

After gathering the feedback from our first usability test, we made various changes to fix the issues that arose in the various tasks as well as adding functionality to the rest of the app. Each of the buttons led to fully fleshed out pathways and the app and its interactions were fully functional after these iterations. We used this fully developed prototype for our second usability test and kept the same tasks as the first usability test while adding a few more tasks in the food and finance sections. Because we realized our old tasks were too straightforward, we asked users to find things the app already said, rather than telling our users to "do" something in one of the various sections. The new tasks are as listed below:

Additional Tasks:

Food Section:
1. Find out how many ounces of feta cheese you need to make your lunch.
2. How many extra ingredients do you need to cook beef stew?

Finance Section
1. Add a split payment for movies on 3/29 with Devin & Christine
2. Identify how much you have saved toward your goal of owning a Playstation 5
3. Request 27.50 from Tamara and Christine to obtain reimbursement on the electricity bill

In addition to adding more tasks, we changed the user testing procedure by introducing a new way to explain the think-aloud method that involved having participants do the think aloud method while solving a complex multiplacation problem before doing the tasks and we reminded users to think about the gestures you could make on a phone while going through the tasks. We also made a few changes to the UI, namely changing the digital fridge to look more like the mental model of a refrigerator, aesthetic changes to buttons, and the added functionality and necessary buttons for the new features. Much of the designs in this iteration made it to the final round iteration of the app, which will be shown a little later.

Usability Test 2 Results

For our second round of usability testing, we followed the same procedure as the first, except for the changes I mentioned above and the added tasks. Almost all of our changes led to significant improvements in the usability of our app, and the following section will break down the changes and the corresponding improvements in click scores.

Chats Tasks:

1. Responding to Christine

- Main problem: action buttons were same color as messages, causing confusion between what is a button and what is a message.

- Change: Changed color scheme and added a logo to the button to make it more distinct from messages after user 5.

- Results: besides one outlier, most of the participants in the second round of testing found it much easier to go through the conversation with the clearly distinguished buttons compared to messages.

Changed button color after this person

2. Conflict Facilitator with Tamara

- Main problem: Glitch discovered in what page would show after clicking certain buttons in this task.

- Change: Fixed the glitch and removed some distracting elements on the UI.

- Results: After the glitch was fixed after user 3, we redefined the ideal clicks total and almost every participant after got the ideal number of clicks for this task.

Fixed glitch after this person

Food Tasks:

1. Add item to digital fridge.

- Main problem: People did not know what a digital fridge was or what it was supposed to be used for, many people thought it was a grocery list.

- Change: Changed the fridge layout to be more consistent with the mental models of refrigerators.

- Results: Besdies one outlier, we had almost every user find the change welcoming and helped users see that it was a current display of what was in their refrigerator.

changed fridge layout after this user

2. Add cheesecake to the group grocery list.

- Main problem: Many people had trouble distinguishing between the group and personal grocery lists, resulting in people constantly clicking around.

- Change: We changed some of the contents in the respective lists to make it easier to tell what was personal or a group list, and we also added the ability to add an item to both lists or just one in the menu to add an item.

- Results: Although we made changes to highlight more of the differences between the list, many users attributed their errors to being unfamiliar with the initial system because they had never used anything like it, but claimed it was very easy and understandable after the first time. We did not see very drastic improvement after our first round of changes, but we did get many comments from participants about their user error as mentioned before.

Made lists more distinguishable

after this user

3. How much feta is needed for today's lunch?

- Main problem: This was one of the newer tasks so there are no first group comparisons, but the feedback we got from this section was very positive, with little errors from the ideal click path besides one outlier.

- Change: We added an extra arrow icon to improve visitbility of one of the buttons in the app to help show users that clicking the area with the icon will take them to another page after seeingthat an arrow would really help direct attention to the button they were supposed to click in the first user trial

- Results: After the first user we saw that almost all partiicpants were on line with the ideal clicks besides the outlier.

added extra afforance after this

user

4. How many extra ingredients are needed to cook beef stew?

- Main problem: This was another one of the newer tasks, and the main problem we found with this is that users had trouble finding where the recipe generation section was at first because they did not know you had to click the name of the "MyMeals" section to continue.

- Change: After the first click, we changed the button area to being the entire "MyMeals" section instead of having users click on the name, which was more intuitive and natural for participants.

- Results: After the first two users, we made the change and saw that all partcipants after visibly benefited from the change.

Changed clickable area size after this user

Finance Tasks:

1. Schedule a Payment

- Main problem: People did not find really any pain points with this task, and all additional clicks were due to participants clicking other optional settings, except for our outlier in User 7.

- Change: We discovered a rare glitch after our 11th user, and made the necessary changes so that it would not happen again.

- Results: Received positively across both usability tests.

2. Add a split payment with roommates

- Main problem: Minimal issues with this task, most of the issues were from participants accidentaly adding the wrong roommates to the split or other similar errors.

- Change: We made a few minimal aesthetic changes after both rounds of usability testing.

- Results: We received positive feedback for the initial design, but did not get any feedback on the slight aesthetic improvements.

3. Identify how much you have saved towards a goal.

- Main problem: There were no issues with this section besides our one outlier in user 7.

- Change: We made no changes as the feedback we received was all positive and people thought it was the simplest task of the bunch.

- Results: N/A

4. Split a bill with your roommates.

- Main problem: The biggest problem was that sending and requesting money and the "split" feature were seen as the same thing to most users. People clicked on send and request before clicking split as they assumed you could either split a bill from the send and request window or just send money to the other roommate directly rather than logging it in the "split" section.

- Change: We made it so that users can access the split function from the send and request window as well as the other way around. This allows us to keep both functions distinct but does not punish our users for maybe clicking the wrong initial button.

- Results: Because this was a second round task, we did not get a chance to test the new design with users, but we believe increasing accessibility of the split function by placing it in the send and request windows will help smoothen potential user errors.

Calendar Tasks:

1. Filter for School Tasks.

- Main problem: Participants accessed our prototype through their computer, making some typical gestures used on a phone such as swiping, pinching, etc., very unnatural. Users did not intuitively think to click and drag their mouse to emulate a swipe on a phone as their first thoughts are how they would navigate the app using a keyboard and mouse.

- Change: We changed the wording from "filter" to "swipe" after some intial feedback and also added two arrows on both sides signaling to the user that it can filter in both directions. In addition, during the second round of user testing, we reminded participants to try and think about using the prototype as a phone and not a website, and to keep in mind you can emulate gestures you would typically make on a phone, with their mouse.

- Results: After the changes, many users still had trouble figuring it out on their first try but many users stated that now that they know how it works, it would be very easy to filter for tasks that way. Because we did not get a reliable test with a participant using the prototype on their phone, it is hard to say whether or not the current affordances are very effective as shown by the results, however, it seems like this function works well when users are familiar with it, suggesting that it could just be a result of an unlearned behavior in an app similar to ours.

Changed wording to "swipe" after this user

Reminded users about phone gestures after this user

2. Add details about a guest coming over.

- Main problem: Some people were confused about the difference between a guest coming over and a personal event, as the options were close together and some users thought bringing a friend over would be more personal than public. The button to add a calendar event was also quite small and lacked any visibility or attention.

- Change: We removed the "search" icon to make the "add event" button larger, as we found little use in a search function for a calendar after the first usability test.

- Results: After the changes, many users saw the "add event" button much clearer and had less errors for the most part than the first usability test participants. Users had stated that the process of filling in the details was very straightforward and had little room for error.

Made "add event" icon bigger after this user

Chores Tasks:

1. Take an unassigned chore and add it to your chores list.

- Main problem: During the first usability test, we discovered an error in the prototype that required users to confirm their selection twice, causing a lof of confusion in our first two participants.

- Change: We changed this double confirmation after the second user and made the prototype properly function.

- Results: After the changes, most users found the task pretty straightforward, with one main outlier that was due to them misunderstanding the task and going to the wrong section initially. We lowered the ideal clicks by 1 after user 2 as a result of our change.

Removed double confirm after this user

2. Add a chore and assign it to another household member.

- Main problem: Users sometimes missed the "+" button in the bottom right hand corner to add a new chore. We also found a glitch where users could only add a chore within a submenu of other chores.

- Change: We improved the visibility of the button by adding a green stroke around it and making the button overall larger.

- Results: After the changes, most users were able to clearly locate the button and follow through with adding and assigning a chore.

Made "+" button bigger after this user

Final Designs

This is our Chat's interface final design, featuring a walkthrough of a conversation as well as displaying the conflict resolution system.

*mostly designed by myself*

The food interface features the digital fridge, recipe home, and group grocery list.

*mostly designed by teammates*

You can see the chores page to the left, featuring the leaderboard, personal chores, and the group/unassigned chores list.

*mostly designed by myself*

The calendar interface features a quick view of the month as well as the tasks for today, color-coded.

*mostly designed by myself*

Finally, the finance section includes the ability to send and request money, view budgeting, schedule payments, split bills, scan receipts, and mange bills.

*designed entirely by myself*

Conclusions

I thoroughly enjoyed the process of brainstorming and creating this app. This was the first time I really was in the driver's seat for a UI/UX project, and I was able to learn a lot about not just the process of end-to-end design for an app, but also what it means to lead a team. My teammates were not very familiar with Figma or many UI/UX design principles, so teaching them along the journey really gave me that experience in not just designing the app but also building solid communication methods and leadership skills.

The hardest part of the process developing the app from scratch, as there is nothing really like what our app does in the current market, and it was difficult to find inspiration from other apps or services on what would make great designs. It was a fun challenge seeking out various analgous apps with some obvious ones like finance apps for the finance section, but also some more obscure ones like a project manager's organization software to emulate recipe organization on our recipe home.

I had the most fun actually going out and meeting potential users and not only getting their feedback but also listening to how our service could aid in so many issues for so many roommates and familes. It was very fulfilling to test our product with our original users we interviewed and am extremely grateful to my teammates and advisor for going on this journey with me in creating Haus!