Role
Digital Product Designer, UX/UI Designer
Team
Zayn Abed,Daniel Lionti
TimeFrame
July 2024 to Present
Tools
Figma, Illustrator
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 to help create some initial 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.
Keeping the current web experience in mind, I identified 3 features that were important for the reworked design.
1. A new calendar system that works for a mobile aspect ratio
2. An easy way to sort, find, and add tasks
3. Maintain the design of the current experience and improving readability and information hierarchy where necessary
The calendar is the most important part of Yudaimonia. Without a usable calendar, the whole experience falls apart. The solution I designed has two view options: an expanded view and a compact view.
An important part of Yudaimonia is being able to see large chunks of your progress. On the website, we are able to show a full year’s worth of a user’s progress because of the large amount of width there is to work with. On mobile there are issues that prevent that. There isn’t enough screen width to show a whole year’s worth of squares without making everything too tiny to see or tap. Rotating the device isn’t an option for several reasons. For one, nobody wants to do that, and even if people did, they would only be able to see one or two habits at a time. For people with many habits, they will have to scroll a lot just to get to all of them.
The goal of the expanded view is to show people as many habits as possible, a full month of squares, and in as little vertical room as possible. All without negatively impacting readability. The new design also keeps with the same visual style as the website.
The “squares” have been turned into rectangles. This gives the user a larger space to tap on when they are inputting or adjusting any of their days. The current day is highlighted, just like on the website. The user can tap the settings icon at the top left of the habit to adjust settings. There is an info button that shows the user any additional information about their habit, (streaks, tips, ext...). If a user has swiped through the months, they can tap the target button to quickly go back to the current date. And just like the website, there is a checkmark that let’s users input data for the current date.
The calendar here has been widened. On a wider display like a tablet, this is what it would look like. This also helps illustrate how a user would be able to scroll through their calendar in the final app.
When a user wants to see as many of their habits on the screen as possible, they can go into compact view by pressing the button at the top right of the screen. This view is similar to the expanded view, but it only shows 1 week at a time, and the labels are by number and not day of the week. That choice was made because without being able to see the other weeks as context, users wouldn’t know what day it is.
For users that want to quickly fill in a few tasks, compact view would work best.
The calendar here has been widened. On a wider display like a tablet, this is what it would look like. This also helps illustrate how a user would be able to scroll through their calendar in the final app.
For users that have a lot of habits, there is 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.
The options and filters at the top of the screen will stay at the top while the user goes through their habits, they will be in reach whenever the user needs those options.
In order for users to seamlessly transition 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.
In order to have a compact UI, the new design hides details about a habit, but these can be accessed through the info button on each habit.
Additionally, the menu to fill in and complete an entry is also hidden. This can be accessed by pressing the check mark or the day you want to fill in.
The first step would be to get the app developed and released. Any new features can be developed once the app is out. After that, more research and user testing can be done to further refine the app.
There are many features that are currently being developed and I can't wait to see what's next for Yudaimonia.
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 these tiny squares. The squares were impossible to tap with any accuracy and were way to small to understand. It took weeks to figure out a calendar format that we were happy with, but there is always room for more refinement.
Here is a quick showcase of the progression that went into the dashboard.
Open to talk about anything work or Dune related, just send me a message.
© Daniel Lionti 2024