Solution

All the user research, interviews, and mid-fidelity prototypes had been completed by the CEO of Konnect and a product strategist before I joined the project. I was asked to improve the visual design of the current prototypes and prepare it for development.

Although I was asked mostly to look at the visual design, visual design is deeply interconnected with interaction design and product strategy, and I ended up making many interaction, navigational, and high-level product changes that would make the app easier to use for its main user groups.

‍

‍

Events - Calendar and List View

The events page is one of the most important pages in the app. It allows users to stay on top of their child's schedule and their own schedule. Oftentimes missed appointments lead to an extended foster care stay, and having an up-to-date schedule would make a huge difference in this outcome.

‍

I made improvements to the UI that made it a lot easier to scan this page and view what events are coming up. Here are some major changes that were discussed during design reviews:

• Removal of the "attending status" legend: A legend or key for different types of indicators is a sign that the indicator itself is confusing. Legends can often be replaced by better UI, so I opted to remove the multi-colored dots from the calendar and include the attending status in text on the event itself, since there's no need to see it on the calendar view.
• Including event updates and notifications: This was a high-level change that I introduced. After hearing from the social worker about the impact of missing an event, I knew there needed to be a way to see when events have changed or there is a new event invite, directly in the context of where events are.

‍

‍

Messaging

Within the Konnect app, there are two types of messages: individual/group messages and event messages. Group messages are regular group messages between 2 or more individuals. Event messages are centered around an event, and allow event members to communicate so their messages don't get lost in a group chat when there's an important event coming up.

‍

My improvements:

• All/Events/Groups Toggle: I asked the product strategist and Konnect CEO what problems came up during user testing before I joined the team, and they said that some parents said they were confused by the difference between event messages and group messages. I added a segmented control at the top to indicate that the user is seeing different types of messages.
• Message UI: The previous version was mostly text, which made it hard to distinguish between messages. I utilized whitespace, icons, and profile images to clearly indicate the different types of messages.

‍

‍

Resources

Konnect is more than just a time management and messaging app. It also includes valuable resources for foster and biological parents, including important documents, crisis management resources, and useful websites.

‍

My improvements:

• List layout for resource categories: I changed the layout of the resources screen work better with different screen sizes. The list layout is also more flexible in case more categories are added in the future. It allows for a description, which is helpful to biological and foster parents who might not know what the resource categories mean.
• Resource category page UI: I made it easier to filter between different category types with a single tap on the category type (e.g. Articles, Websites), rather than having a filter button and modal to manage filtering. I also added more whitespace and visual indicators to make the resources easier to scan.