Yudaimonia is a habit tracker aiming to help users create healthy habits by encouraging consistent behavior. The website lets users create habits with custom names, colors, units of measurement, and save them to their habit dashboard. My role was involved creating wireframes and layouts to help aid future app development.

My role involved creating wireframes for a proof of concept mobile version of Yudaimonia. I worked with some preliminary user testing data and research and consulted with Zayn throughout the design process. This is an ongoing project, my tasks will change to adapt to later stages of the project.

All perliminary user testers had complaints about Yudaimonia's mobile user experience. Yudaimonia was designed as a desktop application and clumsy to use when on mobile. Because Yudaimonia is still in development, and the mobile experience has not received the love that it desperately needs. There are many rough edges and design problems that the developer wanted me to look at before releasing Yudaimonia to the public.

Here's the goal: we need to implement all of Yudaimonia’s current desktop features in a mobile format that is easy to use, while also remaining visually similar to the current website.

Keeping the current web experience in mind, I identified three key items that were important for Yudaimonia Mobile:

Yudaimonia needs a calendar system that works for mobile. User testing has shown that without an easily understandable calendar, the whole experience becomes a hassle. I designed a calendar with two modes. A compact view that prioritizes showing as many habits as possible, and an expanded view that prioritizes showing habit data.

A way for users to easily sort, search for, add/remove, and customize tasks. This was done by adding habit tags and a sorting system. Customization settings were also all put into one simple menu, which removed buttons from the old design and helped free up some much needed space.

Maintain the design of the current experience and improving readability and information hierarchy where necessary. It was important that the current look and feel was maintained on mobile, while also making any necessary changes to improve readability and the overall user experience

For users that have a lot of habits, there was no easy way for them to sort through them all quickly. For the new mobile design, I added a tagging and sorting feature to help solve this problem. Whenever a user creates or edits habit, they will be able to add as many tags as they want to that habit. Near the top of the dashboard, there is a row of pills that will allow the user to quickly sort by any of the tags they have created.

This new pill systems helps make sure that user's don't need to scroll through their entire dashboard to get to a habit that might be all the way at the bottom.

In order for users to seamlessly swap between using the app and the website, it was important for the new designs to look visually similar to the current experience. Some aspects, like color scheme, font choices, and iconography, were not changed from the website. The calendar redesign is the most notable change, but effort was taken to still maintain the general design.

Several new buttons were added in order to improve the functionality of the app. Habit information and data was added to it's own menu, changing the order of habits was added to the settings menu, and several other quality of life features were added, including a button that goes to the current date/week.

Additionally, the menu to fill in and complete an entry is also hidden behind a button. This can be accessed by pressing the check mark or the day you want to fill in.

The thing that stood out most to me during this project was how challenging it can be to bring certain aspects of a website to mobile. The calendar was particularly challenging because it had many small squares that worked perfectly fine on desktop, but if they were just brought to mobile as is, the whole user experience would be negatively impacted by all the tiny squares. The squares were impossible to tap with any accuracy and were way too small to understand. It took weeks to figure out a calendar format that we were happy with, and there is always room for more refinement.