Enhancing the user experience for a lifestyle app

Collaborating with a startup in the wellness industry to transform a complex app into an intuitive and user-friendly experience

time
10 days

tools
Figma
Figjam
Google Suite
Adobe Creative Suite

problem
I recently collaborated with a startup in the wellness industry, aiming to improve the usability of their upcoming app. As the app has not yet been launched, certain details, including the company name and specific features, will be omitted.

My client has dedicated years of work to an ambitious app that will offer users a wide range of eastern wellness practices, such as yoga, meditation, and kung-fu. Throughout the development process, they have prioritised ensuring that all content and features respectfully honour the cultures that originated these practices, with the goal of delivering the best possible user experience.

However, the challenge of spending a significant amount of time creating a product is that it can lead to a tunnel vision effect, making it easy to lose sight of the user's perspective. This is precisely what happened with ZenLife (a placeholder name for the app). The founders and creators had become so deeply immersed in the app, tirelessly refining each feature and rearranging elements countless times, that they couldn't imagine a user struggling to comprehend certain aspects. Consequently, when I first accessed the beta version of ZenLife, I found myself lost, unsure of how to access its features or navigate through the app.

usability
basics

first assessment
I was initially brought in to ZenLife to assess the app and identify areas for improvement. Although I had briefly seen the app on my client's phone during our initial meeting, I had never personally interacted with it. Therefore, I decided to treat my first experience with the app as a user testing session.

During this test, I observed that the visuals and content of the app were well-executed. However, I encountered difficulties in navigating the app, found the features to be complex to comprehend, and overall, it lacked intuitiveness.

information architecture
One of the key factors influencing the usability of an app is its information architecture. This determines how content is presented, features are organised, and tasks are completed. Improving the information architecture is essential for creating a more user-friendly app.

To improve the information architecture, I began by analysing the app's sitemap.

After exploring the app and making a list of features and screens, I created a sitemap illustrating the hierarchical structure and connections. However, this initial sitemap appeared cluttered with arrows that made it difficult to understand.

To create a more structured site map, I used my user experience expertise and conducted research on industry standards. This resulted in an intuitive and well-organised site map that was easier to navigate. Specifically, I looked at several similar apps and analysed how they organise their content and features. By incorporating some of these best practices, I was able to create a more user-friendly site map for ZenLife.

I then created mid-fidelity wireframes for the primary screens of the app. These wireframes served as the basic structure that allowed for rapid design iterations while avoiding visual distractions. Additionally, this approach enhanced the reliability of the user testing process. By concentrating on refining the screens' intuitiveness and navigability within the wireframes, I ensured that my design decisions and the tester’s reactions were not influenced by the final visual design of the app.

After multiple rounds of user testing and iterative design, the following are the modifications I implemented.

redesign

homepage
The homepage serves as the dashboard of the app, allowing users to view everything at a glance. This includes a summary of their profile and quick access to important features. Users can also see an overview of their in-app calendar and receive notifications for any important updates or messages.

However, in the current design, the news section occupies the majority of the screen, while the features are presented in a thin carousel that appears secondary. This has led to confusion among testers who struggle to understand the purpose of the app.

In my redesign, I have given prominence to the important features, while presenting news and notifications in a secondary role, similarly to other apps.

news
The news section is now displayed on a separate screen, with the latest article appearing first. Users will receive a notification when a new article is published. Once an article is read, it will be displayed with reduced opacity, ensuring that users' attention is focused on unread articles.

This approach enables users to easily stay updated with important news without occupying too much space on the homepage.

wellness
While ZenLife offers a range of features, the main focus of the app should be on wellness. This topic is likely familiar to users and may be the primary reason they are drawn to the app.

To enhance the usability of the key features, it is advisable to combine what was previously separated as "Videos" and "Wellness Services" under the Wellness category. These are related topics that are presented in similar formats.

The Wellness screen should be organised as follows:

Live: This section displays current and upcoming livestreams.
Wellness Programs: This section includes programs that were previously categorised under Wellness Services. User testing has revealed that users have difficulty distinguishing between library videos and wellness programs, so it would be beneficial to include a brief explanation.
Your Library: This section showcases lessons owned by the user.
Purchase More Classes: This section provides users with a library of lessons to purchase and add to their personal library.

By structuring the Wellness screen in this way, users will have a more cohesive and intuitive experience when accessing these features.

As a minor change, the various sections within the Wellness Programs should include brief explanations. This would allow users to make informed choices based on the information provided within the app, without the need for external research that might divert their attention away from the app.

community
The community aspect of the app, despite undergoing a few minor changes, did not require extensive redesigning as it emulated other platforms that users are already familiar with.

menu/settings
What was previously labeled as the "Menu" contained items that are typically found in a settings page. Calling it "Menu" and displaying it in the navbar with a hamburger menu icon can be misleading, as users would expect to find features there.

In my redesign, I have renamed it to "Settings" and added it to the profile section. This helps to save space in the navbar, reducing crowding and allowing room for a new tab in the future with upcoming features.

Additionally, users are accustomed to finding the profile and settings paired together. In other popular apps such as Instagram, TikTok, Tumblr, and BeReal, users can find their settings through their profile. Testing has shown that users are more likely to find the settings easily when they are placed within the profile section.

In the settings page itself, the current design features a long list of items that can be difficult for users to quickly scan and navigate.

To improve this, I divided the menu into four main sections: Account Settings, Help, Privacy and Terms, and Share. Users are accustomed to settings menus being grouped in this way, and it will make it easier for them to quickly scan and find what they're looking for.

empty states

As a first-time user of the app, I noticed that some screens were completely empty. While this is understandable for a new user, we should strive to avoid leaving any page entirely blank. Blank screens can be confusing for users who may not know what should be displayed or how to change it. Therefore, it's important to provide some context and guidance, even on empty screens.

To solve this issue, I created some graphics with text that we can use for these empty states. These graphics are designed to provide a clear and concise message to the user, letting them know what's going on and how to take action. By using these graphics, we can improve the user experience and reduce confusion, making our app more user-friendly.

I must say that convincing my client that these changes were necessary was not an easy task. However, the essence of UX lies in data-backed decision-making, and after conducting user testing on both the original version and the redesigned one, my client had no choice but to acknowledge the necessity of the improvements.

This project served as a valuable lesson for both myself and my client. Many companies opt to cut costs on UX in the initial stages and choose to handle design internally. While this may appear more budget-friendly and time-efficient at first, it often leads to months of additional work for developers to implement necessary changes and ensure a user-friendly app experience for the end user.