Project Context

Families engaged in the research use the app Hornsense to understand the data that is summarized from their Fitbit bands and environmental sensors. They are given the information so they may decide on their health and living conditions with awareness. However, the app's structure is difficult to understand, and the data currently given on it lacks sufficient context.

Competitive Analysis

When we started to perform Competitor Analysis, we chose 6 competitors - 3 direct and 3 indirect. Direct competitors were those businesses that offered similar products or services to another company within the same market while indirect competitors were those that served the same customer needs as another company but offered different products or services.

User Research

We were able to gather user research insights by taking help from our user representatives, Ben, Shirene and Sarah, who spoke to the end users on our behalf, based on a questionnaire we designed.

Affinity Mapping

We used affinity mapping to condense common ideas and lines of thought based on feedback from users following our user research. We also gained a better understanding of the user's needs and our approach as a result of the process. Finally, we devised a more organized data collection strategy and a more streamlined approach to the project. The ideas were divided into seven groups, as shown below.

Content Inventory

To gather all the data together in a place, we started to put data together in the content inventory which we designed in Excel. Doing so helped us get all the data present on the existing Hornsense app together in one place and we also found out what is there on the app and how it is structured. It also helped us identify the content that was not up to date.

Card Sorting

Once we had analyzed our content, we moved forward to designing the Information Architecture for the app. To do this, we started with card sorting. This process helped us interact with our users and get their insights on the various topics in the app and how they would like to view them under different categories. We used the Maze software to carry out the task. We conducted closed card sorting with a total of 12 participants, with 23 cards to be categorized into 9 categories.

Agreement Matrix

Using this technique, our team was able to observe in the visual form how frequently people concur that a particular card belongs in each category using the agreement matrix. This table shows the most popular groups of cards for each category based on where participants placed the cards most often.

Similarity Matrix

This is a straightforward illustration of paired possibilities. This provided us with an understanding of which cards our participants frequently matched together in the same group. The more frequently two cards were paired together by your participants, the darker the purple color where the two cards overlap. This table shows the most closely related pairs of cards, which are grouped on the right edge of the table based on how often participants sorted any two cards into the same category.

Information Architecture (IA)

From the aforementioned user behavior reports, we were able to map out an information architecture for our application that would best suit user needs and provide good affordances for tasks users might try and accomplish on our application. We have two IA diagrams, the first is the IA for the old application and the second is for the application we redesigned.

Ideation

To tinker around with ideas we started formulating after completing our user research and information architecture design phases, we started the ideation process, starting with sketching for a digital product.

Sketching

We started the process with pen and paper sketching, before moving to a digital design tool like Figma or Sketch.

Prototyping

After the high-fidelity screens were ready in Figma, we thought about applying previously discussed user flows to the screens by connecting the screens together, and adding popups, overlays, modal sheets, and scrolls wherever necessary. This process would have to be repeated after carrying out user testing with this initial prototype.

User Testing

Using our initial prototype Ben and Shirene from the WCWH Team at UT Austin carried out the testing on the user’s behalf.

Insights from User Testing 1

• Modify certain terminologies to make the app appear more personalized to its users
• Rearrange the hamburger menu, move options into suitable categories based on the importance of the actions the options would enable the users to do
• Make the profile "view-only" to protect user's privacy
• Some graphs showed a combination of sleep and physical activity to emphasize on the effect one had on the other. However, testing showed that the graphs may be cumbersome for the users to read and comprehend.

Insights from User Testing 2

• Provide users with information/learn more options wherever relevant
• Notify the users with the status and show the corresponding scale to avoid causing panic to the users
• Keep the users informed of the progress or completion of a task

Design Response to Feedback

• Changed "Highlights" to "Your Data"
• "Report a Bug" was migrated from the settings section to the main menu. Users should be able to report issues as the app is still in development and the development team may fix any flaws discovered by users
• Personal information of the users are made non-editable, only address details can be modified
• Remove detailed phase-wise sleep and air quality graph and replace them with simpler, easy-to-understand graphs
• Add an "i" button wherever additional information is necessary to learn more about any metric
• Add a tag (good, fair, bad) next to relevant information to keep users informed of their environments and avoid panic
• Add a button at the bottom of the profile page upon hitting which the user is given a confirmation in case they want to update their profile.

Final Prototype and Walkthrough

You will find a clickable prototype of the product below. Have fun!

Conclusions

• We started out with a project proposal for the WCWH team and then proceeded to define our goals, assess our competitors and draw useful insights from the study. We next took steps to comprehend our users' problems before creating user personas to represent our user group. Following this, we created affinity maps and drew out the concept map for the already-existing app to comprehend the logic behind the flow and prepare the content inventory. As soon as we got a firm grasp on this, we started brainstorming ideas for the new information architecture and utilized card sorting to choose the app's labeling. During this time, we also created our new concept map.
• Following the Ideation phase, we developed our lo-fi, and hi-fi designs before putting our interactive prototype together. During this step, we brainstormed about the various visuals we could use to reflect the health data back to the users.
• We explored throughout the project to see how various information architectures would work with our design model and how the various navigational options affected the usability of the app. The entire approach has helped us understand the value of and how to build and design in a constrained environment.

Potential Improvements

• Direct interactions with end users after we clear our IRB requirements and this would help us get a better understanding of our user pain points.
• To get in-person user testing done and then incorporate their insights in our design.
• A few changes and additions in the app we would work on in the future would incorporate the children's data and their health metrics.
• To improve on the privacy controls and current data visualizations of the app.
• We would eventually be working with the development team for smooth handoffs.

Key Takeaways

• Learned how to structure information in an app environment with several constraints
• Learned Empathy Mapping and its importance
• Learned how to perform user research and user testing via a mediator
• Learned different types of information architecture which suit our project
• Importance of Primary, Secondary, and at times Tertiary navigation

Acknowledgements

We express our gratitude to the Whole Communities Whole Health team at The University of Texas at Austin for guiding us along the way and providing us with all of the necessary information as and when it was required. I would like to express my deep gratitude to Dr. Yan Zhang, my research supervisor, for their patient guidance, enthusiastic encouragement, useful critiques of this research work, advice, and assistance in keeping our progress on schedule. We also acknowledge Dr. Zhang for entrusting us with the responsibility of undertaking this project.